Zen Coding – a new way to write HTML lightning fast
The other day I purchased a new editor called Coda. I might review this fantastic little piece of software at a later date, but one of the reasons I purchased it was to use some of the many plugins the community has created for it. One of these plugins has been produced for several editors and could change how you code. It’s called Zen Coding, and it will make you write large chunks of HTML a lighting speeds.
What is Zen Coding?
Zen Coding is hard to explain, but if you have been working with HTML and CSS for awhile now you should be able to pick it up very quickly. It’s easy to learn and best shown by example, so lets start with an example.
Say I want a div with an id of frame and a class of indent, I would type:
div#frame.indent
In the Coda editor hitting F1 would turn the above into this:
<div id="frame" class="indent"></div>
That’s pretty cool, but not life changing, but how about something like this.
table>tr*3>td*4
<table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>
Okay, I know what your saying, who needs complex tables anymore! Well, email newsletters and tabular data for one, but how about this.
ul#navigation>li.link*5
<ul id="navigation"> <li class="link"></li> <li class="link"></li> <li class="link"></li> <li class="link"></li> <li class="link"></li> </ul>
What if each link class needs to be unique?
ul#navigation>li.link-$*5
<ul id="navigation"> <li class="link-1"></li> <li class="link-2"></li> <li class="link-3"></li> <li class="link-4"></li> <li class="link-5"></li> </ul>
How about adding a strong tag in each bullet.
ul#navigation>li.link-$*5>strong
<ul id="navigation"> <li class="link-1"><strong></strong></li> <li class="link-2"><strong></strong></li> <li class="link-3"><strong></strong></li> <li class="link-4"><strong></strong></li> <li class="link-5"><strong></strong></li> </ul>
Want a bunch of caption blocks?
div.caption*5>h1+h2+p
<div class="caption"> <h1></h1> <h2></h2> <p></p> </div> <div class="caption"> <h1></h1> <h2></h2> <p></p> </div> <div class="caption"> <h1></h1> <h2></h2> <p></p> </div> <div class="caption"> <h1></h1> <h2></h2> <p></p> </div> <div class="caption"> <h1></h1> <h2></h2> <p></p> </div>
Attributes? Got that covered too.
a[href=”link$.html” target=”_blank”]*3
<a href="link1.html" target="_blank"></a> <a href="link2.html" target="_blank"></a> <a href="link3.html" target="_blank"></a>
Okay, it’s probably clear by now that I think Zen Coding is awesome and maybe I’m getting carried away now, but lets try one more. This one helped me post all the examples above to this post by using a filter. Adding a |e filter to the end of the above example will escape all unsafe XML characters with HTML entities. Perfect for posting code examples.
a[href=”link$.html” target=”_blank”]*3|e
<a href="link1.html" target="_blank"></a> <a href="link2.html" target="_blank"></a> <a href="link3.html" target="_blank"></a>
Many editors are supported
Don’t have coda? That’s not a problem, many editors are supported and chances are you are familiar with one of them. There’s even a PHP version called ZenPHP which will generate blocks of HTML in a similar fashion. If you have any really cool Zen Coding selectors post them in the comments.
