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.
No comments:
Post a Comment