Monday, November 23rd, 2009

Zen Coding: Generating HTML from selectors

Category: HTML, Utility

Normally we use CSS selectors to find and tear apart HTML. Sergey Chikuyonok’s jujitsu move is to do the opposite. With Zen Coding you take a CSS selector like this:

  1. html:xt>div#header>div#logo+ul#nav>li.item-$*5>a

and it generates an HTML structure like this:

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="" xml:lang="en">
  3. <head>
  4.     <title></title>
  5.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  6. </head>
  7. <body>
  8.     <div id="header">
  9.         <div id="logo"></div>
  10.         <ul id="nav">
  11.             <li class="item-1"><a href=""></a></li>
  12.             <li class="item-2"><a href=""></a></li>
  13.             <li class="item-3"><a href=""></a></li>
  14.             <li class="item-4"><a href=""></a></li>
  15.             <li class="item-5"><a href=""></a></li>
  16.         </ul>
  17.     </div>
  18. </body>
  19. </html>

You can check out a demo or try out support in various editors (Aptana to TextMate).

Now I want to create a Bespin plugin to do this too!

Posted by Dion Almaer at 6:45 am

3.2 rating from 19 votes


Comments feed TrackBack URI

I downloaded the Netbeans zip, but I could only find Russian instructions.

Comment by Nosredna — November 24, 2009

What happened to all the other comments? o.0

Comment by sixtyseconds — November 24, 2009

Yeah, looks like Ajaxian lost some stuff. Wonder if they had to restore from backups or something?

Comment by jonhartmann — November 24, 2009

I had big problems with the Aptana version; it took me forever to figure out what to do with the files, and once I got them into place, it just broke Aptana. Basically, as long as it was installed, like 4 of my keys just didn’t work. I’d assume it was some attempt to tie into them for shortcuts, but it was just horking things up for me.

Comment by jonhartmann — November 24, 2009

This reminds me of James Padolsey’s “Satisfy”:

Comment by Integralist — November 24, 2009

Did anyone get it working with Aptana?

Comment by sos — November 24, 2009

How is this better than HAML?

Comment by mehas — November 25, 2009

I found via the comments there sparkup, a similar tool which works for vim, and made a quick screencast

Comment by Michael Mahemoff — November 25, 2009

what I’d really like to see is, somebody implementing this reverse logic in a JS, like imagine this jQuery:

normally generating HTML in JS with Strings is always such a code mess.

Comment by matasp — November 25, 2009

@matasp – I think I could, quite possibly, quit web development if I saw that jQuery plugin used. $(”) is already fugly…

Comment by sixtyseconds — November 25, 2009

…div markup stripped….*sigh*

Comment by sixtyseconds — November 25, 2009

I had trouble getting it to work in Aptana, until I upgraded to Aptana 2.0 — now I’ve got it working, but I’m excited about getting under the hood and adding my own customizations. Right now I’ve got to strip out all of the russian language stuff because it won’t let me save it right now.

Comment by oknate — November 29, 2009

very interesting. I’ve just sen this tecq. and I like it.
I will try , thx

Comment by kaberdey — February 2, 2010

Leave a comment

You must be logged in to post a comment.