zen-coding

If you write HTML, do yourself a favor and check out Zen-Coding!

I was introduced to Zen-Coding over a year ago, but the idea at the time seemed like a gimmick—something else to learn and that I would probably not use.

However, this weekend after hearing about Zen-Coding again, I decided to give it a shot. WHOA, was I blown away at how quickly the syntax was to understand and especially how much time could be saved, especially for a basic HTML page set-up.
You can download Zen-Coding at code.google.com/p/zen-coding

In a nutshell, Zen-Coding is similar to TextExpander but for HTML & CSS.
Zen-Coding expands abbreviations into complete HTML structures.

Look at the abbreviation/code below:

Example #1

This abbreviation: body>div#page-wrap>div#header+div#navigation+div#content+div#sidebar+div#footer

Becomes this code when expanded using Zen-Coding:






Example #2

This abbreviation:
div#page>div.logo+ul#navigation>li*5>a

Becomes this code when expanded using Zen-Coding:

To better understand how Zen Coding works, watch this demo video.

I look forward to exploring more time saving possibilities and digging deeper into Zen-Coding. If you have any suggestions or other ideas how Zen-Coding could be implemented into a work-flow, post your comments below.

Happy Zen-Coding!