If you code HTML, Zen Coding will change your life

If you write HTML for a living, and you don't know Zen Coding yet, you are missing out big time.

This is basically the coolest thing I've seen all week. I have been using it for a few days now; at first it seemed kind of gimmicky and I wasn't sure I could grasp the syntax, but today I really got to explore it, and woah is it awesome.

Okay, I'll stop tripping over myself with excitement over here and try to tell you what this thing does, in a nutshell: It expands abbreviations into complete HTML structures (divs, tables, cells, links, lists), and does it in the most freaking intelligent way I have seen in a long time. I'm serious!

For instance, that arcane-looking string of text in the screenshot expands with a single keystroke into this:

This thing leaves any other tag-completion method I have ever seen for HTML in the dust. It's light-years beyond anything else I've witnessed -- and autocompletion is something I've looked into deeply, with multiple editors and IDEs.

There are existing implementations for multiple editors, such as Komodo Edit (which is the one I'm using). The syntax is easy to master, especially if you're familiar with CSS.

There are easy ways to wrap existing lines with tags. For example, I can take the following text:

Foo
Bar
Baf

Select it in my editor, select Zen Coding > Wrap with Abbreviation (or hit a shortcut key) and then type ul>li*>a>b and immediately get the following:

Seriously -- if that is not sheer genius, I don't know what is. If you're not fully sold yet, I've put a video introducing the system in further detail right after the jump. I have only touched briefly on what it can do -- there are many other features, such as automatic element numbering. I will certainly not author another single HTML document without the benefit of Zen Coding.

Share Share

Tags: code, codecompletion, editing, genius, html, text, webdevelopment, zukerlist