var clone = function(o) {
    function F(){}
    F.prototype = o;
    return new F;
};

// Our insect prototype
var Bug = {
    species: "Prototype Bug",
    attributes: [
        'Three Body Segments',
        'Six Legs',
        'Exo-Sekelton'
    ],
    getSpecies: function() {
        return this.species;
    }
};

var beetle = clone(Bug);
beetle.species = 'Beetle';
beetle.attributes.push('Eats Dung');

// we now have a child of the prototype with additional attributes.
console.log(beetle);

// The prototype
var ladyBug = clone(Bug);
ladyBug.species = 'Japanese Bug';
console.log(ladyBug);

The problem here is that the ladyBug object gets the attribute ‘Eats Dung’, because beetle actually modified a reference to the attributes in the prototype, not its own copy. This will trip up programmers that are used to a classical inheritance model.

The solution is to create factory functions to provide these properties and methods.

var Bug = {
    getSpecies: function() {
        return this.species;
    }
};
Bug.species = 'default species';
Bug.addBugAttributes = function() {
    var attr = ['three body segments', 'six legs', 'compound eyes'];
    return attr;
};
Bug.attributes = Bug.addBugAttributes();

var beetle = clone(Bug);
beetle.species = 'Beetle';
beetle.attributes = Bug.addBugAttributes();
beetle.attributes.push('Eats Dung');

var ladyBug = clone(Bug);
ladyBug.species = 'Japanese Beetle';
ladyBug.attributes = Bug.addBugAttributes();
ladyBug.attributes.push('Eats Aphids');

console.log(ladyBug);
console.log(beetle);

Very handy little tool that will be part of my tool kit going forward.

Bricss – Simple responsive design test page.

Can you use a constructor to create primitives?

In other words:

var x = new Boolean(false);

I thought about it, and answered, “Sure. But why?” I mean, we aren’t programming in Java here. This type of constructor is also dangerous.

// Don't do this in production
var maybeAlertUser = new Boolean(false);

(maybeAlertUser  === true); // this is false, but ...

if (maybeAlertUser) {
    // this always alerts
    alert("Houston, we have a problem");
}

alert(typeof maybeAlertUser); // object

We discussed that it is safe to use the object to type cast:

var x = 0;
var maybeAlertUser = Boolean(x);

if (maybeAlertUser) {
    // this never alerts
    alert("Houston, we have a problem");
}

(maybeAlertUser === false); // yup!

The JavaScript idiom to use negation operator seems to be just as safe. In this instance, the first operation converts zero to a boolean and inverts the value (turning it to true). And the second inverts the value (turning it to false), but it strikes terror into Java coders.

var x = 0;
var maybeAlertUser = !! x;

if (maybeAlertUser) {
    alert("Houston, we have a problem"); // never alerts
}

(maybeAlertUser === false); // yup!

Which do you prefer?

HTML5 has been the buzzword with the web development community for a while now. If you feel a bit overwhelmed and behind the pack, never fear. This session is all you need to get up to speed, fast. We cover everything from the new HTML5 elements, to microdata, to the new JavaScript APIs.

See the full article: HTML5 and You | Nettuts+.

Test-Driven JavaScript Development in Practice

Christian Johansen on Jan 14th 2012

Tutorial Details

• Topic: JavaScript Testing
• Difficulty: Intermediate-Advanced

TDD is an iterative development process where each iteration starts by writing a test which forms a part of the specification we are implementing. The short iterations allow for more instant feedback on the code we are writing, and bad design decisions are easier to catch. By writing the tests prior to any production code, good unit test coverage comes with the territory, but that is merely a welcome side-effect.

See the full article:  Test-Driven JavaScript Development in Practice | Nettuts+.

Zurb grid boiler plates
http://foundation.zurb.com/

Nettuts : web tutorials
http://www.nettuts.com

CSS Tips and Tricks
http://css-tricks.com/

The topic of encapsulation in JavaScript came up in our bi-weekly technologists group recently. First question was, what is encapsulation and why is it a good thing. The first obvious benefit is the elimination of global values.

An example with global variables. TAX_RATE is vulnerable; it is a global variable that can be overwritten.

// Not Best Practice. Relies on Global variables and functions.
var TAX_RATE = 0.07;

function calculateTotalPrice(basePrice) {
    return basePrice + (basePrice * TAX_RATE);
}

function calcPrice () {
    var basePrice = document.getElementById('ex1_basePrice').value;
    basePrice = basePrice - 0; // cast to integer
    var totalPrice = calculateTotalPrice(basePrice);
    document.getElementById('ex1_totalPrice').value = totalPrice;
}

The problem with the global variable, or course, is that anything can come along a modify it. In this HTML example, click Calculate Price. Then open a console window (Use Firebug or Developer Tools) and alter this global variable:

> TAX_RATE = 1.00;

Now click Calculate Price. It would be just as easy to overwrite the global functions to produce different values:

> calcPrice = function() { return 1; }

Now our price calculation is completely re-written.

One practice to prevent the collision of global variables is to organize them in a single global variable:

