In my previous article, I wanted to use NodeJS to build my .less files as part of my build process in Visual Studio 2010. I've since refined this process slightly. I've now placed my build scripts into the ~/build directory at the root of my web project.

I've also added a package.json file to the solution, so I can make a call to npm install in order to download any required node packages for the build process as well as creating a build.node.js file for the purpose of compiling my less files, as well as minification and merging of files for use elsewhere.

In the future I'd like to expand this to include SASS and CoffeeScript support as well as an npm package wrapper.

Here is an example package.json

{
	"name": "My.Website"
	,"description": "My Website"
	,"version": "0.0.1"
	,"author": "tracker1 (http://tracker1.info/"
	,"dependencies":{
	}
	,"devDependencies": {
		"uglify-js":"1.x.x"
		,"less":"1.x.x"
		,"cssmin":"0.3.x"
		,"async":"0.1.x"
	}
	,"builder":{
		"tasks":[
			{
				"type":"css"
				,"minify":"both"
				,"output":"../Content/css/main"
				,"files":[
					"../Content/bootstrap-less/bootstrap.less"
					,"../Content/bootstrap-less/responsive.less"
					,"../Content/site-less/site.less"
				]
			}
			,{
				"type":"js"
				,"minify":"both"
				,"output":"../Content/js/init"
				,"files":[
					"../Scripts/js-extensions/010-ConsoleStub.js"
					,"../Scripts/browser-extensions/Browser.js"
					,"../Scripts/browser-extensions/init1.js"
					,"../Scripts/browser-extensions/css_browser_selector.js"
					,"../Scripts/browser-extensions/modernizr-2.5.3.js"
					,"../Scripts/browser-extensions/topscroll.js"
				]
			}
			...
		]
	}
}

As you can see, I added a "builder" section with a number of "tasks" right now, the only tasks I am supporting are "js" and "css". The minify option should be either true, false, or "both". The process will create outputfile.(min|full).(css|js) so don't include a file extension on the output path.

My build.cmd file is now as follows, I'm including the TFS commands to checkout my js and css output paths, if you're using git/svn you can comment those lines out.

:: Step up from ~/bin to ~/build directory
cd ..\build

:: Checkout the files to be built
"%VS100COMNTOOLS%\..\IDE\tf" checkout /lock:none "..\Content\css\*.*"
"%VS100COMNTOOLS%\..\IDE\tf" checkout /lock:none "..\Content\js\*.*"

echo.
echo installing package dependancies
call npm install

echo.
echo building min/merge js and css
node build.node.js
echo.

With all of that said, here is my build.node.js file.

var fs = require("fs");
var util = require("util");
var async = require("async");

var less = require("less");
var cssmin = require("cssmin").cssmin;

var jsp = require("uglify-js").parser;
var pro = require("uglify-js").uglify;

var cfg;

main();

function main() {
	var pkg = JSON.parse(fs.readFileSync("package.json"),"utf8");
	cfg = pkg.builder;
	cfg.startDir = process.cwd();
	runTasks();
}

function runTasks() {
	console.log("Building CSS & JS files.");

	//store an array of functions for running each task
	var tasks = [];

	//console.log(JSON.stringify(cfg));

	//input each task definition into a runner.
	cfg.tasks.forEach(function(t){
		tasks.push(function(cb){
			if (t.type == "css") return runCssTask(t,cb);
			if (t.type == "js") return runJsTask(t,cb);
			cb(null,-1); //unrecognized format
		});
	});
	async.series(
		tasks
		,function(err,data) {
			console.log("Finished building CSS & JS files.");
		}
	);
}

function runCssTask(task, cb) {
	//data should be a collection of tree, use tree.toCSS() and tree.toCSS({compress:true}) respectively
	var min = task.minify;
	var full = !task.minify || task.minify === "both";
	
	console.log("Building " + task.output + " css");

	var fx = [];
	task.files.forEach(function(f){
		console.log("Loading " + f);

		fx.push(function(cb){
			var fp = fs.realpathSync(f).replace(/[\\\/]+/g,'/');
			var p = f.replace(/(\/[^\/]+)$/g,'/');

			var src = fs.readFileSync(fp,'utf8');
			var parser = new(less.Parser)({
				paths:[p]
				,filename:fp
			});
			parser.parse(src,function(err,tree){
				if (err) return cb(err,null);
				return cb(null, {"file":f, "css":tree.toCSS()});
			});
		});
	});
	async.series(
		fx
		,function(err,results) {
			if (err) throw err; //don't continue on error

			var m = [];
			var f = [];

			if (results && results.length) {
				results.forEach(function(item){
					if (min) {
						m.push("/*" + item.file + "*/\r\n");
						m.push(cssmin(item.css));
						m.push("\r\n\r\n");
					}
					if (full) {
						f.push("/*" + item.file + "*/\r\n");
						f.push(item.css);
						f.push("\r\n\r\n");
					}
				});
			}

			//write file(s)
			if (min) fs.writeFileSync(task.output + ".min.css", m.join(""), 'utf8');
			if (full) fs.writeFileSync(task.output + ".full.css", f.join(""), 'utf8');

			console.log("css handled for '" + task.output + "' " + results.length);

			cb(null,1);
		}
	)
}

