12 Simple (Yet Powerful) JavaScript Tips

»feb. 20 2013 38

(For Badass JavaScript Development)

NOTICE: I have written only 2 of the 12 tips so far, but I plan to post all 12 Powerful Tips eventually.

I provide you with 12 simple, yet powerful, JavaScript tips and detailed explanation of each. These are techniques that all JavaScript programmers can use now; you needn’t be an advanced JavaScript developer to benefit from these tips. After you read all of the detailed explanations of how each technique works and when to use it, you will have become a more enlightened JavaScript developer, if you aren’t already one.

Indeed, notable JavaScript masters and enlightened JavaScript developers have been using many of these techniques to write powerful, efficient JavaScript. And in a bit, you will, too.

  • Receive Updates

  1. Powerful JavaScript Idiomatic Expressions With && and ||

    You see these idiomatic expressions in JavaScript frameworks and libraries. Let’s start off with a couple of basic examples:

    Example 1: Basic “short circuting” with || (Logical OR)
    To set default values, instead of this: Continue Reading

Handlebars.js Tutorial: Learn Everything About Handlebars.js JavaScript Templating

»feb. 18 2013 123


(A Comprehensive Handlebars.js Tutorial)

This is a complete tutorial, and indeed a reference, on Handlebars.js templating and, principally, JavaScript templating. Handlebars.js is a client-side (though it can be used on the server, too) templating engine for JavaScript. It is a JavaScript library that you include in your page just as you include any other JavaScript file. And with it, you can add templates to your HTML page that will be parsed and interpolated (values of properties inserted in place) with the values from the data you passed to the Handlebars.js function.

  • Receive Updates

Written in JavaScript, Handlebars.js is a compiler that takes any HTML and Handlebars expression and compiles them to a JavaScript function. This derived JavaScript function then takes one parameter, an object—your data—and it returns a string with the HTML and the object properties’ values inserted into the HTML. So, you end up with a string that has the values from the object properties inserted in the relevant places, and you insert that string as HTML on the page.

Do I Have To Use a JavaScript Templating Engine? If so, Why?
Continue Reading

Learn Node.js Completely and with Confidence

»feb. 4 2013 112

Duration of Course: About 2 weeks
Prerequisite: JavaScript knowledge of 5/10

This is the age of the JavaScript developer, and it will only get better, particularly because of the widespread adoption of HTML5; the abandonment of Flash; the ubiquity of mobile devices; the recent rise of Meteor.js; and the popularity, stability, and robustness of Node.js, which allows developers to use JavaScript on the server.

Our Career Paths and Courses Website Is Now Live

Learn.Modern Developer Launched

Our first cohort is in session: 97% of our first cohort on target to graduate. Enroll in the second cohort. Career Path 1: JavaScript Developer and Career Path 3: Modern Frontend Developer usually fill up quickly.


Node.js, a revolutionary technology, is the immediate and near future of modern web application development with JavaScript as the sole server-side language. In this article, I provide you with a comprehensive road map for learning Node.js; this road map has worked for me and I am confident it will work for you. You will learn Node.js completely and you should approach this course with confidence because you are only 2 to 3 weeks away from building impressive modern web applications in short time.

  • Receive Updates

Why Learn Node.js
JavaScript is the language of the web today and unquestionably for the near future because there is no known alternative to JavaScript in the works. The ECMAScript organization has been moving full pace ahead with advancing the JavaScript language.

With a solid understanding of Node.js, you will be able to use JavaScript to develop real-time, fast, scalable, data-driven web applications, and you will have the requisite knowledge to quickly adapt to any of the emerging, cutting-edge JavaScript technologies like Derby.js and Meteor.js. Incidentally, I have recently written a Learn Meteor Properly article and roadmap.
Continue Reading

Understand JavaScript Closures With Ease

»feb. 2 2013 238

Closures allow JavaScript programmers to write better code. Creative, expressive, and concise. We frequently use closures in JavaScript, and, no matter your JavaScript experience, you will undoubtedly encounter them time and again. Sure, closures might appear complex and beyond your scope, but after you read this article, closures will be much more easily understood and thus more appealing for your everyday JavaScript programming tasks.

This is a relatively short (and sweet) post on the details of closures in JavaScript. You should be familiar with JavaScript variable scope before you read further, because to understand closures you must understand JavaScript’s variable scope.

  • Receive Updates

What is a closure?
A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.

You create a closure by adding a function inside another function.
A Basic Example of Closures in JavaScript:

