Home

"Coding Like A Zen Master"

If you’ve ever spent any time at all designing websites, you’ll find, in a few minutes, plugging in HTML and CSS tags can be a chore. Many IDEs and text editors (such as BBEdit and Dreamweaver) have done what they can to help by offering auto-complete features and keyboard shortcuts, but this minimally reduces your typing burden.

But alas! Zen Coding has come to (somewhat) cut out the mundane act of typing (as much).  It’s a powerful abbreviation engine that expands CSS selector-like expressions into HTML code.
For example, assume you need a div with an ID of “content”.  This div contains 3 paragraph tags.  All you would have to type would be:

div#content>p*3

And voila!  You get:


<div id=”content”>

 <p></p>

 <p></p>

 <p></p>

</div>


Is that amazing or what?  OK, want to try something a little more adventurous? Try something like this:

div#page>p.top+ul#nav>li*5>a

and you’ll get something like:


<div id=“page”>

 <p class=“top”></p>

  <ul id=“nav”>

   <li><a href=”“></a></li>

   <li><a href=”“></a></li>

   <li><a href=”“></a></li>

   <li><a href=”“></a></li>

   <li><a href=”“></a></li>

  </ul>

</div>


Can you imagine how quick one could put an HTML page together this way? A quick download and install of an extension from the Zen Coding website and you’re on your way!

Now, I can tell you, most people will just stick with their slow, out-dated way of doing HTML/CSS, not even knowing there’s a quick and simple way to spit HTML code out left and right.  But, as for me, I’ll be one that will master the ways of Zen coding. Now, if you’ll excuse me… I have to go print out my cheat sheets.