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#.

Laptop as a wireless adapter for Raspberry Pi

Robbie Brandrick | 4/28/2013 6:05:53 PM

How to use a Windows 7 Laptop as a wireless adapter for a Raspberry Pi.

 Raspberry Pi

The Situation

I have come across an interesting problem, while living in a rural area. I am in a situation where I would like to use the internet on my Raspberry Pi, but I can only access the internet wirelessly from a specific place in my house.

The Plan

I would like to use my Laptop to pick up the wireless signal from the hotspot in my house and run an Ethernet cable from my Laptop to the Raspberry Pi to add internet capabilities to the Raspberry Pi.

The Solution

Connect to the specific Hotspot

 Connect To HotSpot

Connect the Ethernet Cable from the Laptop to the Raspberry Pi

 

 Laptop Ethernet

RaspberryPi Ethernet

Note: In my circumstance, I did not need a crossover cable.

Bridge the connection on the Laptop

Open Windows Explorer -> Networking -> Network and Sharing Center -> Change adapter settings

Select both the Wireless Hotspot and Ethernet Connections by holding “Ctrl” and clicking both their icons. Right click and select “Bridge Connections”

Bridge Connections

A new Icon will appear, after the connection has been successfully bridged.

Turn on the Raspberry Pi

Bam!!! There is now internet on the Raspberry Pi

Conclusion

As you can see this is actually easier than it sounds and allows quick use of the internet on the Raspberry Pi. Furthermore, one could apply the Windows bridging technique to other devices such as an Xbox or utilize similar techniques for Windows 8 or other operating systems.

 

Brandrick NET is back

Robbie Brandrick | 3/2/2013 3:16:12 PM

I finally took a break from all the other stuff I have been doing to get this website back up and running. A few months prior, I was trying to do a database migration to allow larger blog posts, but due to being a busy fella I haven't been able to complete the migration, until now! muhahahah!!!

 

Now that the migration stuff is done, I can spend my time creating awesomeage content. So Stayed tuned!!!

BRANDRICK BLOG ENGINE FEATURES!!!

Robbie Brandrick | 12/26/2012 3:01:42 PM

Brandrick Blog Engine

The first thing I wanted to have on deployment of my website was a Blog Engine. At the time of writing this post the websites blog engine contains the following features

Create, Read, Update, and Delete posts:

Blog CRUD

Blog CRUD

Create and Delete Comments:

AddComment1

Provide administrator-only restrictions (Only the administrator is capable of adding posts, deleting posts, and deleting comments):

Comment1

Search by Tags:

SearchTags

RSS feed (www.RobbieBrandrick.com/blog/rss):

RSSFeed


The development of my blog engine turned out to be fairly challenging and time consuming, however, I think it was worthwhile to develop because now I have a place to record and share my ideas, opinions, tutorials and show my skills to a potential employer. I developed this engine using C#, ASP.NET MVC, MS Test and SQL Server. I also followed the Test Driven Development methodology, which I found to be an effective way to develop quality applications.