Dan Wahlin's WebLog

jQuery Tip #2 - Manipulating the DOM in a Loop

dwahlin — Thu, 09 Feb 2012 06:22:00 GMT

One of jQuery's greatest strengths is its ability to manipulate the DOM with a minimal amount of code. It's so easy to change things that we often don't think about what's happening under the covers. For example, consider the following code that appends nodes to an object named parentDiv.

var parentDiv = $('#emailList');
for (var i = 0; i < 100; i++) {
    parentDiv.append('<div>' + i + '</div>');
}

This is one of the more common ways to append nodes into a given parent. Although it works fine, it's not optimal because jQuery has to constantly perform DOM operations in the loop. You may not notice a problem when looping through 100 items, but as that number increases to a larger number the performance can start to degrade. A more efficient (yet simple) approach from a performance standpoint is shown next:

var parentDiv = $('#emailList');
var divs = '';
for (var i = 0; i < 100; i++) {
  divs += '<div>' + i + '</div>';
}
parentDiv.html(divs);

The previous code only touches the DOM once after the loop has completed resulting in better overall performance. While a lot of string concatenation is occurring, it turns out that going that route is much more efficient than calling append() multiple times.

Keep in mind that you can always manipulate the DOM directly as well and increase performance even more in some cases by using things like document.createDocumentFragment() and other techniques. While I prefer to use jQuery functions whenever possible, sometimes it's necessary to step outside of jQuery’s API for a given task and use the native DOM API instead.

A test page available at http://jsperf.com/strings-vs-array-join-vs-doc-fragment/8 shows different techniques that can be used for updating the DOM while using a loop as well as their individual performance results. An example of the test results and the different techniques tested are shown next. You’ll notice that calling jQuery’s append() function in a loop doesn’t fare too well compared to some of the other more “native” DOM options.

Test		Ops/sec
Strings	`var str = ''; var c = '<li>' + d.first + ' ' + d.second + '</li>' for (var i = 0; i < 100; i++) { str += c; } document.getElementById('list').innerHTML = str;`	1,226±0.84%61% slower
Array (using push)	`var arr = []; var c = '<li>' + d.first + ' ' + d.second + '</li>' for (var i = 0; i < 100; i++) { arr.push(c); } document.getElementById('list').innerHTML = arr.join('');`	1,234±0.35%61% slower
Doc Fragment	`var doc = document.createDocumentFragment(); var c = d.first + ' ' + d.second; for (var i = 0; i < 100; i++) { var e = document.createElement("li"); e.textContent = c; doc.appendChild(e); } document.getElementById('list').appendChild(doc);`	3,020±3.24%fastest
Array (using index)	`var arr = []; var c = '<li>' + d.first + ' ' + d.second + '</li>' for (var i = 0; i < 100; i++) { arr[i] = c; } document.getElementById('list').innerHTML = arr.join('');`	1,223±0.46%61% slower
Array join then string concat	`var arr = []; var c = d.first + ' ' + d.second; for (var i = 0; i < 100; i++) { arr[i] = c; } document.getElementById('list').innerHTML = '<li>' + arr.join('</li><li>') + '</li>';`	1,252±0.37%60% slower
DOM List	`var list = document.getElementById('list'); var c = d.first + ' ' + d.second; for (var i = 0; i < 100; i++) { var e = document.createElement("li"); e.textContent = c; list.appendChild(e); }`	3,144±0.00%fastest
jquery	`var $list = $("#list"); var c = '<li>' + d.first + ' ' + d.second + '</li>'; for (var i = 0; i < 100; i++) { $list.append(c); }`	428±9.06%86% slower
doc fragment 2	`var doc = document.createDocumentFragment(); var c = d.first + ' ' + d.second; var e = document.createElement("li"); e.textContent = c; for (var i = 0; i < 100; i++) { doc.appendChild(e.cloneNode(true)); } document.getElementById('list').appendChild(doc);`	3,241±11.16%fastest

Conclusion

As Peter Parker’s Uncle said in Spider-Man, “With great power comes great responsibility”. The same can be said about the power jQuery provides to developers. Take time to research sections of code that you know are critical for the performance of your application. Just because you can use a particular function doesn’t mean you should. Check out http://james.padolsey.com/jquery/ if you’d like an easy way to see what jQuery functions are doing behind the scenes.

If you’re interested in learning more about jQuery or JavaScript check out my jQuery Fundamentals or Structuring JavaScript Code courses from Pluralsight. We also offer onsite/online training options as well at http://www.thewahlingroup.com.

jQuery Tip #1 – Defining a Context When Using Selectors

dwahlin — Wed, 08 Feb 2012 07:06:00 GMT

I really enjoy working with jQuery and have had the opportunity to use it a lot over the years on various projects. It’s an essential part of my “technology tool belt”. My company has also started providing new training classes on jQuery to various companies and I’ve had a lot of great questions come up about best practices, tips and tricks, when certain functions should be used over other functions, and more.

I decided to put together a series of posts that highlight simple tips and tricks that I’ve used in jQuery applications over the years to provide some guidance to developers new to jQuery and provide answers to different questions I’ve been asked. In this first post I’ll cover an oldie but goodie tip – defining a context when using selectors. It’s something I struggled with when I first started using jQuery but once I found the secret (which is quite easy) it changed how I used selectors and how I used CSS classes in my HTML.

Defining a Context when using Selectors

Selectors are an essential part of jQuery that provide a great way to locate nodes in the DOM quickly and easily. For example, the following selector can be used to find all div elements with a class of panel on them in a page:

var panelDivs = $('div.panel');

Selectors are well documented at http://api.jquery.com/category/selectors so I won't rehash what they are or how to use them here. However, I do want to mention one simple yet powerful tip that many people new to jQuery will find useful. It's one of the tips that I've ended up using over and over as I build applications. To demonstrate the technique let’s walk through a simple example.

Selectors can be used in the following way to find all elements with a class of panel on them:

var panels = $('.panel');

However, what if you want to grab all elements with a panel class that are children of a given parent container element? To better understand the scenario, consider the following HTML:

<div id="emailContainer">
    <div class="panel">
        …
    </div>
    <div class="panel">
        …
    </div>
</div>
<div id="ordersContainer">
    <div class="panel">
        …
    </div>
    <div class="panel">
        …
    </div>
</div>

Assume that you already have a reference to the emailContainer div stored in a variable named emailDiv:

var emailDiv = $('#emailContainer');

How do you find all div elements with a panel class on them within the emailDiv element as opposed to finding every one within the page? One technique is to use the jQuery find() function:

var panels = emailDiv.find('div.panel');

You can alternatively supply a context object to the selector as shown next. This is the technique I normally use mainly because it’s something I’ve used for quite awhile (and old habits are hard to break).

var panels = $('div.panel', emailDiv);

Which way is the best? It depends on who you talk to although you can check out some live performance tests at http://jsperf.com/jquery-find-vs-context-sel that infer that find() has a slight performance advantage. Regardless, knowing how to supply a context when using selectors is a great technique to understand and useful in many different scenarios.

My development team has been using this technique a lot in an application that has several panels with a consistent set of CSS classes defined on elements within each panel. We’re using a plugin that we need to dynamically re-size as the panel changes size and created a function called refreshPanel() that accepts the panel to refresh. The object passed in to the function is used as the context for several selectors (it’s a jQuery object) to identify a starting point for searching elements with specific CSS classes. Here’s a section of a JavaScript file that defines refreshPanel().

...
refreshPanel = function (panel) {
    var padding = 5;
    //Handle height
    if (panelHeight == null) {
        toolbarH = $('.toolBar', panel).height();
        tableHeadH = $('.clientDataTable', panel).height();
        maxHeight = $(window).height();
        panelHeight = (maxHeight / panels.length) - toolbarH - (tableHeadH * 2);
    }
    //Grab panel's current height
    var h = panel.height() - toolbarH - (tableHeadH * 2);
    //If panel's height is greater than the original panelHeight assigned in "if" above then they're maximizing
    var newHeight = (h > panelHeight) ? maxHeight - toolbarH - (tableHeadH * 2) : panelHeight;

    var w = panel.width();
    $('div.dataTables_scrollBody', panel).height(newHeight - padding).width(w);
    $('.dataTables_scrollHeadInner, table.clientDataTable', panel).width(w);
}
...

Notice that the panel object is used throughout as the selector context which allows the function to be re-used over and over for multiple panels. We use this technique in several places which allows us to consistently use the same CSS classes over and over within a given panel.

Conclusion

This is the first tip in a series I’ll be writing about jQuery. Although this tip is simple (and hopefully something you already know about if you’re an experienced jQuery developer), it’s very useful in many real-world situations.

Upcoming ASP.NET, HTML5 and Windows 8 Talks and Workshops at DevConnections 2012

dwahlin — Sun, 05 Feb 2012 00:15:00 GMT