var myApp = {
    TAX_RATE: 0.08,
     
    calculateTotalPrice: function(basePrice) {
        return basePrice + (basePrice * this.TAX_RATE);
    },
     
    calcPrice: function() {
        var basePrice = document.getElementById('ex3_basePrice').value;
        basePrice = basePrice - 0;
        var totalPrice = myApp.calculateTotalPrice(basePrice);
        document.getElementById('ex3_totalPrice').value = totalPrice;
    }
};

This works, but it can still leave myApp vulnerable. myApp.TAX_RATE is still globally accessible.

Using encapsulation, it is possible to create protected members.

var calcPrice2 = (function() {
    // private
    var PRIVATE_TAX_RATE = 0.05;

    function calculateTotalPrice2(basePrice) {
        return basePrice + (basePrice * PRIVATE_TAX_RATE);
    }

    // public
    return function() {
        var basePrice = document.getElementById('ex2_basePrice').value;
        basePrice = basePrice - 0;
        var totalPrice = calculateTotalPrice2(basePrice);
        document.getElementById('ex2_totalPrice').value = totalPrice;
    };
})();

The trick:

Math.max.apply(Math, array);

Awesome. It returns the highest value in the array.

What happens if a member of array can’t be parsed as a Number? It returns NaN. Which is great, but I wondered if I can wrap that in a try/catch block and catch NaN. Not exactly, but I can come close.

The try/catch/finally mechanism isn’t exactly new in JavaScript, but it is, In my opinion, under-utilized. Mostly, developers use it to protect code from errors. Consider:

var foo;

try {
    foo.undefinedFunction("bar");
} catch (ex) {
    console.log(ex);
}

alert("the error didn't stop me.");

In this example, the try catch is used instead of the traditional if (typeof foo.undefinedFunction !== “undefined”) .

But it is possible with JavaScript keyword throw to implement exception handling.

function getMaxValueOfArray(ar) /* throws illegal argument error, NaN error */ {
    var n;
    if (ar instanceof Array) {
        if (isNaN(n = Math.max.apply(Math, ar))) {
            throw new Error("NaN error. The first argument to getMax must be an array of Numbers");
        }

        return n;
    } else {
        throw new Error("illegal Argument. The first argument to getMax must be an instance of Array");
    }
}

var max;
try {
   max = getMaxValueOfArray('1');
} catch (ex) {
  alert(ex);
}

try {
    max = getMaxValueOfArray([1, 'foo', 2]);
} catch(ex) {
   alert(ex);
}

try {
     max = getMaxValueOfArray([1, 4, 2]);
} catch(ex) {
     alert(ex);
}

max;

We can extend the practice and add some more debugging information for FireFox with a custom function:

function CustomError(errorName, errorMessage) {
   var error = new Error();
   error.name = errorName;
   error.message = errorMessage;

// For FireFox at least, there is property called stack to hold the stack trace.
   if (typeof error.stack !== "undefined") {
      var errorstack = error.stack.split(/\s*(@|at)\s*/);
      errorstack = errorstack[errorstack.length - 1]
                   .replace(/^\s+|\s+$/g, '')
                   .split(/\:([0-9]+)/);
      error.fileName = errorstack[0];
      error.lineNumber = errorstack[1];
   }
   return error;
}

function getMaxValueOfArray(ar) /* throws illegal argument error, NaN error */ {
    var n;
    if (ar instanceof Array) {
        if (isNaN(n = Math.max.apply(Math, ar))) {
            throw new CustomError("NaN Error", "The first argument to getMax must be an array of Numbers");
        }

        return n;
    } else {
        throw new CustomError("illegalArgument Error", "The first argument to getMax must be an instance of Array");
    }
}

var max;
try {
   max = getMaxValueOfArray('1');
} catch (ex) {
   ex.stack ? alert(ex.stack) : alert(ex);
}

try {
    max = getMaxValueOfArray([1, 'foo', 2]);
} catch(ex) {
    ex.stack ? alert(ex.stack) : alert(ex);
}

try {
     max = getMaxValueOfArray([1, 4, 2]);
} catch(ex) {
     ex.stack ? alert(ex.stack) : alert(ex);
}

Further reading: http://www.sitepoint.com/throwing-better-errors-using-stack/

Understanding Prototypal Inheritance in JavaScript

02 February 2011

Behavior reuse is one of the key aspects of Object Oriented programming. Many mainstream Object Oriented languages, achieves behavior reuse by using class based inheritance. In class based inheritance, a class defines how objects stemming from it should behave.

However, not all languages use class based inheritance to achieve behavior reuse. The best possible example is JavaScript. It doesn’t have a concept of classes. Some people often confused about JavaScript’s object oriented capabilities due to this fact. But in reality, JavaScript is a more expressive and flexible Object Oriented language compared to some of the mainstream languages.

If JavaScript doesn’t have class based inheritance, how does it reuse the behavior? For that it follows the technique called Prototypal Inheritance.

See the Full Article: Understanding Prototypal Inheritance in JavaScript | LakTEK.

Ian Devlin on Jan 4th 2012

Tutorial Details

• Topic: HTML5 Media
• Difficulty: Moderate

In this tutorial, you’ll learn how HTML5 helps to provide you with several ways of presenting your media content to users. As a result, you’ll increase the availability of your media to users with different needs and requirements, making it more accessible.