Zen-Coding: HTML and CSS hi-speed markup coding

01/23/2010 02:57 PM by Chris Toohey

Listening to the Boagworld Podcast while cleaning my kitchen today, I heard their quick review of Zen-Coding, an HTML and CSS hi-speed coding plug-in for pretty much every Text Editor out there.

This plug-in is brilliant: it allows you to write a string of Zen-Code markup/code which expands to nested markup on-the-fly!

div#content.wide.column>h1+ul#nav>li.item$*5>a

... becomes:

<div id="content" class="wide column">
   <h1></h1>
   <ul id="nav">
      <li class="item1"><a href=""></a></li>
      <li class="item2"><a href=""></a></li>
      <li class="item3"><a href=""></a></li>
      <li class="item4"><a href=""></a></li>
      <li class="item5"><a href=""></a></li>
   </ul>
</div>

An excellent shortcut for the most tedious combinations of nested elements, classes, and attributes.

As I am an Aptana user - it's the editor that I use to create the majority of my IBM Lotus Notes Domino Web Applications - so I was eager to test this thing out.

Installing this AptanaMonkey script is a breeze, and I can see this shortcut immediately boosting my markup output. Highly recommended for IBM Lotus Notes Domino Web Application Developers who write their own markup!

Still need convincing, check out Zen-Coding in action via a screencast from it's author: