Filed under: Developer, Productivity
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.
The Illusionist's Dream is a simple platformer; you play as a magician who needs to get through each level by transforming into any number of animals that you encounter along the way.
Each animal can do different things; the butterfly can obviously fly, but if it encounters a frog, the frog eats it, and you have to start over again. There's also a fox that runs fast and leaps far, but it eats any rabbits that cross its path. That means that, if you may need to be a rabbit later on, you need to take that into account ...
Reader Comments (Page 1 of 2)
Karthik.K said 10:50AM on 4-30-2010
I've been using this for a while now and it is definitely helping me code really really fast. And Im able to show a working prototype to my clients soon than others and earns me the bid! :D
Reply
Ali said 12:08PM on 4-30-2010
Thanks a *lot* for this, works like a breeze in Notepad++
Just took a minute to get used to the syntax using + to include multiple elements in a wrapper div#header>div#content>div#left+div#middle+div#right>div#footer
magic stuff!
Reply
Kaushik said 11:30AM on 4-30-2010
Not bad, but then we will have to learn a new coding language.
Reply
Matt said 11:34AM on 4-30-2010
No new language required, it is all done using CSS selectors (which you should already have a basic knowledge of if you are writing HTML).
technos said 8:55PM on 5-01-2010
Welcome to your destiny.
Max said 1:29PM on 4-30-2010
I downloaded a few of the plugs on the mac, but so far only got TextMate to work. It does nothing for me in Coda or Espresso.
I can see where this would be a huge help. I will use in in Textmate, but I'd love to get it working in Espresso too.
Reply
Max said 1:37PM on 4-30-2010
What's the shortcut key for espresso?
Reply
Doug Stewart said 3:28PM on 4-30-2010
Max:
^, will run the Expand Abbreviation macro and expand your Zen Code.
Reply
emsixteen said 9:55PM on 4-30-2010
You know, I very rarely have any need for coding, but this looks fantastic for when I do.. Wish I knew some people in 'real life' who would benefit from it.
Reply
seesatchmo said 7:17PM on 5-01-2010
The TextMate version does not seem to have the same automatic response as what is shown in the video.
Also, the "font and color" scheme in the code examples above are very retro awesome. How do I get the same?
Reply
James Grove said 8:40PM on 5-01-2010
You folks should take a look at Haml and it's sister Sass - Why use an editor to expand these kinds of things when you can save them in the same format? How does this speed your read time? It can't - but Haml can!
http://haml-lang.com/
Reply
Sergey Chikuyonok said 2:35AM on 5-02-2010
Zen Coding can also expand to HAML: http://code.google.com/p/zen-coding/wiki/Changelog
Nader said 8:46PM on 5-01-2010
What's the name of that track playing in the background?
Reply
Matt said 4:50PM on 5-02-2010
My Droid says its Move On by Seba + Paradox (feat. Robert Manos).
Eric Normand said 11:06PM on 5-01-2010
They have it for emacs
http://www.emacswiki.org/emacs/ZenCoding
Reply
halfbakedmoron said 10:09PM on 5-01-2010
What's the emacs mode for this?
Reply
jussij said 10:39PM on 5-01-2010
The Zeus editor has support for Zen Coding: http://www.zeusedit.com/forum/viewtopic.php?t=2876
Reply
Sergey Chikuyonok said 2:38AM on 5-02-2010
TextMate doesn't have proper API to work as fast as Espresso. Many things are emulated using Macro commands
Reply
Sergey Chikuyonok said 2:43AM on 5-02-2010
Hi folks. I'm the Zen Coding developer so you can post your questions here.
Just tu make clear, this article contains a few typos:
1. In "Foo Bar Baf" example each item should be on a new line
2. The correct syntax for wrapping is "ul>li*>a>b" (note that asterisk * without a number marks a repeating element).
Also, checkout v0.6 changelog, there's lots of improvements in ZC engine like custom attributes, grouping and filters: http://code.google.com/p/zen-coding/wiki/Changelog
Reply
Daryn St. Pierre said 12:52PM on 5-02-2010
I'm a Coda user that relies heavily on snippets and tab-triggers. It's a time save for me and my Clips panel is chock full of helpful reusable code. This concept is a giant boost and I'm blown away. I'm going to check this out and see what it does for me. Thanks for the video demo. It sold me.
Reply