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

Utilize VB.NET Project in C# Project

Robbie Brandrick | 10/20/2013 7:54:40 AM

Introduction

As some may know, I love C# and obviously the .NET Framework; however, I recently took on a new job doing VB.NET programming. I can honestly say I like VB.NET, or for that matter most programming languages that serve their purpose. Most server side programming projects I have been working on are strictly C#, but I want to practice VB.NET, while still working towards something that I can actually use (e.g., not programming strictly just for exercise but exercise and purpose to follow the 80/20 rule). In this brief post, we will efficiently go through how we can use VB.NET in a C# project.

 

DLLs baby

The solution is rather simple: Create a VB.NET class library and class, add business logic to the class, and add a reference in our C# project to the VB.NET class library’s DLL to utilize it.

Simple VB.NET interface and implementation to get the ball rolling:

Namespace Brandrick.Services.BrandrickNetCSSEditor

    Public Interface IBrandrickNetCSSEditor
        'Update CSS Colors and return resource location
        Function UpdateColor(ByVal Red As Integer, ByVal Green As Integer, ByVal Blue As Integer) As String

    End Interface

    Public Class BrandrickNetCSSEditor
        Implements IBrandrickNetCSSEditor

        Public Function UpdateColor(Red As Integer, Green As Integer, Blue As Integer) As String Implements IBrandrickNetCSSEditor.UpdateColor
            'ToDo: Business Logic
            Return "CSS Resource"
        End Function
    End Class

End Namespace

 

Add a DLL reference from the VB.NET project to the C# project:

Add Reference

Utilize VB.NET code in C#:

using Brandrick.Services;
using Brandrick.Services.VB.Brandrick.Services.BrandrickNetCSSEditor;
using System.Web;
using System.Web.Mvc;
namespace Brandrick.Controllers
{
    public class ThemeController : Controller
    {

        public ActionResult CreateCustomTheme(int red, int green, int blue)
        {
            IBrandrickNetCSSEditor bNetCSSEditor = new BrandrickNetCSSEditor();
            var resource = bNetCSSEditor.UpdateColor(red, green, blue);
            ViewBag.resource = resource;

            return View();
        }

    }
}

 

Conclusion

While the code is not complete in these examples you see it is simple to utilize both VB.NET and C# in the same solution, which provides the option to pick your .NET programming language flavor within the same solution.