Sharing what I learned today
Things to check
QA
Check modules
Config changes:
Recently, I was visiting the sites of Drupal development shops and came across ThinkShout. The home page has a number of UI elements and behaviors that are familiar but well-done:
I decided to try to create my own version of this homepage to flex my HTML, Javascript, and CSS (Sass-in particular) muscles.
I've been as superstitious as a traditional groom on his wedding day so as not to look at the ThinkShout code. That way, I have had to reverse engineer the HTML, CSS, and JavaScript underneath as if it were a black box. It's been tempting, though, especially when it comes to colors; but so far, I have kept my eyes averted.
For the sake of simplicity (and what I was working on just today), I'll discuss the top menu behavior on hover. On that menu, there's a line (which I'm calling an overline) that appears at the very top of the window (see Figure 2).
I eventually noticed that the color was slightly lighter on each subsequent menu item (from left to right), even though the text color of the menu item did not change. I little searching on the web brought me to the Sass @for.
The example from that page (below) was remarkably similar to what I wanted to:
$base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}
I played around with the color gradations until I arrived at one that looked acceptable (See Figure 3). It turned out 7% was the sweet spot for border-top-color: lighten($secondary, $i * 7%);.
$secondary: #f07c00;
ul.desktop {
a {
height: 103px;
padding-top: 45px;
box-sizing: border-box;
&:hover {
color: $secondary;
border-top-width: 5px;
border-top-style: solid;
padding-top: 40px;
}
}
li {
display: flex;
@for $i from 1 through 5 {
&:nth-child(1n+#{$i}) a:hover {
border-top-color: lighten($secondary, $i * 5%);
}
}
}
}
I find myself often wanting to comment on a LinkedIn post but self-censoring due to how it might be perceived my connections. So I'm putting them here.
For many years, I've taken notes nearly every day. Here's a nearly exhaustive list of the ways I've done so, in approximate chronological order:
There have been overlaps in many of these systems. In fact, I've been using Evernote (where I am drafting this right now) with varying regularity since 2011.
What I haven't done with any success to keep to any kind of system. I know of people who do. I have always felt it a failing that I don't, a lack of discipline or consistency: a moral failing of some kind. I still feel that way.
The problem is that technology changes. I loved Notational Velocity for its simplicity and speed. I have never found an application I liked better to quickly note something on my computer. But I'm not always at my computer.
And what if I wanted a screenshot or a table, which Evernote is particularly good for? Livescribe Sky pens were even able to automatically upload to to Evernote, making that ever-elusive promise of the best of both worlds.
What if I just wanted to take notes during a meeting where typing on a computer would either be rude or disruptive? In those cases, I've used a notebook of some kind (Livescribe, Neo smartpen, Field Notes, journal) and found a way to upload pictures of the pages to Evernote.
I suppose if there's any system that has lasted, it has been this hybrid one of writing by hand (when necessary or appropriate) and capturing an image of the notes in Evernote or typing directly into Evernote and pasting screenshots, links and other rich media.
When I had to update this Drupal 7 site, I used Evernote to track my work, any issues I ran into and any log messages I deemed worth saving.
On the inestimably valuable freeCodeCamp site, Tom Hombergs wrote a great post about what he'd wished he'd known as a junior developer. I have shared it with the junior developers that report to me and think it chock full of simple advice that is not that easy to follow: keep a block, take notes and have a system, volunteer for things you don't know (among other gems). I can attest to the value of his advice and to the difficulty in following it.
Nevertheless, system or not: take notes. You probably have a better memory than mine, but even so, your notes will help ingrain the ideas of others better, help you articulate your own thoughts better and be a trail of your own experience that will be worth revisiting.
Scanbot Jan 21, 2019 20.09.pdf
Here are my notes from the Monday class.
I am not sure about how related Java and Javascript are. I always thought it was more of a marketing decision to name it such. However, it might be more than that according to Brendan Eich. And here's an even briefer version compiled by Dr. Alex Rauschmayer.
I've been working in Drupal 8 for a number of months (actually just about a year), but we just had a Drupal Meetup in Omaha, and it inspired me to try to get some PHP under my belt. The reason is this: while I spend a lot of my time with the front-end code, there are times when I'd like to be able to look into a module to see how it works. Heck, I'd even like to be able to write a module.
When I talked to @phenaproxima, who's a maintainer of the Lightning distribution of Drupal 8, about what you need to understand to really work in Drupal 8, he mentioned object-oriented PHP. He talked about a lot of other things, too, which you can see on the Omaha Drupal Meetup recording from November 2018.
Regarding the Skoglund, though, so far, so good.
I'm on Chapter 3, Extend and Override.
It's cool to be able to set different defaults to subclass properties than are in the parent class.
Anyway, I plan to continue it over break.
Then, I want to the Symfony 3 tutorial, getting ever closer to understanding how to actually do Drupal 8 as a developer.
I think it's about having your hand directly on the rudder, feeling the power of the ship at your command. I think of Steve Jobs talking about his phone freaking excursion and how he was able to wrest control of billions of dollars of global technology through his and Steve Wozniak's ingenuity. Is that only a young man's pleasure? Don't we all wish to directly touch the world we want to help create?
Maybe that's one reason why my Mom makes so much. She, too, needs to reach her hand into the primordial goo of the world, whether it be clay or paint, and emerge with something of beauty, all the while getting her hands very dirty.
There's also having the same impact from a remove by directing people. Those skills are also valuable, but they also feel very localized. The truth is that I want to have my lines cast out into ponds more diverse and far bigger than my current company, but I feel the best way to get there is by honing my skills as a creator. In a way, even though we are salaried, our time seems that much more constrained. We are paid for the time with our peers, employees or bosses, in meetings, on calls or on email. Creators can make something that moves beyond them, that extends their reach, that reverberates past the act of creation.
As a counterpoint, so can managers. But in the case of managers, it is their direct reports who magnify their influence. They multiply the force of the manager by extending the manager’s reach, making the manager more productive even when at rest. It’s like a flywheel that the manager sets in motion.
Today I met a life coach. I am not sure what it is about me that is naturally hesitant to consider consulting a life coach, but there it is. It's like my red flags start flying full tilt like they're trying to hail a rescue ship while I'm stranded at sea. The thing is, though, that I do feel a little trapped, a little lost, a little in need of some life coaching. I am tempted to reach out to her.
She came to the class I'm teaching today. First, it was awesome. Her presentation was amazing and about design thinking. We need so much more positivity at work, and this person brought it to my class. I just loved her outlook. I feel like I need to be around positive people like that.
I am both both positive and sarcastic by nature. Basically, I believe in the inherent goodness of the world, but I also see its absurdity. I'm not sure if these are reconcilable, but that's where I think I rest.
Anyway, I might give her a shout and see what this life coaching is all about. After all, if life is a game, I want to play. Put me in, coach.
I was working through a Lynda.com tutorial, JavaScript for Web Designers by Joe Chellman:
JavaScript for Web Designers, Chap 3, Lesson 6
I was on chapter 3, lesson 6, when I started to have trouble with making a JavaScript validation task in the tutorial. There was a select list that was supposed to use an event listener to trigger an alert on submit if the select list had no value.
Instead of making an alert modal popup coming up when the submit button was clicked, however, I kept getting a pop-up right next to the select list field that said "Please select an item in the list."
Strangely, when I would try to use the web inspector to inspect the pop-up element, the element would disappear as soon as I clicked the inspect tool in the dev tools.
This pop-up did not follow the tutorial at all, so I thought that maybe some of the other JavaScript on the page was somehow causing this. I did a search for the text of the pop-up in the other js on the page: nothing. Then, I commented out the script calls to the other js: no change. The pop-up kept coming up.
Finally, I looked at the html. There it was:<select id="s-state" required>
As soon as I removed that, the js alert started working. Of course, if I had just kept watching the tutorial, it turns out that Chellman had the user add the "required" to the select list in the the index.html file. In this case, though, the beginning code probably should not have included the "required." Nevertheless, I eventually figured it out and learned something about an HTML5 tag I did not know about.
Getting RSS on a Drupal page shouldn't be hard, should it?
We had a request to get a student newsletter that is sent out through MailChimp to appear on a webpage. There was already an RSS feed to the archives, so I just need to bring the content into the site.
Here was the issue, though:
Any Googling for RSS and Drupal brought up messages about importing through Aggregator. The problem with that was that the description in the RSS for MailChimp emails had a whole HTML page in it. It was not really a typical structured feed, but a title, a date and a description with the entire newsletter, including <head> and <body> tags. How was that going to work? I sure didn't know.
The Drupal Mailchimp module was not much better, as it seems to be suited more to managing lists and publishing campaigns, rather than importing old newsletters into the Drupal side.
So then it was off to the RSS widgets which populate the web to see what I could bring in from the feed and render on the page. This was more difficult than it seemed, as any RSS widgets that came up on a Google search only returned those without SSL. Unfortunately, our site has https everywhere, so the iframe kept throwing an error by the XSS auditor.
Thankfully, I found https://feedity.com/tools.aspx. This allowed me to bring in the feed titles and dates and display them in a simple but tasteful way (instead of trying to iframe in the entire newsletter archive, which looked like a big old janky hack).
Here's the resulting page:
https://admissions.creighton.edu/contact-us/student-news-and-events
The good thing about feedity is that it had some simple configuration options that helped:
<script language="JavaScript" type="text/javascript">
<!--
// Customize the widget by editing the fields below
// All fields are required
// Your Feedity RSS feed URL
feedity_widget_feed = "https://feedity.com/yoursite/feedid.rss";
// Number of items to display in the widget
feedity_widget_numberofitems = "5";
// Show feed item description (values: yes or no)
feedity_widget_showdescription = "no";
// Show feed item published date (values: yes or no)
feedity_widget_showdate = "no";
// Widget box width (in px, pt, em, or %)
feedity_widget_width = "250px";
// Widget box background color in hex or by name (eg: #ffffff or white)
feedity_widget_backcolor = "#ffffff";
// Widget text & link color in hex or by name (eg: #000000 or black)
feedity_widget_fontcolor = "#000000";
//-->
</script>
<script language="JavaScript" type="text/javascript" src="https://feedity.com/js/widget.js"></script>
Pretty simple. I set title and date to "yes" and description (which contained an entire newsletter) to "no."
I'm not entirely sure how it works, but the call to the feed and widget.js both use https, so the connection wasn't blocked and the content came across the transom.
Voila!
