How to Code Like a Zen Master

Tweet

My programming life has been changed forever. I’ve attained enlightenment … and so can you.

HTML and CSS may have revolutionized the Web and our careers, but writing tags every day can become a chore. Many IDEs and text editors offer features such as autocomplete and keyboard shortcuts, but they won’t significantly reduce your typing burden.

Zen Coding could be the answer. It’s a powerful abbreviation engine which expands CSS selector-like expressions into HTML code.

Let’s try a simple example. Assume you need a div with an ID of “content” which contains 3 p tags. You would type this string into your editor:


div#content>p*3

then hit the Zen Coding “Expand Abbreviation” menu item or keyboard shortcut. The code is magically transformed into valid HTML:


<div id="content">
  <p></p>
  <p></p>
  <p></p>
</div>

Want to be a little more adventurous? The following abbreviation:


div#page>p.top+ul#nav>li*5>a

expands to:


<div id="page">
  <p class="top"></p>
  <ul id="nav">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

Not hard-core enough? Enter this:


html:5>(div#header>h1)+(div#content>p*3)+(ul#nav>li.item$*6>a[href="#"])+div#footer

to generate a full HTML5 template:


<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="header">
    <h1></h1>
  </div>
  <div id="content">
    <p></p>
    <p></p>
    <p></p>
  </div>
  <ul id="nav">
    <li class="item1"><a href="#"></a></li>
    <li class="item2"><a href="#"></a></li>
    <li class="item3"><a href="#"></a></li>
    <li class="item4"><a href="#"></a></li>
    <li class="item5"><a href="#"></a></li>
    <li class="item6"><a href="#"></a></li>
  </ul>
  <div id="footer"></div>
</body>
</html>

How much time and effort would that save you? There’s also a range of CSS abbreviations for your style sheets.

The Art of Downloading Zen

Zen is available as a plugin for a wide range of popular IDEs and editors, including:

  • Aptana
  • BBEdit
  • Coda
  • Dreamweaver
  • Eclipse
  • Emacs
  • Espresso
  • GEdit
  • Komodo
  • Notepad++
  • PSPad
  • TextMate
  • TopStyle
  • UltraEdit
  • Vim
  • Visual Studio

Many of the abbreviations are obvious, but a Zen cheat sheet is available should you require further help.

Why not try Zen? Your colleagues will be amazed by your productivity, and your fingers will thank you!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • mohit

    nice tut….i have use it in my website http://www.backendcode.com/

  • http://thatNorwegianGuy.com/ thatNorwegianGuy

    Odd. Using html:5 I get lang="ru-RU".
    Also – the Coda zen plugin .zip has “TEA for Coda.codaplugin” rather than Zen…

    • Anonymous

      I have the same problem. The land=”ru-RU” is really annoying me. Is there any way I can manually change this somehow?

  • DwrcDII

    ok you save the fingers, how about saving the head :D

    I can see it could be a pain in the neck to remember all of those short cut tag syntax.
    Right, I don’t say it can’t be done, we do it all the time with all sort of things…

    just my 2 cents. cheers

  • http://sffarlenn.net Laneth

    Holy crap, you just blew my mind!

    Seriously though, I really think this might be worth looking into :D Thanks for the head’s-up!

  • Marin Todorov

    You know those 1liners remind me a lot of Perl, of which I used to be an evangelist and which I thought for few years in the university. You know what happened to Perl? Died, cause common people could not grasp it, they went for PHP because even an idiot can write a PHP script :)

    • chudesnov

      Being used only by pros is not a bad way to “die” :-)

  • http://www.tyssendesign.com.au Tyssen

    I installed the Dreamweaver extension the other day but nothing happens. :?

  • Tillz

    Now that’s really helpful.

  • http://autisticcuckoo.net/ AutisticCuckoo

    This looks like you are concerned about the markup before you even have the content, which seems arse backward to say the least.

  • http://www.triplesoft.net/extradezign/ haseeb

    Seems to me learning another language. how can u remember all these shortcuts. For me its better to write complete code.

    • http://www.optimalworks.net/ Craig Buckler

      It’s not a huge step to take if you already have a grasp of CSS selectors or XPath notation.

      The examples I’ve given are quite advanced but, in practice, you’d probably use much simpler abbreviations, e.g. “ul#nav>li*5>a” for a 5-link navigation menu.

    • Jen

      Agreed. 100%. Also, with the new html5, it may not be supported. Also, there is a chance it could be div soup. Its better to code by hand. coding by hand also lets you learn why something works.

      • http://logicearth.wordpress.com logic_earth

        So…what about those who already know why/how something works? Why should we have to type out every letter? Why can we not use shortcuts like this? Should we not use snippets or auto-complete either?

        As for learning another language…you should already know this language! You use it in CSS all the time as well in jQuery.

  • Fatty

    I have freezed for a minute imaging myself typing html with light speed with this. Its time for my Aptana to gain this new improvement :)

    Thanks for sharing!

  • SYSTEM

    It’s make life easier and keep developers team but if i do it always so i’ll forget the syntax for pages !

  • http://www.dynamicsitesolutions.com/ Kravvitz

    I’ve been using this plugin in PSPad for several weeks now. It’s a great alternative to normal autocomplete. One very helpful feature it has is the “wrap with abbreviation” command in which you can use an abbreviation, such as “ul>li*>a[href=#]” (note that a number does not follow the asterisk), to create a list of links out of several lines of text, like these:
    banana
    orange
    pineapple
    And, yes, I do have trouble remembering where to place the asterisk in order to achieve that. However, given time, I expect that will be less and less of a problem.

  • http://www.pageaffairs.com/ ralph.m

    Wow, very interesting. I wonder, though, if it’s more efficient to type out all the tags and then paste in all the content, bit by bit, or just type the tags around the content—which editors like TextMate do really well already. I guess there are other uses, such as creating a template for a CMS… although in that case you’d never type out all those empty list item and paragraph tags anyway.

  • Tom
    • http://sffarlenn.net Laneth

      It’s not really helpful to just provide a link to someone else’s review – just cos SM did it first, doesn’t mean SitePoint shouldn’t or can’t…

  • Kleo

    Use anyone UltraEdit?
    The given example:
    html:5>(div#header>h1)+(div#content>p*3)+(ul#nav>li.item$*6>a[href="#"])+div#footer
    doesn’t work.
    Any solutions?
    Thank you!

    • Steven

      I use UltraEdit for HTML, I tried the zen coding.js script. It looks like the script needs to be improved more, but it should be possible. This is awesome!

  • chadavan

    Copy/Paste seems easier than learning a psuedo-code language that does the same thing.

  • http://www.jasonbatten.com NetNerd85

    wow, nasty.

  • huexotzinca

    thx for the suggest Zen Coding is great, I like use TextMate default HTML bundle and mCSS bundle http://minimaldesign.net/downloads/tools/textmate-css-bundle

  • Jbow

    You list a Visual Studio plug-in, but I can’t find it. Can you give a link?

    • http://www.optimalworks.net/ Craig Buckler
      • Jbow

        So there isn’t a Visual Studio plug-in available now. I guess one is coming in the future, but there isn’t a date. Thanks anyway.

  • http://www.myspace.com/pas_non pas_non

    jeez, i don’t know…is this going to be like NewSpeak and make us all dumb? :P
    it happened with the txtn gener8on omgwtfrly??….

  • Justen

    Nice man, let’s see if I can get it going in netbeans, looks like a major timesaver.

  • Anonymous

    not another syntax!

    • mekanismo

      Exactly.

    • http://logicearth.wordpress.com logic_earth

      It is hardly a new syntax. I use it for pretty much for CSS and jQuery work.

  • Nick

    Wow – so many readers just didn’t get it.
    It’s only a minor change from the CSS selector syntax.
    (Though the abbreviations for CSS are a little dubious, and my IDE auto-completes them anyway.)
    Maybe “CSS selector-like expressions into HTML code” should be bolder.

  • ambrosite

    Thanks, I’d never heard of this, but for someone who hand-codes HTML every day it looks very useful. And the syntax makes perfect sense to me; shouldn’t be hard to remember.

  • mick

    I curcur with Tysson
    Sounds like it would be useful, but It’s not working for me.
    Installed DW ext on DW CS3 successfully.
    I cannot get it to expand an expression using ctrl + , or by using the menu item Commands > Zen Coding > Expand Expression.
    I tried on a new blank html document saved or unsaved with the expression html with and without a space after it.
    Also tried inside a fully formed html doc with the expression h2
    Also in css doc with the expression bg
    Zen Coding’s find and replace action just does not run in my setup.

  • Frank Lynch

    I didn’t know that Zen had a Dreamweaver plugin. The http://www.webpagefx.com team is implementing as I type. Thanks for this awesome info, its going to be a huge time saver for the designers!

  • pothi

    Wow! Just wow!

  • http://www.tyssendesign.com.au Tyssen

    @Mick glad I’m not the only one then. ;)

  • Ryan Wray

    What a great plugin!

    A lot of people don’t seem to realise that for the people that are instantly interested in this, it’s not like learning a new syntax. It pretty much extended CSS selectors.

  • Eric

    No, people get it… it’s just… another syntax, however small the difference is between CSS selectors and this crap it’s still another syntax…

    I can do this stuff much faster with my editor’s macros than trying to devise some pseudo code. Even for the more complex example I could literally hold down Ctrl+Shift and tap 14 keys and name the ids. It takes absolutely no brain cycles that way… much faster IMO.

    • http://www.optimalworks.net/ Craig Buckler

      Interesting. But how long did it take you to learn and master those keyboard shortcuts? Do you always remember the right key combinations? And do you have shortcuts for every HTML tag?

      You can still use Zen with pure CSS selector syntax and ignore the stuff you find complicated. But is ‘ul>li*5′ really that difficult to understand?

  • arts-multimedia

    I’ve got already tooo much shortcuts in my head, I can’t cope with yet another set, so I let this cup pass.

  • http://galengidman.com/ fendeanson

    Unbelievable… there will be another download of the Dreamweaver plugin in about 30 seconds.

  • WebDonkey

    Can anyone get Zencoding.vim working in gVim for Windows? It seems Ctrl-Y command is not recognised.

  • Avinash

    It does not look intuitive. Its like learning new language.

    • http://www.optimalworks.net/ Craig Buckler

      It’s only new if you’ve never encountered CSS selectors!

  • WebDonkey

    I see it like learning new shortcuts for your text editor!

  • Jane T

    Thanks so much for this, it’s already saved me a good chunk time.

  • http://www.brothercake.com/ brothercake

    I’d be interested to hear from those who are incorporating this into their workflow — in the overall scheme of things, are you really saving time? Or is it just to save your fingers!

  • FugueNation

    This is quite a cool tool for advanced users. I mean sure people still learning and muddling through html might find it weird, but after you groke html this is godsent, guess that’s why they call in Zen, and not Cake or something like that. It’s for the masters

  • mohit

    i thnink ths site point is very help full for me…..
    check a result

    http://www.backendcode.com/

  • DevJunk

    This is great! Thanks for the tip