A couple of weeks ago, Frank Chimero announced a refresh of a site he helped build called Thinking for a Living. The site is beautifully designed and includes a novel and intuitive navigation system. In place of using your mouse, you can control nearly every aspect of the site via the keyboard. Seeing this and using Gmail keyboard shortcuts for years made me wonder why we don’t have a standardized way to access a blog via keyboard shortcuts.
Inspired by these examples, I’ve begun a new project to develop a set of standard keyboard shortcuts for your blog. I’m calling it Blog Shortcuts (try not to be blown away by my creative naming). Before I get to my plans for developing and releasing it, you should give it a whirl. I’ll explain each of the shortcuts, but if you press ? right now, you’ll see all of the options available to you.
Available Shortcuts
I tried to pick out shortcuts that would apply to any blog, but this first set are tailored to my site. You can navigate up and down a list of entries, like The Big Picture and access sections of the site via particular keys (e.g., H for home). My favorite feature is the ability to load a particular tag by pressing g+t. Here is the full list:
- Scroll to the next entry: n or j
- Scroll to the previous entry: p or k
- Load the newer entry on permalink: N or J
- Load the older entry on permalink: P or K
- Go to the homepage: H
- Go to reviews: r
- Go to archives: A
- Go to about: a
- Focus on search: s
- Go to top: t
- Show the tag input window: g+t
- See all available shortcuts: ?
Development and Release
The project is currently up on Github, but is obviously in its infancy. I’ve outlined a set of to-dos in the README file that I hope to tackle over the coming weeks. If you want to get it running today, feel free to download the v0.1 release and play with the Javascript. If you would like to help out in any way — cleaning up my messy Javascript, offering opinions on shortcut keys — I’d love to collaborate.
Update (3/3/10): Found a bug in FF 3.5.x and wanted to add some basic styles, so we’re already up to v0.2. Progress!
03/03/10 12:41 PM
This is awesome. Except I already find myself doing keyboard shortcuts in applications that don't take them. Like GMail shortcuts in other Google products.
Also, some of them seem to "work" while typing comments, which is kind of annoying. So I've drafted this comment somewhere else and pasted into the comment field.
03/03/10 12:57 PM
testing these shortcurts again to see if anything opens up as i type quickly. looks like everything is working!!
03/03/10 1:00 PM
Indeed Tien, you found the first bug! Congrats!
For the nerdy folks, it looks like document.activeElement.localName returns an uppercase string in FF 3.5.x and a lowercase string in FF 3.6.x, Safari and Chrome. When I tested to see if a textarea or input was in focus, it was returning false because of case matching. Thanks to the magic of toLowerCase(), everything is right again.