function runJsTask(task, cb) {
	var min = task.minify;
	var full = !task.minify || task.minify === "both";

	console.log("Building " + task.output + " css");

	var fx = [];
	task.files.forEach(function(f){
		fx.push(function(cb){
			console.log("Loading " + f);
			var ret = {"file":f};
			var fp = fs.realpathSync(f).replace(/[\\\/]+/g,'/');
			var p = f.replace(/(\/[^\/]+)$/g,'/');
			
			ret.full = fs.readFileSync(f,'utf8');
			if (min) {
				var ast = jsp.parse(ret.full); //parse code for initial ast
				ast = pro.ast_mangle(ast); //get new ast with mangled names
				ast = pro.ast_squeeze(ast); //get an ast with compression optimizations
				ret.min = pro.gen_code(ast); //get compressed output
			}
			cb(null, ret);
		});
	});
	
	async.series(
		fx
		,function(err,results) {
						if (err) throw err; //don't continue on error

			//data should be a collection of tree, use tree.toCSS() and tree.toCSS({compress:true}) respectively

			var m = [];
			var f = [];

			if (results && results.length) {
				results.forEach(function(item){
					if (min) {
						m.push(";/*" + item.file + "*/\r\n");
						m.push(item.min);
						m.push("\r\n\r\n");
					}
					if (full) {
						f.push(";/*" + item.file + "*/\r\n");
						f.push(item.full);
						f.push("\r\n\r\n");
					}
				});
			}
			
			//write file(s)
			if (min) fs.writeFileSync(task.output + ".min.js", m.join(""), 'utf8');
			if (full) fs.writeFileSync(task.output + ".full.js", f.join(""), 'utf8');

			console.log("js handled for '" + task.output + "' " + results.length);
			cb(null,2);
		}
	);
}

Just wanted to push out this somewhat useful JavaScript snippet for generating a UUID (GUID) in JavaScript.

//UUID/Guid Generator
// use: UUID.create() or UUID.createSequential()
// convenience:  UUID.empty, UUID.tryParse(string)
(function(w){
  // From http://baagoe.com/en/RandomMusings/javascript/
  // Johannes Baagøe <baagoe@baagoe.com>, 2010
  function Mash() {
    var n = 0xefc8249d;

    var mash = function(data) {
    data = data.toString();
    for (var i = 0; i < data.length; i++) {
      n += data.charCodeAt(i);
      var h = 0.02519603282416938 * n;
      n = h >>> 0;
      h -= n;
      h *= n;
      n = h >>> 0;
      h -= n;
      n += h * 0x100000000; // 2^32
    }
    return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
    };

    mash.version = 'Mash 0.9';
    return mash;
  }

  // From http://baagoe.com/en/RandomMusings/javascript/
  function Kybos() {
    return (function(args) {
    // Johannes Baagøe <baagoe@baagoe.com>, 2010
    var s0 = 0;
    var s1 = 0;
    var s2 = 0;
    var c = 1;
    var s = [];
    var k = 0;

    var mash = Mash();
    var s0 = mash(' ');
    var s1 = mash(' ');
    var s2 = mash(' ');
    for (var j = 0; j < 8; j++) {
      s[j] = mash(' ');
    }

    if (args.length == 0) {
      args = [+new Date];
    }
    for (var i = 0; i < args.length; i++) {
      s0 -= mash(args[i]);
      if (s0 < 0) {
      s0 += 1;
      }
      s1 -= mash(args[i]);
      if (s1 < 0) {
      s1 += 1;
      }
      s2 -= mash(args[i]);
      if (s2 < 0) {
      s2 += 1;
      }
      for (var j = 0; j < 8; j++) {
      s[j] -= mash(args[i]);
      if (s[j] < 0) {
        s[j] += 1;
      }
      }
    }

    var random = function() {
      var a = 2091639;
      k = s[k] * 8 | 0;
      var r = s[k];
      var t = a * s0 + c * 2.3283064365386963e-10; // 2^-32
      s0 = s1;
      s1 = s2;
      s2 = t - (c = t | 0);
      s[k] -= s2;
      if (s[k] < 0) {
      s[k] += 1;
      }
      return r;
    };
    random.uint32 = function() {
      return random() * 0x100000000; // 2^32
    };
    random.fract53 = function() {
      return random() +
      (random() * 0x200000 | 0) * 1.1102230246251565e-16; // 2^-53
    };
    random.addNoise = function() {
      for (var i = arguments.length - 1; i >= 0; i--) {
      for (j = 0; j < 8; j++) {
        s[j] -= mash(arguments[i]);
        if (s[j] < 0) {
        s[j] += 1;
        }
      }
      }
    };
    random.version = 'Kybos 0.9';
    random.args = args;
    return random;

    } (Array.prototype.slice.call(arguments)));
  };

  var rnd = Kybos();

  // UUID/GUID implementation from http://frugalcoder.us/post/2012/01/13/javascript-guid-uuid-generator.aspx
  var UUID = {
    "empty": "00000000-0000-0000-0000-000000000000"
    ,"parse": function(input) {
      var ret = input.toString().trim().toLowerCase().replace(/^[\s\r\n]+|[\{\}]|[\s\r\n]+$/g, "");
      if ((/[a-f0-9]{8}\-[a-f0-9]{4}\-[a-f0-9]{4}\-[a-f0-9]{4}\-[a-f0-9]{12}/).test(ret))
        return ret;
      else
        throw new Error("Unable to parse UUID");
    }
    ,"createSequential": function() {
      var ret = new Date().valueOf().toString(16).replace("-","")
      for (;ret.length < 12; ret = "0" + ret);
      ret = ret.substr(ret.length-12,12); //only least significant part
      for (;ret.length < 32;ret += Math.floor(rnd() * 0xffffffff).toString(16));
      return [ret.substr(0,8), ret.substr(8,4), "4" + ret.substr(12,3), "89AB"[Math.floor(Math.random()*4)] + ret.substr(16,3),  ret.substr(20,12)].join("-");
    }
    ,"create": function() {
      var ret = "";
      for (;ret.length < 32;ret += Math.floor(rnd() * 0xffffffff).toString(16));
      return [ret.substr(0,8), ret.substr(8,4), "4" + ret.substr(12,3), "89AB"[Math.floor(Math.random()*4)] + ret.substr(16,3),  ret.substr(20,12)].join("-");
    }
    ,"random": function() {
      return rnd();
    }
    ,"tryParse": function(input) {
      try {
        return UUID.parse(input);
      } catch(ex) {
        return UUID.empty;
      }
    }
  };
  UUID["new"] = UUID.create;

  w.UUID = w.Guid = UUID;
}(window || this));

NOTE: Cryptographically strong random number generator thanks to Johannes Baagoe

This is Part 2 in a series on creating a web application utilizing modern techniques in order to deliver a fast, cohesive site. The index for this series can be found at the end of part 1 in this series.

As you can see on the left, we are starting out with a fairly simple file structure. In order to keep things simple, we are going to assume that this is going to be run from the root of the website.

The first thing I'd like to do is point out the PIE.htc file in the root directory. This comes from the CSS3PIE project and will be used to aid IE6-8 in rendering CSS3 features such as rounded borders and background gradients. There isn't full support for every feature of CSS3, and there are a couple of quirks. However, this is still a far better use of resources to work around these minor IEOLD issues rather than having the additional images and markup needed to do rounded corners and background gradients via other, more traditional methods.

Second, I'd like to point out that I'm starting off with two JavaScript files in place. First is the wonderful html5shiv which adds support for HTML5 tags in IE6-8. The second is css_browser_selector.js, which adds specific classes to the HTML (documentElement) element in order to write clean CSS rules when possible. This functionality is only useful when JavaScript is enabled, so it should be used sparingly. As IE is still the browser king, with several quirky variations on rendering, we'll also be adding in some conditional elements in order to target specific IE versions in our CSS. The other JavaScript file in the head

At this point I am going to point out that I've defined three stylesheets. I've created a general main.css as well as the addition of a main-ienew.css and main-ieold.css. Where the ienew variant will be fore IE9+ and the ieold will target IE6-8 specifically. The main reason for this is because of some current quirkiness in IE9 beta where it will load PIE.htc behavior on elements despite being set not do to so.

example: #ieold .className { behavior: url(/PIE.htc); }

At this point, I'm going to point out the actual markup of our starting page, then go over the CSS that will be in place to support this. This is a demonstration of creating the rounded corners and background gradients only. Other operations will be covered in future articles.

<!DOCTYPE html>
<html>
<head>
  <!-- Meta Data -->
  <meta http-equiv="X-UA-Compatible" content="IE=99,chrome=1" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

  <title>Part 2 - Creating A Modern Web Application</title>

  <!-- Inject browser classes, and add support for HTML5 tags to IEOLD -->
  <script src="assets/scripts/browser-extensions/html5shiv.js"></script>
  <script src="assets/scripts/browser-extensions/css_browser_selector.js"></script>

  <!-- core css markup -->
  <link rel="stylesheet" type="text/css" href="assets/styles/common/main.css" />
  <!--[if gte IE 9]><link rel="stylesheet" type="text/css" href="assets/styles/common/main-ienew.css" /><![endif]-->
  <!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="assets/styles/common/main-ieold.css" /><![endif]-->

  <!-- print css markup -->
  <link rel="stylesheet" type="text/css" media="print" href="assets/styles/common/main-print.css" />  
</head>

Above you see the content through the HEAD section of the document. We first start with the HTML5 DOCTYPE, which in essense tells the browser to use whatever the newest/current rendering engine available has to offer. Next we include some meta elements, the first of which X-UA-Compatible. As of Internet Explorer version 8, the rendering engine for 7 and 8 are included, unfortunately IE6 is not. I suggest using IE Tester, or a stand-alone installer for older IE version testing. The X-UA-Compatible meta attribute can set the IE renderer to be used and is set to 99 in our example to future-proof things. If you come across issues with IE9 or later, this can be helpful to force the older rendering until specific issues can be worked out. You will also notice the chrome=1 portion; which will tell IE browsers with the Chrome Frame plugin installed to utilize the Chrome rendering engine where available. I personally consider the Webkit rendering engine along with the V8 JavaScript engine the gold standard to view against. This may change in the future, but for now, how it renders in Webkit (Chrome/Safari) should be considered how it *should* be rendering. This will give you the least resistance in adjusting for non-compliant browsers.

After the typical meta elements for keywords, description and a link to the favicon. The regular TITLE element is encluded. It's worth noting that within the TITLE element, you should have your specific section of the site first, followed by more generic information. In this case, I'm starting with the specific page's name, followed by the title of the site/series. This can help will SEO, as having the same content in every title dilutes the value of that title across a site.

The first scripts we include are those that *must* be included in the head in order to function properly, and before any stylesheets are loaded. This will reduce the impact of said scripts on the css that comes next. After the main.css, I am including some conditional scripts for IENEW and IEOLD, where IEOLD is anything prior to version 9 (our support target is 6-9), and IENEW is defined as anything from version 9 on (which supports HTML5). After the general stylesheets we're including a css to establish print adjustments. It's important to establish a print media stylesheet that reduces the additional clutter such as the header, footer and page margins in order for the printing experience to be better.

On to the rest of the html file...

<body>
<!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
<!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
<!--[if IE 8]><div id="ie8" class="ie"><![endif]-->
<!--[if IE 9]><div id="ie9" class="ie"><![endif]-->
<!--[if lt IE 9]><div id="ieold"><![endif]-->
<!--[if gte IE 9]><div id="ienew"><![endif]-->
<![if !IE]><div id="noie"><![endif]>

  <article class="grid_4">
    <hgroup>
      <h2>Article/Section Title Goes Here</h2>
    </hgroup>
    <details>
      <summary>This section has some interesting content.</summary>
      <div>
        This section has some content that goes beyond the summary.
      </div>
    </details>
  </article>

<!--[if IE 6]></div><![endif]-->
<!--[if IE 7]></div><![endif]-->
<!--[if IE 8]></div><![endif]-->
<!--[if IE 9]></div><![endif]-->
<!--[if lt IE 9]></div><![endif]-->
<!--[if gte IE 9]></div><![endif]-->
<![if !IE]></div><![endif]>
</body>
</html>

Within the BODY element, the first thing added is a number of DIV elements surrounded by IE's conditional comments. These comments allow for the CSS to target a specific version of IE, or even a non IE browser without the need for JavaScript (as added by the css_browser_selector.js), which can improve the initial rendering. It should be noted that we won't be avoiding JavaScript and progressive enhancement, but one should be mindful of the rendering of a page without JavaScript as this can help with visually impaired users as well as the initial load impression of a given page/site.

Within the browser elements, we see some very semantic markup. An ARTICLE element is a container, which has an HGROUP (Header Group) element followed by a DETAILS element. The DETAILS element's first child is a SUMMARY element which contains the relative information regarding the rest of the DETAILS section. This can be thought of as similar to the relationship of a LEGEND element inside of a FIELDSET. Though the SUMMARY element is meant to be used as an inline element, we'll be displaying it as a block element. These tags may seem very blog oriented, and in a way they are. However, they do make for some very natural containers, as well as being far shorter than adding class names to meaningless nested div tags. There is also a SECTION element that's been added which can be used to contain multiple ARTICLE tags for example. The use of these tags at a higher level allow for very simple CSS rules, and can minimize the risk of a conflict in structure for nested tags from external resources or controls down the road.

Finally we get into the .css files. I'll be stepping through the relevant portions, though you'll be able to download the full demonstration as well as view the demo page online.

h1, h2, h3, h4, h5, h6 {
  margin:0;
  border:0;
  padding:0;  
}

/*sectioning content, (todo: use css grid) */
.grid_4 {
  display:block;
  position: relative;
  width: 400px;
  z-index: 100;
}

First, I reset the margin/border/padding for Heading elements. The next article will have a more complete reset css attached, along with some @font-face declarations to ensure a consistant rendering. Next is the .grid_4 declaration which will be replaced with a generated grid 12 css in the next article as well.

/*section header, gradient with rounded top-left and top-right border*/
hgroup {
  display:block;
  color: #333333;
  padding: 0.5em 1em 0.5em 1em;
  border: 1px solid #999;
  -webkit-border-radius: 0.6em 0.6em 0 0;
  -moz-border-radius: 0.6em 0.6em 0 0;
  border-radius: 0.6em 0.6em 0 0;
  background: #dddddd;
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0.2,#eeeeee),color-stop(0.8,#cccccc));
  background: -moz-linear-gradient(#eeeeee, #cccccc);
  background: linear-gradient(#eeeeee, #cccccc);
  -pie-background: linear-gradient(#eeeeee, #cccccc);
}

Here is where we start digging into the meat of this article. Within the HGROUP we specify the various implementations of border-radius as this attribute is only recently being formalized by the W3C, webkit (Chrome & Safari) and Mozilla (Firefox) browsers created their own vender specific css attributes, so we start with them. They all follow the same format allowing you to specify each corner's value in a clockwise fashion starting with the TOP-LEFT position.

After the border-radius is defined, the background is then specified. How this is done is to first specify a background color that will be used as a fallback value. After this, we specify the vendor specific implementations and finally fallback to a common CSS3 implementation. You can find quite a bit of information on CSS gradients in this article. It's worth noting that the linked article has a few things that are at least mis-represented in regards to IE9, I'll discuss these in more detail when we reach part 5 in this series.

For now I'll note that the -pie-background is required for the CSS3PIE implementation for IEOLD (6-8) and that the z-index for the grid_4 is also related to a quirk in using PIE.htc. You can see the contents of the main-ieold.css file below.

hgroup, details {
  behavior: url(/PIE.htc);
}

Here we have a very short, very simple statement essentially telling the browser to apply the PIE.htc component to the HGROUP and DETAILS elements (currently the only ones using rounded corners or background-gradients. Next, let's take a quick look at the main-ienew.css.

As you can see; the effect is rather nice, you can modify this example for your specific needs. It's definitely much lighter on resources and download speeds by not having to rely on heavy markup and images to accomplish this effect. However, there is one caveat with IE9 currently.

hgroup {
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#eeeeee', endColorstr='#cccccc')";
}

details {
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#eeeeee')";
}

IE9 supports the rounded corners internally, but the background gradients require falling back to utilizing an ActiveX based filter control via the -ms-filter property. We didn't add this into the main css as we wanted to avoid the potential for IE8 to interpret this attribute. IE9 seems to have a rendering bug where in some cases it will render the background gradient outside of the containing border (with a border-radius) as can be seen to the left.

This series is meant to be a pragmatic look at creating a modern web application today. What this means to me is that older browsers still need to be supported. In some environments the use of Internet Explorer 6 is still well over 20%, especially in corporate environments where XP and IE6 are the standards they are bound by. Though dealing with a browser that is quickly reaching a decade in age, which is ancient by software standards that tend to churn a new generation every 2 years or so, there is hope. I'll be referencing IE versions 6-8 as IEOLD, since these really are the existing legacy of IE as it stands. IE 9 is shaping up to be a much more compliant browser that has a great UI and does a much better job of rendering content. There are a few quirks as it stands that I will point out in the next segment in this series, I'll be referring to IE9+ as IENEW.

In this exercise we will be using HTML5's DOCTYPE tag which is very simple and straight forward. In fact it's the first DOCTYPE I actually committed to memory, (<!DOCTYPE html>) how cool is that. HTML5 by definition is very pragmatic in and of itself. The main lesson in HTML5 is to use what works for you, as many browsers have created enhancements for their own needs and then copied them from each other. Starting with WhatWG and moving into the W3C's group as a movement to formalize these enhancements as a standard, that doesn't mean you shouldn't be utilizing it today. Moving forward I will be using several HTML5 tags, in addition to using CSS3 to avoid the use of images for simple gradients and rounded corners. In order to facilitate this, I'll be first adding two shining stars into my tool-belt.

The first of which is the wonderful html5shiv. This allows us to utilize the new tags defined as part of HTML5. As there are several new tags within the HTML5 space, it is much better to use these as a more semantic means of marking up our site, over simply using meaningless DIV tags with class attributes everywhere. The html5shiv is a fairly light script that will add support for these new tags in old IE versions (prior to 9). You will also want to take a look at html 5 innershiv if you intend to inject these new elements via the innerHTML DOM property.

The second tool we will be using is the CSS3PIE (Progressive IE) HTML Component which can be used with IE versions prior to 9. By defining behaviors against elements that will utilize background gradients and rounded borders for IEOLD, we will be able to eliminate the need for the use of images, and complex layouts to achieve these commonly used effects.

Though both of these tools have been out for a while, I hope you find them useful. I'm outlining the series below, and will inject the links as these articles become live on the site. My goal is to have a the first eight articles in this series (including this one) released in the next two weeks.

• Part 1 - Getting Started.
• Part 2 - Working with HTML5 and CSS3.
  In this article we'll work through how to utilize rounded corners and border radius properties as well as show how to deal with the issues that IE9 currently presents here in addition to utilizing Chrome Frame for those users that have it installed.
• Part 3 - Getting the page laid out.
  In this article we'll work on getting the overall page layout in place. This will include standardizing on our core fonts as well as utilizing a grid to keep our stuff lined up nicely.
• Part 4 - Buttons, buttons and more buttons.
  One of the most often stylized elements on any web based application is the button. The real question is, how we get them how we want them, along with some thoughts on tying buttons to inputs.
• Part 5 - Ironing out the wrinkles.
  We will now work on getting things a bit better organized. We'll also deal with a few IE6 specific issues, namely the lack of attribute based selectors in CSS.
• Part 6 - Getting your script on.
  In this article we'll get some initial functionality laid out in order to work through progressive enhancement as well as making sure to defer our scripts until after the content is ready for it.
• Part 7 - Holy JavaScript Tool-belt Batman.
  Here I discuss my fairly comprehensive list of scripts I'll be including, as well as mention some that I'm not actively using but will be there if you need them.
• Part 8 - Inputs and Validation.
  Now that I have my JavaScript Tool-belt in place, I'll work through dealing with some basic input validation.
• Part 9 - Enhancing Inputs.
  Here I'll create an enhanced input that will allow for a calendar control used in conjunction with a date validated input.
• Part 10 - Custom Notifications.
  In my current position notifications of input validation errors and other messages are shown in popover modal dialogs that purposefully interrupt the user's actions. Here we'll work through the initial creation of such a popover and extend the jQuery validation to support this behavior.

I'll be adding additional articles in the future; the topics will present themselves as this project moves forward.

Thinking it would be cool to put this on a T-Shirt, with the jsninja.org logo on the front, and the following code snippet on the back.

    var a = ["lawn","off","get","my"];
    var o = (function(){
        var u = function(){
                var t = this;
                var s = arguments;
                return [t[s[0]],t[s[1]],t[s[2]],t[s[3]]];
            };
        var b = Array.prototype.slice.call(arguments);
        var a = b.shift();
        return u.apply(a,b).join().replace(/\,/g,' ');
    }(a,2,1,3,0));
    alert(o[0].toUpperCase() + o.substr(1) + '!');