Zen Coding – Have you Tried it Yet?
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 :-
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 :-
- Aptana, crossplatform
- Coda — via TEA for Coda, Mac
- Espresso — via TEA for Espresso, Mac
- TextMate, Mac. Also can be used with E-texteditor for Windows (Expand Abbreviation only)
- editArea — online demo
- Visual Studio — external download, Windows
- textarea — online demo
Partial Support (“Expand Abbreviation”) is provided for :-
- TopStyle, Windows
- Sublime Text, Windows
- GEdit — external download, crossplatform
- Dreamweaver CS4, Windows, Mac
- UltraEdit, Windows
- BBEdit/TextWrangler — external download, Mac
- Emacs — non-official plugin
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.
I had never tried zen coding now i will thanks for the information
It is good to see people creating simpler ways to write code.
thanks for the info. I am not a programmer. This is a Great site. thanks,
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!
That is awesome! Helps with lazy people like me.
Thanks for the info. I trying to covert a static page into a wordpress log. thanks again.
HTML coding is real disaster for newbies and I am so tired of explaining it to them. I need to know more about this new tool…
Tell me please – with the Russian language, this plugin will work? Or Not
Tell me please – with the Russian language, this plugin will work?
Its a new thing for me. Well i think it will save our time with good development. I used it and found some bugs. But i think overall it is great.
What a great plugin. First time I hear about it actually. But already like it
Nice Plugin it is
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!