Suspected PayPal Hackers Seek Deal To Stay Out Of Prison
Scripps Employees Called 'Hackers' For Exposing Massive Security Flaw
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.
Comments
35
Subscribe to commentsKarthik.KApr 30th 2010 10:50AM
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
AliApr 30th 2010 12:08PM
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!
KaushikApr 30th 2010 11:30AM
Not bad, but then we will have to learn a new coding language.
MattApr 30th 2010 11:34AM
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).
technosMay 1st 2010 8:55PM
Welcome to your destiny.
MaxApr 30th 2010 1:29PM
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.
MaxApr 30th 2010 1:37PM
What's the shortcut key for espresso?
Doug StewartApr 30th 2010 3:28PM
Max:
^, will run the Expand Abbreviation macro and expand your Zen Code.
emsixteenApr 30th 2010 9:55PM
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.
seesatchmoMay 1st 2010 7:17PM
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?
James GroveMay 1st 2010 8:40PM
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/
Sergey ChikuyonokMay 2nd 2010 2:35AM
Zen Coding can also expand to HAML: http://code.google.com/p/zen-coding/wiki/Changelog
NaderMay 1st 2010 8:46PM
What's the name of that track playing in the background?
MattMay 2nd 2010 4:50PM
My Droid says its Move On by Seba + Paradox (feat. Robert Manos).
Eric NormandMay 1st 2010 11:06PM
They have it for emacs
http://www.emacswiki.org/emacs/ZenCoding
halfbakedmoronMay 1st 2010 10:09PM
What's the emacs mode for this?
jussijMay 1st 2010 10:39PM
The Zeus editor has support for Zen Coding: http://www.zeusedit.com/forum/viewtopic.php?t=2876
Sergey ChikuyonokMay 2nd 2010 2:38AM
TextMate doesn't have proper API to work as fast as Espresso. Many things are emulated using Macro commands
Sergey ChikuyonokMay 2nd 2010 2:43AM
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
Daryn St. PierreMay 2nd 2010 12:52PM
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.