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!
Written By:
