SQL vs Non-Relational (NoSQL) Databases

16. July 2012 11:47
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

21. June 2012 12:29

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

7. June 2012 12:11

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

13. January 2012 12:43

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

Tags: , ,

Mapping windows volume for keyboards without media keys

7. October 2011 12:22

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

9. August 2011 10:25

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.

Tags:

Generic Literals in VB.Net 2010

31. March 2011 12:57

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)

Tags:

Convert an integer to a base26 alpha string

24. February 2011 15:18

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

Tags:

CSS Hacks for IE

1. November 2010 18:24

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.

Tags: , ,

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

28. October 2010 17:36

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.

file structure

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

rendering preview

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

rendering preview IE9

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.


Tracker1

Michael J. Ryan aka Tracker1

My name is Michael J. Ryan and I've been developing web based applications since the mid 90's.

I am an advanced Web UX developer with a near expert knowledge of JavaScript.