Zen Coding – Have you Tried it Yet?

Published On January 26, 2010
13 Comments Leave a Comment

Zen Coding

While coding HTML pages, I have always wondered if there was a better, quicker and easier way to write lengthy and repetitive code that is present in almost every web page. I asked myself time and again, if there were people who thought on the same lines to make the code more crisp and abbreviated.

To my amusement, I recently came across an innovation by Sergey Chikuyonok called the “ZEN CODING“. Zen Coding provides a really fresh angle to write markup code for HTML & CSS. It was really interesting to read how Sergey gave a new definition to the old coding style and has created a landmark for software companies to follow.

To understand the basics, Zen Coding can be defined as a plugin to quicken coding. In layman terms, it can also be understood as a zip file that can be expanded or unzipped on demand. It is made up of two main components – one is the abbreviation expander and the other is the context-independent HTML-pair tag matcher.

One of the simplest ways of creating a web page is to write fresh code every time. Another strategic way is to make code snippets (pieces of reusable code), save them, and use them later to quicken the process. With Zen Coding, you don’t have to do either of these. Zen Coding allows you to write short abbreviated code that just expands itself on a single keystroke saving you loads of time.

Starting with the Basics

For a start, what if I told you that this piece of code :-

[html]div#menu[/html]

can produce this :-

[html]<div id="menu"></div>[/html]

OR,

[html]ul#name>li.item[/html]

results in :-

[html]<ul id="name">
<li class="item"></li>
</ul>[/html]

Isn’t this super cool ? Here are some more examples to make you beg for it :-

Advance Usage Examples : Element Multiplication and Count

[html]ul#name>li*4>a[/html]

results in the following expanded code:

[html]<ul id="name">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>[/html]

[html]div#j$-test*5[/html]

produces

[html]<div id="j1-test"></div>
<div id="j2-test"></div>
<div id="j3-test"></div>
<div id="j4-test"></div>
<div id="j5-test"></div>[/html]

To get you interested further, here is a demo video by Sergey Chikuyonok himself :-

Zen Coding Video

Demo – Try it yourself

Demo (use Ctrl + , (comma key) to expand an abbreviation, requires JavaScript)

How to use the Zen Coding Plugin

If you wish to start working with Zen coding, you would need to download the required plugin that supports your code editor. This plugin enables communication between the editor and the Zen Code. As of now, full support exists for the following editors :-

Partial Support (“Expand Abbreviation”) is provided for :-

More Info :- http://code.google.com/p/zen-coding/

Conclusion

A few advantages of the Zen Coding and how can it make your life easy.

  • Zen Coding uses the KISS formula :- “Keep It Short and Simple”.
  • It takes you to a higher level of coding that makes you feel like a Zen, helping you identify your real potential.
  • Saves time and energy while coding.
  • Provides the same qualitative output.
  • It brings the snippets to a new level.
  • If you learn the short codes by heart (which are plain logic),  it can double or triple your work productivity.

To conclude, I would say that the flavor of the new spice, called Zen Coding, has created a new excitment in me to write the same code differently. Chikuyonok’s splendid work has created a new story of success. Thus, I highly recommend application of zen coding to all my readers.

13 replies on “Zen Coding – Have you Tried it Yet?”

Bridal jewelry Reply

I’ve fallen in love with Zen Coding, too. I haven’t played with the Zen CSS plugin, but I plan to, even though I think there has been discussion that it isn’t much faster than writing plain CSS.

My only gripe is that when you start creating children, you can’t get back to the parent element and make siblings. For example, h1>a+h2>a+p would nest the h2 inside the link of an h1. Maybe support for parentheses will come to make (h1>a)+(h2>a)+p work, then nothing would stop you from creating an entire document in one Zen line! 🙂

I’ve fallen in love with Zen Coding, too. I haven’t played with the Zen CSS plugin, but I plan to, even though I think there has been discussion that it isn’t much faster than writing plain CSS.

My only gripe is that when you start creating children, you can’t get back to the parent element and make siblings. For example, h1>a+h2>a+p would nest the h2 inside the link of an h1. Maybe support for parentheses will come to make (h1>a)+(h2>a)+p work, then nothing would stop you from creating an entire document in one Zen line! 🙂

Leave a Reply to Stephen hamett Cancel reply

Your email address will not be published. Required fields are marked *