Monday, November 23rd, 2009

Zen Coding: Generating HTML from selectors

Category: HTML, Utility

<p>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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" 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!

Related Content:

  • Server-side selector provides flexible DOM manipulation
    jQuery made DOM manipulation on the client side much more concise thanks to its CSS Selector mechanism, among other things. Now, the CSS selector...
  • Some of the Zen of Volta
    Coming from Microsoft Labs and still in its early gestation, Volta is a methodology allowing developers to create apps without regard to eventual...
  • HTML from DOS batch
    Instead of echoing plain text to an output file, echo HTML code which can be loaded into a Web page on the fly....
  • HTML from SQL
    Don't want to give developers access to your databases? This script can help you push them updates via HTML...
  • Cross-browser friendly HTML code
    Here are some basic guiding principles to help Java developers build Web applications that start out with high cross-browser compatibility, without...

Posted by Dion Almaer at 6:45 am
13 Comments

+++--
3.2 rating from 19 votes

13 Comments »

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”: http://github.com/jamespadolsey/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 http://mini.softwareas.com/screencast-vim-sparkup-plugin-by-aescnt-makes

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:
$(‘#myNode’).append($.generate(‘div.wrapper>div.first+div.second’));

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.