HTML and the Art of Zen Coding

I love cool stuff, most developers do, but it’s been a while since I’ve truly been impressed by a tool or technology. Today was one of those “whoa! this is really cool!” moments when I happened upon the Zen Coding plugin as I explored WebStorm from JetBrains (a company that also makes cool tools). So what does it do? It basically saves you time and keystrokes by providing a shorthand notation for all the boring, repetitive HTML that you write every day. For instance, typing:

div#container.cont1>table#menu.tab1>tr>td.test*3>a

and then hitting the tab key automatically generates the following html:

<div id="container" class="cont1">
    <table id="menu" class="tab1">
        <tr>
            <td class="test"><a href=""></a></td>
            <td class="test"><a href=""></a></td>
            <td class="test"><a href=""></a></td>
        </tr>
    </table>
</div>

It’s fairly easy to see how that single line became the finished output so I’m not going to go into any great detail about it but what if you need to create elements that “live” at the same nested level like, say, a table with thead and tbody elements?

div#container.cont1>table#menu.tab1>(thead>tr>td.test*3)+(tbody>tr>td*4)

translates to:

<div id="container" class="cont1">
    <table id="menu" class="tab1">
        <thead>
        <tr>
            <td class="test"></td>
            <td class="test"></td>
            <td class="test"></td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>
</div>

You can see that wrapping each section inside parantheses and using the + symbol as a “new line” creates the desired output. How cool is that!? Pretty damn cool if you ask me. By using something close to css syntax we can chain together the structure we have in mind and get a lot of output for minimal effort. Now, I may be late to the party but better late than never. Over the course of many pages this is going to save me a huge amount of time. What’s even cooler is that this plug-in is available for many different editors, so you should definitely checkout the home page to see if it’s available for yours.

Hats off to the devs for a great tool.

HTML and the Art of Zen Coding