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 :-
- 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.