It’s that time of the year again! DevConnections 2012 is right around the corner and we have a lot of great new workshops and sessions planned for the ASP.NET and Client-Dev (HTML5, Windows 8 Metro, JavaScript, jQuery, etc.) tracks.

The keynote at DevConnections will be given by the one and only Scott Guthrie who’s always up to something cool and is a lot of fun to listen to.

Several other great speakers will be at the conference as well. Here’s a quick sampling:

John Papa (awesome presenter and a close personal friend of mine)
Scott Hanselman (everyone’s favorite speaker/comedian)
Stephen Walther (one of the smartest people I’ve met and a great guy)
Richard Campbell (super fun guy who’s a blast to listen/talk to on .NET Rocks)
Mads Kristensen (of Visual Studio plugin fame)

And of course there are many more! Sessions are only part of a conference experience. Yeah there are the parties too … but the real value is in the hallway conversations and the people you meet and continue to talk to beyond the conference event. DevConnections is a great place to strike up these conversations as its one of the largest gatherings of super experts in our industry … and they are all very approachable. There will also be a panel discussions with many of us, which is a great chance to put us on the spot.

…Thanks to John for letting me hijack that last paragraph along with the pictures he put on his blog. I thought he nailed what DevConnections is all about in just a few sentences.

I’ll be co-presenting a full day jQuery workshop with John on Monday, March 26th. We really enjoy co-presenting and have a lot of great jQuery topics to discuss. You do have to register for the workshops so make sure to do that when you register for the conference.

Workshop

APR02: Building Ajax-Enabled Applications with jQuery (9:00AM - 4:00PM)
Add'l Fee $399.00
John Papa & Dan Wahlin

Building cross-browser AJAX applications can be a fun yet challenging proposition. In this workshop, you’ll learn how to put the joy back into AJAX development using the jQuery script library. Learn how jQuery selectors can reduce code and simplify the process of finding DOM elements, how chaining can be used to accomplish multiple tasks with a single line of code and how cross-browser AJAX calls can be made using built-in jQuery functionality. Other topics covered include using client-side templates as well as built-in plugins. If you’ve wanted to learn jQuery but haven’t made the time, this is the workshop for you since we’ll take you from the ground floor all the way to the top.

Sessions

I’m also presenting or co-presenting 4 other sessions. If you’ll be at the conference please stop by and introduce yourself.

CWI202: Fundamentals of Windows 8 HTML/JavaScript Metro Style Apps
Dan Wahlin

Heard the buzz about Windows 8 Metro style applications but don’t know where to start? In this session, you’ll learn how your existing HTML, JavaScript, and CSS skills can be used to build Windows 8 Metro applications. Learn about different Visual Studio 11 project templates, built-in scripts, and Windows Runtime (WinRT) calls that you can make to build robust applications that will be capable of targeting millions of Windows users on the desktop and on tablets in the near future.

CHT201: Developing an HTML5/jQuery Application - End to End
Dan Wahlin

HTML5 is all the rage these days but where do you look to find robust examples of using it along with jQuery, jQuery templates, Ajax calls, data access technologies, and more? In this session, Dan Wahlin will walk through an application called Account at a Glance that demonstrates how key HTML5 technologies can be integrated and used to present data to users in different ways. Topics covered include exposing data to the client using Entity Framework Code First and RESTful services, using jQuery templates to render data, JavaScript techniques for structuring code, the role of HTML5 semantic tags, as well as how technologies such as the canvas, SVG, and video can be used. If you want to learn HTML5 techniques and strategies from a real app, then this session is for you.

CJS301: Techniques, Strategies, and Patterns for Structuring JavaScript Code
John Papa & Dan Wahlin

Are you writing a lot of JavaScript code and trying to apply good practices to make it more maintainable and flexible? In this session, learn about common practices to make avoid problems such as polluting the global namespace and code that executes inconsistently, by using patterns such as separation and the Revealing Module Pattern. You will leave this session with several tips on how to write clean, more maintainable, and consistent code.

<shamelessPlug>

If you can’t make the conference make sure to check out my new Structuring JavaScript Code course at Pluralsight.com. If you’re still writing “function spaghetti code” I’ll show you several techniques/patterns that will really improve the re-use and maintainability of your code.Good stuff to know if you’re building Web applications.

</shamelessPlug>

CJS202: Templating and Data Binding for HTML5 Applications with JsRender and JsViews
John Papa & Dan Wahlin

Interested in using the latest JavaScript libraries for templating and data binding your HTML5 app? In this session you will learn how to simplify JavaScript development using JsRender and JsViews (the replacements for jQuery templates). Learn how JsRender brings a new templating library to HTML5 development that has a code-less tag syntax, high performance, no dependency on jQuery nor a DOM, supports creating custom functions, and uses pure string-based rendering. You will also see how JsViews compliments JsRender by providing data binding features through observability of changes that work with plain old JavaScript objects (POJO).

Working with the JavaScript “this” Keyword

dwahlin — Wed, 28 Dec 2011 16:49:00 GMT

JavaScript's "this" keyword can be a bit tricky to work with depending on the context in which it's used. When it's used with patterns such as the Prototype or Revealing Prototype patterns working with "this" can be challenging in some cases. Unlike languages such as C# or Java, "this" can change context. For example, if a Calculator object named calc calls an add() function then "this" represents the Calculator object which means you can easily access any variables defined in the object such as a variable named tax by simply using this.tax.

calc.add(2, 2); //Using "this" inside of the add() function gets you to the calc object

However, if add() makes a call to another function then "this" changes context and no longer represents the Calculator object. In fact, "this" will change to the window object which means you can no longer access variables defined in the Calculator object such as tax. That presents a bit of a problem that’s especially challenging if you’ve never dealt with it before.

There are several ways to handle this challenge. First, you can pass "this" as a parameter to other functions. An example of passing "this" between functions is shown next. If a Calculator object calls a clearNumbers() function then you can easily access the Calculator object's constructor variables within the function. However, once clearNumbers() calls other functions such as setVal() or setEquation(), "this" changes context. To account for the change, the code passes "this" as a parameter to each of the functions and they then use it like normal. Although this type of code works, it pollutes your function parameters in some cases and becomes a little messy to work with (at least in my opinion).

var Calculator = function (eq) {
    //state goes here
    this.eqCtl = document.getElementById(eq);
    this.lastNumber;
    this.equalsPressed;
    this.operatorSet;
    this.tax; 
};

Calculator.prototype = function () {
    //private members
    var add = function (x, y) {
        this.eqCtl.innerHTML = x + y + this.tax;
    },

    subtract = function (x, y) {
        this.eqCtl.innerHTML = x – y + this.tax;
    },

    setVal = function (val, thisObj) {
        thisObj.currNumberCtl.innerHTML = val;
    },

    setEquation = function (val, thisObj) {
        thisObj.eqCtl.innerHTML = val;
    },

    //Other functions omitted for brevity

    clearNumbers = function () {
        this.lastNumber = null;
        this.equalsPressed = this.operatorSet = false;
 
        //Pass the Calculator object that called clearNumbers() 
        //to other functions as a parameter 
        setVal('0', this);
        setEquation('', this);
    };

    //public members
    return {
        add: add,
        subtract: subtract,
        clearNumbers: clearNumbers
    };
} ();

Another technique that can be used involves JavaScript's call() function. This function can be used to invoke functions and set the context of "this" while the call is being made. For example, if you want to call a function named setVal() and preserve the current value of "this" as the call is made then you can do the following:

setVal.call(this, 'yourParameterValue');

The current value of "this" will be passed along automatically to the setVal() function and it can safely use this.tax in the case of a Calculator object.

The following code uses the call() function to update the code shown earlier. The clearNumbers() function uses JavaScript's call() function to invoke the setVal() and setEquation() functions and preserve the current value of "this" in the process. Notice that the setVal() and setEquation() functions no longer need the extra parameter as the functions shown earlier did and can simply use "this" to access Calculator object variables defined in the object's constructor. This simplifies the call by eliminating the need for the extra parameter and makes the code a lot cleaner.

var Calculator = function (eq) {
    //state goes here
    this.eqCtl = document.getElementById(eq);
    this.lastNumber;
    this.equalsPressed;
    this.operatorSet;
    this.tax;
};

Calculator.prototype = function () {
    //private members
    var add = function (x, y) {
        this.eqCtl.innerHTML = x + y + this.tax;
    },

    subtract = function (x, y) {
        this.eqCtl.innerHTML = x – y + this.tax;
    },

    setVal = function (val) {
        this.currNumberCtl.innerHTML = val;
    },

    setEquation = function (val) {
        this.eqCtl.innerHTML = val;
    },

    //Other functions omitted for brevity

    clearNumbers = function () {
        this.lastNumber = null;
        this.equalsPressed = this.operatorSet = false;


        
        //Set context of "this" to the Calculator object that called clearNumbers()
        setVal.call(this, '0');
        setEquation.call(this, '');
    };

    //public members
    return {
        add: add,
        subtract: subtract,
        clearNumbers: clearNumbers
    };
} ();

