Zen Coding Is Ergonomic HTML Coding

Robbie Brandrick | 5/30/2013 10:44:51 AM

Introduction

As some of you may know, Visual Studio is one of my favorite tools for programming in a myriad of different languages. A significant reason why I use Visual Studio is for its extensibility coupled with a strong community, which in my opinion has resulted in making Visual Studio a better tool.

One of my favorite extensions for web development in VS2012 is Web Essentials. “If you ever write CSS, HTML, JavaScript, TypeScript, CoffeeScript or LESS, then you will find many useful features [in Web Essentials] that make your life as a developer easier. This is for all Web developers using Visual Studio 2012” – www.vswebessentials.com. If you are a web developer and have not done so, I strongly recommend looking into this VS2012 extension. Web Essentials provides many features, which you can view at their website: www.vswebessentials.com.

Today, I am going to highlight one feature of Web Essential’s toolbox that I feel to be hugely advantageous for an HTML programmer.

 

Zen Coding

Zen Coding is an engine that converts its specific syntax, abbreviated HTML, into HTML code for efficient development. Zen Coding itself is independent of Visual Studio and Web Essentials. It simply works with text rather than any specific text editor. However, the Zen Coding team and third parties have migrated the Zen Coding engine into plugins for many text editors (e.g. Visual Studio, Sublime Text, Notepad++, et cetera).

 

Abbreviated HTML

In this blog, I am not going to do a tutorial on how the abbreviated HTML syntax works, however a great syntax tutorial is located on John Papa’s blog: http://www.johnpapa.net/zen-coding-in-visual-studio-2012/. Instead, I am going to advertise and demonstrate the ergonomic value of Zen Coding with Visual Studio.

Once familiarized with Zen Coding, it is clear how it is possible to create a full HTML page in seconds. For example, consider this abbreviated HTML.

html>(head>title{Zen Coding Is Ergonomic Coding})+(body>(h1{Zen Coding Is Ergonomic Coding})+(table>tbody>tr*5>(th{Header $$}+td>lorem20)))

If you are unfamiliar with Zen Coding’s syntax then this might not be very clear, but if the abbreviated HTML is reorganize, it is clear how it is possible to easily generate a full HTML document using this short hand.

html>
	(head>
		title{Zen Coding Is Ergonomic Coding})
	+(body>
		(h1{Zen Coding Is Ergonomic Coding})+
		(table>
			tbody>
				tr*5>(
					th{Header $$}
					+td>lorem20)
		)
	)

If you have VS2012 and the Web Essentials add on, copy and paste the following abbreviated HTML into an HTML document, move the cursor to the end of the line, and hit ‘TAB’. BAM!

html>(head>title{Zen Coding Is Ergonomic Coding})+(body>(h1{Zen Coding Is Ergonomic Coding})+(table>tbody>tr*5>(th{Header $$}+td>lorem5)))

A full HTML document is created:

<html>
<head>
    <title>Zen Coding Is Ergonomic Coding</title>
</head>
<body>
    <h1>Zen Coding Is Ergonomic Coding</h1>
    <table>
        <tbody>
            <tr>
                <th>Header 01</th>
                <td>Lorem ipsum dolor sit amet.</td>
            </tr>
            <tr>
                <th>Header 02</th>
                <td>Lorem ipsum dolor sit amet.</td>
            </tr>
            <tr>
                <th>Header 03</th>
                <td>Lorem ipsum dolor sit amet.</td>
            </tr>
            <tr>
                <th>Header 04</th>
                <td>Lorem ipsum dolor sit amet.</td>
            </tr>
            <tr>
                <th>Header 05</th>
                <td>Lorem ipsum dolor sit amet.</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

Pragmatic

Of course creating a full HTML document like this every time might not be the most practical or economical thing to do, however, using this short hand to quickly generate HTML in VS2012 is practical, and economical.

For instance, generating a website’s footer.

Abbreviated HTML:

footer>p{&copy; 2012 - 2013 YouDomainNameHere.org}

Expanded HTML:

<footer>
    <p>
        &copy; 2012 - 2013 YouDomainNameHere.org
    </p>
</footer>

Unfortunately, in Visual Studio you cannot use this short hand with Razor syntax. For instance, this does not seem to work:

footer>p{&copy; 2012 - @DateTime.Now.Year YouDomainNameHere.org"}

 

Conclusion

Zen Coding is ergonomic HTML coding. It provides an HTML abbreviated syntax that the Zen Coding engine expands into full HTML code; therefore, Zen Coding minimizes physical effort and produces maximum efficiency while developing HTML.

This is what we need as programmers, less time repetitively typing and more time thinking about the current domain problems. I would really like to see implementations of this for other languages. For example, augmenting the current HTML Zen Coding engine to generate Razor or a different language like c#.