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 been running WordPress for a long while, and I love that it’s a powerful open source software package. I’ve ran comments on this site for a long while, and for whatever reason the bots have managed to get better by orders of magnitude within the past year.
I first wrote my own simple plugin, which fooled most of them for a few months. Soon after that, it was becoming much less effective.
I then turned on Akismet, the WordPress spam filter. That mostly worked, though the amount of spam was just so immense that even though few were getting past, I could easily get more than 20,000 junk comments over the course of a couple days. I actually saw my database files grow rather quickly as a result, and not purging every few days was beginning to not be an option.
Hopefully I’m not just on the cusp of a second wave, though so far I’ve been rather impressed by Jetpack Comments. Beyond various social login mechanisms, it also extends the form to have a lot of nice tricks to fool bots and allow the humans to come through.
I’ll update this post if things change, but so far I’ve went from 10,000 spam comments a day to zero, just by enabling the module. It’d be nice if some of those features and protections were built into the stock system, though I’m not entirely sure if it’s possible. If anyone knows, or would like me to dive a bit into their code, do leave a comment. As it is, I’m quite happy with the result, and would recommend everyone to flip the switch.
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.
The Mozilla Developer Network is an incredibly useful resource for all kinds of web development, and it recently got a refreshed design. For most anything related to JS, CSS, or HTML, I’ll generally tack on “MDN” in my query, which will help putting those resources towards the top of the list. Definitely check it out, especially if you’ve never been.
By default, JetPack adds these others which you may want to modify, too: ‘og:type’, ‘og:title’, ‘og:url’, ‘og:description’, ‘og:site_name’, and ‘twitter:card’. It picks reasonable defaults for all of these, though for ‘twitter:site’ and ‘og:image’, it seems as though these should be configurable more easily in a dashboard somewhere. Until then, this works about as well.
Not a bad theme song for when a problem is solved.
The Dribbblisation of Design. I’m not so much in the design world, and I don’t know enough about Dribbble to have an opinion one way or another about it. With that said, there are some good points in this article, namely that the user should come before the pretty pictures.
I also like the referenced construct of four layers to design: Outcome, Structure, Interaction, Visual. These four are supposed to be in series, so the outcome design comes before any other, etc. It’s a handy, simple enough thing to keep in mind.