Another example of where “this” gets tricky is inside of jQuery event handlers. For example, assume that an init() function is called that adds a click event to DOM elements. What if you want to get to a value of “this” representing the container Calculator object while inside of the click event handler function? The context of “this” changes to the anchor tag making it challenging. Two potential options that can be used are shown next.

The first option is to store the value of “this” as a variable outside of the click event handler function. By doing this a closure is created and you can still access the original value of “this” when the event fires:

Calculator.prototype = {
    //private members
    init: function() {
        //Option 1 for working with "this"
        var calcObject = this;
        $('a').click(function () {
            //Can't simply use this or $(this) 
            //since "this" represents the anchor now
            //calcObject will represent the Calculator object
            calcObject.highlight($(this));
        });
    },

    highlight: function(anchor) {
        anchor.toggleClass('highlight');
    }
};

Another option is to use an overloaded version of various jQuery event handlers such as on() to pass “this” and make it accessible through the event object:

Calculator.prototype = {
    //private members
    init: function() {
        //Option 2 for working with "this"
        //Pass "this" into the on() call
        $('a').on('click', { calcObject: this }, function (event) {
            //Access the original value of "this" 
            //through the event object's data property
            event.data.calcObject.highlight($(this));
        });
    },

    highlight: function(anchor) {
        anchor.toggleClass('highlight');
    }
};

Notice that “this” is assigned to an object literal property named calcObject in the on() parameters. Once the click event fires the event object passed to the callback function can be used to get to the data property which exposes the calcObject value that was passed in.

Although working with JavaScript’s “this” keyword can be challenging in some scenarios, there are several different techniques that can be used to make it easier to work with. Have any other techniques you like to use? Feel free to leave a comment and share your technique with everyone.

Videos on JavaScript and jQuery

If you're interested in additional information about structuring JavaScript code check out my Structuring JavaScript Code course created for PluralSight. Here's a sample from the course covering closures.

Demo - Working with Closures in JavaScript

A sample video from the jQuery programming course that covers using the each() function is shown next:

Demo – Using jQuery’s each() Function

Using the JavaScript Prototype Property to Structure and Extend Code

dwahlin — Mon, 19 Dec 2011 19:26:46 GMT

There are several different patterns that can be used in JavaScript to structure code and make it more re-useable, more maintainable, and less subject to naming collisions. Patterns like the Revealing Module Pattern, Prototype Pattern, Revealing Prototype Pattern, and others can be used to structure code and avoid what I call “function spaghetti code”. One of my favorite features offered by both the Prototype and the Revealing Prototype patterns is the extensibility they provide. They’re quite flexible especially compared to the Module or Revealing Module patterns out there.

Because both patterns rely on JavaScript prototyping, functions are shared across objects instances in memory and its straightforward for users of objects following these patterns to extend or override existing functionality. If you didn’t get a chance to read my previous posts on the two prototype patterns here are some basic examples of the patterns in action:

Prototype Pattern Example

var Calculator = function (eq) {
    //state goes here     
    this.eqCtl = document.getElementById(eq);
};

Calculator.prototype = { 
    add: function (x, y) {
        this.eqCtl.innerHTML = x + y;
    },
    subtract: function (x, y) {
        this.eqCtl.innerHTML = x - y;
    } 
};

Revealing Prototype Pattern Example

var Calculator = function (eq) {
    //state goes here
    this.eqCtl = document.getElementById(eq);
};

Calculator.prototype = function () {
    //private members
    var add = function (x, y) {
        this.eqCtl.innerHTML = x + y;
    },
    subtract = function (x, y) {
        this.eqCtl.innerHTML = x - y; 
    };

    //public members
    return {
        add: add,
        subtract: subtract
    };
} ();

Looking through the two examples you can see that both patterns rely on the prototype functionality available in JavaScript. The Revealing Prototype Pattern has the added functionality of being able to define public and private members within the Calculator.

