214-310-1356
What is Zen Coding?
To quote the Zen Coding Wiki “Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.”
Check out the Zen Coding main page and the example page to get familiar with Zen Coding.
Zen Coding is available as a plugin/extension to many popular editors. You can also try the demo online.
Expanding abbreviations
Zen Coding speeds up the task of writing HTML. I think the easiest way to demonstrate how with an example. Lets take some HTML markup that might be used for a list of links in a sidebar
[code language=”html”]
<div id="sidebar">
<ul id="links">
<li class="link1"><a href="#">Lorem Ipsum Dolor</a></li>
<li class="link2"><a href="#">Lorem Ipsum Dolor</a></li>
<li class="link3"><a href="#">Lorem Ipsum Dolor</a></li>
<li class="link4"><a href="#">Lorem Ipsum Dolor</a></li>
<li class="link5"><a href="#">Lorem Ipsum Dolor</a></li>
<li class="link6"><a href="#">Lorem Ipsum Dolor</a></li>
<li class="link7"><a href="#">Lorem Ipsum Dolor</a></li>
<li class="link8"><a href="#">Lorem Ipsum Dolor</a></li>
</ul>
</div>
[/code]
Even if your editor of choice is helping you along that is quite a bit of HTML code to write. With Zen Coding you can simply type
[code language=”html”]
#sidebar>ul#links>li.link$*8>a[href="#"]{Lorem Ipsum Dolor}
[/code]
and then press your Zen Coding expansion hotkey to expand the abbreviation.
I have found it is easier to write multiple smaller Zen Coding abbreviations then larger ones. Using Zen Coding for lists, table, etc is much easier to work with then writing an entire page with one abbreviation.
Wrapping Abbreviations
Want to use some real values instead of dummy text? Zen Coding has you covered with wrapping abbreviations. Taking some real world values
[code language=”html”]
Home
About
Products
Blog
Testimonials
Contact
[/code]
Select the text and hit your Zen Coding abbreviation hotkey. You will see a dialog box. Enter a modified version of our example above
[code language=”html”]
#sidebar>ul#links>li.link$*>a[href="#"]
[/code]
and you will get an output like this
[code language=”html”]
<div id="sidebar">
<ul id="links">
<li class="link1"><a href="#">Home</a></li>
<li class="link2"><a href="#">About</a></li>
<li class="link3"><a href="#">Products</a></li>
<li class="link4"><a href="#">Blog</a></li>
<li class="link5"><a href="#">Testimonials</a></li>
<li class="link6"><a href="#">Contact</a></li>
</ul>
</div>
[/code]
Notice in the abbreviation there is no set number for the multiplier. This is because Zen Coding will loop through each line in the selection.
Other possibilities?
There is an entire community who uses the Zen Coding engine to do some pretty cool stuff. For example Phillip Walton has written a php class/WordPress plugin using the Zen Coding engine. I won’t go into how to use it here but there are a lot of applications. Using our example above you could populate the link source and anchor text from database entries. There are lots of projects using the Zen Coding engine.