So this is nice, if as a somewhat canonical list if nothing else. JS has changed a lot over the years, and what we attribute to libraries are done largely in the browsers themselves. I can get behind that.
I’ve had more or less the same theme on this site for quite a while. I’ve tweaked it slightly over the years, and I recently launched enough changes that I’m willing to call it “new”.
First up is a change in the default font. I first found Open Sans when Mozilla switched to it as a default in Firefox for Android. It’s beautiful, and it has a great, open license. I’ve used it internally for a while, putting it at the front of the CSS font selection and installing it on all my devices.
This time, however, I’ve set it up via the WOFF version using CSS @font-face, so any device that doesn’t have it natively can now enjoy it. This was also inspired by WordPress’s use of the same font in v3.8. It’s a great choice, and everyone should see it more often. I also went with the Light version of the font, which reads well and looks even a tad more elegant.
Sidebars and Infinite Scrolling
Pinterest was, to my knowledge, the first big site to allow for such functionality, and the Infinite Scroll feature in Jetpack has a great rendition of it. It’s relatively easy to enable, though it’s harder to allow with sidebars. In responsive, mobile-friendly sites, the sidebars can easily fall below infinity, meaning their content is never to be seen.
I “fixed” this issue by removing the sidebar entirely, and putting the functions in my primary navigational menu up top instead. This currently makes for a relatively wide area for text, yet there’s more white space which allows images and other media to shine a bit brighter.
My next task was to try and sort out CSS hover menus in as few lines as possible. Here’s what I sorted out:
It’s relying on the fact that jQuery is loaded up for the other Jetpack plugins, and the fact that we’re given the rather nice CSS class
menu-item-has-children from WordPress to seek out only the hierarchical menu items. It seems to work nicely. Let me know if you have suggestions or problems with it.
Rather than include the
<script> tags at every instance, place this at the bottom of your HTML, and edit the array
asyncScripts to match the JS files you want to load. Everything is wrapped in an anonymous function, which just goes through each item in that array and loads the corresponding script. As a result, the share buttons don’t block loading the rest of the page, and each required resource is only loaded once rather than N times for each N button on the page.