robert hahn

a darn good web developer

June 28, 2006

More HTML, Fewer Keystrokes

In my previous article on using preprocessors with HTML, I was talking about my desire to write HTML with fewer keystrokes, and explored a couple of solutions related to using preprocessors to build pages quickly. I was dissatisfied with most of the results for one reason or another, but came really close to hitting the sweet spot with my XCode system. Today I’m going to talk about what did hit the sweetspot, and how it’s done.

The right tool for building pages turned out to be vim. With the help of a guru or two, I discovered insert mode abbreviations (iab’s), and spent an hour or two building up this big .vimrc file filled with tags, separate attributes, and common tag/attribute combinations. Using it was a piece of cake: typing _a<space> would get me <a href="#"></a> and position the cursor between the tags, ready for filling in the content of the tag. More complicated ones like _menu<space> would output an unordered list with one list item, and a link in that item, ready to be filled.

When I was building this, I was a bit concerned about the possibility that I might want a variable called foo_b followed by a space (which would convert the _b into <b></b>, but in practice, I probably got bit by this about 3 times per year tops (compared to the amount of HTML I generate, we’re definitely talking about a fraction of a percent here). Obviously, your milage may vary.

You’ll find, when you look through the definitions (look at lines 96-221) in my .vimrc file), that I tried to pick the smallest unique string of characters possible to type the tag, so _t would emit a pair of <table> tags, and _ac expands to <acronym></acronym>. Some tags will always have a certain set of attributes, like the <img /> tag, so I just put them in as part of the expansion.

All told, i have 559 characters worth of macros generating approximately 6300 keystrokes worth of code – a 92% savings. That runs the whole gamut of xhtml 1.0 transitional, and obviously I don’t use all of that all the time. If I were to cull the list to tags I use most often, I’d say that i have 217 characters worth of macros generating roughly 3100 keystrokes worth of code (a 93% reduction in typing HTML).

There’s lots of potential in using this method – suppose, for example, that you like using microformats wherever possible. You could take your favourite microformat and set up the iabs to generate even more keystrokes with less typing. Here’s an example that would generate a phone number as per the hcard spec:

iab _tel <span class="tel"><CR><TAB><span class="type">%</span>:<CR><TAB><span class="value"></span><CR></span><ESC>kkf%s<C-o>:call getchar()<CR>

If you put that in your .vimrc file, and type _tel in your document, then those 5 characters will generate about 130 characters worth of output, and position your cursor right after the class="type", waiting for your input. This is a big win.

So, I hope you’ll be able to make good use of this; if you have any ideas for improvements, please get in touch with me, I’ll be happy to hear them, and may update the file accordingly.