By josh / May 30, 2012

Stop hand coding, start Zen Coding

This week at my day job my coding partner and I tackled a straightforward but tedious backlog item: writing an XSLT stylesheet to transform an in-memory representation of a customer’s bill into an HTML version for display on our site.

We decided that a logical first step would be to create a static HTML representation of the invoice, which we would later slice up into the XSLT file. A CSS-based layout seemed impractical, so we dusted off our old school table-nesting skills and got to work.

I’ve largely repressed the memories of my days struggling with table-based layouts in Dreamweaver’s WYSIWYG editor, but the prospect of this exercise brought them rushing back. I braced for the pain …

And then I remembered that I’d installed the ZenCoding plugin for Sublime Text 2, and thinking it might help, we gave it a try.

The Zen Coding concept is beautifully simple: You declare a series of nested HTML or XML elements using an intuitive and expressive inline syntax, and the plugin generates the markup for you.

Here’s a quick example:

div>ul>li*5

Which expands to:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

That’s nice, but when you’re doing table-based layouts, it’s stunningly productive:

table>tr*3>td>table.mysubtable>tr>td*5

Which becomes:

<table>
  <tr>
    <td>
      <table class="mysubtable">
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table class="mysubtable">
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table class="mysubtable">
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The static template for our invoice ended up being about 500 or 600 lines of HTML, and we were able to finish it in an afternoon. An unexpected benefit of using Zen Coding was that we had very few issues with missing or incorrectly nested tags, which is usually one of the most frustrating aspects of complex table layouts.

I’ve just scratched the surface of what this plugin can do—there are CSS features that I need to explore, as well as a feature that lets you wrap tags around the currently selected text. It’s equally adept at spewing out arbitrary XML elements, as I discovered when we turned to slicing the HTML markup up into the XSLT file.

Zen Coding plugins are available for many popular editors, including:

  • Visual Studio
  • vim
  • Notepad++
  • emacs
  • TextMate
  • Aptana
  • EditPlus

You owe it to yourself to find one for your favorite text editor.

Here’s a video that demos more Zen Coding goodness:

For more text editor wizardry, get the Sublime Text Tips newsletter today:

http://sublimetexttips.com/newsletter

About the author

josh

1comment
anon - April 10, 2016

Why not emmet? look it up http://emmet.io/ probably more polished than this zen 0.5.

Reply
Click here to add a comment

Leave a comment: