Zen Coding

I wrote my first line of HTML when I was a teenager, and I write a lot of HTML today. And writing HTML just got easier for me.

Recently, I discovered zen coding. I'm surprised I didn't see it earlier, and in fact I'm surprised I didn't even think of it earlier. It's simply brilliant.

If you haven't been introduced to zen coding yet, allow me to expand.

But first a little background.

CSS (cascading style sheets) is the language used to define style and layout properties for HTML markup.

If you want to make some text red... you use CSS. If you need a 40 pixel left margin... you use CSS. And anymore these days, if you want to do just about anything to change the look of the pixels in your HTML UI... you use CSS.

Before CSS properties can apply to an element or elements, however, they have to know which elements should be affected. You know how you have to highlight some characters in Microsoft Word before you can hit the bold button and affect them? Same thing. So CSS properties are grouped into a CSS rule and at the start of that rule there is a CSS selector. I talk much more in depth about all of this in my book CSS for Windows 8 App Development.

So the entire job of the CSS selector is to select some HTML elements very specifically. Something like "I'd like these CSS properties to apply to all paragraphs with the 'narrow' class specifier that are in the second div of the table called 'main'".

Well, the author of zen coding, Vadim Makeev, took this concept in 2008 and turned it on its head, and Sergey Chikuyonok and other contributors continue to evolve it today. Vadim created zen coding, which allows you in a simple text editor to write something that roughly resembles a CSS selector, and then it writes the HTML that selector would imply. This saves a lot of typing.

The zen is an engine whose functionality (magic!) is available in a variety of popular text editors. And now, if you're using Web Essentials with either Visual Studio 2012 or Visual Studio 2013 (preview), you get zen coding support. It won't work in an Express version of the product simply because the Express versions don't allow the installation of extensions.

So let's have a look at this zen coding.

Let's say you you want to write a quick table with a div in the first cell that has a class of start and contains the text "Start Here". You could type the whole thing out by hand or using zen coding you could type...

 
table>tr>td>div.start{Start Here}

...and then, when I trigger the zenformation (that's my word) it would become...

 
<table>
  <tr>
    <td>
      <div class="start">
        Start Here
      </div>
    </td>
  </tr>
</table>

Here's how I would read that zen line, "give me a table with a child tr with a child td with a child div with a class of start and Start Here for content." And zen would give me just that with no questions asked. That's the nice thing about computers... no questions asked.

Here are the other symbols you can use when you're getting your zen on and what they'll do for you.

The # (pound) symbol allows you to specify a value for the id attribute of an element. So div#zipper will give you <div id="zipper"></div>

The . (period) symbol allows you to specify a value for the class attribute of an element. Zen typing div.velcro will give you <div class="velcro"></div>.

The [] (square brackets)  let you specify whatever attribute and value you want using the syntax [name=value]. If you want to add a custom attribute to a div element, you would use div[data-mycustomattribute=somevalue].

The > (angle brace) symbol allows you to indicate that whatever you put on the right should be a child of whatever you put on the left. Specifying div>p should result in a paragraph that is a child of a div.

The + (plus) symbol means that whatever is on the right should be a sibling of whatever is on the left, so div+p will put the elements at the same level like <div></div><p></p>.

The ^ (carat) walks back up the tree one generation meaning that div>p^p will give you a div with a child of p and then with a sibling of p. This is because before the second p is created, we have walked back up the tree to the level of the div.

The * (asterisk)  used in conjunction with an integer (i.e. *3) multiplies an element the specified number of times. To create 15 divs you would use div*15.

The {} (angle braces) should wrap some amount of text that you want to be created as the text content of the element. A paragraph of some text could be created using p{some text}.

The $ (cash) symbol can be used to get a serial number in that text content. Triggering a zen after typing div*14{$} would get you 14 divs with the numbers 1-14 within them.

And finally the $$ (double cash) will give you the same serial numbers except padded with leading zeroes for those times when that's just what you need.

And there's actually one more little trick that you can include in your zen coding. Lorem ipsum text. Lorem ipsum random latin text is fun but it's also very effective. When the brain sees a site full of text, it naturally begins trying to make sense of it. When the brain recognizes the familiar lorem ipsum sample text, it very quickly dismisses the content and focuses on the design; which is the whole intent. So it sounds like a mere convenience, but I would argue that it's a big time saver.

To include sample text, simple use the keyword lorem with a trailing integer to represent the number of words. So lorem10 will give you 10 words of sample text. The default if the trailing integer is omitted is 30 words.

Here's a little lorem ipsum for your general edification...

Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.

That's it. HTML written in dramatically fewer keystrokes. If we keep inventing software to reduce keystrokes, pretty soon I'll be able to write an app by pushing one button. Just one... very smart button. Let's go.