GFX::Monk Home

Posts tagged: web

The rise of vi keybindings on the web

Vi? On the internet? No, not that one. I just mean vi keybindings, not the rest of vi. And I’ve just written a jQuery plugin to help make this happen.

On the UNIX terminal, many commands use common keyboard shortcuts to navigate screenfuls of text. j/k for down/up, h/l for left/right, and so on. As far as I know, vi was the first program to use these shortcuts. vi is famous for its modal interface, where different keys mean different things depending on what mode you’re in. In text insertion mode, “hjkl” means exactly those letters. But in normal (or visual) mode, they are the keys you use for navigation. Using standard letters instead of the arrow keys could have come about for a number of reasons. Firstly, there’s the issue that different terminals send different key-codes for special keys like the arrow keys. That’s generally been solved these days, but the other reason still remains: By using the whole alphabet as control keys, you get a startling amount of “command bandwidth” - that is, commands in vi generally require much less finger-contortion than pretty much every other text editor.

vi keybindings are useful on the internet for a third (but related) reason - keybinding collisions. We already have meanings for what the arrow keys do (scroll), and trying to use control-key combinations for webpage-specific functionality is fraught with user frustration, confusion and technical issues.

I’ve noticed it already with a bunch of google products, especially since I started using gmail’s online version most of the time now (instead of Mail.app). Gmail and Google reader are the two big ones that I use, but I’m sure there are more. Both use vi-style keyboard navigation, and both are a delight to use with the keyboard. I’d be surprised if bespin lasts long before a vi-mode is added.

I guess many people think only data-heavy, webapps are worth learning keyboard shortcuts for. But the real benefit comes when everything (or at least most things you care about) use the same convenient shortcuts. I was absolutely delighted when I noticed that every issue of The Big Picture allows you to use j/k to jump to successive images - incredibly useful in this case, because page up/down rarely manages to line up to image boundaries. It’s an unobtrusive addition, and it won’t hurt regular users. But for those who do use it, it quickly becomes indispensable.

So what I’d love is for all websites with many conceptual “items” on a page to implement the j/k keybinding as a minimum (with horizontal and inter-page navigation coming later, hopefully). To this end, I have written a jQuery plugin that should make the process fairly trivial, and allow for “active item” decoration via CSS. Click that link for a demo you can try out yourself.

If there’s enough interest, maybe someone could turn it into a community-based firefox extension (a-la AutoPager) that allows users to define the navigation items for websites that haven’t supplied their own (google search would be a handy one).

It’s worth mentioning Vimperator, which brings vi keybindings to firefox’s UI. To clarify, I’m not talking about browser functionality. I’m happy to use the existing controls for a browser, and leave the alphabet keys for use by the web-page. That way there’s no overlap, and webpages can provide contextual navigation controls that are much more powerful than the basic “scroll down 30 pixels” that a browser provides.

Introducing: PageFeed

pagefeed logo PageFeed is a simple web service to help you organise the pages you’d like to read, but just don’t have the time (or desire) to read through right now.

If you’ve ever used Instapaper, or the newer Read It Later, Pagefeed will feel pretty familiar. The idea is that when you come across an interesting page that you don’t have time to read right now, you just save it to PageFeed via a handy bookmarklet. You can close the page, and PageFeed will remember all the pages you’ve saved for reading later.

Instapaper and Read It Later both have their own iPhone apps for reading stuff offline. Which is great, but it seems a little unnecessary - and it makes for yet another app you have to remember to open and sync every day. And you know what? There’s already a super robust way to subscribe to a stream of HTML items - it’s called RSS. PageFeed puts the HTML contents of your saved pages into your own private RSS feed. You can then use your favourite online / offline feed reader - you can take the content wherever you like and use it on whatever platform you fancy. You can also use the PageFeed home page for managing your list of saved pages away from your RSS reader.

PageFeed isn’t perfect; it can’t put HTML contents in a feed if it can’t parse the HTML page properly. And if there’s one thing the internet is good at, it’s malformed HTML. But it does pretty well, and if it can’t save the page contents then it will still keep the URL around for you to visit later.

PageFeed runs on AppEngine and uses google accounts, so chances are you already have an account.

The newest version (0.8) of GRiS (the RSS reader I wrote for the iPhone) has support for PageFeed - when you click a link in an article’s contents, you can opt for it to be saved to PageFeed instead of opened in MobileSafari. If you’d like to offer similar functionality in your RSS (or other) application, get in touch!