Sean Walther's Blog

HTML Zen Coding: Speed up HTML creation

HTML Zen Coding is a plugin for many popular HTML editors that gives the web developer many tools for quickly building out HTML pages.  If you are comfortable (and enjoy) CSS selectors popular today in many frameworks (such as jQuery) then this may be for you.

When we build HTML documents, we are always building code that is repetitive, and we have ways of making that better.  Creative copying and pasting usually.  Sometimes I feel like I’m playing music on my keyboard when I do my copy paste and edit keyboards commands over and over.

With Zen Coding the process is much “simpler”.  You need to learn the syntax, which is straightforward for most selector friendly folks — but it will shorten your workload and let you do some things that you may have avoided before.

Officially supported editors are:

• Aptana/Eclipse
• TextMate (mac)
• Coda (mac)
• Espresso (mac)
• Komodo Edit/IDE
• Notepad++ (windows)
• PSPad (Windows)
• <textarea> (in HTML)
• editArea (browser-based)

Traditionally I have used Textpad, but I’ve finally converted over to Notepad++ as my full time HTML/PHP/CSS/Javascript editor.  I am always in and out of Eclipse / Textpad / Notepad++ anyway.

Some cool features:

• Expand Abbreviation – This is the standard “do it” command, once you write a Zen Code statement, hit this and it will be expanded
• Wrap with Abbreviation – If you have a list of text (names, or anything really) you can expand them with a statement, and avoid copying / pasting the beginning / end of every line.
• Balance Tag – Highlights the opposite end of the current tag (useful when trying to figure out what another web developer has written if indents haven’t been maintained)

There’s really so much more.

An example is if I wrote :

div#container>div.section#header>div.nav>ul.pnav>li.item$*6>a

The output is:

<div id="container">
<div class="section" id="header">
<div class="nav">
<ul class="pnav">
<li class="item1"><a href=""></a></li>
<li class="item2"><a href=""></a></li>
<li class="item3"><a href=""></a></li>
<li class="item4"><a href=""></a></li>
<li class="item5"><a href=""></a></li>
<li class="item6"><a href=""></a></li>
</ul>
</div>
</div>
</div>

How cool is that?  I know this will save me some time once I’m comfortable with it.

You can download the plugin of choice at: Zen Coding

Check out the demo video:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Tags: Aptana, Coda, css selectors, Eclipse, editArea, Espresso, Expand Abbreviation, HTML, html editors, jQuery, komodo, NotePad, PSPad, Textarea, TextMate, web developer, Wrap with Abbreviation, Zen Coding

2 Comments to HTML Zen Coding: Speed up HTML creation

Leave a comment

Name (required) Mail (will not be published) (required) Website

CAPTCHA Code *

Notify me of follow-up comments by email.

Notify me of new posts by email.