Luke Winikates

06 December 2012

Frontend Craftsmanship (part 1)

Ever since I decided to learn vim and tmux, I’ve gotten more ambitious about finding keyboard shortcuts and mouse-free tricks for every computing task. I used to think I knew keyboard shortcuts well enough. Now I realize that I had no idea of the scale of the universe mouse-free computing that existed until recently [1], so I’ve developed a kind of post-conversion mania and am trying to extend keyboard-only tricks wherever I can.

So when I started working on the layout for this site, I wanted to make navigating it with just your keyboard as easy as possible. I wanted to provide a quick way of navigating through what I hope will be a growing collection of posts. I had some idea of what I wanted to do— basically provide an <input> that would allow users to search posts by title and tag, then navigate directly to a post and jump to it with [enter].

Implementations of the same general idea exist all over, as jQuery plugins, jQueryUI components, or Bootstrap components. But any of those would be an alarmingly large dependency to pull to produce such a simple effect. I also really wanted to build up the CSS from the bottom up myself, to strengthen my own CSS chops. I didn’t want to do do anything that would make CSS decisions for me—even sensible ones. I wanted to hand-roll it at least once and have as much authorial control as possible over the look of the site.

Nor was it long before I realized that I wasn’t imagining quite the same functionality that Bootstrap’s typeahead provides, or what the jQueryUI autocomplete offers. I’d also just finished digesting the code for somebody else’s jQuery plugin, and it was clear enough that jQuery.fn.plugin_name was all you needed to know to get started.

It wasn’t quite overnight, but it was an enlightening experience. You can see the code for the finished widget on Github, and you can see it in action right here already. And in the next posts I’ll cover the interesting parts of the implementation, plus why I think that churning out new jQuery plugins is a good practice, even when so much previously written code already exists.

[1] http://www.youtube.com/watch?v=JXwS7z6Dqic/