How to Code Like a Zen Master

My programming life has been changed forever. I’ve attained enlightenment … and so can you.

HTML and CSS may have revolutionized the Web and our careers, but writing tags every day can become a chore. Many IDEs and text editors offer features such as autocomplete and keyboard shortcuts, but they won’t significantly reduce your typing burden.

Zen Coding could be the answer. It’s a powerful abbreviation engine which expands CSS selector-like expressions into HTML code.

Let’s try a simple example. Assume you need a div with an ID of “content” which contains 3 p tags. You would type this string into your editor:


div#content>p*3

then hit the Zen Coding “Expand Abbreviation” menu item or keyboard shortcut. The code is magically transformed into valid HTML:


<div id="content">
  <p></p>
  <p></p>
  <p></p>
</div>

Want to be a little more adventurous? The following abbreviation:


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

expands to:


<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>

Not hard-core enough? Enter this:


html:5>(div#header>h1)+(div#content>p*3)+(ul#nav>li.item$*6>a[href="#"])+div#footer

to generate a full HTML5 template:


<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="header">
    <h1></h1>
  </div>
  <div id="content">
    <p></p>
    <p></p>
    <p></p>
  </div>
  <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>
    <li class="item6"><a href="#"></a></li>
  </ul>
  <div id="footer"></div>
</body>
</html>

How much time and effort would that save you? There’s also a range of CSS abbreviations for your style sheets.

The Art of Downloading Zen

Zen is available as a plugin for a wide range of popular IDEs and editors, including:

  • Aptana
  • BBEdit
  • Coda
  • Dreamweaver
  • Eclipse
  • Emacs
  • Espresso
  • GEdit
  • Komodo
  • Notepad++
  • PSPad
  • TextMate
  • TopStyle
  • UltraEdit
  • Vim
  • Visual Studio

Many of the abbreviations are obvious, but a Zen cheat sheet is available should you require further help.

Why not try Zen? Your colleagues will be amazed by your productivity, and your fingers will thank you!

Sponsors
Login or Create Account to Comment
Login Create Account