Monthly Archives: August 2010

HTML5: Periodic Table of the Elements

There are a lot of new elements in HTML5 and it may be confusing what tags are included, added, or removed and what they are for. A coworker today found the Periodic Table of the Elements from Josh Duck. I like it because it groups the major elements making them easier to conceptualize. Each element contains a concise summary of the purpose of the tags and the colors are keys to the following categories:

  • Root elements
  • Metadata and scripting
  • Embedding content
  • Text-level semantics (Web 3.0, here we come)
  • Grouping Content
  • Forms
  • Document sections
  • Tabular data
  • Interactive elements

Periodic table of elements

Josh Duck is an Australian LAMP developer working in London. Nice work!

JavaScript and CSS Minification and Optimization with Visual Studio and YUI Compressor

About a year and a half ago I got very interested in JavaScript optimization. This interest was born after playing with YSlow for Firebug (Firefox). I noticed that my customer’s homepage was requiring my browser to download 2 megabytes of Images, HTML, CSS, and JavaScript. Having gotten my start in the days of modems I was aghast at the bandwidth requirements of this huge site. At the time this customer was receiving millions of hits a day due to a recent influenza outbreak. Do the math, that’s a lot of data.

YSlow recommended that the JavaScript and CSS be minified. I’d see this before with jQuery and other open source JavaScript examples. Minification is essentially a way to remove unnecessary characters and white space from the code with the goal of serving the smallest possible file over the wire to the client browser. The problem is this renders code unreadable to developers. I wondered if there was a way Visual Studio could handle this during deployment. Turns out that there is a free add-in for Visual Studio from Microsoft, Visual Studio Web Deployment Projects, which provides more advanced compilation options. The next step was to find code that Web Deployment Projects could use to perform the minification.

The “Y” in YSlow stands first for Yahoo so I went to see what they had to offer. They have open source code know as the YUI Compressor Library available for download that performs JavaScript and CSS minification. The problem for me was the code I needed was written in Java which is not simple to integrate into a Visual Studio build process. Fortunately someone had ported it to C# and thrown it up on CodePlex. It’s currently stable at version and based on version 2.4.2 of the YUI Compressor.

The mix of Web Deployment Projects and YUI Compressor is the most efficient method for me. I don’t have to think about it because it’s integrated to my deployment build process. It provides the flexibility to either minify the files individually or merge them into one large file that my visitors only have to download one.

The customer mentioned at the beginning of this post was able to reduce the size of their JavaScript and CSS by almost 50% (1MB per unique request). This is a simple way to help your servers handle their own pandemic flu outbreak, or “slashdotting”, as efficiently as possible. Your sites will also be much more snappy as browsers are not having to parse unnecessary whitespace, comments, etc. It’s the closest you’ll get to compiling JavaScript and CSS, all for free.


Example of JavaScript Minification

Javascript before minification

Javascript after minification

Example of CSS Minification

CSS before minification

CSS after minification

T4 templates Intellisense support in Visual Studio 2010

A couple years ago I started using T4 templates in my Visual Studio projects. They provided me with a quick and efficient way to generate source files (C# and SQL in my case) based on the application’s database schema. T4 is also extremely useful for generating code for ASP.NET MVC (more information below). The problem only problem is that Visual Studio 2010 by default applies no Intellisense or code coloring. This makes it difficult to edit resulting in a wall of code.

T4 code in Visual Studio 2010 without Tangible Engineering extension

This problem was originally solved for me in Visual Studio 2008 in 2009  when I downloaded and eventually purchased the Clarius Visual T4 editor per recommendation by Microsoft.  Clarius stopped developing their T4 Editor plug-in in late 2009 and there is no support for Visual Studio 2010. Last Winter the lack of development made me optimistic that T4 Intellisense would be in Visual Studio 2010. Usually canceling development by a plug-in vendor Clarius indicates that Microsoft is about to make them redundant. Unfortunately this was not the case and I was left without this handy feature in Visual Studio 2010. Fortunately I can across a post today on stackoverflow that offered a FREE solution from Tangible Engineering. I downloaded and installed this software today and Intellisense was back (on most things).

T4 code in Visual Studio 2010 with Tangible Engineering extension

It appears Tangible Engineering (@tangibleeng) has adopted a crack-dealer business model like other plug-in vendors. The FREE version doesn’t support all of the C# language. It does provide enough though for developers to decide if they need to to pay 99.98 USD for the PRO edition. If you use T4 often it’s worth it, I just don’t know if I want to spend $100 again just to have the vendor flake out on the next version of Visual Studio. My hope is that the Visual Studio team bakes this feature into the next version.

Update – 8/26/2010

I appears that Clarius posted some news regarding a Visual Studio 2010 version shortly after this original post.  Read about it over at the Visual T4 blog.

More Information

T4 templates in Visual Studio 2010 require the “T4 Toolbox” available FREE on Codeplex.

HTML5 – Part I of ∞


HTML5 code sample

I’ve been reading HTML5: Designing Rich Internet Applications and have been thinking.  Never a good thing in my case.  HTML5 has a lot of potential because it exposes new functionality currently being handled by Javascript.  You loose tags that we all been fond of: <font> **, <b>, <marquee>**, <big>, <center>, <etc>* **.  On the other hand you have gained <datagrid>, <input type=”url”>, <input type=”email”>, <div class=”etc”>.  You should have gotten used to using <strong> in lieu of <b>, but we’ll talk about that one-on-one.

This reading has set me on the mission to discuss the strengths and weaknesses of the version incremented standard (with no space).  These standards have been shaped by the market forces that make up the governing body of the World Wide Web known as the W3C.  The market reality of these corporations have shaped and guided the development of industry standards for years1.  These corporations are responsible for developing software, lower-level coding standards, and training to build webpages, mobile apps, and other software and hardware that interfacing the public with the World Wide Web.

These standards are the bedrock of the what some term “Web 3.0” or “The Semantic Web”.  On this bedrock developers are creating the platforms and applications enabling humanity to consume information that influences society.  I will be discussing this in the coming weeks, months, and years as developers write code taking advantage of HTML5. All you have to do sit back, grab a frosty beverage and tune in after the break.

* Non-standard
** LOLz
1 World Wide Web Consortium (W3C)

Hello World

Hello World

This blog begins like so many other things do for developers; Hello World. I’ve been wanting to start a blog for years but procrastination has gotten the best of me. No more! My plan for now is write about notable experiences and revelations in my web development career, geeky personal life, and whatever else bounces around in my head (except the voices, that’s personal). So grab a frosty beverage and follow me on Twitter, more after the break.