Sidebar: Some people love the public/private feature and some people think all JavaScript code should be accessible to callers (which I’ll admit can simplify debugging in some scenarios). It really depends on your background and what you want. I personally like having the Revealing Prototype Pattern’s public/private member functionality available (mainly because of my background in Java and C#) since if you’re working with editors that support Intellisense or code help you only see the functions or variables that you should call as you’re typing. It’s all personal preference though and if you’d prefer to add an underscore in front of a variable or function to mark it as private then I say go for it – to each their own.

What if you want to extend one of the Calculator objects shown above or override existing functions? When using the Prototype or Revealing Prototype patterns this is possible since they both rely on prototyping. If you’re new to prototyping here’s a quick introduction to using the prototype property and different ways it can be used in your JavaScript code.

Getting Started with JavaScript Prototyping

Prototyping allows objects to inherit, override, and extend functionality provided by other objects in a similar manner as inheritance, overriding, abstraction, and related technologies do in C#, Java, and other languages. Every object you create in JavaScript has a prototype property by default that can be accessed. To better understand prototyping, take a look at the example below. Rather than adding methods directly into the BaseCalculator constructor definition as with patterns like the Revealing Module Pattern, this example relies on separate prototype definitions to define two functions.

var BaseCalculator = function () {
    //Define a variable unique to each instance of BaseCalculator
    this.decimalDigits = 2;
};
        
//Extend BaseCalculator using prototype
BaseCalculator.prototype.add = function (x, y) {
    return x + y;
};

BaseCalculator.prototype.subtract = function (x, y) {
    return x - y;
};

This code defines a BaseCalculator object with a variable named decimalDigits in the constructor. The code then extends the BaseCalculator object using the prototype property. Two functions are added including add(x,y) and subtract(x,y). This type of definition can be simplified as shown above with the Prototype Pattern by using an object literal to define the prototype functions:

var BaseCalculator = function() {
    //state goes here
    this.decimalDigits = 2;
};

BaseCalculator.prototype = {
    //private members
    add: function(x, y) {
        return x + y;
    },
    subtract: function(x, y) {
        return x - y;
    }
};

Once BaseCalculator is defined you can inherit from it by doing the following:

var Calculator = function () {
    //Define a variable unique to each instance of Calculator
    this.tax = 5;
};
        
Calculator.prototype = new BaseCalculator();

Note that Calculator is defined with a constructor that includes a tax variable that’s unique to each object instance. The Calculator’s prototype points to a new instance of BaseCalculator() allowing Calculator to inherit the add() and subtract() functions automatically. These functions are shared between both types and not duplicated in memory as instances are created which is a nice feature provided by the prototype property. An example of creating a new Calculator object instance is shown next:

var calc = new Calculator();
alert(calc.add(1, 1));
//variable defined in the BaseCalculator parent object is accessible from the derived Calculator object’s constructor
alert(calc.decimalDigits);

In the previous code, BaseCalculator’s decimalDigits variable is accessible to Calculator since a new instance of BaseCalculator was supplied to the Calculator’s prototype. If you want to disable access to parent type variables defined in the constructor you can assign BaseCalculator’s prototype to Calculator’s prototype as shown next as opposed to assigning a new BaseCalculator instance:

var Calculator = function () {
    this.tax= 5;
};

Calculator.prototype = BaseCalculator.prototype;

Because the BaseCalcuator’s prototype is assigned directly to Calculator’s prototype the decimalDigits variable defined in BaseCalculator will no longer be accessible if you go through a Calculator object instance. The tax variable defined in Calculator would be accessible of course. For example, the following code will throw a JavaScript error when the code tries to access decimalDigits. This is due to BaseCalculator’s constructor no longer being assigned to the Calculator prototype.

var calc = new Calculator();
alert(calc.add(1, 1));
alert(calc.decimalDigits);

Overriding with Prototype

If you’re using either the Prototype Pattern or Revealing Prototype Pattern to structure code in JavaScript (or any other object that relies on prototyping) you can take advantage of the prototype property to override existing functionality provided by a type. This can be useful in scenarios where a library built by a 3rd party is being used and you want to extend or override existing functionality without having to modify the library’s source code. Or, you may write code that you want other developers on your team to be able to enhance/override. An example of overriding the add() function provided in Calculator is shown next:

//Override Calculator’s add() function 
Calculator.prototype.add = function (x, y) {
    return x + y + this.tax;
};

var calc = new Calculator();
alert(calc.add(1, 1));

This code overrides the add() function provided by BaseCalculator and modifies it to add x, y, and an instance variable named myData together. The override applies to all Calculator object instances created after the override.

There’s of course more that you can do with JavaScript prototyping so I recommend reading through this post for additional details and more advanced examples of using the prototype property.

Interested in learning more about structuring JavaScript code?

If you're interested in additional information about structuring JavaScript code check out my latest Pluralsight course. Here's a sample from the course covering closures and how they can be created and used.

Working with Closures in JavaScript

New Pluralsight Course - Structuring JavaScript Code in HTML5 Applications

dwahlin — Tue, 13 Dec 2011 04:26:00 GMT

I just released a new course for Pluralsight titled Structuring JavaScript Code in HTML5 Applications that covers different techniques, strategies, and patterns that can be used when working with JavaScript to encapsulate code, provide better re-use, simplify maintenance, and take variables and functions out of the global scope. The overall goal of the course is to show developers how to convert what I call “Function Spaghetti Code” into more encapsulated and modular code. The concepts covered are important especially since many of the HTML5 APIs (canvas, geolocation, web storage, and more) rely heavily on JavaScript. What if you’re not writing HTML5 applications yet? All of the topics are still directly applicable to any JavaScript code you may be writing.

A lot of the content in the course came from lessons learned while building large and small applications for clients and samples and demos for conference talks. I’ve also had several discussions about different ways to structure JavaScript code with friends such as John Papa, Jarod Ferguson, and Spike Xavier that have influenced my overall views on working with JavaScript. A sample video from the course is available below that covers information about how closures can be used to create containers in code. Closures are a critical component of all of the patterns discussed in the course.

Demo - Working with Closures in JavaScript

The topics covered in the Structuring JavaScript Code in HTML5 Applications course are shown next:

Why do we Need JavaScript Patterns?
Introduction
Function Spaghetti Code
Function Spaghetti Code Demo
Closures to the Rescue
Closures Demo
Closures Demo 2
Defining Variables
Defining Variables Demo
Summary
Prototype Pattern
Introduction
Prototype Pattern Pros and Cons
Prototype Pattern Structure
Using the Prototype Pattern
Prototype Pattern Extension Demo
Summary
Module Pattern
Introduction
Module Pattern Pros and Cons
Module Pattern Structure
Using the Module Pattern
Summary
Revealing Module Pattern
Introduction
Revealing Module Pros and Cons
Revealing Module Structure
Using the Revealing Module Pattern
Summary
Revealing Prototype Pattern
Introduction
Revealing Prototype Pros and Cons
Revealing Prototype Structure
Using the Revealing Prototype Pattern
Using the Revealing Prototype Pattern with 'this'
Extending the Revealing Prototype Pattern
Converting Code to the Revealing Prototype Pattern
Summary

Additional courses that I’ve published for Pluralsight are shown below:

Introduction to Building Windows 8 Metro Applications (co-authored with John Papa)
Introduction to ASP.NET 4 WebForms
jQuery Fundamentals
SharePoint 2007 Features and Solutions by Example

Silverlight 5 Released with a lot of Great New Features

dwahlin — Fri, 09 Dec 2011 21:03:45 GMT

Silverlight 5 was released today and there are a ton of great new features available in this release. You can download the Silverlight 5 tools for Visual Studio 2010 SP1 here.

One of the coolest new features is the built-in support Silverlight 5 now has for 3D. I’m doing a lot with 3D right now for a project (using Unity 3D) so this is a really exciting to me. Here’s an example of Silverlight 5 3D in action from the Babylon 3D engine page:

There’s also built-in support for new media features such as trick play which allows video to be played at different speeds with automatic pitch correction for audio, hardware decoding of H.264 media, text enhancements, new controls like the PivotViewer, and much more.

Over the years my consulting company has used Silverlight in Line of Business (LOB) scenarios quite extensively so I’m really excited about some of the new LOB features that Silverlight 5 provides. I recently wrote about several of the features so if you’re interested in more details check out the posts below:

Pete Brown provides a nice list of new features provided in Silverlight 5 that you can check out here.

Reducing JavaScript Code Using jsRender Templates in HTML5 Applications

dwahlin — Wed, 23 Nov 2011 19:11:00 GMT

Back in November of 2010 I wrote a post titled Reducing Code using jQuery Templates that demonstrated how jQuery Templates could be used to reduce significant amounts of JavaScript code. Although the topics and code discussed in that post are still valid and relevant in today’s applications, things have a changed some when it comes to the future of jQuery Templates. I’ve had questions come up in the jQuery classes that we offer, at conferences, and online about the future of jQuery Templates so I thought I’d put a post together that provides updated information.

To get the full story you can read Boris Moore’s blog, but in a nutshell the jQuery UI team decided to go a different direction with client-side templates and use an alternate syntax. As a result, a new script has been released called jsRender that will ultimately replace jQuery Templates - at least that’s the current plan. I’ll review a few things mentioned in my initial post here for those that aren’t familiar with templates and then show examples of using the new jsRender functionality in an application.

Nearly every language out there uses templates in some manner to minimize the amount of code that has to be written. By using templates you can define a template structure once and use it to generate code, HTML or other formats. If you’ve created ASP.NET applications then you’re aware of how powerful and productive templates are when it comes to generating HTML output. However, what if you want to use templates on the client-side to generate HTML rather than writing a lot of JavaScript to manipulate the DOM?

Although templates have been available in jQuery for quite awhile through various plug-ins, the jsRender template framework provides a new solution that doesn’t use CSS in strange ways or require a lot of knowledge about a template language. By using it you can define HTML templates in web pages and use them to render HTML output dynamically at runtime. You can download the jsRender script along with samples from https://github.com/BorisMoore/jsrender.

Defining a Template Block

You can use client-side templates by referencing the jsRender script mentioned above and then defining a <script> block in your page with a type of text/x-jquery-tmpl as shown next:

<script id="OrderSummaryTemplate" type="text/x-jquery-tmpl">

    <!-- Template goes here –>

</script>

Once the script tag is defined you can place template code inside of it. Any HTML you add into the template is output automatically once the template is rendered. Of course, adding static HTML doesn’t accomplish much so jsRender provides several tags that can be placed inside of a template to define data that should be output, perform conditional logic, iterate through items, render nested templates, plus more. The key template tags available with jsRender are shown next:

Template Tag	Example	Description
{{=fieldNameOrExpression}}	{{=DeliveryFee}}	Used to define data values that should be rendered in the template. Evaluates the specified property on the current data item and encodes the value.
{{=fieldNameOrExpression!}}	{{=Comments!}}	Used to define HTML markup strings that should be rendered by the template (notice that a ! character is placed at the end of the string). Evaluates the specified field on the current data item and doesn’t encode the value.
{{#if condition}}	{{#if DeliveryFee > 0}} {{=DeliveryFee}} added to your order. {{/if}}	Used for conditional insertion of content.
{{else}}	{{#if MainItems.length===0}} <tr> <td>No items selected</td> </tr> {{else}} <tr> <td>Ordered items!</td> </tr> {{/if}}	Used to add additional conditional logic into jsRender templates.
{{#each}}	{{#each MainItems}} <tr> <td> {{=mi.NumberOrdered}} ordered at ${{=mi.Price}} per item </td> </tr> {{/each}}	Used to iterate over a data array and render the content for each data item.
{{#each tmpl=”#NestedTemplateID”}}	<script id="movieTemplate" type="text/x-jquery-tmpl"> {{#each Movies tmpl="#titleTemplate"}} </script> <script id="titleTemplate" type="text/x-jquery-tmpl"> <tr class="title"> <td>{{=Name}}</td> </tr> </script>	Used for composition of templates. Renders one or more nested template items within the rendered output of the parent template.

Rendering a Template

Once a template is defined using a <script> block you can use jsRender’s render() function to convert data into HTML based upon the template. This is done by identifying the target element that will host the content, calling its html() function (when using jQuery). and then passing the HTML that’s generated by calling the render() function. The render() function accepts the data that the template will use to generate HTML content. An example of putting all of this together is shown next. You’ll see that the OrderSummaryOutput element is located in the DOM using a jQuery selector and that its html() function is passed the output generated by a jsRender template.

$("#OrderSummaryOutput").html($("#OrderSummaryTemplate").render(data));

The data can be created locally from an object literal or retrieved from a remote service call as JSON as shown nextt:

$.ajax({
    dataType: 'jsonp',
    url: moviesServiceUrl,
    jsonp: '$callback',
    success: showMovies
});

// Within the callback, use .tmpl() to render the data.
function showMovies(data)
{
    // Render the template with the "movies" data and insert
    // the rendered HTML under the 'movieList' element
    $("#movieList").html($("#moviesTemplate").render(data));
}

jsRender in Action

A sample application that I created to demonstrate jsRender in action can be downloaded here (it’s part of the sample code available with our jQuery Web Programming training course). The sample app is an ASP.NET MVC 3 project named “Order Up” that leverages jQuery heavily and uses jsRender to display order details. An example of the output that’s rendered is shown next:

The template used to generated the Totals, Delivery Information, Items Ordered and Accessories Ordered sections is shown next:

<script id="OrderSummaryTemplate" type="text/x-jquery-tmpl">
    <table style="width:100%;">
        <tbody>             
            <tr>
                <td class="OrderHeader">Totals:</td>                    
            </tr>                    
            <tr>
                <td style="font-size:12pt;">
                    <table style="width:400px;">
                        <tr>
                            <td style="width:50%;">Sub Total:</td>
                            <td>$<span id="FinalSubTotal">{{=FinalSubTotal}}</span></td>
                        </tr>
                        <tr>
                            <td style="width:50%;">Sales Tax:</td>
                            <td>$<span id="FinalSalesTax">{{=FinalSalesTax }}</span></td>
                        </tr>
                        {{#if DeliveryFee > 0}}
                            <tr>
                                <td style="width:50%;">Delivery Fee:</td>
                                <td>$<span id="FinalDeliveryFee">{{=DeliveryFee }}</span></td>
                            </tr>
                        {{/if}}
                        <tr>
                            <td style="width:50%;">Admin Fee:</td>
                            <td>$<span id="FinalAdminFee">{{=AdminFee }}</span></td>
                        </tr>
                        <tr style="border-top:1px solid black;">
                            <td style="width:50%;font-weight:bold;">Total:</td>
                            <td>$<span id="FinalTotal">{{=FinalTotal }}</span></td>
                        </tr>   
                        <tr>
                            <td colspan="2">&nbsp;</td>
                        </tr>
                        <tr>
                            <td colspan="2">Will be charged to your credit card ending with {{=CreditCard }}</td>
                        </tr>                     
                    </table>                        
                </td>
            </tr> 
            <tr>
                <td>&nbsp;</td>
            </tr> 
            <tr>
                <td class="OrderHeader">Delivery Information</td>                    
            </tr>
            <tr>
                <td>
                    <table style="width:500px;">
                        <tr>
                            <td style="width:25%;">Deliver To:</td>
                            <td>{{=DeliveryName}}</td>
                        </tr>
                        <tr>
                            <td style="width:25%;">Address:</td>
                            <td>{{=DeliveryAddress}}</td>
                        </tr>
                        <tr>
                            <td style="width:25%;">Date and Time:</td>
                            <td>{{=DeliveryDate}} from {{=DeliveryTime}}</td>
                        </tr>                        
                    </table>                         
                    </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>                    
            <tr>
                <td class="OrderHeader">Items Ordered</td>
            </tr> 
            {{#if MainItems.length === 0}}
                <tr>
                    <td>No items selected</td>
                </tr>
            {{else}}
                {{#each MainItems tmpl="#ItemsTemplate"}}
            {{/if}}
            <tr>
                <td>&nbsp;</td>
            </tr>   
            <tr>
                <td class="OrderHeader">Accessories Ordered</td>
            </tr> 
            {{#if AccessoryItems.length === 0}}
                <tr>
                    <td>No accessories selected</td>
                </tr>
            {{else}}
                {{#each AccessoryItems tmpl="#ItemsTemplate"}}
            {{/if}}
            <tr>
                <td>&nbsp;</td>
            </tr>                          
        </tbody>
    </table>    
</script>

<script id="ItemsTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>
            {{=Name}} - {{=NumberOrdered}} ordered at $ {{=Price}} per item
        </td>
    </tr>
</script>

The template is rendered to a div with an ID of OrderSummaryOutput using the following code. The code first creates a JSON object by retrieving data from controls in a checkout wizard and then calls the the render() function provided by jsRender.

function LoadApprovalDiv() {
    var subTotal = parseFloat($('#SubTotal').text());
    $('#ClientSubTotal').val(subTotal.toFixed(2));
    var salesTaxRate = parseFloat($('#SalesTaxRate').val()) / 100;
    var salesTaxAmount = (subTotal * salesTaxRate) * .9;
    var deliveryFee = parseFloat($('#DeliveryFee').val());
    var adminFee = ((subTotal + salesTaxAmount + deliveryFee) * .05);
    var total = (Round(subTotal) + Round(salesTaxAmount) + Round(deliveryFee) + 
                 Round(adminFee));
    $('#ClientTotal').val(total);
    var deliveryAddress = $('#Delivery_Street').val();
    //See if they entered a suite
    if ($('#Delivery_Suite').val() != '') deliveryAddress += ', Suite ' + $('#Delivery_Suite').val();
    deliveryAddress += ' ' + $('#Delivery_City').val() + ' ' + $('#Delivery_StateID option:selected').text() + ' ' + 
                       $('#Delivery_Zip').val();
    var creditCard = $('#Payment_CreditCardNumber').val();
    var abbrCreditCard = '*' + creditCard.substring(creditCard.length - 5);

    var data= {
                   'FinalSubTotal'  : subTotal.toFixed(2),
                   'FinalSalesTax'  : salesTaxAmount.toFixed(2),
                   'FinalTotal'     : total.toFixed(2),
                   'DeliveryFee'    : deliveryFee.toFixed(2),
                   'AdminFee'       : adminFee.toFixed(2),
                   'DeliveryName'   : $('#Delivery_Name').val(),
                   'DeliveryAddress': deliveryAddress,
                   'CreditCard'     : abbrCreditCard,
                   'DeliveryDate'   : $('#Delivery_DeliveryDate').val(),
                   'DeliveryTime'   : $('#Delivery_DeliveryTime option:selected').text(),
                   'MainItems'      : GenerateData('Main'),
                   'AccessoryItems' : GenerateData('Accessory')
               };

    //jQuery template example
    $("#OrderSummaryOutput").html($("#OrderSummaryTemplate").render(data));
}

If you’re working with dynamic web applications that leverage jQuery and AJAX you’ll find that jsRender can significantly increase your productivity and eliminate a lot of code that you’d normally have to write. Although jsRender is still new (at the time this post was written anyway), it’s definitely worth looking into more. In future posts I’ll discuss a companion to jsRender called jsView that provides client-side data binding capabilities.

If you or your company is interested in training, consulting or mentoring on jQuery, HTML5, or .NET technologies please visit http://www.thewahlingroup.com for more information. We’ve provided training, consulting and mentoring services to some of the largest companies in the world and would enjoy sharing our knowledge and real-world lessons learned with you.

A Few of My Favorite HTML5 and CSS3 Online Tools

dwahlin — Fri, 18 Nov 2011 07:14:39 GMT

I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles that require various vendor extensions. There are a lot of online tools that can simplify building HTML5/CSS3 sites and increase productivity in the process so I thought I’d put together a post on a few of my favorites tools.

HTML5 Boilerplate

HTML5 Boilerplate provides a great way to get started building HTML5 sites. It includes many best practices out of the box and even includes a few tricks that many people don’t even know about. The custom download option allows you to pick the features that you want to include in the files that’s generated. You can read more about it here.

Initializr

Although HTML5 Boilerplate provides a great foundation for starting HTML5 sites, it focuses on providing a starting shell structure (namely an html page, JavaScript files, and a CSS stylesheet) and doesn’t include much in the way of page content to get started with. Initializer builds on HTML5 Boilerplate and provides an initial test page that can be tweaked to meet your needs. It also provides several different customization options to include/exclude features.

CSS3 Maker

CSS3 provides a lot of great features ranging from gradient support to rounded corners. Although many of the features are fairly straightforward there are some that are pretty involved such as gradients, animations, and really any styles that require custom vendor extensions to use across browsers. Sure, you can type everything by hand, but sites such as CSS3 Maker provide a visual way to generate CSS3 styles.

CSS3, Please!

CSS3, Please! is a code generation tool that can be used to generate cross-browser CSS3 styles quickly and easily. All of the main things you can do with CSS3 are available including a clever way to visually generate CSS3 transform styles.

Ultimate CSS Gradient Generator

CSS3 Maker (above) has a gradient generator built-in but my favorite tool for creating CSS3 gradients is the Ultimate CSS Gradient Generator. If you’ve created gradients in tools like Photoshop then you’ll love what this tool has to offer especially since it makes it extremely straightforward to work with different gradient stops.

@font-face Fonts

Although @font-face has been available for awhile, I think fonts are cool and wanted to mention a site that provides a lot of font choices. When used correctly fonts can really enhance a page and when used incorrectly (think Comic Sans) they can absolutely ruin a page. Several sites exist that provide fonts that can be used with @font-face definitions in CSS style sheets. One of my favorites is Font Squirrel.

HTML5 & CSS3 Support and Tests

Interested in knowing what HTML5 and CSS3 features a given browser supports? Want to know how various browsers stack up with each other as far as HTML5/CSS3 support. Look no further than the HTML5 & CSS3 Support page or the HTML5 Test page.

CSS3 Easing Animation Tool

CSS3 animations aren’t widely supported across browsers right now (I’m not really using them at this point) but they do offer a lot of promise. Creating easings for animations can definitely be a challenge but they’re something that are critical for adding that “professional touch” to your animations. Fortunately you can use the Ceaser CSS Easing Animation Tool to simplify the process and handle animation easing with…...ease.

There are several other online tools that I like but these are some of the ones I find myself using the most. If you have any favorite online tools that simplify working with HTML5 or CSS3 let me know.

For more information about onsite or online training, mentoring and consulting solutions for HTML5, jQuery, .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com.

Detecting HTML5/CSS3 Features using Modernizr

dwahlin — Thu, 17 Nov 2011 07:05:24 GMT

HTML5, CSS3, and related technologies such as canvas and web sockets bring a lot of useful new features to the table that can take Web applications to the next level. These new technologies allow applications to be built using only HTML, CSS, and JavaScript allowing them to be viewed on a variety of form factors including tablets and phones. Although HTML5 features offer a lot of promise, it’s not realistic to develop applications using the latest technologies without worrying about supporting older browsers in the process. If history has taught us anything it’s that old browsers stick around for years and years which means developers have to deal with backward compatibility issues. This is especially true when deploying applications to the Internet that target the general public. This begs the question, “How do you move forward with HTML5 and CSS3 technologies while gracefully handling unsupported features in older browsers?”

Although you can write code by hand to detect different HTML5 and CSS3 features, it’s not always straightforward. For example, to check for canvas support you need to write code similar to the following:

<script>
    window.onload = function () {
        if (canvasSupported()) {
            alert('canvas supported');
        }
    };
        
    function canvasSupported() {
        var canvas = document.createElement('canvas');
        return (canvas.getContext && canvas.getContext('2d'));
    }
</script>

If you want to check for local storage support the following check can be made. It’s more involved than it should be due to a bug in older versions of Firefox.

<script>
    window.onload = function () {
        if (localStorageSupported()) {
            alert('local storage supported');
        }
    };

    function localStorageSupported() {
        try {
            return ('localStorage' in window && window['localStorage'] != null);
        }
        catch(e) {}
        return false;
    }
</script>

Looking through the previous examples you can see that there’s more than meets the eye when it comes to checking browsers for HTML5 and CSS3 features. It takes a lot of work to test every possible scenario and every version of a given browser. Fortunately, you don’t have to resort to writing custom code to test what HTML5/CSS3 features a given browser supports. By using a script library called Modernizr you can add checks for different HTML5/CSS3 features into your pages with a minimal amount of code on your part. Let’s take a look at some of the key features Modernizr offers.

Getting Started with Modernizr

The first time I heard the name “Modernizr” I thought it “modernized” older browsers by added missing functionality. In reality, Modernizr doesn’t actually handle adding missing features or “modernizing” older browsers. The Modernizr website states, “The name Modernizr actually stems from the goal of modernizing our development practices (and ourselves)”. Because it relies on feature detection rather than browser sniffing (a common technique used in the past – that never worked that great), Modernizr definitely provides a more modern way to test features that a browser supports and can even handle loading additional scripts called shims or polyfills that fill in holes that older browsers may have. It’s a great tool to have in your arsenal if you’re a web developer.

Modernizr is available at http://modernizr.com. Two different types of scripts are available including a development script and custom production script. To generate a production script, the site provides a custom script generation tool rather than providing a single script that has everything under the sun for HTML5/CSS3 feature detection. Using the script generation tool you can pick the specific test functionality that you need and ignore everything that you don’t need. That way the script is kept as small as possible. An example of the custom script download screen is shown next. Notice that specific CSS3, HTML5, and related feature tests can be selected.

Once you’ve downloaded your custom script you can add it into your web page using the standard <script> element and you’re ready to start using Modernizr.

<script src="Scripts/Modernizr.js" type="text/javascript"></script>

Modernizr and the HTML Element

Once you’ve add a script reference to Modernizr in a page it’ll go to work for you immediately. In fact, by adding the script several different CSS classes will be added to the page’s <html> element at runtime. These classes define what features the browser supports and what features it doesn’t support. Features that aren’t supported get a class name of “no-FeatureName”, for example “no-flexbox”. Features that are supported get a CSS class name based on the feature such as “canvas” or “websockets”. An example of classes added when running a page in Chrome is shown next:

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage 
              websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla 
              multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity 
              cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d 
              csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers 
              applicationcache svg inlinesvg smil svgclippaths">

Here’s an example of what the <html> element looks like at runtime with Internet Explorer 9:

<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation 
              postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets 
              rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow 
              opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms 
              no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage 
              sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

When using Modernizr it’s a common practice to define an <html> element in your page with a no-js class added as shown next:

<html class="no-js">

You’ll see starter projects such as HTML5 Boilerplate (http://html5boilerplate.com) or Initializr (http://initializr.com) follow this approach (see my previous post for more information on HTML5 Boilerplate). By adding the no-js class it’s easy to tell if a browser has JavaScript enabled or not. If JavaScript is disabled then no-js will stay on the <html> element. If JavaScript is enabled, no-js will be removed by Modernizr and a js class will be added along with other classes that define supported/unsupported features.

Working with HTML5 and CSS3 Features

You can use the CSS classes added to the <html> element directly in your CSS files to determine what style properties to use based upon the features supported by a given browser. For example, the following CSS can be used to render a box shadow for browsers that support that feature and a simple border for browsers that don’t support the feature:

.boxshadow #MyContainer {
    border: none;
    -webkit-box-shadow: #666 1px 1px 1px;
    -moz-box-shadow: #666 1px 1px 1px;
}
    
.no-boxshadow #MyContainer {
    border: 2px solid black;
}

If a browser supports box-shadows the boxshadow CSS class will be added to the <html> element by Modernizr. It can then be associated with a given element. This example associates the boxshadow class with a div with an id of MyContainer. If the browser doesn’t support box shadows then the no-boxshadow class will be added to the <html> element and it can be used to render a standard border around the div. This provides a great way to leverage new CSS3 features in supported browsers while providing a graceful fallback for older browsers.

In addition to using the CSS classes that Modernizr provides on the <html> element, you also use a global Modernizr object that’s created. This object exposes different properties that can be used to detect the availability of specific HTML5 or CSS3 features. For example, the following code can be used to detect canvas and local storage support. You can see that the code is much simpler than the code shown at the beginning of this post. It also has the added benefit of being tested by a large community of web developers around the world running a variety of browsers.

$(document).ready(function () {

    if (Modernizr.canvas) {
        //Add canvas code
    }

    if (Modernizr.localstorage) {
        //Add local storage code
    }

});

The global Modernizr object can also be used to test for the presence of CSS3 features. The following code shows how to test support for border-radius and CSS transforms:

$(document).ready(function () {

    if (Modernizr.borderradius) {
        $('#MyDiv').addClass('borderRadiusStyle');
    }
        
    if (Modernizr.csstransforms) {
        $('#MyDiv').addClass('transformsStyle');
    }

});

Several other CSS3 feature tests can be performed such as support for opacity, rgba, text-shadow, CSS animations, CSS transitions, multiple backgrounds, and more. A complete list of supported HTML5 and CSS3 tests that Modernizr supports can be found at http://www.modernizr.com/docs.

Loading Scripts using Modernizr

In cases where a browser doesn’t support a specific feature you can either provide a graceful fallback or load a shim/polyfill script to fill in missing functionality where appropriate (more information about shims/polyfills can be found at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Modernizr has a built-in script loader that can be used to test for a feature and then load a script if the feature isn’t available. The script loader is built-into Modernizr and is also available as a standalone yepnope script (http://yepnopejs.com). It’s extremely easy to get started using the script loader and it can really simplify the process of loading scripts based on the availability of a particular browser feature.

To load scripts dynamically you can use Modernizr’s load() function which accepts properties defining the feature to test (test property), the script to load if the test succeeds (yep property), the script to load if the test fails (nope property), and a script to load regardless of if the test succeeds or fails (both property). An example of using load() with these properties is show next:

Modernizr.load({
    test: Modernizr.canvas,
    yep:  'html5CanvasAvailable.js’,
    nope: 'excanvas.js’, 
    both: 'myCustomScript.js' 
});

In this example Modernizr is used to not only load scripts but also to test for the presence of the canvas feature. If the target browser supports the HTML5 canvas then the html5CanvasAvailable.js script will be loaded along with the myCustomScript.js script (use of the yep property in this example is a bit contrived – it was added simply to demonstrate how the property can be used in the load() function). Otherwise, a polyfill script named excanvas.js will be loaded to add missing canvas functionality for Internet Explorer versions prior to 9. Once excanvas.js is loaded the myCustomScript.js script will be loaded.

Because Modernizr handles loading scripts, you can also use it in creative ways. For example, you can use it to load local scripts when a 3rd party Content Delivery Network (CDN) such as one provided by Google or Microsoft is unavailable for whatever reason. The Modernizr documentation provides the following example that demonstrates the process for providing a local fallback for jQuery when a CDN is down:

Modernizr.load([
    {
        load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js',
        complete: function () {
            if (!window.jQuery) {
                Modernizr.load('js/libs/jquery-1.6.4.min.js');
            }
        }
    },
    {
        // This will wait for the fallback to load and
        // execute if it needs to.
        load: 'needs-jQuery.js'
    }
]);

This code attempts to load jQuery from the Google CDN first. Once the script is downloaded (or if it fails) the function associated with complete will be called. The function checks to make sure that the jQuery object is available and if it’s not Modernizr is used to load a local jQuery script. After all of that occurs a script named needs-jQuery.js will be loaded.

Conclusion

If you’re building applications that use some of the latest and greatest features available in HTML5 and CSS3 then Modernizr is an essential tool. By using it you can reduce the amount of custom code required to test for browser features and provide graceful fallbacks or even load shim/polyfill scripts for older browsers to help fill in missing functionality.

New Pluralsight Course: Introduction to Building Windows 8 Metro Applications

dwahlin — Thu, 03 Nov 2011 07:37:00 GMT

Over the past few months I’ve been working on a new Windows 8 Metro app development course for Pluralsight with my good friend John Papa. We had a lot of fun making the course together and diving into key concepts that you need to know to build XAML/C# or HTML/JavaScript Metro apps. Here’s the course description, a sample video from the HTML/JavaScript Metro app section of the course (click the image below), and the table of contents for the course. If you have a Pluralsight subscription you can view the complete course here.

Introduction to Building Windows 8 Metro Applications

Windows 8 Metro style apps provide a new opportunity for developers to interact with users and provide a more immersive experience on the desktop or on touch devices. This course covers fundamentals you need to know to get started building Metro apps quickly using Visual Studio 11. Topics covered include an overview of Windows 8 and Metro app features as well as key features that you need to know to build HTML/JavaScript or XAML/C# Metro apps.

Sample Video: Handling Events in HTML/JavaScript Metro Apps

Introduction to Building Windows 8 Metro Applications
Introduction
Windows 8 Start Screen
Windows 8 Start Screen Demo
Metro UI
Metro UI Demo
App Snapping
App Snapping Demo
Charms
Charms Demo
App Bar
App Bar Demo
Summary
A Lap Around the Metro Application Framework
Introduction
Metro App Framework
Metro App Framework Demo
Development Choices
App Lifecycle
App Lifecycle Demo
Controls
Controls Demo
Visual Studio Templates
Visual Studio HTML/JavaScript Templates Demo
Visual Studio XAML Templates Demo
Hello World Intro
Hello World HTML/JavaScript Demo
Hello World XAML/C# Demo
Summary
Getting Started Building HTML/JavaScript Metro Apps
Introduction
Introduction to HTML Metro Apps
Metro Apps Demo
UI Surfaces, Layout, and Navigation
Message Dialog Demo
Fixed Layout Demo
Fluid Layout Demo
Fragment Navigation Demo
IFrame Navigation Demo
Controls
Controls Demo
Handling Events
Event Lifecycle Demo
Handling Events Demo
Data Binding
Data Binding Demo
Styles
Style Demo
Expression Blend Demo
Animation
Animation Demo
Adding Animations to an App Demo
Summary
Getting Started Building XAML/C# Metro Apps
Introduction
Intro to XAML Metro Apps
Intro to XAML Metro Apps Demo
Controls and Visual Studio 11 Express Designer
Controls and Designer Demo
Events
Events Demo
Data Binding
Data Binding Demos
Styles
Styles Demo
Light and Dark Styles Demo
Animation
Animation Demos
Summary

Additional courses that I've published for Pluralsight include:

For more information about onsite or online training, mentoring and consulting solutions for HTML5, jQuery, .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com.

HTML5, JavaScript, and Windows 8 Metro Talk Slides from DevConnections Las Vegas

dwahlin — Thu, 03 Nov 2011 06:35:30 GMT

I had a great time at DevConnections Las Vegas this year and really enjoyed hanging out with existing friends as well as making some new friends. Thanks to everyone who attended my workshop and sessions. The slides from the different sessions are available to download below (click an image).

For more information about onsite or online training, mentoring and consulting solutions for HTML5, jQuery, .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com.

Video: HTML5 and JavaScript Tips

dwahlin — Thu, 03 Nov 2011 04:31:02 GMT

I had the opportunity to present at the HTML5 Web Camp event in Phoenix, Arizona last month with Michael Palermo (one of my favorite speakers) and the recording of the event is now available online. Thanks to Scott Cate and the EventDay staff for taking time to record, index, and publish the event – they did an awesome job.

I discussed using the HTML5 canvas along with JavaScript patterns to make your code more reusable and easier to maintain. Click the image below to watch the presentation.

Several other people presented as well including my good buddies Rick Garibay, Joe Guadagno, and of course Michael Palermo. Here’s a complete list of all the videos from the event:

For more information about onsite or online training, mentoring and consulting solutions for HTML5, jQuery, .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com.

Techniques, Strategies and Patterns for Structuring JavaScript Code

dwahlin — Mon, 31 Oct 2011 21:26:00 GMT

JavaScript has come a long way since the mid-90s when I first started working with it in Netscape 3 and Internet Explorer 3. Back in the day I thought JavaScript was a painful to use but over the years I’ve learned to love it and appreciate what it offers as a language. JavaScript is quite flexible and can perform a wide variety of tasks on both the client-side and server-side. In fact, I used to prefer it to VBScript on the server-side when writing classic ASP applications and today we have server-side frameworks such as Node.js that are JavaScript based. With the rise of HTML5 and new features such as the Canvas API and SVG JavaScript is more important than ever when building applications. As applications use more JavaScript it’s important that the code is structured in a way that’s easy work with and maintain.

Although JavaScript isn’t designed with the concept of classes or object oriented programming in mind as with C# or Java, with a little work you can achieve similar results. In this series of posts I’ll discuss a few popular techniques/strategies/patterns (pick whichever term you prefer) for structuring JavaScript to encapsulate functionality much like classes do, hide private members, and provide a better overall re-use strategy and maintenance story in applications. The patterns that will be discussed in upcoming posts include:

I’ll use a calculator example throughout the posts to demonstrate different techniques that can be used for structuring JavaScript code. I decided on a calculator since it provides a simple starting point that everyone understands without needing a detailed explanation. An example of the calculator interface is shown next.

I use specific add, subtract, multiply, divide functions in the code that’ll be shown mainly because I tend to avoid eval() and I wanted to add enough functions to realistically demonstrate why taking the time to learn JavaScript code structuring techniques and patterns is worthwhile. In this first post in the series we’ll look at the technique most people use when writing JavaScript code, examine the role of closures, and discuss different ways to define variables. After that I’ll add additional posts covering the patterns mentioned earlier.

Function Spaghetti Code

Most people (including myself) start out writing JavaScript code by adding function after function into a .js or HTML file. While there’s certainly nothing wrong with that approach since it gets the job done, it can quickly get out of control when working with a lot of code. When lumping functions into a file, finding code can be difficult, refactoring code is a huge chore (unless you have a nice tool like Resharper 6.0), variable scope can become an issue, and performing maintenance on the code can be a nightmare especially if you didn’t originally write it. The following code sample demonstrates using the function based approach to create a simple calculator that I threw together. It’s not perfect, but it gets the job done for the pattern samples that will be posted later.

window.onload = function () {
    eqCtl = document.getElementById('eq');
    currNumberCtl = document.getElementById('currNumber');
};

var eqCtl,
    currNumberCtl,
    operator,
    operatorSet = false,
    equalsPressed = false,
    lastNumber = null;

function add(x,y) {
    return x + y;
}

function subtract(x, y) {
    return x - y;
}

function multiply(x, y) {
    return x * y;
}

function divide(x, y) {
    if (y == 0) {
        alert("Can't divide by 0");
        return 0;
    }
    return x / y;
}
     
function setVal(val) {
    currNumberCtl.innerHTML = val;
}
        
function setEquation(val) {
    eqCtl.innerHTML = val;
}
        
function clearNumbers() {
    lastNumber = null;
    equalsPressed = operatorSet = false;
    setVal('0');
    setEquation('');
}

function setOperator(newOperator) {
    if (newOperator == '=') {
        equalsPressed = true;
        calculate();
        setEquation('');
        return;
    }
            
    //Handle case where = was pressed
    //followed by an operator (+, -, *, /)
    if (!equalsPressed) calculate();
    equalsPressed = false;
    operator = newOperator;
    operatorSet = true;
    lastNumber = parseFloat(currNumberCtl.innerHTML);
    var eqText = (eqCtl.innerHTML == '') ? 
        lastNumber + ' ' + operator + ' ' : 
        eqCtl.innerHTML + ' ' + operator + ' ';
    setEquation(eqText);
}

function numberClick(e) {
    var button = (e.target) ? e.target : e.srcElement;
    if (operatorSet == true || currNumberCtl.innerHTML == '0') {
        setVal('');
        operatorSet = false;            
    }
    setVal(currNumberCtl.innerHTML + button.innerHTML);
    setEquation(eqCtl.innerHTML + button.innerHTML);
}

function calculate() {
    if (!operator || lastNumber == null) return;
    var currNumber = parseFloat(currNumberCtl.innerHTML),
        newVal = 0;
    //eval() would've made this a whole lot simpler
    //but didn't want to use it in favor of a more
    //"robust" set of methods to demo patterns
    switch (operator) {
        case '+':
            newVal = add(lastNumber, currNumber);
            break;
        case '-':
            newVal = subtract(lastNumber, currNumber);
            break;
        case '*':
            newVal = multiply(lastNumber, currNumber);
            break;
        case '/':
            newVal = divide(lastNumber, currNumber);
            break;
    }
    setVal(newVal);
    lastNumber = newVal;
}

Although I’m quite confident this code can be refactored in some manner within the functions (it was thrown together quickly for demonstration purposes), you can see it performs a few key calculator features such as handling arithmetic operations, detecting when operators are selected and performing calculations. Although everything shown in the code is standard JavaScript and works fine, as the number of functions grows things can quickly get out of hand. You can put the code in a file named calculator.js and then use it in as many pages as you’d like. However, if you come from an object oriented language you’d probably like to encapsulate the functionality into the equivalent of a “class”. Although classes aren’t supported directly in JavaScript, you can emulate the functionality using different types of patterns.

Another problem with this type of code is that any variables defined outside of functions are placed in the global scope by default. The script shown above adds 6 variables to the global scope (the functions get added as well by the way). This means that they can more easily be stepped on or changed by anything in your script or another script that may be using the same variable names. It’d be nice to localize the global variables and limit their scope to avoid variable and scope conflicts. Fortunately that can be done using functions. However, if you define a variable in a function it goes away after the function returns right? That problem can be remedied by using closures which are an important part of the JavaScript patterns that I’ll cover in this series.

What are Closures?

The patterns that will be discussed in this series rely on a key concept in JavaScript called closures. If you’re new to closures then I highly recommend reading the JavaScript Closures for Dummies article since it provides a nice overview along with several samples. Closures are important because they allow stateful objects to be created without relying on variables defined in the global scope. By using closures you can emulate features found in the class approach taken by object-oriented languages such as C# and Java.

A closure is created when a function has variables that are bound to it in such a way that even after the function has returned, the variables stick around in memory. So what’s the magic that allows variables to be “bound” in such a way that they stick around even after a function returns? The answer is nested functions. When one function has a nested function inside of it, the nested function has access to the vars and parameters of the outer function and a “closure” is created behind the scenes. Douglas Crockford explains this with the following quote:

“What this means is that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.”

To better understand closures examine the following code representing a standard JavaScript function without any closures:

function myNonClosure() {
    //variable will not be stored in a closure between calls
    //to the myNonClosure function
    var date = new Date();
    return date.getMilliseconds();
}

When the myNonClosure function is invoked the date variable will be assigned a new Date object. The function then returns the milliseconds. Calling the function multiple times will cause the date variable to be assigned a new value each time. This is of course the expected behavior. With a closure, a variable can be kept around even after a function returns a value. An example of a function named myClosure() that creates a closure is shown next:

//closure example 
function myClosure() {
    //date variable will be stored in a closure
    //due to the nested function referencing it
    var date = new Date();

    //nested function 
    return function () {
        var otherDate = new Date();
        return "Closure variable value for milliseconds: <span class='blue'>" +
                date.getMilliseconds() +
                "</span><br>Non closure variable value for milliseconds: <span class='red'>" +
                otherDate.getMilliseconds() +
                "</span>";
    };
}

Looking through the code you can see that a variable named date is assigned a Date object which is similar to the variable shown earlier. However, notice that myClosure returns a nested function which references the date variable. This creates a closure causing the date variable to be kept around even after a value has been returned from the function. To see this in action the following code can be run:

window.onload = function () {
    //Using a closure
    var output = document.getElementById('Output'),
        closure = myClosure();
    output.innerHTML = closure();
    setTimeout(function() {
        output.innerHTML += '<br><br>' + closure();
    }, 1500);
};

The code first references the myClosure() function and stores it in a variable named “closure”. The nested function is then called with the closure() call (note that the name “closure” could be anything – I chose it simply to make its purpose obvious) which invokes the function and returns the current milliseconds. Next, a timeout is set to execute closure() again after 1.5 seconds have elapsed. The results of running the code are shown next. They demonstrate how the date variable is kept around even across multiple calls to the myClosure function. This is an important feature of JavaScript that is leveraged by the different patterns that will be shown.

Here’s a final example of a closure for you to study. It follows one of the patterns that will be shown later in this series. Note that the myNestedFunc variable references a nested function that accesses the date variable.

var myClosure2 = function () {
    var date = new Date(),
        myNestedFunc = function () {
            return "Closure for myNestedFunc: " + date.getMilliseconds();
        };
    return {
        myNestedFunc: myNestedFunc
    };
} ();

This code is called using the following syntax.

output.innerHTML += '<br><br>'+ myClosure2.myNestedFunc();

Defining Variables

Defining variables in JavaScript is one of the more simple aspects of the language. However, there are a few different ways to do it. For example, the following code is completely valid and what most people getting started with JavaScript do:

var eqCtl;
var currNumberCtl;
var operator;
var operatorSet = false;
var equalsPressed = false;
var lastNumber = null;

Although this code works fine, tools such as JSLint for Visual Studio will let you know to define the variables differently. In the posts that follow you’ll see code similar to the following when defining variables. It only uses the JavaScript var keyword once and then separates variables with a comma. The code ultimately does the same thing as the code above but it reduces the size of the script and is more readable once you get used to it. Here’s an example of defining variables that keeps JSLint and other tools happier when they inspect your code:

var eqCtl,
    currNumberCtl,
    operator,
    operatorSet = false,
    equalsPressed = false,
    lastNumber = null;

In the next post I’ll discuss the Prototype Pattern and how you can use it to convert function spaghetti code into a more structured object.

Demos of all the patterns covered in this series can be downloaded below.

Download Code

Thanks to John Papa for taking the time to review the code and offer suggestions and feedback.

Pluralsight Course - Structuring JavaScript Code in HTML5 Applications

If you're interested in additional information about structuring JavaScript code check out my Pluralsight course. Here's a sample from the course covering closures.

Demo - Working with Closures in JavaScript

The Tablet Show - “Resist the Drama”

dwahlin — Thu, 27 Oct 2011 02:09:53 GMT

I had an opportunity to talk with Carl Franklin and Richard Campbell (the .NET Rocks guys) on their new show called The Tablet Show. It’s always fun talking with them since there’s never a boring moment or lull in the conversation. In this episode we talk about the new WinRT framework used to build Metro apps in Windows 8, the future of Silverlight, the drama some developers seem to love, and a bunch of other topics related to development including why Microsoft is moving toward the Start Screen that you see in Windows 8. Give the show a listen by clicking the image below.

Dan Wahlin's WebLog

jQuery Tip #2 - Manipulating the DOM in a Loop

Conclusion

jQuery Tip #1 – Defining a Context When Using Selectors

Defining a Context when using Selectors

Conclusion

Upcoming ASP.NET, HTML5 and Windows 8 Talks and Workshops at DevConnections 2012

Working with the JavaScript “this” Keyword

Videos on JavaScript and jQuery

Using the JavaScript Prototype Property to Structure and Extend Code

Getting Started with JavaScript Prototyping

Overriding with Prototype

Interested in learning more about structuring JavaScript code?

New Pluralsight Course - Structuring JavaScript Code in HTML5 Applications

Silverlight 5 Released with a lot of Great New Features

Reducing JavaScript Code Using jsRender Templates in HTML5 Applications

Defining a Template Block

Rendering a Template

jsRender in Action

A Few of My Favorite HTML5 and CSS3 Online Tools

HTML5 Boilerplate

Initializr

CSS3 Maker

CSS3, Please!

Ultimate CSS Gradient Generator

@font-face Fonts

HTML5 & CSS3 Support and Tests

CSS3 Easing Animation Tool

Detecting HTML5/CSS3 Features using Modernizr

Getting Started with Modernizr

Modernizr and the HTML Element

Working with HTML5 and CSS3 Features

Loading Scripts using Modernizr

Conclusion

New Pluralsight Course: Introduction to Building Windows 8 Metro Applications

Introduction to Building Windows 8 Metro Applications

Sample Video: Handling Events in HTML/JavaScript Metro Apps

Table of Contents

HTML5, JavaScript, and Windows 8 Metro Talk Slides from DevConnections Las Vegas

Video: HTML5 and JavaScript Tips

Techniques, Strategies and Patterns for Structuring JavaScript Code

Function Spaghetti Code

What are Closures?

Defining Variables

Download Code

Pluralsight Course - Structuring JavaScript Code in HTML5 Applications

The Tablet Show - “Resist the Drama”