Underscore.js is a tiny JavaScript utility library that makes working with some of the common data structures used in JavaScript much easier Common Methods _.union(myArray2, myArray3) to concatenate two arrays _.uniq(myArray3) to strip duplicates from array _.zip(myArray, myArray2) to return arrays where the nth value of each array is paired [0, 0], [1, 1], [2, […]

Save to local storage via .setItem() with a key/value pair localStorage.setItem(‘my_key’, ‘array,string,whatever’); Pull from local storage via .getItem() using the key localStorage.getItem(‘my_key’);

Install the Grunt command line tool (requires node.js installed on your machine)… sudo npm install grunt-cli -g Create package.json in root of project (list of Grunt plugin dependencies) npm install (install the dependencies) Create Gruntfile.js in root of project (configuration) Basically, you need three different functions to work with Grunt: grunt.initConfig, grunt.loadNpmTasks, and grunt.registerTask Resources Grunt: A Build Tool […]

This pattern is essentially the same as the Module Pattern, except all of the functions and variables are defined in the private scope, and we return an object with pointers to the private functionality that we wish to make public. var myRevealingModule = function () { var privateCounter = 0; function privateFunction() { privateCounter++; } […]

Use decimals cautiously because JavaScript uses Binary Floating Point numbers, so 0.1 + 0.2 = 0.30000000000000004. To get around this issue, you can multiply your numbers to remove the decimal portion. var hamburger = 8.20; var fries = 2.10; var total = hamburger + fries; console.log(total); //Outputs 10.299999999999999 hamburger = hamburger * 100; fries = fries * […]

You can scope this in JavaScript through call(), apply(), or bind().

RequireJS loads scripts asynchronously and out of order for speed Define modules with dependencies Written in JS, so “.js” is not needed when declaring scripts to load <script src=”/Scripts/require.js” data-main=”/Scripts/app/main.js”></script> Contents of main.js could look like this… require([ “mylibs/utils”, “mylibs/palette” ], function(utils, palette){ // The app is loaded… } ); Defining dependencies in a JS […]

Node is written in C, not JavaScript Node is a server-side program which handles the grunt work of networking Node processes JavaScript which makes writing server-side code somewhat easier Node commands start with npm in the terminal

Overview Views observe Models The traditional controller role is performed by the template, not by the Backbone View Model persistence is the storage and synchronization of data A group of Models is a Collection A Model or Collection may have multiple Views observing it for changes Collections are useful for performing any aggregate computations across […]

Good for building single-page applications with a complex user interface (heavy lifting for view rendering) and for reducing the number of HTTP requests (data manipulation).  Web applications such as GMail, LinkedIn, and Facebook.  Do you want the page/view rendering handled by the browser or server? Resources Addy Osmani, Developing Backbone.js Applications (O’Reilly, 2013)

Start with a global object variable declaration and extend that object with properties… var wnt = {}; //Start with the global declaration wnt.util = {}; //Add a new level (if desired) wnt.util.urlparameter = function(name) { return decodeURI( (RegExp(name + ‘=’ + ‘(.+?)(&|$)’).exec(location.search)||[,null])[1] ); }; //Turn a level into a method alert(eval(wnt.util.urlparameter(‘page’))-1); //assumes URL ends with […]

Writing this… if (index === 2) { return null } else { return value; } Is the same as saying… //return [test condition] ? [return this if true] : [return this if false] return index === 2 ? null : value; OR var myVariable = condition ? this_if_true : that_if_false;

A JavaScript library that helps you write less and do more. $() is the same as jquery() Selectors: $(#id), $(element), $(.class), $(#multiple .selectors), $(p:first), $(p:last), $(p)[0] Adding .eq(#) counts 0-based forward or backwards from beginning or end of a set .size() method returns number of elements in the set $(document).ready(function(){…}); is the same as using […]

Some simple JavaScript to mask emails from spammers… function grimauld12(ww, f, h){ var cmd1 = “ma”; var cmd2 = “ilt”; var cmd3 = “o:”; location.href = cmd1+cmd2+cmd3+ww+”@”+f+”.”+h; }