Reach a point of zen in your code

Zen Coding is set of plugins for various text editors that enable you to code much faster than you normally do.

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:

And there is partial support for:

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.

  • http://www.glop.org/ Laurent Raufaste

    What about Komodo Edit ? A crossplateform editor based on the Mozilla toolkit http://www.activestate.com/komodo_edit/

  • http://twitter.com/jorgepinon Jorge

    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?

    • http://seeitdesignstudio.com.au Grant

      In Coda, you use control-,(comma) to expand the shorthand. :-)

    • Mark Jackson

      Make sure you’re running OSX 10.5 or greater.

  • http://fiveminuteargument.com Five Minute Argument

    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!

  • http://Twitter.com/agent_g Greg Hrmphill

    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.

    • Shaun

      Great find! How do you do the ul>li*5 etc in TextMate?

  • http://www.iamfrankstallone.com Frank Stallone

    I use Zen Coding with Espresso, didn’t know it even existed until I read the Smashing article about it!

  • Shaun

    Hi Paul,

    Great find! How do you do the ul>li*5 etc in TextMate?

    • http://www.darrenjonesdesign.co.uk Daren

      Download the textmate plugin, and use TAB to expand the code.

  • http://inteldesigner.com Kevin Dees

    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

  • http://twitter.com/sulcalibur Sulcalibur

    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

  • http://beau.livestronger.info/ Web Design New York

    Great concept. Got it right away! Beautifully executed.

    Thanks for sharing.

  • http://www.eniak.com.au Eniak

    Very good tool! Use it with Dreamweaver.

  • Gonzalo González Mora

    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.

  • Gonzalo González Mora

    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

  • http://www.olivertreend.com Oliver Treend

    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!

Headscape

Boagworld