Zen Coding
Posted on | February 3, 2010 | No Comments
I linked to the Zen Coding plugins from my Twitter account a couple of weeks ago. Since then I’ve become so completely enamored with them that I wanted to rave on in a bit more detail.
The Zen Coding plugins are a collection of macro commands which take some of the grunt work out of setting up HTML and CSS files on new projects. I’ve only played with the HTML set so far but I am well and truly sold on the time they can save and, frankly, how much fun they are to use.
The idea behind the HTML plugin is to outline your basic page structure with a simple shorthand syntax resembling CSS selectors and then, with a single keystroke, let the macro expand your pseudocode into neatly formatted HTML.
Let’s say you want a basic structure consisting of an outer container wrapping three key content divs, one each for header, content and navigation. Overall, you want your html hierarchy to look like this:
-->body
--->container-div
--->header-div
--->maincontent-div
---> footer-div
With the Zen Coding plugin installed, here’s what you type — directly into your html document, between the body tags — to get things started:
div#main>div#header+div#content+div#footer
That’s all. HTML tags are specified in plain text, and are immediately followed by #id_name to specify an id, or (you guessed it) .class_name to specify a class name. Children are indicated with a > and siblings with a +.
Once you have entered your shorthand, hit ctrl-, and the plugin instantly replaces your line of text with complete, neatly indented HTML.
So:
div#main>div#header+div#content+div#footer
is instantly turned into:
<div id="main">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Now come on. That’s pretty damn cool, right? Obviously the structure here is pretty simple for purposes of an example but even on so basic a hierarchy, and assuming some reasonably effective auto-completion in your code editor of choice, the plugins are reducing your keystrokes by at least 50%.
Ok, so what about the tedious business of wrapping some HTML around content? You know the drill — you’ve got ten items you need to turn into an unordered list of links for a navigation menu. Easy! Put them down on your page, just the plain text, each item on it’s own line:
home
about
faq
help
join
contact
Highlight the text and and hit ctrl-h to bring up the Expand with abbreviation dialogue Box and tell the Zen Coding plugin how to convert your plain bits of text into HTML. Enter the following shorthand ul#navigation>li*>a and your text will be formatted just the way we want it:
<ul id="navigation">
<li><a href="">home</a></li>
<li><a href="">about</a></li>
<li><a href="">faq</a></li>
<li><a href="">help</a></li>
<li><a href="">join</a></li>
<li><a href="">contact</a></li>
</ul>
You can see again that the command syntax here is straightforward, and it should feel familiar to anyone with some basic CSS experience. And you’re significantly reducing keystrokes.
So it’s easy to get started, and you’re going to save some time. Over a few weeks, I’d suggest you’re going to save quite a lot of time.
But there’s something else happening here as well: Working with the Zen Coding plugins feels like a more interesting way to put your core HTML together. More satisfying. More fun.
Instead of suffering the repetition of wrapping tags over content in a robotic fashion, you’re describing the structure of what you want, considering the pattern, and then letting the computer to the repetition. Your brain stays in a more analytical mode and the computer does the robotic bit.
The examples above barely scratch the surface of what you can do with Zen Coding plugins. Like all the best “power tools” and productivity plugins, Zen Coding is deceptively simple on the surface but enormously satisfying to use. It will quickly become a transparent part of your workflow and, once in the habit, a natural complement to your programming tools.
You can download the Zen Coding plugins for your development tool of choice from http://code.google.com/p/zen-coding/
Comments
Leave a Reply