Zen coding for rapid HTML authoring

Writing HTML is fiddly. All those angle brackets, quotation marks, slashes and the rest have always tested my keyboard dexterity. Dreamweaver and other editors try to help, but none compare to a brilliant new(-ish) multi-editor plugin called Zen Coding.

Instead of writing HTML syntax, Zen Coding lets you write CSS selector-style abbreviations and hit a button to expand them to HTML. It’s lightening quick and lets you write HTML snippets in seconds. Simple additions to the CSS syntax allow for output of multiple tags (eg. li*2 becomes <li></li><li></li>
) and automatic numbering (eg. link-1, link-2). It’ll do even more clever stuff than that too, but I’m still a novice!

A really quick example:

blockquote#boxout>h2+p+ul>li*3>a[href="/link/"]

expands instantly to

<blockquote id="boxout">
<h2></h2>
<p></p>
<ul>
<li><a href="/link/"></a></li>
<li><a href="/link/"></a></li>
<li><a href="/link/"></a></li>
</ul>
</blockquote>

Filling the empty code with content is easy too because there’s a handy ‘next sensible spot’ keyboard shortcut to skip from the H2 to the P to the LI to the HREF etc.

The one gap for me is that I have to use a text editor to use the Zen Coding expansions. Most of my coding is done in Firebug or within our CMS so I can’t use the expansions directly where the code needs to be. I’ve always got a text editor open so it’s not a big deal, but a Firefox/Chrome extension or integration with a generic text expansion utility (as Paul blogged about previously) would be even more brilliant.

There’s a full tutorial on Smashing Magazine, including the rapid-fire demo video embedded below which shows just how fast it can be and what it’s capable of.

How to write code (or anything else) much quicker with text substitution

Do you find yourself spending your days writing the same text over and over? You could save yourself hours of time by using text substitution software.

There are lots of text substitution packages available, but they all work in a common way - you set up shortcuts (small pieces of text), which when triggered are substituted with longer pieces of text.

Here's some shortcuts in action that I've set up for writing HTML:




Not just for writing code

The application of text substitution isn't limited to writing code. It comes in handy any time you find yourself writing the same text from day to day. For example, I find myself writing the phrase "writing for the web" a lot, so I've set up a "wftw" shortcut that does that for me. You can even set shortcuts for whole canned email responses to common questions and save yourself a whole load of time.

More information

For a great overview of the topic and the tools available for different operating systems, see the lifehacker article Save time with text substitution