Zen coding for rapid HTML authoring

Writing HTML is fiddly. All those angle brackets, quotation marks, slashes and the rest have always tested my keyboard dexterity. Dreamweaver and other editors try to help, but none compare to a brilliant new(-ish) multi-editor plugin called Zen Coding.

Instead of writing HTML syntax, Zen Coding lets you write CSS selector-style abbreviations and hit a button to expand them to HTML. It’s lightening quick and lets you write HTML snippets in seconds. Simple additions to the CSS syntax allow for output of multiple tags (eg. li*2 becomes <li></li><li></li>
) and automatic numbering (eg. link-1, link-2). It’ll do even more clever stuff than that too, but I’m still a novice!

A really quick example:

blockquote#boxout>h2+p+ul>li*3>a[href="/link/"]

expands instantly to

<blockquote id="boxout">
<h2></h2>
<p></p>
<ul>
<li><a href="/link/"></a></li>
<li><a href="/link/"></a></li>
<li><a href="/link/"></a></li>
</ul>
</blockquote>

Filling the empty code with content is easy too because there’s a handy ‘next sensible spot’ keyboard shortcut to skip from the H2 to the P to the LI to the HREF etc.

The one gap for me is that I have to use a text editor to use the Zen Coding expansions. Most of my coding is done in Firebug or within our CMS so I can’t use the expansions directly where the code needs to be. I’ve always got a text editor open so it’s not a big deal, but a Firefox/Chrome extension or integration with a generic text expansion utility (as Paul blogged about previously) would be even more brilliant.

There’s a full tutorial on Smashing Magazine, including the rapid-fire demo video embedded below which shows just how fast it can be and what it’s capable of.

Quick CSS tip - alphabetise your properties

Since I first read about this technique about a year ago I've been using it without even thinking about, but I'm reminded how much of a time saver it is every time I work with CSS that isn't alphabetised.

Compare and contrast:

Unordered properties

.myclass {
    position:absolute;
    top:0;
    left:0;
    width:42%;
    margin:0 0 0 8px;
    padding:8px 10px 10px 10px;
    border:1px solid #e6e6e6;
    background:#f5f5f5;
    visibility:hidden;
    font-size:85%;
}

Properties in alphabetical order

.myclass {
    background:#f5f5f5;
    border:1px solid #e6e6e6;
    font-size:85%;   
    left:0;
    margin:0 0 0 8px;
    padding:8px 10px 10px 10px;
    position:absolute;
    top:0;
    visibility:hidden;
    width:42%;   
}


Image by Jan Tik

Blog publishing from Word

I've just created a new document in MS Word 2007 for the first time since I upgraded and there were two options presented: blank document or blog post. I'm not supposed to be writing a blog post right now, but the temptation is too good to resist.

Early signs are good, because Blogger is listed as a blog I can write for. The next step doesn't fill me with confidence because Word announces that when it contacts the blog provider my username and password may be visible to others. But I'm reckless, so carried on regardless.

I'm now writing my blog post in what looks like Word's normal editing screen, just with a few things removed. It's actually quite good.

How to write code (or anything else) much quicker with text substitution

Do you find yourself spending your days writing the same text over and over? You could save yourself hours of time by using text substitution software.

There are lots of text substitution packages available, but they all work in a common way - you set up shortcuts (small pieces of text), which when triggered are substituted with longer pieces of text.

Here's some shortcuts in action that I've set up for writing HTML:




Not just for writing code

The application of text substitution isn't limited to writing code. It comes in handy any time you find yourself writing the same text from day to day. For example, I find myself writing the phrase "writing for the web" a lot, so I've set up a "wftw" shortcut that does that for me. You can even set shortcuts for whole canned email responses to common questions and save yourself a whole load of time.

More information

For a great overview of the topic and the tools available for different operating systems, see the lifehacker article Save time with text substitution

How to quickly search the University Directory from the Firefox address bar

Is the way that you search the University Directory something like this?

1. Go to the University homepage
2. Click on Contacting People
3. Click on Directory
4. Type in the name of the person you're looking for
5. Click Search

Well, using Firefox's Smart Keywords functionality, you can do this a whole lot quicker, without even taking your hands off the keyboard. Here's how you set it up:

1. Navigate to the University Directory

2. Right click in the Surname field, and select Add a Keyword for this Search...

3. In the Add Bookmark dialog box that appears, give the bookmark a name and a short keyword. I've used "d" (for "directory").

4. Now, whenever that you want to search the directory, just go to the address bar (which you quickly do by pressing CTRL + L) and type "d" followed by the surname of the person you are looking for. Eg to search for someone with the surname Kelly, you'd type d kelly.

You can expand on this further and create keywords for the different types of searches that are possible with the directory - for example I also have a "de" keyword that searches the directory by email address.