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.

Advertise here with BSA

SciTE – My New Favorite Editor

SciTE is (freely) available for both Linux and Windows, but this article will dedicate itself to the Linux install process as it is the only environment in which I’ve set it up. Furthermore, the details of the installation process will be specific to Ubuntu 6.10, as it is my distribution of choice, but the install process itself should be similar on just about any version of Linux.

Installing SciTE

SciTE is easily available to install by executing the following in a terminal:

sudo apt-get install scite

After you enter your password, SciTE will be automatically installed and setup. You can also install SciTE using Synaptic Package Manager, but I prefer the command line. SciTE can be run by entering scite in the command line, or using the menu: Applications > Programming > SciTE Text Editor.

By default, SciTE doesn’t include the snippet functionality offered by TextMate, but incorporating all of the hard work by Mitchell, SciTE Snippets are easy to implement.

Implementing SciTE Snippets

I spent some time trying to grasp how to actually install the snippets plugin Mitchell developed. Following his documentation proved to be quite useful and I had SciTE Snippets up and running after a bit of trial and error. It involved a process that some people new to Linux may find intimidating, so I’ve decided I would try to use the SciTE binaries offered on the site. Not only do you get working Snippets, you’re provided with a new look and feel for SciTE itself. A large library of Snippets are included to work with and add upon and I found it to be a great starting point for using Snippets in SciTE.

The binaries Mitchell offers are stored on Google Code and available for Windows as well as Linux. Download the latest Linux Binaries (scite-tools_linux_bin_r3.tgz at the time of this writing) as well as the Source Code (scite-tools_src_r3.zip at the time of this writing) which will come in useful later.

Extract scite-tools_linux_bin_r3.tgz

tar xzvf scite-tools_linux_bin_r3.tgz

Copy the new SciTE binary over your installed version

cd scite-tools_linux_bin_r3
sudo mv /usr/bin/scite /usr/bin/scite.bak
sudo cp SciTE /usr/bin/scite

The binary has now been copied to your existing installation, it’s an updated version compared to the one offered in the Ubuntu repositories. You’ll notice that if you run SciTE, not much has changed; we’ll still need to copy over Mitchell’s configuration files as well as his included snippets.

Extract scite-tools_src_r3.zip:

unzip scite-tools_src_r3.zip

Implement configuration and Snippets:

cd scite-tools_src_r3/
sudo cp -R * /usr/share/scite/

Just to be clear, not only have you copied over the configuration and included Snippets, you’ve also copied the source. If you feel the need to remove the extra files, feel free to do so. Now that the configuration files have been copied, you can run SciTE again, and you’ll see it’s received quite a makeover:

SciTE Snippets are now at your disposal using the CTRL+i keyboard combination after typing your trigger.

Customizing SciTE Snippets

While Mitchell includes many of his personal Snippets, I have a certain way of writing markup, style, and code. Each developer will want to make adjustments to existing snippets — as well as add some — in order to streamline his process even further and take full advantage of their presence. Managing your Snippets is actually quite easy if you follow the conventions established by Mitchell. Your snippets are stored in /usr/share/scite/scripts/ and organized according to language.

Creating Snippets is well documented on Mitchell’s site, and he even offers a Ruby Snippet Generation Script which can come in quite handy. Personally, I found the example Snippets offered in /usr/share/scite/scripts/html/snippets.lua to be most helpful in understanding Snippets and how they worked. I simply manage the snippets I wish to use in that file and it’s worked out well so far.

Mitchell has provided a really great tool for many people, free of charge. He has provided screencasts which show his Snippets in action, including a demonstration of how to use scopes, a very powerful feature he’s included.

Customizing the SciTE interface

When using SciTE for the first time, I was surprised not to find a Preferences dialog. Like anybody, I have preferences as to the type used in my editor, so I was looking to make that simple change. Instead of a Preferences dialog, you’ll need to edit a configuration file. While I’d much prefer to have a GUI dialog, having to edit a configuration file really isn’t that big of a deal to me, but I know many people would look at the application as inferior for that very reason.

Regardless, the configuration file can be edited by selecting Options > Open Global Options File within SciTE. The associated file holds all of the preferences you’ll want to tinker with to get SciTE to look just how you want it. If you’re using Mitchell’s configuration, you’ll notice he took the time to reorganize this file, making it very easy to manage.

SciTE (especially with Snippets) is my new favorite tool

I’ve found that creating Snippets can be a lengthy process, but one that offers great benefit. Using Snippets allows you to work at a much faster pace without getting ahead of yourself and losing focus. It takes away much of the tedious aspects that come with writing markup. The speed benefits alone made switching from Bluefish/Quanta worth it. I have a feeling that many editors will incorporate such a feature in their upcoming releases.

It goes without saying that SciTE has all of the features you would expect in an editor: line numbering, code folding, syntax highlighting, etc. I’m very pleased to make the switch to SciTE, and I definitely recommend it to anybody who isn’t willing to fork over the cash for a copy of E. I’ve only been working with SciTE a short time so far, so if anybody has any tips or tricks they’re willing to offer, it would be great to post them as a comment.

Advertise here with BSA