WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0

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.

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0
  1. xixi left a comment on March 23, 2016 at 12:21 am |

    A. Foaming technique may reduce energy consumption resulted from air circulation of barrier-strip heat insulation molding. Non-foamed K-value is 2.3 to 3.5, and the K-value of foamed profile can be lowered to 1.5 to 2.
    B. Preventing siphonage effect: PA66GF25 heat insulating strip has certain water absorption. In winter, steam generated from air circulation inside profile cavity is absorbed by heat insulating strip, and brittle rupture will occur when coefficient of linear expansion reaches 30%. This will not happen to the profile after foaming, and PU foaming absorbs no water.
    1?Stopping convection phenomenon in barrier-strip cavity, and improving heat-insulating performance of doors and windows.
    Foaming technique may reduce energy consumption resulted from air circulation of barrier-strip heat insulation molding. Non-foamed K-value is 2.3 to 3.5, and the K-value of foamed profile can be lowered to 1.5 to 2.
    2? Preventing siphonage effect and seepage phenomenon resulted from the physical connection part between heat-insulating strip and metal.
    PA66GF25 heat insulating strip has certain water absorption. In winter, steam generated from air circulation inside profile cavity is absorbed by heat insulating strip, and brittle rupture will occur when coefficient of linear expansion reaches 30%. This will not happen to the profile after foaming, and PU foaming absorbs no water.
    3?Preventing shrinkage of heat-insulating strip that will break away from connection due to freeze expansion after hydrops inside thermal-insulation cavity.

    4?Help to improve profile’s integral rigidity.
    Effectively making up for the insufficient press-in in profile’s insertion process that leads to defective goods.
    http://www.hgcx.cn/en/index.php?p=product_show&id=330&c_id=57&o_id=&lanmu=12

  2. Stephen hamett left a comment on July 15, 2012 at 2:11 am |

    these plugins are really amazing, i try it on my web and it really work good, thanks,

  3. Swathi Reddy left a comment on August 29, 2011 at 2:40 am |

    I had never tried zen coding now i will thanks for the information

  4. Nimala left a comment on August 7, 2010 at 11:47 am |

    It is good to see people creating simpler ways to write code.

  5. john left a comment on May 6, 2010 at 11:03 pm |

    thanks for the info. I am not a programmer. This is a Great site. thanks,

  6. Bridal jewelry left a comment on May 5, 2010 at 10:54 pm |

    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! 🙂

  7. Kalvster left a comment on April 29, 2010 at 11:57 pm |

    That is awesome! Helps with lazy people like me. 😛

  8. john left a comment on February 20, 2010 at 12:48 pm |

    Thanks for the info. I trying to covert a static page into a wordpress log. thanks again.

  9. Vitaliy Syromyatnikov left a comment on February 17, 2010 at 7:14 am |

    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…

  10. Auto site left a comment on February 10, 2010 at 10:30 am |

    Tell me please – with the Russian language, this plugin will work? Or Not

  11. Mebel left a comment on February 7, 2010 at 4:17 am |

    Tell me please – with the Russian language, this plugin will work?

  12. abhi left a comment on February 4, 2010 at 12:43 am |

    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.

  13. V1P3R left a comment on January 31, 2010 at 10:30 am |

    What a great plugin. First time I hear about it actually. But already like it 🙂

  14. Rich left a comment on January 27, 2010 at 12:01 am |

    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 Comment

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

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project