Reach a point of zen in your code
Posted in Boagworld Bites, Reviews on: Thursday, January 21, 2010 by Ezequiel Bruni
Zen Coding is set of plugins for various text editors that enable you to code much faster than you normally do.
Podcast: Play in new window | Download (943.2KB)
My name is Ezequiel Bruni, and I’m a Canadian designer based in Mexico.
I just wanted to let you all know about a tool which is pretty awesome (and will make your life easier).
Zen Coding is set of plugins for various text editors that enable you to code much faster than I bet you normally do.
For example, let’s say you want a div, with a heading, and three paragraphs inside. In each paragraph element, you want a span element as well. Each element needs classes and ids, you get the picture. It’s tedious, even with copy and paste.
What if I told you that you could do all of that with just one line of code? Sound interesting?
Zen coding allows you to do that, and it’s pretty darn awesome.
To see how it works, go to http://code.google.com/p/zen-coding/
Zen Coding supports:
- TextMate, Mac
- Aptana, crossplatform
- Coda, Mac
- NetBeans, crossplatform
- Espresso, Mac
- Web IDE, crossplatform
- TopStyle, Windows
- Sublime Text, Windows
- Dreamweaver, crossplatform
And there is partial support for:
- IntelliJ IDEA, crossplatform
- SciTE, crossplatform
- gedit, *nix
- SlickEdit, crossplatform
I’ve personally tried the Aptana plugin, as well as the gedit plugin on Linux, and I’ve gotta say, it’s beautiful. The way I code is certain to change, and I recommend Zen Coding to anyone who does a lot of HTML/CSS development.
I hope you check it out, it’s awesome.
17 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
What about Komodo Edit ? A crossplateform editor based on the Mozilla toolkit http://www.activestate.com/komodo_edit/
Paul, did you say CMD-Enter to expand the syntax? It’s not working for me. I’ve looked around and seen mention for CMD-d, CMD-d, and the dropdown menu under TEA says shift-, (which for me launches prefs).
Did you have to modify the plugin?
I’ll keep looking but maybe you can give us a hint?
In Coda, you use control-,(comma) to expand the shorthand. :-)
Make sure you’re running OSX 10.5 or greater.
Textpad (http://textpad.com/) support would be nice. I can’t imagine what it would be like to use this and, therefore, whether it’s a productivity enhancement or not, but it would sure be nice to try it out!
I’ve been using Zen Coding with TextMate for a while, and I’ve found it to be one of the best productivity gains in my toolset. If you are writing HTML get this, or use an abstraction like HAML and you’ll find yourself writing well structured code faster and easier.
Great find! How do you do the ul>li*5 etc in TextMate?
I use Zen Coding with Espresso, didn’t know it even existed until I read the Smashing article about it!
Hi Paul,
Great find! How do you do the ul>li*5 etc in TextMate?
Download the textmate plugin, and use TAB to expand the code.
Thanks Ezequiel Bruni,
I don’t know how I missed this when it come out. Glad you got this on Boagworld. Works great with Dreamweaver.
Excellent review! Just posted on this after reading yours :D
This is something I’m really looking into at the moment, so that you both for the extra info.
Also you type about as good as me :P
Great concept. Got it right away! Beautifully executed.
Thanks for sharing.
Very good tool! Use it with Dreamweaver.
I’ve been using it for a few days (since a post on NetTuts) and it’s really awesome. I’ve made some screencasts for those who had problems installing it on Aptana (you can check it on the ZenCoding wiki).
It’s worth noting that it also works on the e texteditor (which is like TextMate for Windows). You have to download the 3 files for TextMate and install them in C:\Users\{yourusername}\Application Data\e\Bundles and you’ll be ready to go.
Oh, I forgot to say something: you can also add custom snippets. In the NetTuts post, for example, Sergey (the creator of ZenCoding) showed how to add a “lorem” snippet so that it will add the dummy text (which you can use for something like div#container>div#content>p>lorem or something like that). He shows how to do it on Coda I think, but you can edit the settings file on most (if not all) editors. In my previous like you’ll find how to do it on Aptana. On Dreamweaver CS4 (in Windows), the file is located in: C:\Users\{username}\AppData\Roaming\Adobe\Dreamweaver CS4\en_US\Configuration\Commands\ZenCoding\zen_settings.js
Wow, that looks pretty insane!
I’ll definitely be checking this one out..
Cheers to Ezequiel for taking the time to tell us all about it!