This was before the days of the Gedit implementation of snippets so I did my best to replicate TextMate in SciTE. It was awesome. Incorporating snippets changed the way I worked by orders of magnitude, and the implementation found in TextMate is the bar to which I compare every other editor I’ve tried.

What’s great is that snippets seem to have hit the mainstream. Besides OS X specific editors such as Panic’s Coda and MacRabbit’s Espresso, platform independent editors and IDEs have their own implementations as well. Apart from E TextEditor on Windows, however, I haven’t seen an editor implement snippets to the full effect of TextMate.

The big deal about snippets

The deciding factor for me is the ability to have multiple stops per snippet. This gives you the ability to not only share snippets (through Bundles or otherwise) but also very easily write your own. Every designer/developer has his or her own set of tricks, and a generic bundle isn’t going to cover you 100%. The great thing about a solid implementation of snippets puts the power in your hand to finish the job and add the final touch of customization you need.

I’m always on the hunt for a newer, better editor. It’s a curse I’ve had for years and one that will never go away. To be brutally honest, snippets are the only thing holding me to TextMate at this point, as there are a number of strong contenders on the market now, targeted specifically toward Web developers. They’re also gorgeous to boot.

I was to the point where I was simply waiting for the various editors to publish a few dot releases including a solid snippets implementation a la TextMate. That is until I discovered zen-coding. My mind was blown all over again.

zen-coding takes snippets to a new level

zen-coding touts itself as a “set of plugins for HTML and CSS hi-speed coding” and my gosh it lives up to the name. The snippets implementation provided by zen-coding are based on specification drafts, and a heck of a lot has been included by default.

• HTML elements (based on the HTML5 draft spec)
• HTML selectors
• CSS properties (based on the CSS3 draft spec)

Instead of going over the documentation here, I’d just like to call a bit of attention to the HTML selectors linked above. This is truly what made my jaw drop.

The biggest calling point for zen-coding for me is its implementation of HTML selectors as snippet triggers. zen-coding includes an entirely new angle to writing markup, and it facilitates the feature by letting you write HTML based on CSS selectors. It’s so simple it’s confusing at first. I think it’s best explained by doing a quick before and after. If you were to type:

div#name.one.two

and follow that with the zen-coding plugin keystroke (CMD+E in TextMate), the plugin will reformat the line as:

<div id="name" class="one two"></div>

Let’s get a bit more advanced, typing:

ul#name>li.item

will result in:

<ul id="name">
    <li class="item"></li>
</ul>

Last, but not least:

p.one+p.two

will result in:

<p class="one"></p>
<p class="two"></p>

It doesn’t stop there. zen-coding has included an even more elaborate set of possibilities on top of valid CSS selectors.

Element multiplication and variables

A really fascinating feature of the CSS selector abilities comes from element multiplication. Perhaps one of the most tedious things to mark up (when not working from existing copy) is a list (or eight). zen-coding does its part to lighten the load, quite a bit:

ul#name>li.item*3

provides:

<ul id="name">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

By including a multiplication modifier, you can control how many child elements are included in the snippet!

The other really interesting implementation deals with variables in snippet output, which is neat:

select>option#item-$*3

gives you:

<select>
    <option id="item-1"></option>
    <option id="item-2"></option>
    <option id="item-3"></option>
</select>

By including the dollar sign, you can include a reference to the index of the element you’re multiplying. Although really specific, it could (and probably will) come in very handy from time to time.

I mean if you’re not impressed yet, I just give up!

See it in action

There are a few screencasts referenced on the Google Code page for zen-coding which illustrate the above really well:

• Zen HTML features, 1.х branch, screencast
• Zen CSS features, 1.х branch, screencast
• Aptana Zen HTML features, 2.х branch, screencast

Definitely check them out if my explanation is still a bit foggy, as the screencast really helps display what this plugin is capable of.

Compatibility

One of the finer points of zen-coding is the fact that the developer(s) are taking the time and effort to publish this genius for multiple editors both for OS X and cross-platform. Currently, according to the Google Code page, the plugin has versions for:

• TextMate
• Aptana
• Coda
• NetBeans
• Espresso

Unfortunately, I didn’t find a download link to the Espresso Sugar, but I will keep my eyes open for that as well. Update: the lead developer, in his comment below, let us know that the Sugar is included by default in Espresso releases. I’ve checked out the plugin both in TextMate and Coda and I can say that this plugin alone makes Coda a true contender for more advanced developers looking for a better implementation of Clips (until Coda natively supports snippets (fingers crossed for 2.0 bigtime)).

Note: to fully install in TextMate, you’ll need to download three bundles. At the time of this writing, the three download links are titled as:

• Zen.Coding-TextMate.v0.3.zip (implements zen-coding)
• TextMate.Zen.HTML.1.3.zip (implements HTML functionality)
• TextMate.Zen.CSS.1.3.zip (implements CSS functionality)

Be sure to install each bundle you need!

Non OS X users may find a bit of luck in that the plugin is released for both Aptana and NetBeans, two very popular IDEs as of late. Windows users should be able to use the TextMate bundles in E as you’re accustomed. While there is definitely activity on the Google Code page, I’m not positive that other editors will be supported in future releases.

I love Web design.

This is the line of thinking that really gets me excited about what I do. zen-coding has again completely changed the way I approach writing code, and has raised the bar to a new height. What else is great is that this functionality was provided out of someone else’s love for the industry as well. Their great idea is now making my life even easier, and that cycle will definitely continue in the Web design community.