Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Aptana - Zen Coding

text editor with shortcut coding plugin

2:16 pm on Jan 30, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
votes: 0

not sure which forum this should go in (HTML, JS, PHP, WYSIWYG, CSS (for the Zen coding bit!)), but recently in the back of my mind has been the need for a new text editor, have read all the threads with recommendations, personally have used HTML-Kit 2.92 for years but have never felt the need to update to the paid version.. I'm mean and also my needs have changed over the years. HTML-Kit is pretty much customised the way I like it but I know I'm still only using it because I can type code faster than learn new shortcuts, and or use my custom snippets and they and the default page setups are fine for my needs so far, but technology is overtaking it.

But last night while aimlessly surfing I came across the smashing mag post about Zen Coding [smashingmagazine.com] (I'm only a year + out of date :o)

This appealed (obviously) generating the HTML (also does CSS) via CSS like shortcuts or rather abbreviations.. well duh :)

skip to end of that post, Zen Code is fully supported in Aptana Studio [aptana.com] hmm that's an editor (or IDE actually) and I'm looking for one of those anyway.. Suzy watches videos and searches some keywords.. it has native JS (with jquery, mootools etc. libraries via plugin), HTML, CSS, support via plugin there is PHP support/debug and more! probably too much more for me, but it's sounding familiar to this non-tech speak person.. so install it is

once installed, updated some plugins (obvious ones, jquery, php etc are available right from the workbench homepage menu) installation it's a bit slow, have to keep restarting Aptana, but so far is worth it

next back to what I wanted to see, the Zen Coding Plugin.. had to search to find it, think it's probably in Studio 3 (still Beta?) but not offered in Studio 2 by default - so anyway found it here Zen Coding plugin for Aptana (Eclipse IDE) [github.com] easy peasy, I didn't follow the outdated way of adding the plugin via a project that appears on most blogs and older versions of this plugin, there is a link & instructions under "installation".. this gave me a new menu with loads of functionality like matching tags, selecting by tag in the outline, wrapping (multiple lines/elements!)

typed a line in an HTML file, familiar to CSS coders

hit CTRL+E (or, tab if it's enabled, or there is a menu command) got:

<div id="main">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

then I typed:


selected all three lines, chose "wrap with abbreviation" from the menu (there is a keybord shortcut too) typed:


didn't need the number of li items, it's clever enough to figure it out. - got:

<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>

There is way much more, and output format can by changed to suit, HTML or XHTML - for those who like a quick preview pane, it has an IE one built in, and a FF one can be downloaded - though there are one button clicks to open in your browsers after you set them all up. probably I've not even found the half of it yet, but I haven't been this excited about a text editor in ages.. and this is only Aptana Studio 2 (didn't go for 3 as I can't quite cope with a beta until I get used to the stable)

Aptana also gives one click access to a targeted DOS prompt terminal, I can now type in the compass/sass watch commands, which is something else I've been playing with lately, without having to remember the paths

I believe the Zen Coding plugin can be installed on quite a few different editors, Notepad++, Textmate etc

I think I'm in heaven, have already added in some more abbreviation snippets, but there's fairly wide range in there already, you can also add in CSS snippets/abbreviations as well as HTML ones, specially good for those long properties..

e.g. in a CSS file type "brad" (without quotes) then CTRL+E or tab and you get:

-webkit-border-radius: radius;
-moz-border-radius: radius;
border-radius: radius;

the first occurrence of the value "radius" is selected .. type an actual value in there and all 3 occurrences get updated at the same time.

Anybody using Aptana? any pros or cons you want to share?

or what about this style of shortcut coding, Zen Coding, anyone using that?
10:15 am on Feb 1, 2011 (gmt 0)

Senior Member

joined:Jan 27, 2003
votes: 0

Just installed this, and have to say does have some very nice features. I think "Zen Coding" would take some getting used to, but is certainly impressing people in the office ;)

Definitely very quick with autocomplete options too, which also looks very handy.

One note that I had to manually run as administrator on Win 7 to get things towork properly.
10:19 pm on Feb 4, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
votes: 0

Thanks Andy, keep me updated on how you/your staff get on!

I've found a little (non-essential) project, actually the SPF HTML & CSS Comp.

for this I'm going to try and force myself to go cold turkey and use Aptana, Zen Coding & Compass/Sass all in one go.. I know if I don't choose a non-essential project I'll never get the courage to switch.

I will let you know if I cheat (more that is) because:

** I cheated already **
The contest calls for HTML & CSS only, no JS or images so I had a lot of IE filters to work with and as they work differently across versions I did them by hand in my trusty HTML-KIT.. but once done they were duly pasted then Sassified, before I did anything else - so starting from now OK ;)

btw interesting result on the Sassification.. posted in more detail here [webmasterworld.com]