Zen Coding – a very fast way of generating (HTML) elements in your editor!

Surfing the net is a free ride accross a living planet, offering many inspiring and amazing moments. If I were to pay for my rides on the waves of the internet I would be ruined by now! I love surfing unknown territorie, but some places keep returning value for time spend on viewing or reading the information on them. One such site is SMASHING MAGAZINE – this time I meet Zen Coding! From now on coding HTML or XML will never be the same (slow) process!

The princip of Zen Coding

As I experience Zen Coding it is a fast lane for inserting/handling tag-based elements. For instance XHTML and XML, which both use open (and close) tags. Lets start with this:

ul#menu>li.item$*3>a

Will result in this:

<ul id=”menu”>
   <li class="item1"><a href=""></a></li>
   <li class="item2"><a href=""></a></li>
   <li class="item3"><a href=""></a></li>
</ul>

So that one line of CSS-alike code will be replaced with the 11 lines of HTML markup! It is faster and you get HTML markup which is without typing errors! It is elegant and easy! What more can a programming nerd wish in the month of Christmas?

The rules you can use

It is actually not very difficult, if you are familiar with CSS. You could divide the typer and operators into 3 groups:

That is nice! Many users would be happy for that part alone, but the show has just begun! As it turns out – the Zen Coding is a snippet related idea…

Snippets – it even gets customizable!

In the original Zen Coding idea lies build in extensibility – you can customize it with your own “abbreviations” – in the file: zen_settings.js. That file is “simply” a JSON object defining which snippets/abbreviations should be available to which language. Looking through the JSON object I found many interesting abbreviations, let me just mention a couple:

CSS:  @i   =>   @import url();

XSLT: each =>   <xsl:for-each select="">                </xsl:for-each>

I decided to write my own snippet. It was simpel, no JSON involved, as I use the ZenCoding Visual Studio AddIn for Microsoft Visual Studio 2008.

Using Zen Coding with Microsoft Visual Studio 2008

I use Microsoft Visual Studio as my prefered editor, and there has been made an addIn for it which is called “ZenCoding Visual Studio AddIn”. It is easy to install and to set it up is not so hard. The only thing you need to do is to download, run and goto the “Tools > Options” and locate the “Environment > Keyboard”:

Here is where you define which keypresses should invoke which command. ZenCoding Visula Studio AddInn offers two commands, and you find them by putting focus to the “Show commands containing” and enter “zen” (see above).

Select the “ZenCoding.VisualStudio.ZenCodingAddInn.Expand” and put focus to the “Press shorcut keys”. Not you simply press the keys which you wish to use as shortcut to invoke the “Expand” command! I choose “[Ctlr]+[Shift]+[Alt]+,” – pic (almost) any shortcut you like. When you are done, press OK – and voila, you can start Zen Coding!

Adding your own snippet when using ZenCoding Visual Studio AddIn

One of the nice things with the ZenCoding AddIn is the way it handles adding your own snippets/abbreviations:

Again you open the “Tools > Options”, locate at the bottom “ZenCoding” options. Here you simply select Snippets and click New…. From there on it is a simpel matter of selecting Category, Abbreviation and of cause: Enter the value of the expanded abbreviation!

I often need to insert a remark that here I have messed up thing – well, I might have! So I decided to create such one – a remark. A comment you might also call it appears in two different ways, so I defined it in two forms – one for HTML and one for CSS. Nice and easy!

Conclusion

It is not everyday that something like Zen Coding appears! Looking at the thoughts behind it and the way it works it is a brilliant idea. This post have focused on giving you a quick start into Zen Coding – so I have not spend so much time giving credit to the people behind the idea (Sergey Chikuyonok), behind the article which made me investigate this concept (SMASHING MAGAZINE) or the man who have actually written the AddIn for Microsoft Visual Studio 2008 (Einar Egilsson). Let me therefor end by thanking them all! A great job all of you!!

Related articles/links:

• Zen Coding: A Speedy Way To Write HTML/CSS Code
• DEMO: Try out Zen Coding online
• ZenCoding Visual Studio AddIn
• zen_settings.js – the JSON object which containes the abbreviations defined
• fluentzen – a jQuery plugIn allowing you to create DOM element using Zen Coding abbreviations.

  For instance: $(‘body’).zen(‘table>tr*5>td*2′).css(‘border’,'1px solid red’).append(‘#myDiv’);

Share on Facebook