function showName (firstName, lastName) {

var nameIntro = "Your name is ";
    // this inner function has access to the outer function's variables, including the parameter
function makeFullName () {
return nameIntro + firstName + " " + lastName;

return makeFullName ();


showName ("Michael", "Jackson"); // Your name is Michael Jackson

Closures are used extensively in Node.js; they are workhorses in Node.js’ asynchronous, non-blocking architecture. Closures are also frequently used in jQuery and just about every piece of JavaScript code you read.
A Classic jQuery Example of Closures:

$(function() {

var selections = []; 
$(".niners").click(function() { // this closure has access to the selections variable
selections.push (this.prop("name")); // update the selections variable in the outer function's scope


Closures’ Rules and Side Effects
Continue Reading

JavaScript Variable Scope and Hoisting Explained

»jan. 31 2013 102

In this post, we will learn JavaScript’s variable scope and hoisting and all the idiosyncrasies of both.

We must understand how variable scope and variable hoisting work in JavaScript, if want to understand JavaScript well. These concepts may seem straightforward; they are not. Some important subtleties exist that we must understand, if we want to thrive and excel as JavaScript developers.

  • Receive Updates

Variable Scope
A variable’s scope is the context in which the variable exists. The scope specifies from where you can access a variable and whether you have access to the variable in that context.

Variables have either a local scope or a global scope.

Local Variables (Function-level scope)
Unlike most programming languages, JavaScript does not have block-level scope (variables scoped to surrounding curly brackets); instead, JavaScript has function-level scope. Variables declared within a function are local variables and are only accessible within that function or by functions inside that function. See my post on Closures for more on accessing variables in outer functions from inner functions.
Continue Reading

JavaScript Objects in Detail

»jan. 27 2013 169

JavaScript’s core—most often used and most fundamental—data type is the Object data type. JavaScript has one complex data type, the Object data type, and it has five simple data types: Number, String, Boolean, Undefined, and Null. Note that these simple (primitive) data types are immutable (cannot be changed), while objects are mutable (can be changed).

Our Career Paths and Courses Website Is Now Live

Learn.Modern Developer Launched

Our first cohort is in session: 97% of our first cohort on target to graduate. Enroll in the second cohort. Career Path 1: JavaScript Developer and Career Path 3: Modern Frontend Developer usually fill up quickly.


What is an Object
An object is an unordered list of primitive data types (and sometimes reference data types) that is stored as a series of name-value pairs. Each item in the list is called a property (functions are called methods).

Consider this simple object:

var myFirstObject = {firstName: "Richard", favoriteAuthor: "Conrad"};

Think of an object as a list that contains items, and each item (a property or a method) in the list is stored by a name-value pair. The property names in the example above are firstName and favoriteAuthor. And the values are “Richard” and “Conrad.”

  • Receive Updates

Continue Reading

JavaScript Prototype in Plain Language

»jan. 25 2013 147

Prototype is a fundamental concept that every JavaScript developer must understand, and this article aims to explain JavaScript’s prototype in plain, detailed language. If you don’t understand JavaScript’s prototype after reading this blog post, please ask questions in the comments below. I will personally answer all questions.

To understand prototype in JavaScript you must understand objects in JavaScript. If you aren’t already familiar with objects, you should read my post JavaScript Objects in Detail. Also, know that a property is simply a variable defined on a function.

  • Receive Updates

There are two interrelated concepts with prototype in JavaScript:

  1. First, every JavaScript function has a prototype property (this property is empty by default), and you attach properties and methods on this prototype property when you want to implement inheritance. This prototype property is not enumerable; that is, it isn’t accessible in a for/in loop. But Firefox and most versions of Safari and Chrome have a __proto__ “pseudo” property (an alternative syntax) that allows you to access an object’s prototype property. You will likely never use this __proto__ pseudo property, but you should know that it exists and it is simply a way to access an object’s prototype property in some browsers.

    The prototype property is used primarily for inheritance; you add methods and properties on a function’s prototype property to make those methods and properties available to instances of that function.

    Consider this simple example of inheritance with the prototype property (more on inheritance later):
    Continue Reading

Pilgrimage to JavaScript Mastery

»jan. 20 2013 7

(From Absolute Beginner to Attainment)

Join me as we embark on a pilgrimage to JavaScript mastery—where the eminent few reside in a consciousness of JavaScript enlightenment and programming prominence. This mastery is a state of mindfulness that such experts as Douglas Crockford, John Resig, and Nicholas Zackas, amongst others, possess, and it is this state we are destined for, even as we have no assurance we will arrive there and it is unlikely we will ever get there.

Yes, we will endure inevitable bugs, tireless frustrations, ever-changing frameworks, and unknown circumstances that we must debug and resolve. But we are guaranteed insightful discoveries, euphoric accomplishments, and technical scholarship while on this pilgrimage. And even though we may never experience JavaScript enlightenment quite like Crockford and Zakas, we will be better programmers, accomplished developers, and perhaps successful entrepreneurs along the way.

On this pilgrimage, we will learn mostly from books (that we should each own) by Nicholas C. Zakas, David Flanagan, David Herman (new author), Douglas Crockford, and others, and from outstanding blog posts by prolific JavaScript bloggers like Addy Osmani.

Our journey has just begun; everyone is invited to join anytime. We have already learned JavaScript properly and Backbone.js completely, but we have much to learn. We will thoroughly understand sixteen JavaScript concepts that we must know well, and we will continue to learn scores of advanced JavaScript topics and modern JavaScript frameworks along the way.

Later, we will have a place to show our projects and encourage each other.

Keep an eye on the Upcoming Posts section in the sidebar for where our journey will take us next.

Learn Backbone.js Completely

»jan. 14 2013 111

(More Than Just a Complete Backbone.js Tutorial)

Duration: 25 to 30 hours
Prerequisite: JavaScript knowledge of 5/10

Below, I provide you with a comprehensive study guide that I myself have used (indeed, I have refined it for this article) to learn Backbone.js properly. This study guide should take just about 30 hours to complete.

Our Career Paths and Courses Website Is Now Live

Learn.Modern Developer Launched

Our first cohort is in session: 97% of our first cohort on target to graduate. Enroll in the second cohort. Career Path 1: JavaScript Developer and Career Path 3: Modern Frontend Developer usually fill up quickly.


After I learned Backbone.js, the first application I built was an eCommerce web application for a client—a startup. I built the entire app, including the shopping cart, with Backbone.js and Node.js.

  • Receive Updates

Backbone.js Is Friendly
Backbone.js is neither difficult to learn nor difficult to use, and the time you will spend learning to use this serviceable framework will be well worth it, for you will learn how to use one of the most popular front-end frameworks and learn how to build modern web applications on the front end. In addition, you will see your market value as a JavaScript developer rise, since Backbone.js developers are in high demand.

Before we Continue
I should note that Angular.js and Ember.js are robust and feature-rich front-end frameworks that offer more than Backbone.js, and they allow you to develop applications with less code than Backbone.js. Nonetheless, I still think developers should learn Backbone.js first, particularly because it is easier to learn and provides you with a solid understanding of what a JavaScript framework is and how a JavaScript framework functions.

I chose Backbone.js for the aforementioned eCommerce web application because I had only a few days to learn a JS framework and I needed a proven JS framework since I was developing a web application for a client. And at that time (around 2012) Backbone.js had the more thorough documentation and the most active community of all the front-end JavaScript frameworks. In addition, Backbone.js had the most impressive list of real websites and web applications built with the framework.

What is Backbone.js and Why You Should Learn It

If you have never used a JS front-end framework before, you will understand why nearly every modern web application uses a front-end JS framework.

  • Receive Updates

What is Backbone.js?
Backbone.js is a JavaScript front-end framework that provides the structure and organization for your application code, the event-based communication for your application, and the necessary interconnectedness for your data, application logic, and user interface (the HTML/CSS elements seen on the web page). Simply put, Backbone.js allows us to develop applications, the front-end in particular, much easier and better (more scalable, reusable, and modular code) than using just a bunch of related and unrelated JavaScript functions stacked on top of each other, a concept known as Vanilla JavaScript.
Continue Reading

JavaScript is Super Sexy

»sept. 6 2012 11

JavaScript is super sexy, mature, and stateful; it has an attractive frontend and a firm, kick ass backend. It is svelte and versatile, and its functions are dynamic.

It is affectionate to both hardcore pros and virgin noobs; it is even inviting to those who lack the prominence of programming know-how or the prestige of a CS degree. Yep, even you can get down with JavaScript, no matter who you are—designers love JS, developers love JS, hackers love JS, and Code Academy has thousands signing up for a date with JS.

Attractive Frontend Package
JS has an irresistibly sinful frontend with a mocha aroma that underscores its passion. It has a node, it is angular; it has a spine and a backbone for its curvy corners; its agility is a knockout; and it can impress with its thick sproutcore that recently shaved to a desirable, lithe ember. Also impressive are its jade smile and its robust jQuery abs, which make for exciting fun when it does express, if you prefer it that way, or when it bootstraps with arduino, for the adventurous type.

JS is agreeably the future, particularly with the advent of HTML5 and the simultaneous, ironic ‘dysfunction’ of Flash. As the chosen language of the web, it will be hot for some time to come, this is evidenced by its recent ubiquity, meteoric rise, and modernizr upgrade.

JS Has Secrets
Continue Reading