Javascript for paging posts with 'j' and 'k'
Matthew Hutchinson cooked up some Javascript for paging through posts on your blog with the j and k keys ala ffffound.com. Here’s an example of the code in action.
You’re reading Signal v. Noise, a publication about the web by Basecamp since 1999. Happy !
Matthew Hutchinson cooked up some Javascript for paging through posts on your blog with the j and k keys ala ffffound.com. Here’s an example of the code in action.
Jake Mauer
on 13 Oct 09Why HJKL? The Big Picture uses them as well Are they a holdover from a long forgotten text editor? J as next and K as previous still don’t map correctly for me.
Regardless, as a ffffound user I find them wonderful to have, and I was considering implementing this on my own site, now I can!
Zack Grossbart
on 13 Oct 09You can see the same type of effect on We Love Typography and also on my site Get The Eye.
Zack Grossbart
on 13 Oct 09I forgot to mention that those sites use the arrow keys instead of the hjkl keys.
Kyle Rabe
on 13 Oct 09Long forgotten text editor? VI lives! :) These keys can be used for navigation in many *nix programs.
Martin Kool
on 13 Oct 09We’ve been mapping the left / right arrow keys to the next page / previous page links in our sites for quite some time now.
I agree with Jake that the HJKL keys don’t seem the most obvious choices.
Using the left/right arrow keys is a bit fiddly with focused form field where you might use those keys, but other than that we’ve experienced very little undesired behavior.
Can anyone think of any reasons why using the arrow keys might be a bad idea? Do any browsers already assign shortcuts to those keys that you know of?
Tom
on 13 Oct 09J and K are also bad choices because they break when Firefox has “search as I type” enabled (though Google Reader overcomes that somehow). The rarely-used left/right arrow keys are much safer.
Alejandro Moreno
on 13 Oct 09I just had to look it up.
It turns out that vi was developed with this keyboard: Keyboard for ADM3A terminal.
And then vi went on to become the main Unix editor for a long enough time, so that other editors picked up those shortcut keys.
Matthew Hutchinson
on 13 Oct 09(the code is on github here)
Thanks for posting this Ryan (!), as mentioned in the comments on your much earlier post – there is a reason for using jkhl (see some of the comments summarised below)
In any case, people will have their own preferences/ideas as to how this should work, I simply chose what seems to be the accepted default right now.
Also my code on github is abstracted with a config object for changing which keyboard shortcuts do what (using HotKey.js for handling key events)
Why jkhl?
”... because j and k are on the home row. Most keyboards have a little nubbin on the j so you can find it by touch. There’s also some precedent for the pair. j and k move the cursor up and down in vim for example.”
”.... Google reader uses the same keys. ...”
”... The j, k, l, and ; were the movement cursor keys in vi. So you should probably ask Bill Joy. He started this trend 1976…. “
”....Earlier computers had no need for arrow keys, so all the basic vi commands use keys you’d find on a very limited keyboard….”
”....But they’re also very nice since it’s where the right hand sits when you’re a touch typist. j and k take almost no effort to type…”
”... page up/down and cursor keys are not always available on every keyboard, or can be hard to find on laptops or shortened keyboards …”
Brett Flower
on 13 Oct 09I think there is a interesting article to be written about application design and how it’s moved from those little monochrome screens with all keyboard navigation (high speed & high learning curve) to “slick” GUI’s (low speed, low learning curve) and now, maybe to a best of both worlds.
If I were a better writer I’d give it a go…
EH
on 13 Oct 09Can anyone think of any reasons why using the arrow keys might be a bad idea?
You have to move your hand to use the cursor keys.
jklp
on 14 Oct 09Can anyone think of any reasons why using the arrow keys might be a bad idea
The up and down arrow keys are already mapped to moving the page up and down incrementally in all browsers.
Remapping them could cause confusion and also remove existing functionality for moving a page up / down
Borna
on 14 Oct 09But can anyone tell me why in the world h and j are used for next and k and l for previous? What happened to left-to-right navigation? This has always bugged me with Google search (experiments), and I even remapped the two in Gmail, because it just makes so much more sense…
random8r
on 15 Oct 09There’s a reason gamers use WASD for games… the right hand is usually on the mouse.
Justin
on 16 Oct 09I second random8r. It makes no sense to use keys on the RIGHT side, because that hand is on the mouse for web browsing! I think in this case, the WASD paradigm makes much more sense.
Also second breaking in Firefox with quick search turned on.
I like the idea of trying to bring quicker browsing via keyboard shortcuts, but would rather see people work on developing UX to make such things unnecessary.
Matthew Hutchinson
on 19 Oct 09now with added JQuery support and library abstraction, (latest at github)
IMil
on 20 Oct 09On Russian websites a de-facto standard for using Ctrl+left/right as pagination shortcuts has emerged.
It’s a bit more work for fingers than HJKL or ASDF but is more intuitive and less likely to be pressed by accident.
This discussion is closed.