HTML Zen Coding is a plugin for many popular HTML editors that gives the web developer many tools for quickly building out HTML pages. If you are comfortable (and enjoy) CSS selectors popular today in many frameworks (such as jQuery) then this may be for you.
When we build HTML documents, we are always building code that is repetitive, and we have ways of making that better. Creative copying and pasting usually. Sometimes I feel like I’m playing music on my keyboard when I do my copy paste and edit keyboards commands over and over.
With Zen Coding the process is much “simpler”. You need to learn the syntax, which is straightforward for most selector friendly folks — but it will shorten your workload and let you do some things that you may have avoided before.
Officially supported editors are:
- TextMate (mac)
- Coda (mac)
- Espresso (mac)
- Komodo Edit/IDE
- Notepad++ (windows)
- PSPad (Windows)
- <textarea> (in HTML)
- editArea (browser-based)
Some cool features:
- Expand Abbreviation – This is the standard “do it” command, once you write a Zen Code statement, hit this and it will be expanded
- Wrap with Abbreviation – If you have a list of text (names, or anything really) you can expand them with a statement, and avoid copying / pasting the beginning / end of every line.
- Balance Tag – Highlights the opposite end of the current tag (useful when trying to figure out what another web developer has written if indents haven’t been maintained)
There’s really so much more.
An example is if I wrote :
The output is:
<div id="container"> <div class="section" id="header"> <div class="nav"> <ul class="pnav"> <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> </div> </div>
How cool is that? I know this will save me some time once I’m comfortable with it.
You can download the plugin of choice at: Zen Coding
Check out the demo video: