Tracker1's Blog

SQL vs Non-Relational (NoSQL) Databases

newuser09876 — Mon, 16 Jul 2012 11:47:00 +0000

It really depends on the application... If you have, for instance, a classifieds site... in a typical database (acid/sql) you would have many tables, with many joins typical to retrieve the data you want for a simple page view. In a no-sql environment, you would probably want 3 base collections, one for accounts, one for articles, one for payments (though payment systems are better suited to SQL than Non-Relational DBs). With SQL, when you request a page, you will query against the article table, then join the various property tables, for the type of article for tags/options/etc... you may join against the account table for contact information, if very normalized, you may then join again for email addresses, phone numbers, addresses etc. Each of these lookups will query against multiple tables' indexes (provided they're properly indexed) to retrieve related records to be collated into a single object model, to then be rendered to the output. ORMs take care of a lot of this heavy lifting, but on millions of results, there is an impact. With a Non-Relational DB, all related information is usually a full serialized object graph of everything related to that article, with specific options/properties codified making the data store "dumb".

Now for searching... with SQL these queries will only ever run as fast as a single process on a single system can execute results. With non-relational systems this can typically be split/spread across many servers for an aggregated result. In the real world, with SQL, you will typically load several replicated (often read-only) servers as a front for your search queries, and for display lookups. With NoSQL, you will typically scale your data across several servers. This brings us to caching. With SQL, when you need very large volume support, you will generally fall back to a caching system such as memcached, you may even cache your output rendering (full, partial and/or doughnut). With NoSQL you don't generally need cached results for data, but may still do output caching. Ironically, more and more, read-only data stores are now being fronted with the object graph in no-sql for faster lookups, with the SQL db as the authority, and the application persisting to both...

Transactional data... when dealing with highly transactional data (often Money data), SQL is usually better suited, as many Non-Relational DBs don't support atomic+consistent commits. With No-SQL, you can work around this by using a MessageQueue system as an authority for transactional updates, that ensures only one at a time goes through.

NoSQL is better at non-transactional data where read/lookup speed is king. NoSQL is better at serialization of codified objects. NoSQL is worse at transactional systems. SQL is better at transactional systems, and has a simpler query system to use (compared to Map/Reduce). SQL has performance penalties for multi-table joins and often requires additional technology to scale well...

In closing, each *can* do a given job, but a complete solution requires different implementations. In my own humble opinion, for a public facing website, having your front-end backed by a Non-Relational DB is usually a better use case. YMMV.

Build your JS, Less and CSS files via Node.js with Visual Studio

newuser09876 — Thu, 21 Jun 2012 12:29:00 +0000

The advice below is not what I would recommend today (late 2013), I would suggest using gulp (gulpfile.js) script for building client-side resources, and would do this as a pre-build event, there's also grunt, but I believe that gulp is better. There are plugins for VS (Web Essentials) that can build your .less for you, but they tend to be problematic, inconsistent, and can be outright troublesome.

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);
		}
	);
}

Building Twitter Bootstrap With Visual Studio 2010

newuser09876 — Thu, 07 Jun 2012 12:11:00 +0000

I've been a big fan of the Chirpy Add-In for Visual Studio for a couple of years now. Recently I started work on a project where it made sense to use Twitter Bootstrap as a base set of CSS and JavaScript within an ASP.Net MVC 3 project. Since I needed to adjust the colors, and a few other settings, I figured it would be simple enough. Unfortunately the main .less files use @import directives in order to include the necessary files in the correct order, which Chirpy doesn't seem to support.

I came across another blog post that mentions using dotLess in the same scenario to build the .less files as a pre-build event. I went a slightly different route. Instead of using dotLess, I went with NodeJS and lessc as the compiler, this also allows me to use cssmin as a css minifier within the same build event.

First, you will want to download the latest Bootstrap source files, placing the less and img folders within the same parent. In this case, I used ~/Content/bootstrap/less and ~/Content/bootstrap/img for the less and img content. I placed the js into ~/Scripts/bootstrap.

Second you will want to download and install the latest NodeJS for windows. After that, from a command prompt, you're going to need to use the Node Package Manager (npm) to install the global utilities for less and cssmin from a command prompt.

npm -g install less
npm -g install cssmin

Third, you'll need to setup your Post-build event. Right-click the web project, then select properties. Then bring up the "Build Events" tab. From there, I have the following text in my "Pre-build event command line"

"$(ProjectDir)!PreBuild.cmd" "$(ProjectDir)" "$(DevEnvDir)"

With that in place, I added a "!PreBuild.cmd" batch file into the root of the project with the following content. (note: make sure the file is saved with DOS/ASCII encoding mode text, not UTF. Create it in Notepad if need be)

@echo off
cls

echo.
echo !PreBuild.cmd %1

:: Remove quotes from project path...
SET _projpath=%1
SET _projpath=###%_projpath%###
SET _projpath=%_projpath:"###=%
SET _projpath=%_projpath:###"=%
SET _projpath=%_projpath:###=%

:: Remove quotes from _devenv path
SET _devenv=%2
SET _devenv=###%_devenv%###
SET _devenv=%_devenv:"###=%
SET _devenv=%_devenv:###"=%
SET _devenv=%_devenv:###=%


:: Checkout the files to be built
"%_devenv%tf" checkout /lock:none "%_projpath%Content\bootstrap\css\*.*"


echo.
echo Build bootstrap.less
call lessc "%_projpath%Content\bootstrap\less\bootstrap.less" "%_projpath%Content\bootstrap\css\bootstrap.css"
call cssmin "%_projpath%Content\bootstrap\css\bootstrap.css" > "%_projpath%Content\bootstrap\css\bootstrap.min.css"

echo.
echo Build responsive.less
call lessc "%_projpath%Content\bootstrap\less\responsive.less" "%_projpath%Content\bootstrap\css\responsive.css"
call cssmin "%_projpath%Content\bootstrap\css\responsive.css" > "%_projpath%Content\bootstrap\css\responsive.min.css"

With the above pre-build batch in place, the css directory will be checked out, and the bootstrap css files will be created with a minified version.

UUID/GUID in JavaScript

newuser09876 — Fri, 13 Jan 2012 12:43:00 +0000

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

Mapping windows volume for keyboards without media keys

newuser09876 — Fri, 07 Oct 2011 12:22:00 +0000

Okay, I've been using this for quite a while now, but figured it should be useful for those who aren't me. I'm currently using a Unicomp Customizer 104 key keyboard at work, and home. These keyboards do not have media keys on them, which is fine since I rarely use anything other than the volume controls on them.

There is a program called AutoHotKey that can run scripts based on various keyboard inputs, or hotkey combinations. I'm using the script below to match the Super/Windows key + [, ] and \ to volume down, up and mute respectively.

;; Map WIN + [ to Volume Down
#[::Send {Volume_Down 2}

;; Map WIN + ] to Volume Up
#]::Send {Volume_Up 2}

;; Map WIN + \ to toggle mute
#\::Send {Volume_Mute}

I should state that I am not affiliated with either Unicomp or Autohotkey. This is because it was helpful to me, and took a while to find this, and figured it would be helpful to others as well.

ASP.Net Grid with SqlDatasource using Stored Procedure is Blank

newuser09876 — Tue, 09 Aug 2011 10:25:00 +0000

After a lot of searching, I finally found the answer here. It seems that when you are using an SqlDataSource that when a parameter is null, it will cancel a select by default. You need to add the attribute of CancelSelectOnNullParameter="false". It was very frustrating, as using the SQL Server Profiler, the query wasn't even being issued, and it was a pain to track down.

I'm putting this up here, to hopefully help others with a similar situation in the future.

Generic Literals in VB.Net 2010

newuser09876 — Thu, 31 Mar 2011 12:57:00 +0000

Okay, something very cool in VB.Net as of VS2010 is that you can use literals for assignments to generic collections...

'List from Literal
Dim myList As New List(Of Integer)() From {1,2,3,4,5}

'Dictionary from Literal
Dim myDic As New Dictionary(Of String, Integer)() From {
    {"key1", 1},
    {"key2", 2}
}

Then when trying to load with Tuple's as the value, I ran into a snag, since it didn't understand the conversion of the tuple literal values. I found that by creating the needed extension methods into this module that I could do what I wanted to accomplish.

Dim myQueue= New Queue(Of Tuple(Of Integer, Integer)) From {
    {19, 63},
    {20, 63}
}

As you can see, it really isn't so difficult to use, but can be really useful when using paired values in a given collection. Generic classes such as Tuple, and Generic collections can help a lot in data iteration.

TupleExtensionsForGenericCollectionsModule.vb.txt (4.45 kb)

Convert an integer to a base26 alpha string

newuser09876 — Thu, 24 Feb 2011 15:18:00 +0000

In case you ever need to convert an integer to an alpha (such as the top of a spreadsheet). A-Z, AA-AZ etc.

function intToAlpha26String(input) {
    input = (+input).toString(26);
    var ret = [];
    while (input.length) {
        var a = input.charCodeAt(input.length-1);
        if (input.length > 1)
            input = (parseInt(input.substr(0, input.length - 1), 26) - 1).toString(26);
        else
            input = "";

        if (a >= 48/*'0'*/ && a <= 57 /*'9'*/)
            ret.unshift(String.fromCharCode(a + 49)); //raise to += 'a'
        else
            ret.unshift(String.fromCharCode(a + 10)); //raise + 10 (make room for 0-9)
    }
    return ret.join('').toUpperCase();
}

Hope this helps, let me know if you need the reverse, may just work that one out. Nice that JS supports some fairly broad base classifications that other languages don't. This actually translates fairly nicely into actionscript.

T-SQL

CREATE FUNCTION [dbo].[IntToBase26Alpha]
(
	@input AS int
)
RETURNS varchar(MAX)
AS
BEGIN
	DECLARE @ret AS varchar(MAX)	
	DECLARE @debug as VARCHAR(MAX);
	
	DECLARE @process AS int
	DECLARE @current AS int
	
	SET @ret = ''
	SET @process = CASE WHEN (@input is null or @input < 1) THEN 0 ELSE @input END
	SET @debug = ''
	
	WHILE (@process >= 0)
	BEGIN

		SET @current = @process % 26
		SET @process = ROUND(@process / 26, 0) - 1
		SET @ret = CHAR(@current + 65) + @ret

	END
	
	Return @ret
END
GO

CSS Hacks for IE

newuser09876 — Mon, 01 Nov 2010 18:24:00 +0000

The following are a few techniques you can use to target specific IE versions via CSS markup.

TAGIDENTIFIER {
    property:  valueA;   /* all browsers, of course */
    property:  valueB\9; /* IE9 and below, the 9 has nothing to do with the version in place */
    *property: valueC;   /* IE7 and below */
    _property: valueD;   /* IE6 */
}

/* IE6 ONLY */
    * html TAGIDENTIFIER

/* IE7 ONLY */
    *:first-child+html TAGIDENTIFIER

/* Modern Browsers & IE7+ */
    html>body TAGIDENTIFIER

I would like to point out that using IE conditional comments is still the best way to address specific browsers, it's just worthwhile to know about these techniques.

Creating A Modern Web Application - Part 2 (Working with HTML5 and CSS3)

newuser09876 — Thu, 28 Oct 2010 17:36:00 +0000

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.

View the Part2 demo page.
Download the Part2 demo.

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="http://frugalcoder.us/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.

Creating A Modern Web Application - Part 1 (Getting Started)

newuser09876 — Mon, 25 Oct 2010 15:26:00 +0000

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.

JSON.parseAjax Method, handling encoded dates in a JSON string.

newuser09876 — Tue, 28 Sep 2010 14:37:00 +0000

Okay, the availability of JSON.parse and JSON.stringify is awesome in modern browsers. I'm including my modifications to the JSON.org json2.js script to include a method JSON.parseAjax that will revive ISO-8601 and Microsoft Ajax encoded Date strings into a native Date object. I am also checking against the IE version as a bug in IE8's native JSON.parse method may raise an error that you can't catch when you extend the prototype of Array, Function, Object etc.

//parse a test string, where test1 is an ISO-8601 Date, and test2 is an MS-Ajax Date
var obj = JSON.parseAjax('{"test1":"1970-01-01T00:00:00Z", "test2":"\\\/Date(0)\\\/"}');

//object was returned and test1's value equals test2's value
alert( obj && obj.test1.valueOf() == obj.test2.valueOf());

This allows you to handle a number of different methods of returning Date-Time strings from the server. It's worth noting that you should always send date times as UTC based when passing over the wire.

json2-ajax.js (15.25 kb)

Creating JavaScript Namespaces

newuser09876 — Fri, 24 Sep 2010 15:01:00 +0000

When using JavaScript these days, it is generally a good idea to namespace your javascript methods so that they don't polute the global namespace.

if (typeof mysite == 'undefined') var mysite = {};
mysite.section = mysite.section || {};
mysite.section.subNamespace = mysite.section.subNamespace || {};
mysite.section.subNamespace.component = (function(){ ... }());

This allows you to create a clean separation of your utilization. Although you may not want to go as deep as the example above, you can see how this could very well become cumbersome when you want to declare one or more namespaces. It would be nice to have a helper method that lets you simply declare namespaces.

//declare a single namespace
namespace('mysite.section.subNamespace.component');

//declare multiple namespaces at once
namespace('mysite.section2', 'mysite._utilities');

This works out much nicer, and is easier to repeate as-needed when creating your namespaces. The function I am using for this is below.

var namespace = (function(root){
	//regular expression to limit formatting of namespaces
	var nsre = /^([\$\_a-z][\$\_a-z\d]*\.?)+$/i

	//define returned function
	return function(ns) {
		var args = Array.prototype.slice.call(arguments);
		var ret = [];
		while (args.length) {
			ns = genNS(args.shift());
			if (ns) ret.push(ns);
		}
		if (ret.length == 0) return; //undefined, no valid input
		if (arguments.length == 1) return ret[0]; //only a single input, return that namespace
		return ret; //used overload for multiple namespaces, return the array/list
	}
	
	//private static method to generate a single namespace
	function genNS(ns) {
		if (!ns.match(nsre)) return;
		ns = ns.split('.');
		var base = root;
		for (var i=0; i<ns.length; i++) {
			base[ns[i]] = base[ns[i]] || {};
			base = base[ns[i]];
		}
		return base; //return resulting namespace object
	}
}(this));

This functionality is very useful, and is included in a number of API toolkits. You could replace the var namespace declaration and attach it to an existing object such as $.ns, which would attach it to an existing reference.

If you have suggestions for future topics, feel free to leave a comment or contact me via email.

IE9 Background Gradient + Border Radius == Fail

newuser09876 — Wed, 15 Sep 2010 15:09:00 +0000

Okay, I've been working on creating a CSS3 friendly version of the site where I am currently working. I've been using the very cool CSS3 PIE(Progressive IE) to bring a lot of functionality to the interface for IE. It works natively in Firefox 3.x, Chrome, and Safari. There is no support for background gradients in Opera 10, but the fallback doesn't look too bad for < 2% of users that have it. IE 6-8 have been tricky, but I've managed to get a lot of it the way I want, with minimal JavaScript for interaction (only enough to make some UI elements bind consistently). IE9 was just released in beta today, and I was glad to see it, and it's improved rendering enhancements.

Then I come to find out that IE9 ate my PIE. PIE simply didn't work for the background gradients or rounded corners in IE9. So I pushed all the behavior declarations into an IE lt 9 conditional comment. I also added another stylesheet for IE9. From here, I proceeded to add the necessary DXImageTransform.Microsoft.gradient references for IE9, which doesn't support the background: linear-gradient(...) css directive. You can see the results to the left, the DX transformation clobbers the rounded corners.

EDIT: 2011-01-10

With IE9, you can do an inset box-shadow to accomplish a similar effect, without failing to work with the borders. The effect is better on buttons, and supported almost everywhere, including Opera 10.5+ ... for IE6-8 you can fall back to the linear-gradient with PIE. Also, the latest CSS3PIE disables itself for IE9, until that feature set can be flushed out.

EDIT: 2011-09-26

With IE9, you can do an inline SVG background in the CSS, Microsoft even created an SVG Gradient Background Maker. It is worth noting that all the browsers (that I know of) which support CSS3 background gradients also support an SVG in the CSS directly. If you use the generation tool, you should wrap the url text in a single-quote. In other words url('...') not url(...) as the tool generates. Many CSS minifiers will have issues if the url text isn't quoted.

JavaScript Books That Should Be Required Reading

tracker1 — Wed, 15 Sep 2010 10:38:00 +0000

I often get asked what books I recommend for developers looking to get more into JavaScript. Often they're looking for something specific to a given framework, most often jQuery. Although there are some great jQuery and a couple of jQueryUI books as well, I'd recommend the following books first and formost for those with some knowledge of JavaScript, but wanting to get a better grasp.

The first half of this year I read through eight recently published books centered around JavaScript and these are the one's I would recommend.

JavaScript: The Good Parts is one of two JavaScript books that I feel should be required reading for all web developers. Even if you've jumped into JS and don't care to start with entry level re-hashes, this is a great read. I don't agree 100% with Douglas Crockford's views. However, this is a great read that will give some insightful concepts and ideas. Also worth looking at is Crockford's video series on YUI Blog.

Even Faster Web Sites: Performance Best Practices for Web Developers is the other book I feel should be required reading for all web developers, and even designers. It covers a lot of great examples of how JavaScript and other elemental decisions in the design and markup of a site impact performance. There isn't as much specific to JS as High Performance JavaScript (Build Faster Web Application Interfaces), which is another good read. There's about a 50% overlap between the two books, and I feel that the former is a much more important read and reading both will get very redundant, very quickly.

Along with the books above, I would also suggest taking a look at the following books as well...

JavaScript: The Definitive Guide is a book that every beginning web developer should have on their bookshelf. If you want a more novice friendly text, I would suggest the JavaScript Bible (I'm linking to the 2010 version, which should be out in October.). The definitive guide is a bit better as a reference text, the bible is better as a learning text.

Pro JavaScript Design Patterns is another book worth looking at. Though I honestly feel that there will usually be simpler solutions to most given problems, reading this book provides a gateway to several good thought experiments and can provide some insightful ideas on how to resolve some common issues with design patterns.

If you're first starting out, I would go through The Definitive Guide, before looking into The Good Parts, or Even Faster Web Sites. Beyond this, there are a lot of blogs out there covering JavaScript from many different vantage points, and lots of frameworks and tools out there. I feel that these books are a great starting point to understanding JavaScript better and a greater understanding of how JavaScript works, instead of blindly cutting and pasting framework examples.