zen-coding: turn those CSS selectors upside down

Web developers Sergey Chikuyonok and Vadim Makeev have built a nifty set of plugins called 'zen-coding' that work across a range of IDE's.

The niftiest idea from 'zen-coding' is a way of writing Html very very quickly, by a kind of reverse-application of CSS-selectors.

Ah, I think examples will show what words could never explain...

If you type:

div.name

and press the shortcut-key to invoke 'zen-coding' -- the snippet expands into this piece of html:

<div class="name"></div>

If you type:

div#name>p+p

and invoke 'zen-coding' -- the snippet becomes:

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

There are more complicated scenarios as well: if you understand CSS selectors, you'll wrap your head around it very easily.

Hence, zen-coding lets you write markup very very quickly.

I've built an online demonstration, a simple web app that uses the code from Sergey's aptana plugin.

These ideas have been re-implemented for emacs, and there's a vim re-implementation in the wild as well.

There's some very good screencasts around, here's one from Vadim and one from Sergey.

This is a cool idea. In the same way that JScript takes CSS Selector DSL and re-purposes them, 'zen-coding' squeezes extra utility out of this tiny DSL. What other DSL's can be used backwards, forwards, sideways? Can linq expressions be reversed for generating .net classes (rebuilder style)? Can SQL Select Queries be parsed and turned into DDL for creating a database schema? Can XPath be used as an XML generation tool?

It's also gotten me thinking about how this style of code generation can be applied to my favourite little hobby-tool, 'World's Simplest Code Generator'

WSCG has come a long way lately, as I've been using my bus-rides to make WSCG more powerful (typing on the HP-mini I got at Tech-Ed) adding more macros, built-in functions, an extensive help file, and some powerful operators called $ONCE and $EACH.

'Einar Egilsson' on Tue, 10 Nov 2009 08:03:15 GMT, sez:

That is incredibly cool! It's inspired me to start on a Visual Studio AddIn for this. I've already added a C# wrapper around the original python implementation using IronPython, since I don't want to port. Now I just need to work on the abomination that is the Visual Studio extension API and hookup some commands. I'll post it probably this weekend or next week when I have a little more time.

'lb' on Tue, 10 Nov 2009 08:09:04 GMT, sez:

@Einar -- brilliant!
I'd love to see it in visual studio.

But also, I'd love to see it implemented in IronPython, so I can try and get my head around adding it to 'MetaNote', the editor I'm (sometimes) working on.

Stick to it Einar, this is very cool stuff.

'Alexander Nikitin' on Tue, 10 Nov 2009 08:57:39 GMT, sez:

This is really cool. Have thought of it many times, but it turned out to be too complex, etc.

And that solution is pure, clean and nice :)

'Einar Egilsson' on Tue, 10 Nov 2009 12:49:05 GMT, sez:

If you just want to access it from an IronPython script then that is no problem. The library runs perfectly in IronPython, it only requires the re regular expression module. You just add the zencoding folder to your IronPython search path and then do something like:

>>> from zencoding.zen_core import find_abbr_in_line, expand_abbr
>>> abbr, startIndex = find_abbr_in_line('bla td', 6)
>>> abbr
'td'
>>> startIndex
4
>>> expand_abbr(abbr)
'<td></td>'

And then there's some extra magic around setting the insertion point, indentation etc. but nothing that should be a problem.

'mongo lloyd' on Tue, 10 Nov 2009 16:24:21 GMT, sez:

That's truly brilliant. One of those "why didn't I think of that?" ideas.

'Einar Egilsson' on Thu, 12 Nov 2009 20:31:55 GMT, sez:

ZenCoding Visual Studio AddIn for VS2005,VS2008 and VS2010b2 now available at: http://tech.einaregilsson.com/2009/11/12/zen-coding-visual-studio-addin/

'lb' on Fri, 13 Nov 2009 01:49:39 GMT, sez:

Brilliant work Einar!

Very handy stuff.

Now I have to work out how to configure it, and how to add snippets...

'Evgeniy Dolzhenko' on Mon, 23 Nov 2009 07:58:00 GMT, sez:

Also somewhat reminds me of http://rubyquiz.com/quiz143.html

name


website (optional)


enter the word:
 

comment (HTML not allowed)

All viewpoints welcome. But the right to delete any post for any reason is reserved. Don't make me do it. Comments may be republished, emailed to your loved ones or printed and used as toilet paper. Who reads this legal bit anyhow?

TimeSnapper_{Know thyself!}

TimeSnapper is a life analysis system that stores and plays-back your computer use. It makes timesheet recording a breeze, helps you recover lost work and shows you how to sharpen your act.

TimeSnapper won last year's Developer Competition at Larkware.com, and is used by over 10,000 people.