dcm | Kevin Chisholm - Blog

May282013 by dcm1 Comment

Making a Simple HTTP Server with Node.js – Part I

The beauty of creating an HTTP server with Node.js is that you are doing so using a language that you already know: JavaScript.

If you work with JavaScript, then you’ve probably heard about Node.js. What makes Node.js such an amazing technology is that it turns web-development on its head: a historically client-side language is now being used as a server-side language. I’m sure I don’t have to tell you how insanely cool this is.

When I first started looking at Node.js, my first question was: “Ok, server-side JavaScript. Got it. So what the heck can I do with it?”

Short answer: A lot.

Probably the most obvious and easiest to comprehend application for Node.js is to make a web server. Node handles all the low-level ugliness and let’s you just write code. The code you write is not too much different than the client-side JavaScript that you are used to. The biggest differences come in when you start to realize that you have access to the file system. You can do things with Node that are completely off-limits on the client side. When it comes to creating a simple HTTP server, the amount of code you need to write for proof of concept is amazingly minimal. The examples that follow are very basic. They don’t offer any real-world usefulness, but they do illustrate the small amount of effort needed to get up and running. In Part II of this series, we will look at more realistic HTTP server code for Node.js.

Example # 1 A

//step 1) specify that we need the ‘http’ module
var http = require('http');

  //step 2) start the server
  http.createServer(function (req, res) {

  //set an HTTP header of 200 and the meta type
  res.writeHead(200, {'Content-Type': 'text/plain'});

  //write something to the request and end it
  res.end('Your node.js server is running on localhost:3000');

}).listen(3000);//step 3) listen for a request on port 3000

//step 1) specify that we need the ‘http’ module

var http = require('http');

//step 2) start the server

http.createServer(function (req, res) {

//set an HTTP header of 200 and the meta type

res.writeHead(200, {'Content-Type': 'text/plain'});

//write something to the request and end it

res.end('Your node.js server is running on localhost:3000');

}).listen(3000);//step 3) listen for a request on port 3000

In Example # 1, we have the absolute bare minimum needed to set up an HTTP web server using Node.js. The very first line tells Node.js that we need to use the “http” module. Using Node’s “require” method, we assign the return value of the “HTTP” module to the variable “http”. This was Step # 1.

(A detailed discussion of the require() method is beyond the scope of this article, but a topic that plays an important role in Node.js. If you are not familiar with the Modules/AsynchronousDefinition proposal from Common.js, I highly recommend reading up on that topic. For any client or server-side JavaScript developer, it’s a biggie.)

The only part that might seem a bit confusing to some is the callback that is passed into the createServer() method. This callback is executed each time the server receives an HTTP request.

For Step # 2, we call the createServer() method of the http object. We pass that method an anonymous function which takes two arguments: the request object and the response object. Inside of that anonymous function, we use the writeHead() method of the response object, to set the server’s response of “200 ok” to the client’s browser, and set the header of “Content-type” to “text/plain”. Next, we call the end() method of the response object. The end() method closes the response to the client. It can also send output to the client. We pass in a string as an argument in this example, and that string is sent to the client’s browser.

For Step # 3, we call the listen() method on the return value of the createServer() method. We pass in “3000”, which tells Node.js to listen on port # 3000.

If you run this code in Node.js, and then in your browser, “type localhost:3000”, you will see the following in your browser: “Your node.js server is running on localhost:3000.”

Whew! The explanation for Example # 1A took much longer to write than the actual code!

As you can see, it’s pretty easy to create an HTTP server with Node.js. In my opinion, the only part that might seem a bit confusing to some is the callback that is passed into the createServer() method. This callback is executed each time the server receives an HTTP request. It might make things easier to understand if we move the guts of that callback to its own function, and then pass that function declaration as the callback to the createServer() method.

Example # 1 B

var http = require('http');

function requestHandler(req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('This request was handled by the requestHandler() function');
}

http.createServer(requestHandler).listen(3000);

var http = require('http');

function requestHandler(req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('This request was handled by the requestHandler() function');

}

http.createServer(requestHandler).listen(3000);

In Example # 1B, we create a function declaration named requestHandler. Then we pass that function as the sole argument to the createServer() method. I believe that if you are new to Node.js, you’ll find it is easier to see what is going on, because the createServer() method is all on one line.

Example # 1 C

//a helper function to handle HTTP requests
function requestHandler(req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('This request was handled by the requestHandler() function');
}

//step 1) require the http module
var http = require('http');

//step 2) create the server
http.createServer(requestHandler)

//step 3) listen for an HTTP request on port 3000
.listen(3000);

//a helper function to handle HTTP requests

function requestHandler(req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('This request was handled by the requestHandler() function');

}

//step 1) require the http module

var http = require('http');

//step 2) create the server

http.createServer(requestHandler)

//step 3) listen for an HTTP request on port 3000

.listen(3000);

In Example # 1C, we’ve refactored our code to make things even simpler. First, our helper function processes the HTTP request, then Step 1, Step 2 and Step 3. Bing, Bang, Boom. Simple stuff.

Example # 2 A

var http = require('http');

function requestHandler(req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('<h1>My First Node.js Web Server</h1><p>Lorem ipsum dolor sit amet.</p>');
}

http.createServer(requestHandler).listen(3000);

var http = require('http');

function requestHandler(req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('<h1>My First Node.js Web Server</h1><p>Lorem ipsum dolor sit amet.</p>');

}

http.createServer(requestHandler).listen(3000);

In Example # 2A, we’ve upgraded our message to the client’s browser to include some HTML. After all, HTML is what we will really want to serve, right? The only problem is that Node is not parsing the HTML. When you run this example in your browser, you see the HTML tags in the response. That is not what we want. What is happening?

The problem is in the header that we are setting with the res.writeHead() method call. The value of the “Content-Type” header is “text/plain”. So, Node just passes all the text along as… well, plain old text.

Example # 2 B

var http = require('http');

function requestHandler(req, res) {
 res.writeHead(200, {'Content-Type': 'text/html'});
 res.end('<h1>My First Node.js Web Server</h1><p>Lorem ipsum dolor sit amet.</p>');
}

http.createServer(requestHandler).listen(3000);

var http = require('http');

function requestHandler(req, res) {

res.writeHead(200, {'Content-Type': 'text/html'});

res.end('<h1>My First Node.js Web Server</h1><p>Lorem ipsum dolor sit amet.</p>');

}

http.createServer(requestHandler).listen(3000);

In Example # 2B, we have changed the value of the “Content-Type” header to “text/html”. If you run this example in your browser, you will see that Node sends the string as HTML, so our H1 and UL elements are rendering as they should in the browser.

Example # 3

var http = require('http');

function requestHandler(req, res) {
  //write the HTTP header
  res.writeHead(200, {'Content-Type': 'text/html'});

  //here is our page header
  res.write('<h1>My First Node.js Web Server</h1>');

  //open the unordered list
  res.write('<ul>');

  //print ten <li> elements to the page
  for(var i = 0; i <= 10; i++){
    res.write('<li>' + i + '</li>');
  };

  //close the unordered list
  res.write('</ul>');

  //close the response
  res.end();
}

http.createServer(requestHandler).listen(3000);

var http = require('http');

function requestHandler(req, res) {

//write the HTTP header

res.writeHead(200, {'Content-Type': 'text/html'});

//here is our page header

res.write('<h1>My First Node.js Web Server</h1>');

//open the unordered list

res.write('<ul>');

//print ten <li> elements to the page

for(var i = 0; i <= 10; i++){

res.write('<li>' + i + '</li>');

};

//close the unordered list

res.write('</ul>');

//close the response

res.end();

}

http.createServer(requestHandler).listen(3000);

In Example # 3, we take things a bit further. Up until now, we have been using the res.end() method to do two things: send some text or HTML to the client’s browser, and then close the response. In this example, we use the res.write() method to send our HTML to the client’s browser, and the end() method is used only to close the request.

We’ve also introduced some logic into our code. While what this example accomplishes is very little, and has virtually no real-world value, it demonstrates that while we have created an HTTP server, we have done so with JavaScript, and we already know the JavaScript language. So, we can do something like create a for/loop block, and use that loop to provide some dynamic HTML output. Again, this “dynamic” aspect of our code is not very impressive, but I think you get the point: it’s just JavaScript, so the sky’s the limit.

Summary

In this article, we learned how to create a simple HTTP server using Node.JS. We covered the three most basic steps needed, which include requiring the HTTP module, calling the createServer() method, and then telling the server to listen for an HTTP request. Finally, we learned how the server executes a callback function for each HTTP request it receives, and the most basic things that need to happen inside of that callback.

Helpful Links for creating a simple Node.js HTTP Server

http://nodejs.org/

http://docs.nodejitsu.com/articles/HTTP/servers/how-to-create-a-HTTP-server

http://www.youtube.com/watch?v=jo_B4LTHi3I

http://stackoverflow.com/questions/6084360/node-js-as-a-simple-web-server

http://www.nodebeginner.org/

May202013 by dcmNo Comments

Validating JavaScript Function Arguments

Functions

Gracefully handling corner cases is the key to writing more robust, error-free JavaScript.

If you work with JavaScript for a living, you write functions. There is just no way around this. So, if you write functions, then arguments are a part of your life. Now, if you are the only one who uses the JavaScript code you write, then life is pretty grand. But if you are writing code that will be consumed by others, then gracefully handling corner cases and errors becomes important; very important.

So, every time I write a function, I assume that someone else will call it. Even if I know no one will, I assume that someday, someway, someone will. Even if it never happens, I feel its a good habit to get into: write code that fails gracefully.

There are a zillion paths down which this conversation can go, but let’s focus on function arguments. When your function absolutely depends on an argument, and that this argument be of a certain type, and that it not be empty, or otherwise useless, you might have a recipe for disaster, if your hungry little function does not get what it needs.

Example # 1A

function someFunc(arg){
	if (arg){
		//proceed with whatever we need to do
	};
};

function someFunc(arg){

if (arg){

//proceed with whatever we need to do

};

Example # 1B

function someFunc(arg){
	if (arg){
		//let’s pretend there is
		//a whole lot of code here
		//20 or 30 lines of code
		//that’s a lot of code to have wrapped
		//inside of an if() block
	};
};

function someFunc(arg){

if (arg){

//let’s pretend there is

//a whole lot of code here

//20 or 30 lines of code

//that’s a lot of code to have wrapped

//inside of an if() block

};

In Example # 1A, we use an IF () block to make sure that the “arg” argument was passed-in before we attempt to do anything with it.

Good enough, right?

Not so fast…

Even though we have taken care to make sure we got the “arg” argument, what if our implementation code is a bit lengthy? Well, in Example # 1B we see how silly it is for all that implementation code to be wrapped in an IF () block. This kind of pattern breeds code that is annoying to maintain.

Example # 2

function someFunc(arg){
	if ( !arg ){ return };

	//now we can have lots and lots and lots
	//of code here
	//and it’s not wrapped up inside of that
	//silly if() block
};

function someFunc(arg){

if ( !arg ){ return };

//now we can have lots and lots and lots

//of code here

//and it’s not wrapped up inside of that

//silly if() block

};

Ahhhhh, now that’s better!

So, as you can see in Example # 2, we simply say: “hey, if arg does not exist, then return.” This was accomplished using the JavaScript logical NOT operator. So, this means that if the argument “arg” does not exist, the function ends right there and none of the implementation code that follows is ever executed.

But…..

What if we need to be 100% sure that the argument “arg” is what we need it to be? What if it’s not enough to simply know that “arg” exists? What if we need to know that “arg” is an array and it has at least one element?

So many questions, so many darned questions.

Example # 3

function someFunc(someArray){
	if ( !someArray || !someArray instanceof Array || !someArray.length ){ return };

	//now we can safely assume that
	//we did get an array as an argument
	//and it’s really an array with at least one element
	//and we can do awesome stuff with that array
};

function someFunc(someArray){

if ( !someArray || !someArray instanceof Array || !someArray.length ){ return };

//now we can safely assume that

//we did get an array as an argument

//and it’s really an array with at least one element

//and we can do awesome stuff with that array

};

Ahhhhh… that’s even better! In Example # 3 we’ve once again used the JavaScript logical NOT operator to say the following: “hey, if the argument someArray was not passed, OR if it is NOT an array, OR if it does NOT have at least one element, return.” This way, we can check for all the details we need in one neat little line and avoid a series of messy nested IF () blocks. We do our test, we feel good if none of the expressions evaluated to false, and then we proceed with confidence.

Summary

In this article we discussed function argument validation. We learned how to avoid wrapping our code inside of a large IF() block and validate the presence of the argument we need in one line. We also discussed how to test for the type of our argument, and the fact that it contains the minimum amount of data.

Helpful Links for the JavaScript Logical NOT Operator

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Logical_Operators

http://msdn.microsoft.com/en-us/library/ie/zz722703(v=vs.94).aspx

May132013 by dcmNo Comments

Getting Started With CSS3 Transitions – Part III: Using Cubic-Bezier for More Lifelike Motion

CSS3

In parts I and part II of this series Getting Started With CSS3 Transitions Part I and Getting Started With CSS3 Transitions Part II, we covered the absolute basics of CSS3 transitions. In those articles, we focused on applying transitions to single and multiple properties, and setting delays. In this article, we will review a more complex animation. The example is still pretty basic, but it is the next step with CSS3 transitions. We will discuss how varying the values of different properties can allow for animations that have a more lifelike quality.

IMPORTANT NOTE: In Part I of this series, we used all vendor prefixes needed to ensure cross-browser functionality. Here, for the sake of brevity, we will only include the -webkit- prefix. Please view these examples with a WebKit Browser, or edit the JSFiddle links as needed with -o- and -moz- prefixes.

Here is the markup we’ll need for our example:

<div>
    <span class="foo">Put your mouse over me</span>
    <span class="bar">Put your mouse over me <i>(and keep it over me!)</i></span> 
</div>

<div>

<span class="foo">Put your mouse over me</span>

<span class="bar">Put your mouse over me <i>(and keep it over me!)</i></span>

</div>

Example # 1

div {position:relative;width:400px;height:400px;background:#DCDCDC;font-size:18px;padding:10px;font-weight:bold;color:#fff;}
span{position:absolute;width:100px;height:150px;padding:5px;background:#B22222;}
span:hover{cursor:pointer;}
i{font-weight:normal;}

.foo{
	left:10px;
	top:10px;
	-webkit-transition-property: top, height, background-color;
	-webkit-transition-duration: 2s, 1s, 4s;
	-webkit-transition-delay: 0.5s, 0s, 1s;
}

.foo:hover {
	top: 50px;
	height: 300px;
	background: #000080;
}

.bar{
	right:10px;
	top:10px;
	-webkit-transition: all 1s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

div {position:relative;width:400px;height:400px;background:#DCDCDC;font-size:18px;padding:10px;font-weight:bold;color:#fff;}

span{position:absolute;width:100px;height:150px;padding:5px;background:#B22222;}

span:hover{cursor:pointer;}

i{font-weight:normal;}

.foo{

left:10px;

top:10px;

-webkit-transition-property: top, height, background-color;

-webkit-transition-duration: 2s, 1s, 4s;

-webkit-transition-delay: 0.5s, 0s, 1s;

}

.foo:hover {

top: 50px;

height: 300px;

background: #000080;

}

.bar{

right:10px;

top:10px;

-webkit-transition: all 1s cubic-bezier(0.550, 0.055, 0.675, 0.190);

}

In Example # 1, the first four rules are minified for brevity; there’s not too much to see there and it’s not really part of this discussion. It just sets the CSS for the elements in the page.

Notice that for the .foo class, we have specified “-webkit-transition-property”. This allows us to then set the duration and delay for each one of those properties. The end result is that when you mouse-over span.foo, it first grows in height, then it slides down, and then it changes color. We have configured it to behave exactly this way by setting the duration and delay separately for each one of the properties that changes.

When you mouse-over span.bar, things are a bit different. The first difference is that we use the CSS3 transition shorthand syntax so that all properties that can be transitioned are, and they share the duration and easing values. The second difference is that instead of using a named easing such as “linear” or “ease-in”, we use cubic-bezier, and specify the values needed for the required behavior. A deep discussion of cubic-bezier is out of the scope of this article, but at the bottom of this page are a few links that provide more helpful information on that topic.

When you look at the working example (JS Fiddle link), you will see that the behavior of span.foo and span.bar are quite different. Not only does span.foo differ because the properties that transition do so with different durations and delays, but span.bar really “feels” different because we used cubic-bezier to craft a much more real-world type of motion.

Here is the JS Fiddle link for Example # 1: http://jsfiddle.net/tQxxK/

Summary

In this article we learned how to create more complex animations using CSS3 transitions.We discussed how varying the duration and delay of multiple properties can create more life-like motion, and had a brief introduction to the cubic-bezier class.

We discussed how varying the duration and delay of multiple properties can create more life-like motion, and had a brief introduction to the cubic-bezier class.

Helpful Links for the CSS cubic-bezier class

http://www.azarask.in/blog/post/animation-css-transitions-jquery-easy/

http://www.the-art-of-web.com/css/timing-function/#.UTtpadE6WyM

https://developer.mozilla.org/en-US/docs/CSS/timing-function

http://roblaplaca.com/blog/2011/03/11/understanding-css-cubic-bezier/

http://www.roblaplaca.com/examples/bezierBuilder/

http://cubic-bezier.com/#.17,.67,.83,.67

May82013 by dcmNo Comments

Replicating a “mailto:” href When You Need to Return false From an Anchor Tag Click

JavaScript

You have an anchor tag, the href is a “mailto”, but what if you can’t have the hyper link follow?

Problem:

You need to have a “mailto:” click event, but you have to (for whatever reason) return false or otherwise prevent the actual click event’s default behavior.

Short Answer: On that element’s click event: window.location = “mailto:?subject=XXX…”;

Long Answer (with long story prepended) :

I recently added some social networking buttons to a client’s mobile site, one of which was an old-school “mailto:” anchor tag. No big deal, right?

Well… sort of.

I was testing the deployment in their DEV environment and everything was peachy. And then all of a sudden, nothing worked. Needless to say, I was banging my head against my cubicle for about 20 minutes. I hadn’t made any changes, but suddenly nothing worked. When I calmed down and inspected the live DOM, I could see that my nice long “mailto:?subject=BLAH BLAH BLAH…” href value was very much in-tact on page load, but when I clicked the anchor tag, everything after the “mailto:” disappeared. The result was a new window with simply “mailto:” in the address bar. I tried this over and over (and over). Same thing. HREF valule is fine on page load, but on click, the query string is stripped out.

WTF?

Another 20 minutes of cubicle head-banging, and then I realized that someone had “upgraded” the Omniture library that the page was pulling in. I won’t bore you with the details, but in short, any anchor tag in the page was checked on a click event, and if it had a query string, the query string was removed.

Ugggghhhhh….

I wasted a good half hour trying to get around this, but no matter what I did, that query string got stripped off. Then I wasted another 20 minutes with a plan to create a new anchor element on every click, give it the same “mailto:?subject=BLAH BLAH BLAH…” href value, never append it to the DOM, and just trigger its click event when the original element was clicked.

Dumb Idea.

After a little poking around, I found this little gem:

For that problem elements click event, just do the following:

window.location = "mailto:?subject=BLAH BLAH BLAH...";

1	window.location = "mailto:?subject=BLAH BLAH BLAH...";

Nice.

May62013 by dcm1 Comment

Getting Started With CSS3 Transitions – Part II

CSS3

In the previous article: Getting Started With CSS Transitions – Part I, we covered the very basics of CSS3 transitions. We covered how to apply a transition to the height property of an element, and how to add a duration in order to see the effect of our transition. We also discussed easing, which makes the transition feel more natural.

In this article, we will talk about applying transitions to all of the properties of the declaration that show a change in value, and setting a delay.

IMPORTANT NOTE: In Part I of this series, we used all vendor prefixes needed to ensure cross-browser functionality. For brevity sake, we will only include the -webkit- prefix. Please view these examples with a WebKit Browser, or edit the JSFiddle links as needed with -o- and -moz- prefixes.

Here is the markup we’ll need for all three examples:

<div>Put your mouse over me</div>

1	<div>Put your mouse over me</div>

Applying CSS3 transitions to all properties of your declaration

Example # 1A

div {
	height:100px;
	width:100px;
	color:#000;   
	background:#D2691E;    
	padding:10px;
	-webkit-transition-property:height;
	-webkit-transition-duration: 2s;   
	-webkit-transition-timing-function: ease-in;    
}   

div:hover {  
	height:300px;  
	background:#00CED1;  
}

div {

height:100px;

width:100px;

color:#000;

background:#D2691E;

padding:10px;

-webkit-transition-property:height;

-webkit-transition-duration: 2s;

-webkit-transition-timing-function: ease-in;

}

div:hover {

height:300px;

background:#00CED1;

}

In Example # 1A, we specify “-webkit-transition-property” and provide the value of “height”. So, even though the background color value changes on hover, the transition is only applied to height.

Here is the JS Fiddle link for Example # 1A: http://jsfiddle.net/eQd3n/

Example # 1B

div {
	height:100px;
	width:100px;
	color:#000;   
	background:#D2691E;    
	padding:10px;
	-webkit-transition-property:all;
	-webkit-transition-duration: 2s;   
	-webkit-transition-timing-function: ease-in;  
}   

div:hover {  
	height:300px;  
	background:#00CED1; 
}

div {

height:100px;

width:100px;

color:#000;

background:#D2691E;

padding:10px;

-webkit-transition-property:all;

-webkit-transition-duration: 2s;

-webkit-transition-timing-function: ease-in;

}

div:hover {

height:300px;

background:#00CED1;

}

In Example # 1B, we specify “-webkit-transition-property” and use the value: “all”. This means that ALL properties whose value changes on hover have the transition behavior applied (as long as they can be transitioned).

Here is the JS Fiddle link for Example # 1B: http://jsfiddle.net/DVFmd/

Example # 1C

div {
	height:100px;
	width:100px;
	color:#000;   
	background:#D2691E;
	padding:10px;
	-webkit-transition-duration: 2s;   
	-webkit-transition-timing-function: ease-in;    
}   

div:hover {  
	height:300px;  
	background:#00CED1;
}

div {

height:100px;

width:100px;

color:#000;

background:#D2691E;

padding:10px;

-webkit-transition-duration: 2s;

-webkit-transition-timing-function: ease-in;

}

div:hover {

height:300px;

background:#00CED1;

}

In Example # 1C, we simply leave out “-webkit-transition-property”. By doing this, we achieve the exact same result as Example # 1B: For ALL properties whose values change on hover, the transition behavior is applied (as long as they can be transitioned).

Here is the JS Fiddle link for Example # 1C: http://jsfiddle.net/Hqv3J/

Example # 2

div {
	height:100px;
	width:200px;
	color:#000;   
	background:#D2691E;
	font-size: 18px;
	padding:10px;
	-webkit-transition: all 2s ease-in;
}   

div:hover {  
	height:300px; 
	width:400px;
	background:#00CED1;
	font-size: 28px;
}

div {

height:100px;

width:200px;

color:#000;

background:#D2691E;

font-size: 18px;

padding:10px;

-webkit-transition: all 2s ease-in;

}

div:hover {

height:300px;

width:400px;

background:#00CED1;

font-size: 28px;

}

In Example # 2, we achieve the exact same result as Example # 1C, except we accomplish this by using the CSS3 transition shorthand notation, and provide “all” as the first value.

Here is the JS Fiddle link for Example # 2: http://jsfiddle.net/SKzAE/

Applying a delay to your CSS3 transition

Example # 3

div {
	height:100px;
	width:200px;
	color:#000;   
	background:#D2691E;
	font-size: 18px;
	padding:10px;
	-webkit-transition: all 2s ease-in 0.5s;
}   

div:hover {  
	height:300px; 
	width:400px;
	background:#00CED1;
	font-size: 28px;
}

div {

height:100px;

width:200px;

color:#000;

background:#D2691E;

font-size: 18px;

padding:10px;

-webkit-transition: all 2s ease-in 0.5s;

}

div:hover {

height:300px;

width:400px;

background:#00CED1;

font-size: 28px;

}

In Example # 3, we have provided a fourth value to the CSS3 transition shorthand notation: a delay time. In this example, a value of “0.5s” is used, which forces the transition to wait a half-second before starting.

Here is the JS Fiddle link for Example # 3: http://jsfiddle.net/fsGLL/

Summary

In this article we learned three ways to apply CSS3 transitions to all properties in a declaration that see a change in value (as long as they can be transitioned). We also discussed CSS3 transition shorthand notation, and how to apply a delay to the effect.

Helpful Links for applying CSS3 transitions to multiple properties

http://www.w3.org/TR/css3-transitions/#animatable-properties

http://perishablepress.com/top-5-css-shorthand-properties/#transitions

http://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties

May12013 by dcmNo Comments

Omniture Calls Firing Twice When Returning False from Click Event

JavaScript

Sometimes “return false” is not enough; you need to prevent the event from bubbling up the DOM

Problem:

While implementing new Omniture calls on a client’s mobile site today, I noticed that two Omniture calls were being fired each time the new social media buttons I had added where clicked. These buttons only fired the Omniture call once, but each time one was clicked, two Ominiture calls were firing. I know this could not be the right behavior. The previous developer had implemented zepto.js, so I wanted to be sure it was not an anomaly of zepto that was causing the problem.

Short Answer:

Instead of ending each click handler with “return false”, I had to do end it with:

event.preventDefault();
event.stopPropagation();

1 2	event.preventDefault(); event.stopPropagation();

Long Answer:

I noticed that when two Omniture calls were fired, they were not the same. One was the one I intended to call, and it was working perfectly. The other was more generic, and did not seem to understand what exatly was clicked. This led me to believe that there was a more generic event handler up the DOM somewhere, that was binding to any click, and firing off some general parameterss.

Yuck!

It turns out that someone had updated the Omniture library that was used, and they had bound a generic Omniture call to the anchor tag click event. Even though my click event returned false, the event bubbled up to wherever that generic event binding was. I found this StackOverflow post, and the answer provided was dead-on:

http://stackoverflow.com/questions/6207956/zepto-js-doesnt-return-false

So my click handler went from this:

$('#someElement').click(function(event){
	//fire off Omniture Call
	omnitureFunction("some-value");

	return false;
});

$('#someElement').click(function(event){

//fire off Omniture Call

omnitureFunction("some-value");

return false;

});

…to this:

$('#someElement').click(function(event){
	event.preventDefault();
	event.stopPropagation();

	//fire off Omniture Call
	omnitureFunction("some-value");
});

$('#someElement').click(function(event){

event.preventDefault();

event.stopPropagation();

//fire off Omniture Call

omnitureFunction("some-value");

});

Summary:

I just needed to kill the event bubbling, and prevent the default behaviour, and everything worked just fine.

Apr292013 by dcm2 Comments

Getting Started With CSS3 Transitions – Part I

CSS3

There’s lots to talk about when it comes to cascading style sheets and animation, but for this article, we’ll keep it short and sweet; just the basics you need for getting started with CSS3 transitions.

For the majority of the time we’ve been consuming HTML, making things move on web pages has been handled by JavaScript. At first it was a nightmare. jQuery has nicely abstracted away much of the cross-browser misery for us and I thank them dearly for this. Now, CSS3 provides functionality for animation that allows you to write less JavaScript, and leverage the brilliance of cascading style sheets, to handle your simple (and sometimes not so simple) animation effects.

Here is the markup we’ll need for all three examples:

Put your mouse over me

A Basic Transition

Example # 1

div{
	width: 100px;
	height: 100px;
	background: #ccc;
  padding:10px;
	-moz-transition: height;
	-webkit-transition: height;
	-o-transition: height;
	transition: height;
}

div:hover{
	height: 300px;
}

div{

width: 100px;

height: 100px;

background: #ccc;

padding:10px;

-moz-transition: height;

-webkit-transition: height;

-o-transition: height;

transition: height;

}

div:hover{

height: 300px;

}

In Example # 1, we have the most basic CSS3 transition possible. On hover, we simply tell the browser to transform the height property from 100px to 300px. The only problem here is that the end result feels very CSS 2.1. Because the change is instant, we don’t really feel the transition effect. In order to do so, we need to specify a duration.

You may have noticed that we are using vendor prefixes. This allows us to make sure that our CSS code will work across browsers. I won’t get into a discussion about vendor prefixes here, but here is a good article about that topic:

http://css-tricks.com/how-to-deal-with-vendor-prefixes/

Here is the JSFiddle link for Example # 1: http://jsfiddle.net/w76ZL/

Specifying the Duration for Your CSS3 Transition

Example # 2

div{
	width: 100px;
	height: 100px;
	background: #ccc;
    padding:10px;
	-moz-transition: height 2s;
	-webkit-transition: height 2s;
	-o-transition: height 2s;
	transition: height 2s;
}

div:hover{
	height: 300px;
}

div{

width: 100px;

height: 100px;

background: #ccc;

padding:10px;

-moz-transition: height 2s;

-webkit-transition: height 2s;

-o-transition: height 2s;

transition: height 2s;

}

div:hover{

height: 300px;

}

In Example # 2, we have specified a duration of two seconds to our CSS3 transition. This makes a big difference because in the first example, although we had applied a CSS3 transition, the lack of a duration property negated the transition effect. Now that we have added a duration property, the transition effect is much more evident.

Here is the JSFiddle link for Example # 2: http://jsfiddle.net/eAEpC/

Adding Easing to Your CSS Transition

Example # 3

div{
 	width: 100px;   
	height: 100px;
	background: #ccc;
    padding:10px;
	-moz-transition: height 2s ease-in;
	-webkit-transition: height 2s ease-in;
	-o-transition: height 2s ease-in;
	transition: height 2s ease-in;
}

div:hover{
	height: 300px;
}

div{

width: 100px;

height: 100px;

background: #ccc;

padding:10px;

-moz-transition: height 2s ease-in;

-webkit-transition: height 2s ease-in;

-o-transition: height 2s ease-in;

transition: height 2s ease-in;

}

div:hover{

height: 300px;

}

In Example # 3, we added an easing value to our CSS3 transition. Easing is used to make the transition feel more realistic. Some common values are “ease-in”, “ease-out” and “linear”, but there are others.

Here is the JSFiddle link for Example # 3: http://jsfiddle.net/4tcLx/

Summary

In this article we discussed the very basics of CSS3 transitions. We covered how to apply a transition to the height property of an element, and we added a duration so that we can see the effect of our transition. We also discussed easing, which makes the transition feel more natural.

Helpful Links for CSS3 Transitions Basics

http://www.w3.org/TR/css3-transitions/

http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

http://www.css3.info/preview/css3-transitions/

http://blogs.msdn.com/b/eternalcoding/archive/2011/11/01/css3-transitions.aspx

Apr242013 by dcmNo Comments

Google’s First Production Server Rack, Circa 1998

Internet

Hard to believe, but a mere “fifteen years ago….” this little Frankenstein rack was the heart and soul of Google’s entire operation… at least for a minute or two

One recent rainy night when the home shopping network was showing re-runs, I stumbled across this:

http://en.wikipedia.org/wiki/Google_platform

There’s plenty of light reading in there if you feel you want to melt your own brain. But what immediately caught my attention was the photo: “Google’s first production server rack, circa 1998.” The fact that it’s a high-resolution image makes it even more fun because you can see quite a bit of detail. I’m not much of a hardware guy, so I won’t even begin to talk about that twisty-curvy menagerie of RJ-45 cables that go from top-to-bottom and left-to-right, but as you can see, this little pile of moving parts was “doing something.”

It’s amazing to think that a mere 15 years ago, this was the heart of Google. I don’t know how many people were actually using Google search in 1998, but someone was. And that someone (and I’m sure plenty of others) hit this server. If you look at the specs, you’ll find some pretty serious beefcake for 1998, but in hindsight, amazingly low-tech by today’s standards.

From the WikiPedia Page:

Sun Ultra II with dual 200 MHz processors, and 256 MB of RAM.
2 × 300 MHz Dual Pentium II Servers, they included 512 MB of RAM and 10 × 9 GB hard drives between the two.
F50 IBM RS/6000 donated by IBM, included 4 processors, 512 MB of memory and 8 × 9 GB hard drives.
Two additional boxes included 3 × 9 GB hard drives and 6 x 4 GB hard drives respectively
IBM disk expansion box with another 8 × 9 GB hard drives.
Homemade disk box which contained 10 × 9 GB SCSI hard drive.

Just a quick glance over those details and you get the impression that considering this was 1998, this little jimmy was put together by some pretty clever folks. It’s starting, and a little surreal, to realize that the internet has been around long enough for terms like “ten years ago…” and “fifteen years ago…” to be tossed about. Needless to say, Google has gone on to take over the world, and most folks use it for their searches (or at least plenty of folks do).

Apr222013 by dcmNo Comments

Getting Started with JavaScript Unit Testing and jQuery QUnit

JavaScript

Decent programmers tests their code before deploying it. In JavaScript development, this usually means viewing the web page that your code interacts with, and clicking one or more elements in the page to ensure that the desired result is achieved

When your code base starts to grow and become more complex, testing can become tedious. Even worse, manual testing can become unreliable, because you not only have to test your new code, you have to regression test as well, so that you can be sure your new code did not break any old code.

Yuck!

If we’ve learned nothing else at this point in technology, we have at least discovered, first hand, that humans are really bad at tedious, repetitive tasks. Fortunately, computers love this kind of work.

Enter Unit Testing

The key to writing testable code is to produce small modules of functionality that always return a predictable result.

Unit testing provides a methodical way to ensure that your code always performs as expected, and provides red flags for the nanosecond that this condition changes. The key to writing testable code is to produce small modules of functionality that always return a predictable result.

jQuery QUnit

jQuery QUnit is a test framework created by the same impressive folks who bring you jQuery. It is lightweight, easy to understand, and easy to use. It has a number of simple methods that allow you to test your code. What is really impressive about jQuery QUnit is that it is designed to run in a (very) simple web page so that your test results are not only visual, but easy to understand.

Before we dive into the code, it might help to take a look at the full working example:

http://examples.kevinchisholm.com/javascript/unit-testing/qunit/part-i/

Let’s review the files involved in the full working example.

qunit.js

This is the QUnit JavaScript library.

qunit.css

This is the CSS that our test page will need.

tests.js

This is the JavaScript file that contains our unit tests.

index.html

This is the web page that you see in the full working example. It allows us to view the test results.

Here is the full source code for index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Getting Started with JavaScript Unit Testing and jQuery QUnit Part I || blog.kevinchisholm.com</title>
  <link rel="stylesheet" href="qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="qunit.js"></script>
  <script src="tests.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Getting Started with JavaScript Unit Testing and jQuery QUnit Part I || blog.kevinchisholm.com</title>

</head>

<body>

</body>

</html>

Example # 1 A

function badFunction(){
	return false;
};

test( "badFunction", function() {
	ok( badFunction(), "badFunction failed." );
});

function badFunction(){

return false;

};

test( "badFunction", function() {

ok( badFunction(), "badFunction failed." );

});

In Example # 1A, we test a function named “badFunction”. I gave it that name because when we test for a positive result, it fails. The syntax is simple:

We execute the test() method
The first argument to the test() method is simply a label for the test that makes it easier to identify in the test results page (index.html).
The second argument to the test() method is an anonymous function. We craft our test(s) inside of this function.
Inside of the anonymous function, we execute the ok() method, a boolean assertion. This test passes if the first argument is “truthy”.
The first argument to the ok() method is the execution of badFunction(). Since badFunction returns false, the test fails.
The second argument to the ok() method is the test result message.

Example # 1 B

function goodFunction(){
	return true;
};

test( "goodFunction", function() {
	ok( goodFunction(), "goodFunction succeeded." );
});

function goodFunction(){

return true;

};

test( "goodFunction", function() {

ok( goodFunction(), "goodFunction succeeded." );

});

In Example # 1B, The approach taken is identical to Example # 1A, with one exception: we test goodFunction(), which passes the ok() test because its goodFunction() returns true.

Example # 2 A

function makeArray1(){
	return [];
};

test( "makeArray1", function() {
	ok( (makeArray1() instanceof Array), "makeArray1 is an array." );
	ok( (makeArray1().length), "makeArray1 is empty." );
});

function makeArray1(){

return [];

};

test( "makeArray1", function() {

ok( (makeArray1() instanceof Array), "makeArray1 is an array." );

ok( (makeArray1().length), "makeArray1 is empty." );

});

In example # 2A, we test the function makeArray1(). That function returns an empty array literal. Our unit test consists of two calls to the ok() method. The first call simply checks to see that makeArray() returns a true array. It does, so that test passes. The second call to ok() checks to make sure there is at least one element in the array. The array is empty, so that test fails.

Example # 2 B

function makeArray2(){
	return ['monday','tuesday','wednesday'];
};

test( "makeArray2", function() {
	ok( (makeArray2() instanceof Array), "makeArray2 is an array." );
	ok( (makeArray2().length), "makeArray2 has at least one element" );
});

function makeArray2(){

return ['monday','tuesday','wednesday'];

};

test( "makeArray2", function() {

ok( (makeArray2() instanceof Array), "makeArray2 is an array." );

ok( (makeArray2().length), "makeArray2 has at least one element" );

});

In Example # 2B, we test makeArray2(). Since that function returns an array with three elements, both calls to the ok() method pass.

Example # 3 A

//this closure allows lessThanFive to keep track
//of how many times it has been executed
var lessThanFive = (function(){
	var i = 0;

	//this function will return false
	//if it has been executed more than four times
	return function(reset){
		//allows us to run multiple unit tests on lessThanFive
		if(reset === "reset"){i = 0;return};

		i++;
		return (i &lt; 5) ? true : false;
	};
})();

test( "lessThanFive", function() {
	//this teset will execute lessThanFive 6 times
	//so the last two tests should fail
	ok( lessThanFive(),"This is the first test, it should succeed" );
	ok( lessThanFive(),"This is the second test, it should succeed" );
	ok( lessThanFive(),"This is the third test, it should succeed" );
	ok( lessThanFive(),"This is the fourth test, it should succeed" );
	ok( lessThanFive(),"This is the fifth test, it should fail" );
	ok( lessThanFive(),"This is the sixth test, it should fail" );
});

//this closure allows lessThanFive to keep track

//of how many times it has been executed

var lessThanFive = (function(){

var i = 0;

//this function will return false

//if it has been executed more than four times

return function(reset){

//allows us to run multiple unit tests on lessThanFive

if(reset === "reset"){i = 0;return};

i++;

return (i < 5) ? true : false;

};

})();

test( "lessThanFive", function() {

//this teset will execute lessThanFive 6 times

//so the last two tests should fail

ok( lessThanFive(),"This is the first test, it should succeed" );

ok( lessThanFive(),"This is the second test, it should succeed" );

ok( lessThanFive(),"This is the third test, it should succeed" );

ok( lessThanFive(),"This is the fourth test, it should succeed" );

ok( lessThanFive(),"This is the fifth test, it should fail" );

ok( lessThanFive(),"This is the sixth test, it should fail" );

});

In Example # 3A, we test a function named lessThanFive(). It is actually a closure that returns a function. The closure allows us to have a private scope which will keep track of how many times the function has been executed. Since this function was designed only to be executed less than five times, on the fifth execution, and for every execution that follows, the function returns false. The first four times, it will return true. You’ll see in the full working example that our unit test passes four times and then fails twice. This is because the first four times that lessThanFive() runs, it returns true. The fifth and sixth times that it is run, it returns false.

Example # 3 B

test( "lessThanFive", function() {
	//reset lessThanFive so that we can test it again cleanly
	lessThanFive("reset")

	//this teset will execute lessThanFive 6 times
	//so the last two tests should fail
	for (var i = 1 ;i &lt; 7; i++){
		ok( lessThanFive() );
	};
});

test( "lessThanFive", function() {

//reset lessThanFive so that we can test it again cleanly

lessThanFive("reset")

//this teset will execute lessThanFive 6 times

//so the last two tests should fail

for (var i = 1 ;i < 7; i++){

ok( lessThanFive() );

};

});

In Example # 3B, we have a slightly more elegant approach. Instead of writing out six calls to the ok() method, we have a FOR/LOOP, which executes six times. On each iteration, it calls the ok() method, which, in turn, executes the lessThanFive() function. The only drawback to this approach is that we do not have a nice customized test message for each iteration of the test.

Once again, here is the full working example:

http://examples.kevinchisholm.com/javascript/unit-testing/qunit/part-i/

Summary

In this article, we took a brief look at how to write JavaScript unit tests using jQuery QUnit. We learned about the files needed, the test() method, and the ok() method. We learned how to check for more than one possible outcome of a test, and that there is more than one way to write the same test.

In the next article, we’ll take a closer look at the other features of QUnit.

Helpful Links for jQuery QUnit

http://qunitjs.com/

https://github.com/jquery/qunit

http://en.wikipedia.org/wiki/QUnit

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-test-your-javascript-code-with-qunit/

http://msdn.microsoft.com/en-us/magazine/gg749824.aspx

Apr172013 by dcmNo Comments

Ceaser – CSS Easing Animation Tool by Matthew Lein

CSS3

Ceaser - CSS Easing Animation Tool - Matthew Lein — Ceaser – CSS Easing Animation Tool – Matthew Lein

This has been out there for a while, but I just had to post it. This online tool makes it super-easy to create custom CSS3 transition easing settings. Ten seconds on this page and you will be impressed. You can use the drop-down to select a pre-defined easing scheme, and there is a ton of them. Or, you can use the drag-handles to create your own custom settings. To cap things off, you’ve got the handy-dandy little Ceaser logo to demo your code. Crazy. Someone please buy this guy lunch. Nicely done!

http://matthewlein.com/ceaser/

Apr152013 by dcmNo Comments

Getting Started with Require.js – Part III

Asynchronous Module Definition

Learn How to Build a Social Media Plugin, Using Require.js and the Asynchronous Module Definition (AMD) Pattern

In Getting Started with Require.js – Part II, we took a closer look at the way the Require.js JavaScript library works. We created modules that depended on other modules, and learned how the return value of a module can be used to expose functionality to the outside world.

In Part III of this series, we will use Require.JS to build a social media plugin. We’ll leverage the concepts and techniques used in Part II to create reusable front-end code that has real-world usefulness. You’ll be able to take the code from the completed working example, copy it, tweak it, and use it for your own web page.

Since we have discussed a great deal of Require.js implementation details, I’ll keep the discussion on a high level here. You can drill down into the code for a completed working example and review all of the nitty-gritty details if you like. The focus of this article is to provide an example that demonstrates how Require.js can be put to use in a real-world context.

Before we dive into the code, it might help to see the full working example for this article:

http://examples.kevinchisholm.com/javascript/requirejs/part-iii/

NOTE: For most of the examples, I will provide a link to the actual module file. I don’t think there is much point in repeating that same code here in the article. You can simply view it in your browser.

Example # 1

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
    	<title>Getting Started with Require.js Part III | blog.kevinchisholm.com</title>
		<style>
			/* CSS removed for brevity */
		</style>
    </head> 
    <body> 
		<div class="container">
			<h1>Ski Like a Pro!</h1>
			<img id="pinterestImage" src="skier.jpg" class="floatLeft"/>
			<p>
			Lorem ipsum dolor sit amet...<!-- content shortened for brevity -->
			</p>
		</div>
		<script src="require.js"></script>
		<script>
			require(["social-menu"], function(menu) {
				menu.init(['facebook','twitter','pinterest','googleplus','email']);
			});
		</script>
    </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>Getting Started with Require.js Part III | blog.kevinchisholm.com</title>

<style>

/* CSS removed for brevity */

</style>

</head>

<body>

<p>

Lorem ipsum dolor sit amet...

</p>

</div>

require(["social-menu"], function(menu) {

menu.init(['facebook','twitter','pinterest','googleplus','email']);

});

</script>

</body>

</html>

In Example # 1, we have the markup for our web page. You’ll notice that I have removed the CSS in the head and most of the content in the body. This is only to keep the code example short. Otherwise, it is identical to the working example.

In this example, after including require.js, we use the require() function. The first argument is social-menu.js. This is the only dependency for the JavaScript code in the page. In the anonymous function that is the second argument to the require() function, we reference social-menu.js as “menu”. We then call the init() method of the variable “menu”, which is an object. We know this because as we will see shortly, the return value of the module social-menu.js is an object with a method named init(). We pass an array to meunu.init(). This array contains strings that identify the social media icons we want to include in our plugin. Next, we will take a closer look at the module: social-menu.js.

social-menu.js

http://examples.kevinchisholm.com/javascript/requirejs/part-iii/social-menu.js

This module has one dependency: social-markup.js. Inside of our module, social-markup.js is referred to as “socialMarkup”. Inside of the init() method, we instantiate the socialMarkup() constructor. We then use the getLinks() method of the socialMarkup() object. When past the appropriate array, the getLinks() method will return a DOM object that only needs be appended to the DOM, which we do on the very next line.

The beauty of this Asynchronous Module Definition (AMD) pattern is that as we step through the code, the implementation details of each dependency is abstracted away by the module that we depend on. We simply “need” that module, Require.js loads it asynchronously for us, and then we use it. This makes it easier to follow and understand code that you did not write. As you follow the dependency chain, digging deeper into the code, you can see more implementation details (if you choose to do so).

social-markup.js

http://examples.kevinchisholm.com/javascript/requirejs/part-iii/social-markup.js

If you look towards the bottom of this module, you’ll see that it returns a function. That function is meant to be used as a constructor. The line “this.getLinks = function(arr){…” indicates that when instantiated, the resulting object will have a method named “getLinks()”. The private variables “makeAnchor”, “addTitle”, “addClickHandler” and “makeImage” are all helper functions that handle the implementation work needed to create the DOM object that this module returns. Lastly, notice that this module’s sole dependency is “social-icons.js”, which contains the data we need to construct the actual social media icons and event handlers.

social-icons.js

http://examples.kevinchisholm.com/javascript/requirejs/part-iii/social-icons.js

This module has no dependencies. It returns an object whose properties are all objects containing data for each social media type. Each of those individually named objects has the following properties:

Image: A data URI that provides an image, so that we don’t need to reference external resources.
Title: What users see when they hover over the icon.
Handler: A function that will be the click-event handler for that social media icon.

Now that we have taken a high-level view of the code, re-visit the full working example for this article:

http://examples.kevinchisholm.com/javascript/requirejs/part-iii/

In the full working example, you’ll notice that each social media icon allows you to share the page (e.g., “tweet” “pin”, “facebook post”, etc…). These actions are determined by the click event handler that we specified for each icon in the module: social-icons.js. The images for icons themselves are provided by the data URL for each social media type (once again in “social-icons.js”), as well as the title that you see when you hover the mouse over that icon.

Summary

In this article, we put to use, in a real-world context, the concepts and techniques that we learned in Part I and Part II. We created a social media plugin that actually works. I hope you have enjoyed this series. Require.js is a powerful and helpful JavaScript library that helps you to create loosely-coupled, modular, reusable code.

Helpful Links for Require.js and Asynchronous Module Definition (AMD)

Require.js

http://requirejs.org/

http://www.webdesignerdepot.com/2013/02/optimize-your-javascript-with-requirejs/

Asynchronous Module Definition (AMD)

http://stackoverflow.com/questions/12455537/asynchronous-module-definition-difference-between-beta-verb-and-requirebeta

http://www.sitepen.com/blog/2012/06/25/amd-the-definitive-source/

http://blog.davidpadbury.com/2011/08/21/javascript-modules/

Apr102013 by dcm4 Comments

Using the jQuery Promise Interface to Avoid the AJAX Pyramid of Doom

jQuery

Nested success callbacks are messy business. The jQuery Promise interface provides a simple and elegant solution.

So, you have to make an AJAX call, and then do something with the return data. No problem, right? Right. What if you have to make two AJAX calls, and then do something with the return data for each one? No problem, right? Right. What if the second AJAX call depends on the success of the first AJAX call?

“…um, well…. then, well… wait a minute… ok, I’ve got it:

I’ll make the first AJAX call…and then inside the success callback function, cache the data somewhere… um… in a global variable for now I guess… yeah, no one will notice. OK, and then inside of that success callback, we’ll nest another AJAX call, and then inside of the second AJAX calls’ success callback, we’ll get our first chunk of data from the global variable, and then, and then… um…and then…”

…yikes!

Obviously, the preceding diatribe was a little over the top, but c’mon…. haven’t you at least once stood at the edge of that cliff and looked over? Fortunately, jQuery features a way out of this mess that is safe, reliable and packed with vitamins.

The jqXHR object

Since version 1.5.1, jqXHR objects returned by $.ajax() implement a “Promise” interface. In short, this means that a number of methods that are exposed provide powerful abstraction for handling multiple asynchronous tasks.

I think it is important to note that the subject of the jQuery Deferred and Promise Objects is deep. It is not an easy topic to jump into and a detailed discussion of this is outside of the scope of this article. What I hope to accomplish here is to provide a simple and fast introduction to the topic, by using a real-world problem / solution.

There are certainly multiple scenarios in which the jQuery Deferred and Promise objects can be useful. I have chosen to use AJAX calls for this, since it is an example of asynchronous behavior that I think most folks can relate to. In order to dramatize the effect of an asynchronous AJAX call, I am using a PHP file that can return a delayed response. Here is the code for the server page:

<?php
	if( isset($_GET["sleep"]) ){ sleep ( $_GET["sleep"] ); }
	header("Status: 200");
	date_default_timezone_set('EST');
	echo "<p>Hello, this is the response from the server.<br/>";
	echo "This response was sent on " . date('l F jS Y') . " at " . date('h:i:s A') . " <i>(new york city time).<i></p>";
?>

<?php

if( isset($_GET["sleep"]) ){ sleep ( $_GET["sleep"] ); }

header("Status: 200");

date_default_timezone_set('EST');

echo "<p>Hello, this is the response from the server.<br/>";

echo "This response was sent on " . date('l F jS Y') . " at " . date('h:i:s A') . " <i>(new york city time).<i></p>";

OK, now some AJAX.

(Note: I highly recommend that you open up the “network” panel in Firebug or WebKit developer tools so that you can see these AJAX calls in action when viewing the working examples… especially AJAX call # 1, which will take 5 seconds to complete)

Example # 1

var success = function(d){
    $('#target').append(d);
};

$().ready(function(){

    $('#clear').click(function(){
        $('#target').html('');
    });

    $('#request1').click(function(){
        $.get('response.php?sleep=5',success);
    });

    $('#request2').click(function(){
        $.get('response.php',success);
    });
});

var success = function(d){

$('#target').append(d);

};

$().ready(function(){

$('#clear').click(function(){

$('#target').html('');

});

$('#request1').click(function(){

$.get('response.php?sleep=5',success);

});

$('#request2').click(function(){

$.get('response.php',success);

});

In Example # 1 we have a fairly straightforward setup: Two buttons, each resulting in an AJAX call. Notice that the 1st AJAX call takes 5 seconds to complete. Instead of providing an inline anonymous function for the success callback of each AJAX call, we have a generic handler named “success”.

Here is a link to the working code for Example # 1: http://examples.kevinchisholm.com/jquery/promise/promise-and-ajax-beginner/example-1.html

But what if we want AJAX call # 2 to depend on AJAX call # 1? That is, we don’t want AJAX call # 2 to even be possible until AJAX call # 1 has completed successfully.

Example # 2

$("#request1").click(function() {
  $.get("response.php", function(d1) {
    $("#request2").click(function() {
      $.get("response.php",function(d2) {

        //...this is not going anyplace good

      });
    });
  });
});

$("#request1").click(function() {

$.get("response.php", function(d1) {

$("#request2").click(function() {

$.get("response.php",function(d2) {

//...this is not going anyplace good

});

In Example # 2, we have a pattern that is known as the “Pyramid of Doom”. This might work for the short term, but it is impractical, not at all flexible, and just plain messy. What if there was a third button, and a fourth button… I think you see what I’m getting at here.

Example # 3

var aj1 = null, aj2 = null;

$('#request1').click(function(){
    aj1 = $.get('response.php?sleep=5');
});

$('#request2').click(function(){
    aj2 = $.get('response.php');

    $.when(aj1,aj2).done(function(a,b){
        success(a[0]);
        success(b[0]);
    });
});

var aj1 = null, aj2 = null;

$('#request1').click(function(){

aj1 = $.get('response.php?sleep=5');

});

$('#request2').click(function(){

aj2 = $.get('response.php');

$.when(aj1,aj2).done(function(a,b){

success(a[0]);

success(b[0]);

});

Ahhh… that’s much better!

In Example # 3, we have taken advantage of the Promise interface that is exposed as part of the jqXHR object. If you are wondering what the jqXHR object is, it is the return value of any $.ajax() call. So, while you can simply do this: $.ajax(URL,CALLBACK), the call itself returns a value. That return value is the jqXHR object, which is a superset of the XMLHTTPRequest object.

The return value of $.ajax() is the jqXHR object, which is a superset of the XMLHTTPRequest object, and packed with some powerful features.

We don’t have to dive too deeply into the good ol’ XMLHTTPRequest object (although it is important to know what it is and the critical role that it plays in AJAX). But the key point here is that the jqXHR object wraps the XMLHTTPRequest object, providing some useful features. One of those features is the “Promise” interface.

“….ok, ok Kevin, you’re givin’ me a migraine… where are you going with all this?”

Hang in there; we are at the 99 yard line here. What this all means is that instead of just making an AJAX call, you can assign that AJAX call to a variable. Since the $.ajax() method returns the jqXHR object, your variable is now a Swiss Army knife of AJAXian goodness. You can then implement methods of your object (i.e. your variable). Two of those methods are: .when() and .done();

So, in Example # 3, when we fired the first AJAX call, we assigned its return value to the variable “aj1”. Notice that we did NOT make a success handler call. We simply make the AJAX call, and that call’s return value is held by the variable “aj1”. Then when the user clicks the second button. we set the return value of the second AJAX call to the variable: “aj2”. Now we have two variables and each is a jqXHR object. These are powerful little objects!

The line where the fun really starts is: $.when(aj1,aj2).done()

Notice how the .done() function takes a callback. The callback is fired when the two arguments passed to the .when() method are resolved. And guess what those two arguments are… our two little jqXHR objects!

So, the .done() method knows how to get ahold of the data returned by each of those calls. Now we simply call our generic success handler, passing in the return data of each AJAX call (i.e. each jqXHR object). You may be wondering why I pass in the values “a[0]” and “b[0]”. This is because “a” and “b” are jqXHR objects. It just so happens that the first property of these objects (i.e. the property with the index of 0) happens to be the “responseText” property of that object (i.e. the text sent back from the server).

Phew!

I know that was a lot. But there is much to shout about when it comes to the jQuery Promise interface. As I mentioned, it is a big topic and not easily summarized. But my hope is that these examples will have put a little context around the subject, and will help you to dive in and get started.

Below is the source code for this article’s full working example:

Example # 4:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>jQuery When - Example # 2</title>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
    <style>
        /* CSS removed forbrevity */
    </style>
    <body>
        <button id="request1">Send 1st AJAX Request</button>
        <button id="request2">Send 2nd AJAX Request</button>
        <button id="clear">Clear Page</button>
		<div id="target"></div>
        <script>
        //our success handler for all AJAX calls
        var success = function(d){
            //d is the text returned from the server
            $('#target').append(d);
        },
        //we'll need these later
        aj1 = null,
        aj2 = null;

        $().ready(function(){
            //re-sets the page
            $('#clear').click(function(){$('#target').html('')});

            //when the user kicks off the first ajax call...
            $('#request1').click(function(){
                //set the ajax loader image
                $('#target').html('<img class="loader" src="ajax-loader.gif" />');

                //setup the deferred object that represents this AJAX call
                //note the query string in the URL: the server will take 5 seconds to respond
                aj1 = $.get('response.php?sleep=5',function(){
                    //just a quick anonymous success handler to keep the user informed
                    $('#target').html('<p>ok, the 1st AJAX call is done. Now make the 2nd Ajax Call</p>');
                });
            });

            //when the user kicks off the second ajax call...
            $('#request2').click(function(){
                //if the first ajax call has not run, then warn the user and exit
                if(!aj1){
                    $('#target').html('<p>Please make the 1st AJAX call <u>before</u> you make the 2nd AJAX call.</p>');
                    return;
                };

                //setup the deferred object that represents this AJAX call
                aj2 = $.get('response.php');

                //setup the actions to be taken when BOTH AJAX calls have successfully completed
                $.when(aj1,aj2).done(function(a,b){
                    $('#target').html('');

                    //inside of this function, a & b represent
                    //the response objects for each AJAX call respectively

                    //call our generic success handler and pass it the return text, once for each AJAX call
                    success(a[0]);
                    success(b[0]);
                });
            });
        });
        </script>
    </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>jQuery When - Example # 2</title>

</head>

<style>

/* CSS removed forbrevity */

</style>

<body>

<button id="request1">Send 1st AJAX Request</button>

<button id="request2">Send 2nd AJAX Request</button>

<button id="clear">Clear Page</button>

//our success handler for all AJAX calls

var success = function(d){

//d is the text returned from the server

$('#target').append(d);

//we'll need these later

aj1 = null,

aj2 = null;

$().ready(function(){

//re-sets the page

$('#clear').click(function(){$('#target').html('')});

//when the user kicks off the first ajax call...

$('#request1').click(function(){

//set the ajax loader image

$('#target').html('<img class="loader" src="ajax-loader.gif" />');

//setup the deferred object that represents this AJAX call

//note the query string in the URL: the server will take 5 seconds to respond

aj1 = $.get('response.php?sleep=5',function(){

//just a quick anonymous success handler to keep the user informed

$('#target').html('<p>ok, the 1st AJAX call is done. Now make the 2nd Ajax Call</p>');

});

//when the user kicks off the second ajax call...

$('#request2').click(function(){

//if the first ajax call has not run, then warn the user and exit

if(!aj1){

$('#target').html('<p>Please make the 1st AJAX call <u>before</u> you make the 2nd AJAX call.</p>');

return;

};

//setup the deferred object that represents this AJAX call

aj2 = $.get('response.php');

//setup the actions to be taken when BOTH AJAX calls have successfully completed

$.when(aj1,aj2).done(function(a,b){

$('#target').html('');

//inside of this function, a & b represent

//the response objects for each AJAX call respectively

//call our generic success handler and pass it the return text, once for each AJAX call

success(a[0]);

success(b[0]);

});

</script>

</body>

</html>

Here is a link to this article’s full working example: http://examples.kevinchisholm.com/jquery/promise/promise-and-ajax-beginner/example-2.html

Summary

In this article we learned about the jQuery Promise interface. We discovered that since version 1.5.1, calls to $.ajax() return a jqXHR object, which implements the Promise interface. We utilized the .when() and .done() methods of this interface to execute callback functions for two asynchronous tasks. This eliminates the need for nested success callback functions.

Helpful Links for the jQuery Deferred, jQuery Promise and jqXHR Objects

Apr82013 by dcmNo Comments

Getting Started with Require.js – Part II

Asynchronous Module Definition

Step beyond the basics, and learn how Require.js modules can return various kind of values, depend on other modules, and keep those dependencies transparent to the outside world

In Getting Started with Require.js Part I, we got to know the Require.js JavaScript library. We learned about the basics of the define() and require() methods, and how they load dependencies asynchronously and then provide access to the return value of each one.

In Part II of this series, we will use Require.JS to build a little application that displays the daily specials for a restaurant. It’s a silly little example, but perfect for taking our discussion of Require.js to the next step.

The focus of this article is to demonstrate how one module can depend on one or more modules, and each of them can have similar dependencies. The beauty of this approach is that when one module depends on another, it has no knowledge of, nor does it care about how many dependencies the module it needs may have. So for example:

index.html -> needs module-A
Module-A -> needs Module-B
Module-B -> needs Module-C and Module-D
Module-D – > needs Module-E

The beauty of this approach is that our web page index.html only cares about module-A. It has no idea that Module-A in turn needs Module-B. And so on. This approach encourages you to write code modules that are reusable, and less tightly coupled.

Before we dive into the code, it might help to see the full working example for this article:

http://examples.kevinchisholm.com/javascript/requirejs/part-ii/

NOTE: for most of the examples, I will provide a link to the actual module file. I don’t think there is much point in repeating that same code here in the article. You can simply view it in your browser.

Example # 1

menuData.js

http://examples.kevinchisholm.com/javascript/requirejs/part-ii/menuData.js

In Example # 1, we see the data that is used for this example. What is nice about the module pattern used here is that whenever this data needs to change, we only have to make that change in this one small file. The rest of the files that depend on this module have no knowledge of that, nor do they care. As long as the data is structured the way they expect, they don’t need to know about any changes to this module.

Example # 2

<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Getting Started with Require.js Part II | blog.kevinchisholm.com</title>

</head> 
<body>
	<hgroup>
		<h1>Getting Started with Require.js Part II</h1>
		<h2><a title="go to blog.kevinchisholm.com" href="http://blog.kevinchisholm.com" target="_blank">blog.kevinchisholm.com</a></h2>
	</hgroup>
	<nav>
		<button id="showWeekDays">Show Week Day Specials</button>
		<button id="showWeekEnd">Show Week End Specials</button>
		<button id="showFullWeek">Show Specials For the Entire Week</button>
	</nav>
	<div id="specials"></div>
	<script src="require.js"></script>

	<script>
		require(["menuMaker","css"], function(menu) {

			//the menu argument is a <ul> element, inject into the DOM
			function specialsHandler(menu){
				if (!menu){return};
				var specials = document.getElementById('specials');
				specials.innerHTML = "";
				specials.appendChild(menu);
			};

			//sorry folks, I don't feel like wasting time with < IE9  : - (
			if(document.addEventListener){

				//get referenes to the buttons
				var showWeekDays = document.getElementById('showWeekDays'),
				showWeekEnd = document.getElementById('showWeekEnd'),
				showFullWeek = document.getElementById('showFullWeek');	

				//event handlers for each specific button
				showWeekDays.addEventListener('click',function(){
					specialsHandler(menu.weekdayMenu);
				},false);

				showWeekEnd.addEventListener('click',function(){
					specialsHandler(menu.weekendMenu);
				},false);

				showFullWeek.addEventListener('click',function(){
					specialsHandler(menu.getFullWeek);
				},false);
			};
		});
	</script>
</body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>Getting Started with Require.js Part II | blog.kevinchisholm.com</title>

</head>

<body>

<h1>Getting Started with Require.js Part II</h1>

<h2><a title="go to blog.kevinchisholm.com" href="http://blog.kevinchisholm.com" target="_blank">blog.kevinchisholm.com</a></h2>

</hgroup>

<nav>

<button id="showWeekDays">Show Week Day Specials</button>

<button id="showWeekEnd">Show Week End Specials</button>

<button id="showFullWeek">Show Specials For the Entire Week</button>

</nav>

require(["menuMaker","css"], function(menu) {

//the menu argument is a <ul> element, inject into the DOM

function specialsHandler(menu){

if (!menu){return};

var specials = document.getElementById('specials');

specials.innerHTML = "";

specials.appendChild(menu);

};

//sorry folks, I don't feel like wasting time with < IE9 : - (

if(document.addEventListener){

//get referenes to the buttons

var showWeekDays = document.getElementById('showWeekDays'),

showWeekEnd = document.getElementById('showWeekEnd'),

showFullWeek = document.getElementById('showFullWeek');

//event handlers for each specific button

showWeekDays.addEventListener('click',function(){

specialsHandler(menu.weekdayMenu);

},false);

showWeekEnd.addEventListener('click',function(){

specialsHandler(menu.weekendMenu);

},false);

showFullWeek.addEventListener('click',function(){

specialsHandler(menu.getFullWeek);

},false);

};

});

</script>

</body>

</html>

In Example # 2, we have the full source code for our web page. If you look at the require() statement, you’ll see that we have two modules as dependencies: css.js and menuMaker.js. Let’s follow the dependency tree, see what each module does, and then circle back to review the JavaScript in this page that responds to the button clicks. css.js http://examples.kevinchisholm.com/javascript/requirejs/part-ii/css.js This module simply injects a STYLE tag into the DOM. This is the CSS that makes the page look the way it does. Pretty simple stuff. menuMaker.js

http://examples.kevinchisholm.com/javascript/requirejs/part-ii/menuMaker.js

This module returns an object literal. That object has three properties. Each property is a DOM element: an unordered list (UL). None of these DOM elements exist in the page (yet) when they are returned, but they are valid unordered lists, waiting to be injected into the page. This module has two dependencies: weekParser.js and makeList.js. Inside of the anonymous function that wraps our module, they are referred to as: “weekTool” and “makeList.” We could have just as well called them “Sally” and “Sue”. It doesn’t matter. “weekTool” and “makeList.” are the variable names we chose. If you look at the object literal that is returned by menuMaker.js, you’ll see that we use “weekTool” and “makeList.” to create the object’s property values. weekParser.js

http://examples.kevinchisholm.com/javascript/requirejs/part-ii/weekParser.js

This module has the dependencies: ‘menuData’,’getDayType’. menuData is the array that contains our actual menu data. getDayType.js returns a sub-set of the ‘menuData’ array, depending on whether “weekday”, “weekend” is passed-in. getDayType.js

http://examples.kevinchisholm.com/javascript/requirejs/part-ii/getDayType.js

This module takes two arguments: the type of day (i.e. weekday or weekend), and the data array that contains the entire menu. Based on the type that was passed-in, it returns a sub-set of the array that contains only the days of type specified. makeList.js

http://examples.kevinchisholm.com/javascript/requirejs/part-ii/makeList.js

This module is unique amongst the modules we have reviewed so far in that it has no dependencies. It returns a function that takes one argument: an array. That array should contain the day objects that we want to turn into an unordered list. For each element in that array, it creates an LI element, puts the “Day” and “Menu” values into that LI, and then returns an unordered list (UL). Example # 3

if(document.addEventListener){

	//get referenes to the buttons
	var showWeekDays = document.getElementById('showWeekDays'),
	showWeekEnd = document.getElementById('showWeekEnd'),
	showFullWeek = document.getElementById('showFullWeek');	

	//event handlers for each specific button
	showWeekDays.addEventListener('click',function(){
		specialsHandler(menu.weekdayMenu);
	},false);

	showWeekEnd.addEventListener('click',function(){
		specialsHandler(menu.weekendMenu);
	},false);

	showFullWeek.addEventListener('click',function(){
		specialsHandler(menu.getFullWeek);
	},false);
};

if(document.addEventListener){

//get referenes to the buttons

var showWeekDays = document.getElementById('showWeekDays'),

showWeekEnd = document.getElementById('showWeekEnd'),

showFullWeek = document.getElementById('showFullWeek');

//event handlers for each specific button

showWeekDays.addEventListener('click',function(){

specialsHandler(menu.weekdayMenu);

},false);

showWeekEnd.addEventListener('click',function(){

specialsHandler(menu.weekendMenu);

},false);

showFullWeek.addEventListener('click',function(){

specialsHandler(menu.getFullWeek);

},false);

};

In Example # 3, we circle back to our web page. This code does a quick check to make sure that the addEventListener() method is supported, and then gets to work setting up click event handlers for each of the three buttons at top.

Notice that in each case, menu.getFullWeek is the only reference to functionality provided by one of our modules. A simple call to a property of that module’s return value kicks off the dependency chain that we discussed above, but this web page neither knows nor cares about all that. It only knows that it required a file named “menuMaker.js”, it refers to its return value as “menu” and it wants the value of menu.getFullWeek (or menu.weekendMenu, etc…). The menuMaker.js module provides that functionality, and any other modules that it depends on in order to provide that functionality, are only of concern to menuMaker.js.

Summary

In this article, we created a web page that allows the user to view the weekday, weekend or full week specials for a restaurant. We demonstrated how modules can have dependencies on other modules, and that dependency chain can grow and become complex. The key takeaway here is that while this scenario may seem to be a one-way ticket to spaghetti code, it is quite the opposite; by following the Asynchronous Module Definition pattern, each one of our modules provides clear and distinct functionality. A module may depend on other modules, but it neither knows nor cares about the dependency chain that may exist with the modules that it depends on.

There is plenty more to discover with Require.js. But I hope this article has provided a helpful introduction to the library and the benefits of Asynchronous Module Definition patterns, beyond the basics.

Once again, here is the full working example for this article:

http://examples.kevinchisholm.com/javascript/requirejs/part-ii/

Helpful Links for Require.js and Asynchronous Module Definition

Require.js

http://requirejs.org/

http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html

http://javascriptplayground.com/blog/2012/07/requirejs-amd-tutorial-introduction

Asynchronous Module Definition

http://requirejs.org/docs/whyamd.html

http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition

https://github.com/amdjs/amdjs-api/wiki/AMD

http://www.2ality.com/2011/10/amd.html

Apr32013 by dcmNo Comments

What’s the Difference Between jQuery().each() and jQuery.each() ?

jQuery

jQuery’s two .each() methods are similar in nature, but differ in level of functionality

Some may find it difficult to understand the difference between jQuery.each() and jQuery().each(). Perhaps the easiest way to understand the difference is to start with jQuery().each(). This method can only be used against a jQuery collection. So when you do this: jQuery(‘#someDiv p’).each(), what you are saying is: “for EACH paragraph that is inside of the element with the ID of “someDiv”, I want to do something. That’s it.

The jQuery.each() method is a static method of the jQuery object. This means that it is just a method that’s out there for you to use, and you need to give it a little more info. But there is a bigger payoff with this method: it can be used to iterate over different kinds of things, not just a jQuery collection.

The syntax for the jQuery.each() method is also simple:

jQuery.each(OBJECT,CALLBACK)

1	jQuery.each(OBJECT,CALLBACK)

So, OBJECT can be an object, an array, an array-like object or even a jQuery collection. How cool is that? The CALLBACK is a function that will be run against each element in the first argument. The super-star feature here is that the first argument can be a jQuery DOM collection. This means that jQuery.each() can do ANYTHING that jQuery().each() can do. Let’s jump into some code:

jQuery().each()

Example # 1.A

<ul>
  <li>monday</li>
  <li>tuesday</li>
  <li>wednesday</li>
  <li>thursday</li>
  <li>friday</li>
  <li class="weekend">saturday</li>
  <li class="weekend">sunday</li>
</ul>

<script>
  jQuery('li').each(function(index, value) {
    jQuery(this).css('background-color','yellow');
  });

  jQuery('li.weekend').each(function(index, value) {
    jQuery(this).css('color','red');
  });
</script>

<ul>

<li>monday</li>

<li>tuesday</li>

<li>wednesday</li>

<li>thursday</li>

<li>friday</li>

<li class="weekend">saturday</li>

<li class="weekend">sunday</li>

</ul>

jQuery('li').each(function(index, value) {

jQuery(this).css('background-color','yellow');

});

jQuery('li.weekend').each(function(index, value) {

jQuery(this).css('color','red');

});

</script>

In Example # 1.A, we have an unordered list, with the days of the week as list items. The last two have the “weekend” class applied. We use the $().each() method twice. In the first run, it will iterate over every one of the list items. In the second run, the jQuery collection contains only the last two list items because they have the “weekend” class.

In both cases though, we can see how the $().each() method does one thing and does it well: it iterates over a jQuery collection. Inside of that collection, we use $(this) to get a reference to the current element being iterated over.

Here is the JSFiddle Link for Example # 1.A: http://jsfiddle.net/wcRmd/

Example # 1.B

<ul class="music">
  <li>jazz</li>
  <li class="skip">blues</li>
  <li>rock</li>
  <li class="skip">country</li>
  <li>techno</li>
  <li>metal</li>
</ul>

<script>
jQuery('li').each(function(index,element) {
  //element = 'this'

  //ignore elements with the 'skip' class
    if( jQuery(element).hasClass('skip') ){return};

  jQuery(element)
    //show the index
  .text( jQuery(element).text() + ' -> ' + index)
    .css({
        'background-color' : 'yellow',
        'font-size' : '22px',
        'font-family' : 'arial'     
         });
})
</script>

<li class="skip">blues</li>

<li class="skip">country</li>

<li>techno</li>

<li>metal</li>

</ul>

jQuery('li').each(function(index,element) {

//element = 'this'

//ignore elements with the 'skip' class

if( jQuery(element).hasClass('skip') ){return};

jQuery(element)

//show the index

.text( jQuery(element).text() + ' -> ' + index)

.css({

'background-color' : 'yellow',

'font-size' : '22px',

'font-family' : 'arial'

});

})

</script>

In Example # 1.B, we take advantage of two additional features that the jQuery().each method has to offer. The callback takes two optional arguments: the index of the current element being iterated over, and the element itself. In our example, we add the index of each element to its text, and we do so by referencing ‘element’ instead of ‘this’. Keep in mind that ‘element’ is just what we decided to name that argument variable. We could just have easily named it ‘foo’ or ‘glove’. It doesn’t matter what you name these variables, just as long as you are aware of what they are.

We also used the .hasClass() method to see if each element had the “skip” class. This was just a way to illustrate the fact that while you CAN do things to each element inside of the callback function, you can also choose not to. There are numerous ways that you can organize this kind of logic. Using the ‘skip’ class was merely a ‘quick and dirty’ approach.

Here is the JSFiddle Link for Example # 1.B: http://jsfiddle.net/9C8He/

jQuery.each()

Example # 2.A

jQuery.each(['monday', 'tuesday', 'wednesday'], function(index, value) {
  console.log(value);
});

jQuery.each(['monday', 'tuesday', 'wednesday'], function(index, value) {

console.log(value);

});

In Example # 2A, we pass-in two arguments to the static jQuery.each() method: an array and an anonymous callback function. The array has three elements, and the callback merely outputs the value of each array element to the console. Pretty simple stuff.

Here is the JSFiddle Link for Example # 2.A: http://jsbin.com/epanov/1/edit

Example # 2.B

var data =   {
    name: 'R Jones',
    accountNumber: 10203,
    phoneHome: '212-555-1212',
    phoneMobile: '212-555-1313'
  };

jQuery.each(data, function(index, value) {
  console.log(index + ': ' + value);
});

var data = {

accountNumber: 10203,

phoneHome: '212-555-1212',

phoneMobile: '212-555-1313'

};

jQuery.each(data, function(index, value) {

console.log(index + ': ' + value);

});

In Example # 2.B, we provide an object as the first argument to the jQuery.each() method. When iterating over an object, the jQuery.each() method will return the property name for ‘index’. This is a brilliant approach, as it provides a very flexible alternative to the native JavaScript “for/in” loop.

Here is the JSFiddle Link for Example # 2.B: http://jsbin.com/examuz/1/edit

Example # 2.C

<ul>
  <li>monday</li>
  <li>tuesday</li>
  <li>wedesday</li>
  <li>thursday</li>
  <li>friday</li>
  <li class="weekend">saturday</li>
  <li class="weekend">sunday</li>
</ul>

<script>
$.each( $('li.weekend'), function(index, value) {
    //value = 'this'
    $(value)
    .text( $(value).text() + ' -> ' +  index) 
  .css('color','red');
});
</script>

<ul>

<li>monday</li>

<li>tuesday</li>

<li>wedesday</li>

<li>thursday</li>

<li>friday</li>

<li class="weekend">saturday</li>

<li class="weekend">sunday</li>

</ul>

$.each( $('li.weekend'), function(index, value) {

//value = 'this'

$(value)

.text( $(value).text() + ' -> ' + index)

.css('color','red');

});

</script>

In Example # 2.C, we provide a jQuery DOM collection as the first argument to the jQuery.each() method. Essentially, this is just like using the jQuery().each() method. Inside of the callback function, ‘index’ can be used to get a numerical reference to the current element being iterated over, and ‘value’ will be the element itself. Brilliant.

NOTE: You may wonder why the last two elements have indexes of 0 and 1 respectively. This is because we specified that list items with the ‘weekend’ class should be returned in the collection. So, our jQuery collection object contains only two elements (‘saturday’ and ‘sunday’).

Here is the JSFiddle Link for Example # 2.C: http://jsfiddle.net/XjxvZ/

Summary

In this article we learned the difference between the jQuery.each() and jQuery().each() methods. We also discovered that while they do differ, the jQuery.each() is flexible enough to provide the same functionality as jQuery().each() if needed.

Helpful Links for jQuery().each() and jQuery.each()

jQuery().each()

http://api.jquery.com/each/

jQuery.each()

http://api.jquery.com/jQuery.each/

Apr12013 by dcmNo Comments

Getting Started with Require.js – Part I

Asynchronous Module Definition

Learn how to decouple your code and organize it into reusable modules

Require.js is a JavaScript library that allows you to organize your code into separate modules. It follows the Asynchronous Module Definition API. Each module is an individual JavaScript file. You may, at first, bristle at this pattern because it forces you to rethink the way you organize your JavaScript. But while it may be a bit of an acquired taste, this approach encourages you to write code that is less coupled and easier to reuse.

The two methods that you will likely use the most are require() and define(). In both cases, you specify zero or more modules that your module “depends” on. When you do so, those modules will be loaded asynchronously. These dependencies are specified by a string which is a path to that JavaScript file. These strings must be in an array even if there is only one.

Following the array is an anonymous function. That function takes each dependency as an argument. What you do inside of that function is up to you. Just keep in mind that this function’s return value is what the outside world will “see” when they require your module.

Example # 1 A

define(function(){
	console.log('Hello from module # 1.');
});

define(function(){

console.log('Hello from module # 1.');

});

Example # 1 B

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Getting Started with Require.js Part I | blog.kevinchisholm.com</title>
</head> 
<body> 
	<script src="require.js"></script>
	<script>
		require(["module-1"], function() {

		});
	</script>
</body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>Getting Started with Require.js Part I | blog.kevinchisholm.com</title>

</head>

<body>

require(["module-1"], function() {

});

</script>

</body>

</html>

Example # 1 A shows the code for our first module. It is a single JavaScript file named module-1.js. In that file, we execute the define() function. The define function takes a single argument, which is an anonymous function. In that function, we simply output some text to the console. Our module doesn’t do too much, but we’re keeping it simple for demonstration purposes.

In Example # 1B, we have the code for our web page. At the bottom of the page, we first pull in require.js. Then we execute the require() function. The first argument that it receives is an array. In this case, that array has only one element: “module-1”. That tells require: “hey, there is a file named ‘module-1.js’; load it asynchronously, and when that script has completed loading, run the following anonymous function.” In this example, the anonymous function has no code, so it does nothing.

Example # 2

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Getting Started with Require.js Part I | blog.kevinchisholm.com</title>
</head> 
<body> 
	<script src="require.js"></script>
	<script>
		require(["module-1"], function() {
			console.log('Finished loading module # 1.');
		});
	</script>
</body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>Getting Started with Require.js Part I | blog.kevinchisholm.com</title>

</head>

<body>

require(["module-1"], function() {

console.log('Finished loading module # 1.');

});

</script>

</body>

</html>

In example # 2, we output some text to the console in the anonymous function. That console.log() call will only fire after module-1.js has loaded. This is where we start to see the brilliance of Require.js: you can have another module as a dependency, and your code will only execute once that dependency has loaded successfully.

Example # 3 A

define(function(){
	console.log('module # 1 ran');
	return "Hello, I am the return value of module # 1."
});

define(function(){

console.log('module # 1 ran');

return "Hello, I am the return value of module # 1."

});

Example # 3 B

define(function(){
	console.log('module # 2 ran');
	return "Hello, I am the return value of module # 2."
});

define(function(){

console.log('module # 2 ran');

return "Hello, I am the return value of module # 2."

});

In Examples # 3A and 3B, we see that we now have two modules. In each case, we output some text to the console, just to show that the module executes, and then each module returns a string.

Example # 3 C

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Getting Started with Require.js Part I | blog.kevinchisholm.com</title>
</head> 
<body> 
	<script src="require.js"></script>
	<script>
		require(["module-1","module-2"], function(mod1,mod2) {
			console.log('mod1 -> ' + mod1);
			console.log('mod2 -> ' + mod2);			
		});
	</script>
</body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>Getting Started with Require.js Part I | blog.kevinchisholm.com</title>

</head>

<body>

require(["module-1","module-2"], function(mod1,mod2) {

console.log('mod1 -> ' + mod1);

console.log('mod2 -> ' + mod2);

});

</script>

</body>

</html>

In example # 3C, we pass an array with two elements as the first argument to the require() function: “module-1” and ,”module-2”. The anonymous function that is the second argument receives the return value of each member of that array. We can name these whatever we want. I used “mod1” and “mod2”, but I could just as well have named them “sally” and “sam”. It doesn’t matter; they are simply identifiers for the return value of each dependency. We demonstrate all of this by outputting the return value of each module to the console.

The working example for this article can be found here: http://examples.kevinchisholm.com/javascript/requirejs/part-i/

Summary

In this article, we were introduced to Require.js. We learned about how this JavaScript library allows you to organize your code into individual JavaScript files called “modules”. We learned about the define() and require() functions, their signatures, and how they are used in order to asynchronously load dependencies and create references to their return values.

Helpful Links for Require.js

http://requirejs.org/

http://blog.teamtreehouse.com/organize-your-code-with-requirejs

http://net.tutsplus.com/tag/requirejs/

http://requirejs.org/docs/whyamd.html

Mar272013 by dcmNo Comments

Super Flexible JavaScript Object and Array Iteration with jQuery.each()

jQuery

The jQuery.each() method makes it trivial to iterate over or inspect any kind of collection: arrays, objects, array-like objects, even jQuery DOM Objects.

Working with JavaScript means working with Objects. There is almost no way around this. So even in the simplest of scenarios, at some point you are likely to encounter an object and you need to inspect it.

Keep in mind that in JavaScript, there are different kinds of objects. For example, an array is an object. And, a DOM element is an object. It’s no secret that I am a huge fan of the JavaScript “For/In” loop. If you are not able to use jQuery then that is your go-to tool for object inspection. If you are using jQuery, then the static .each() method is a real winner.

It is important to make sure you understand that this is not the same thing as the $().each() method. When you pass a CSS selector to jQuery and then call the .each() method on the collection that is returned, you are calling a different method in jQuery. It is very similar, but that syntax is meant especially for DOM collections.

The jQuery.each() method is a static method of the jQuery object. It is a more generalized method that can be used to iterate over any object, array or array-like object. So the syntax is quite simple:

jQuery.each(OBJECT,CALLBACK);

1	jQuery.each(OBJECT,CALLBACK);

The OBJECT argument is any object, array or array-like object. The CALLBACK argument can be an inline anonymous function, a named function expression or a variable that points to an anonymous function.

Example # 1

$.each(['monday', 'tuesday', 'wednesday'], function(index, value) {
  console.log(value);
});

$.each(['monday', 'tuesday', 'wednesday'], function(index, value) {

console.log(value);

});

In Example # 1, we have provided a simple array: three strings, each representing a corresponding day of the work week. The callback function executes for each one of the array elements, and inside of that function the variable “value” represents the value of that array element. We could have called that variable “baseball”; it doesn’t matter what you call it. The most important thing to remember is that the second argument to the callback will return the value of the current array element that is being iterated over. So, simple stuff.

Here is a JSBin link for Example # 1: http://jsbin.com/epanov/1/edit

Example # 2

$.each(['monday', 'tuesday', 'wednesday'], function(index, value) {
  console.log(index + ': ' + value);
});

$.each(['monday', 'tuesday', 'wednesday'], function(index, value) {

console.log(index + ': ' + value);

});

In Example # 2, we take advantage of the “index” argument. In the console, we output the value of that variable. Again, this variable can be named anything. As with “value”, it’s most important to be aware that the first argument of the callback will return the index of the array element that is currently being iterated over.

Here is a JSBin link for Example # 2: http://jsbin.com/epezuc/1/edit

Example # 3

$.each(['monday', 'tuesday', 'wednesday',], function(index, value) {
  console.log( value.replace('day', '') );
});

$.each(['monday', 'tuesday', 'wednesday',], function(index, value) {

console.log( value.replace('day', '') );

});

In Example # 3, we take things a step further to illustrate the fact that we can not only access the value of the current array element, but we can do things with it. Here, we simply remove ‘day’ from the string. But there is certainly a whole lot more that one might do. For example, if these array elements were objects instead of primitive strings, we could make changes to the objects and the next person or function who reached for that object would find it changed.

Here is a JSBin link for Example # 3: http://jsbin.com/okoxej/1/edit

Example # 4

var data = [
  {name: 'R Jones',accountNumber: 10203},
  {name: 'K Frost',accountNumber: 242526},
  {name: 'J Sommers',accountNumber: 717273}
];

$.each(data, function(index, value) {
  console.dir(value);
});

var data = [

{name: 'R Jones',accountNumber: 10203},

{name: 'K Frost',accountNumber: 242526},

{name: 'J Sommers',accountNumber: 717273}

];

$.each(data, function(index, value) {

console.dir(value);

});

In Example # 4, we move the object out of the jQuery.each() call and then simply reference it as the variable “data”. This time we have provided an array of objects. So on each iteration of the callback, instead of simply outputting a string, we are inspecting an object.

Here is a JSBin link for Example # 4: http://jsbin.com/usewoj/1/edit

Example # 5

var data =   {
    name: 'R Jones',
    accountNumber: 10203,
    phoneHome: '212-555-1212',
    phoneMobile: '212-555-1313'
  };

$.each(data, function(index, value) {
  console.log(index + ': ' + value);
});

var data = {

accountNumber: 10203,

phoneHome: '212-555-1212',

phoneMobile: '212-555-1313'

};

$.each(data, function(index, value) {

console.log(index + ': ' + value);

});

In Example # 5, things get even more interesting. Here, we can see the brilliance of the jQuery.each() method. In this case we provide an object literal as the first argument to the .each() method. When an object is passed in, then the value of the “index” variable will be the name of the key or property of the object. So this saves you the time it would take to roll your own “For/In” loop.

Here is a JSBin link for Example # 5: http://jsbin.com/examuz/1/edit

Example # 6

$.each( $('li.weekend')), function(index, value) {
  $(this).css('color','red');
});

$.each( $('li.weekend')), function(index, value) {

$(this).css('color','red');

});

In Example # 6, the object that is provided is a jQuery collection object. So now, on each execution of the callback, we can use $(this) to reference the jQuery DOM element object that is being iterated over, and of course do all the usual kinds of fun things to the element with jQuery.

Here is a JSFiddle link for Example # 6: http://jsfiddle.net/n7PRD/

Example # 7

var
data1 =   {
   name: 'R Jones',
   accountNumber: 10203,
   phoneHome: '212-555-1212',
   phoneMobile: '212-555-1313'
 }, 
data2 =   {
   name: 'S Frost',
   accountNumber: 919293,
   phoneHome: '212-555-1234',
   phoneMobile: '212-555-4321'
 };

var inspect = function(index, value) {
 console.dir(value);
};

$.each([data1, data2], inspect);

var

data1 = {

accountNumber: 10203,

phoneHome: '212-555-1212',

phoneMobile: '212-555-1313'

data2 = {

accountNumber: 919293,

phoneHome: '212-555-1234',

phoneMobile: '212-555-4321'

};

var inspect = function(index, value) {

console.dir(value);

};

$.each([data1, data2], inspect);

And here, in Example # 7, we have abstracted the callback. Instead of providing an inline anonymous function, we provide a reference to a variable that is a function: “inspect”. So, that function will be called for every element provided in the data. The data we have provided in an array, and each element of that array is an object with some user account data. Phew! So, on each iteration of the callback (which is really the variable “inspect”, which is a function), we output the contents of that object to the console. We certainly could have done much more here, but the point of the example is that you can abstract any aspect of this that you like. So, as you can see, there is a ton of flexibility here and you are only limited by your imagination.

Here is a JSBin link for Example # 7: http://jsbin.com/iriwer/1/edit

Summary

In this article we learned a bit about the jQuery.each() method. We discussed the simple syntax, as well as the two arguments that are used in the callback. We also explored multiple scenarios such as inspecting an array of strings, inspecting an array of objects, inspecting objects and inspecting jQuery DOM objects.

Helpful Links for the jQuery.each() Method.

http://api.jquery.com/jQuery.each/

http://www.jquery4u.com/jquery-functions/jquery-each-examples/

http://stackoverflow.com/questions/722815/jquery-each-practical-uses

Mar252013 by dcmNo Comments

Hand-Coded JavaScript AJAX – The Absolute Basics

AJAX

Understanding the basic components of an AJAX request / response, and being able to write it all out by hand is an important skill for any JavaScript developer to have.

Yeah yeah yeah, you’ve used jQuery.ajax(). But can you write AJAX code by hand, starting with a blank sheet of paper? While some might feel that jQuery, DoJo and other popular libraries abstract these kinds of details just fine, it’s important to understand what is happening under the hood. So, give me a moment to step down from my soapbox.js and let’s jump into the code.

The XMLHttpRequest Object

The XMLHttpRequest object is the key to AJAX. It is a constructor function that is a property of the window object. You instantiate this object, and then take advantage of the various properties and methods of the instance object that is returned.

Determining Support for the XMLHttpRequest object

Previous to Internet Explorer version # 8, there was no support for the native XMLHttpRequest object. You had to instantiate IE’s ActiveXObject(), and pass in the argument: “Microsoft.XMLHTTP”. Even though the IE6 and below audience is dwindling, someone out there is still using IE6 or IE5, so it’s a good idea to handle that scenario gracefully.

Example # 1

//figure out what kind of support we have for the XMLHttpRequest object
if (window.XMLHttpRequest){
     //modern browsers
     req = new XMLHttpRequest();   
} else {
    //good ol' lousy IE
    req = new ActiveXObject("Microsoft.XMLHTTP");
};

//figure out what kind of support we have for the XMLHttpRequest object

if (window.XMLHttpRequest){

//modern browsers

req = new XMLHttpRequest();

} else {

//good ol' lousy IE

req = new ActiveXObject("Microsoft.XMLHTTP");

};

In Example # 1, we use an IF/ELSE block to determine support for the XMLHttpRequest object. If it is supported, we instantiate the object and if not, we instantiate IE’s native ActiveXObject object.

The onreadystatechange Event

Of the eight events fired by the XMLHttpRequest object, the one we tend to care about most is the onreadystatechange event. It indicates the “readiness” of the XMLHttpRequest object’s request. A ready state of four (4), indicates that the XMLHttpRequest object’s request has generated a response, and that response is in the browser, and ready to be consumed.

The status Property

XMLHttpRequest object’s “status” property represents the HTTP status code returned by the server when our XMLHttpRequest object’s request was sent. There are numerous HTTP status codes that can be returned by a web server, but a detailed discussion of them is outside of the scope of this article. Simply put, we are most often only interested in an HTTP status code of “200” which means: “ok”. It is the web server’s way of saying: “I have completed your request, here it is, and there were no problems”.

So, the combination of an XMLHttpRequest object readystate of 4, and HTTP response code of 200 is the scenario we want. This scenario means that our request was returned, it is ready and there was no problem with the request. Once we know that this condition exists, then we can do something with whatever was returned by the XMLHttpRequest object’s response request.

//when the onreadystatechange event fires, this function will execute

1	//when the onreadystatechange event fires, this function will execute

req.onreadystatechange = function(){ if (req.readyState === 4 && req.status === 200){ //if readyState is “4” and the server response was 200/ok… //inject the returned HTML into the DOM document.getElementById(‘target’).innerHTML = req.responseText; }; };

Opening the XMLHttpRequest Object’s Request

So far, nothing has happened. All we have done is instantiate the XMLHttpRequest object, and set up a function that will execute when we know that the request’s response is “ready” and there was no problem with the request. Now we will open the request.

When calling the open() method of the XMLHttpRequest object, we pass in three arguments:

The type of request (“GET” or “POST”)
The URL that the request should be set to
If the request should be sent asynchronously (you will almost always want this to be “true”)

req.open("GET","ajax-example-1-response.php",true);

1	req.open("GET","ajax-example-1-response.php",true);

Sending the XMLHttpRequest Object’s Request

So this is the final step in writing an AJAX call: sending the request. There is nothing more to do than simply execute the .send() method:

req.send();

1	req.send();

Now let’s look at the markup we’ll need for the article’s example. Below you’ll see two buttons. One will kick off the AJAX request, and the other simply clears the contents of the page. There is also a DIV with an id of “target”. That is the element in which our AJAX request’s response text is injected.

<button id="request">Send AJAX Request</button>
<button id="clear">Clear Page</button>
<div id="target"></div>

<button id="request">Send AJAX Request</button>

<button id="clear">Clear Page</button>

We also have some JavaScript that sets up event handlers for the button clicks. When clicking the button with the ID of “click”, the AJAX request is kicked off and the requests response text is injected into the DIV with the ID of “target”. When clicking the button with the ID of “clear”, the “target” DIV’s contents are cleared.

//setup the click event for the buttons
document.getElementById('request').onclick = ajaxRequest;

document.getElementById('clear').onclick = function(){
	document.getElementById('target').innerHTML = '';
};

//setup the click event for the buttons

document.getElementById('request').onclick = ajaxRequest;

document.getElementById('clear').onclick = function(){

document.getElementById('target').innerHTML = '';

};

It is not critical to be aware of the server page’s code for this very simple example, but in case you are interested, it is a simple PHP page that sends a message that includes the time of the request, allowing us to verify that the requests are being made in real time.

Server Code

<?php
	date_default_timezone_set('EST');
	echo "<p>Hello, this is the response from the server.</p>";
	echo "<p>This response was sent on " . date('l F jS Y') . " at " . date('h:i:s A') . " <i>(new york city time).<i></p>";
?>

<?php

date_default_timezone_set('EST');

echo "<p>Hello, this is the response from the server.</p>";

echo "<p>This response was sent on " . date('l F jS Y') . " at " . date('h:i:s A') . " <i>(new york city time).<i></p>";

Below is the full working code for our AJAX eample:

Example # 2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hand-Coded Ajax Example# 1 </title>
	</head>
	<style>
	p{
		width:40%;
		margin:50px auto 0;
		padding:22px;
		background-color:#ededed;
		border:1px solid #ccc;
		-webkit-border-radius: 05px;
		-moz-border-radius: 05px;
		border-radius: 05px;
		font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
		font-weight: 300;
	}
	p:first-child{
		font-size:32px;
	}
	p:last-child{
		font-size:18px;
	}
	</style>
	<body>
		<button id="request">Send AJAX Request</button>
		<button id="clear">Clear Page</button>
		<div id="target"></div>
		<script>
		function ajaxRequest(){
			//declare the variable at the top, even though it will be null at first
			var req = null;

			//figure out what kind of support we have for the XMLHttpRequest object
			if (window.XMLHttpRequest){
				//modern browsers
				req = new XMLHttpRequest();
			} else {
				//good ol' lousy IE
				req = new ActiveXObject("Microsoft.XMLHTTP");
			};

			//setup the readystatechange listener
			req.onreadystatechange = function(){
				//right now we only care about a successful and complete response
				if (req.readyState === 4 && req.status === 200){
					//inject the returned HTML into the DOM
					document.getElementById('target').innerHTML = req.responseText;
				};
			};

			//open the XMLHttpRequest connection
			req.open("GET","response.php",true);

			//send the XMLHttpRequest request (nothing has actually been sent until this very line)
			req.send();
		};

		//setup the click event for the buttons
		document.getElementById('request').onclick = ajaxRequest;

		document.getElementById('clear').onclick = function(){
			document.getElementById('target').innerHTML = '';
		};
		</script>
	</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Hand-Coded Ajax Example# 1 </title>

</head>

<style>

width:40%;

margin:50px auto 0;

padding:22px;

background-color:#ededed;

border:1px solid #ccc;

-webkit-border-radius: 05px;

-moz-border-radius: 05px;

border-radius: 05px;

font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;

font-weight: 300;

}

p:first-child{

font-size:32px;

}

p:last-child{

font-size:18px;

}

</style>

<body>

<button id="request">Send AJAX Request</button>

<button id="clear">Clear Page</button>

function ajaxRequest(){

//declare the variable at the top, even though it will be null at first

var req = null;

//figure out what kind of support we have for the XMLHttpRequest object

if (window.XMLHttpRequest){

//modern browsers

req = new XMLHttpRequest();

} else {

//good ol' lousy IE

req = new ActiveXObject("Microsoft.XMLHTTP");

};

//setup the readystatechange listener

req.onreadystatechange = function(){

//right now we only care about a successful and complete response

if (req.readyState === 4 && req.status === 200){

//inject the returned HTML into the DOM

document.getElementById('target').innerHTML = req.responseText;

};

//open the XMLHttpRequest connection

req.open("GET","response.php",true);

//send the XMLHttpRequest request (nothing has actually been sent until this very line)

req.send();

};

//setup the click event for the buttons

document.getElementById('request').onclick = ajaxRequest;

document.getElementById('clear').onclick = function(){

document.getElementById('target').innerHTML = '';

};

</script>

</body>

</html>

Here is a link to the full working page for this article’s example:

http://examples.kevinchisholm.com/ajax/example-1/

Summary

In this article we discussed the XMLHttpRequest object. We learned how to test for the browsers support of this object, instantiate it and assign an anonymous function to handle its onreadystatechange event. Inside of that function, we learned how to check for the readyState property value, the status property and then inject the return text into the DOM. We also discussed how to open the XMLHttpRequest object’s request, and then send it.

Hand-coded AJAX is no big deal, and I’m hoping that this article has left you feeling this way. The key is getting to know the XMLHttpRequest object, specifically its various properties and methods. There is plenty more to talk about with regard to AJAX in native JavaScript, but what we covered in this article is the bare minimum needed to get up and runing.

Helpful Links for hand-coded AJAX

What’s the difference between jQuery.ajax(), jQuery.get() and jQuery.post()?
Using the jQuery Promise Interface to Avoid the AJAX Pyramid of Doom
Using jQuery Deferred to Manage Multiple AJAX calls
What Are the Top 10 JavaScript Links for AJAX ?

Mar202013 by dcmNo Comments

CSS Interview Questions – Margin and Padding

CSS

Before you go into that Front-End Web Developer interview, make sure you’ve got your CSS Margin and Padding facts down.

Q: Which is closer to the content, margin or padding?
A: Padding is closer to the content
Hint: http://www.w3.org/TR/CSS2/box.html

Q: What is the order of the Margin and Padding CSS shorthand syntax?
A: Top, Right, Bottom, Left

Hint: The order is clockwise

Q: How do you set the margin-top and margin-bottom values of a purely inline element?
A: You can’t. Inline elements can only have left and right margins.

Hint: http://stackoverflow.com/questions/1134779/why-do-bottom-padding-and-bottom-margins-not-help-to-add-vertical-spacing-betwee

Q: True or False: Margin and Padding values can be set in percentages.
A: True

Hint: http://stackoverflow.com/questions/4982480/how-to-set-the-margin-or-padding-as-percentage-of-height-or-parent-container

Q: When you see the the following, what is the web developer likely trying to do? margin: 0 auto
A: Center an element

Hint: http://css-tricks.com/snippets/css/centering-a-website/

Q: Which is furthest away from the content: Margin or Border?
A: Margin

Hint: http://www.htmldog.com/guides/cssbeginner/margins/

Q: Can Margin and Padding values be expressed in inches?
A: Yes

Hint: http://www.w3.org/Style/Examples/007/units.en.html

Q: If you wanted more of an element’s background-color to show, which value would you increase, Margin or Padding?
A: Padding. The Margin is outside of the background color.

Hint: http://www.w3.org/TR/CSS2/box.html

Q: Do Margins of inline-block boxes collapse?
A: No

Hint: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Q: When specifying a margin value as a percentage, what is that number a percentage of?
A: It is calculated with respect to the width of the generated box’s containing block.

Hint: http://www.w3.org/TR/CSS2/box.html#margin-properties

Mar182013 by dcmNo Comments

JavaScript Callback Functions – The Absolute Basics

Functions

Callbacks are a critical tool for properly handling asynchronous events in JavaScript.

Timing is one of the most difficult techniques to master in JavaScript. At first, many look to the setTimeout() method to address the asynchronous nature of JavaScript. But that is most often not the best approach. The concept of a callback function is one of the things that makes JavaScript such a special language.

In order to understand callbacks, it is important to be aware that functions are first class citizens in JavaScript. This means (among other things) that a function can be passed as a value to another function. The upside to this is the fact that if you call function A, and pass it function B as an argument, then inside of function A, you can execute function B. That’s really what it all boils down to: You call a function, and pass it another function. And inside of the first function, when an event that you need to complete has completed, you then “call back” to the function that was passed in.

While you can pass a named function as an argument, quite often you will see an anonymous function passed. Before we demonstrate a callback function, let’s demonstrate why they are so helpful in JavaScript.

Example # 1

PHP FIle:

<?php
	sleep(3);
	header('content-type: text/javascript; charset=utf-8');
?>

console.log("1) hello from the script you just loaded");

<?php

sleep(3);

header('content-type: text/javascript; charset=utf-8');

console.log("1) hello from the script you just loaded");

Client-side JavaScript:

function getScript(){
//create a script element and inject it into the page
var script = document.createElement('script');
script.src = 'http://sub1.kevinchisholm.com/blog/examples/sleep1.php';
document.getElementsByTagName('head')[0].appendChild(script);
};

getScript();
console.log("2) the new script has been loaded"); //fires before the script finishes loading

function getScript(){

//create a script element and inject it into the page

var script = document.createElement('script');

script.src = 'http://sub1.kevinchisholm.com/blog/examples/sleep1.php';

document.getElementsByTagName('head')[0].appendChild(script);

};

getScript();

console.log("2) the new script has been loaded"); //fires before the script finishes loading

In Example # 1, we have two chunks of code: A server-side page that sleeps for three seconds, and then returns a JavaScript file. That JavaScript file simply outputs a message to the console.

When the script loads, it outputs a message to the console (message # 1). We want that message to be output before the 2nd message. The problem is that the script loading process is asynchronous; it could take 200ms, it could take five minutes. I’ve forced the PHP page that returns the JavaScript to “sleep” for three seconds, to exaggerate the effect. But the bottom line is: we don’t know how long that script loading process will take, which means that we have to find a way to execute message # 2 only after the script has finished loading.

Here is a JSFiddle link for Example # 1: http://jsfiddle.net/CZeLv/

Example # 2

function getScript(callback){
   //create a script element and inject it into the page
   var script = document.createElement('script');
   script.src = 'http://sub1.kevinchisholm.com/blog/examples/sleep1.php';
   document.getElementsByTagName('head')[0].appendChild(script);

   //when the new script's load event fires, execute the callback
   script.onload = callback;
};

getScript(function(){
   console.log("the new script has been loaded"); //much better!
});

function getScript(callback){

//create a script element and inject it into the page

var script = document.createElement('script');

script.src = 'http://sub1.kevinchisholm.com/blog/examples/sleep1.php';

document.getElementsByTagName('head')[0].appendChild(script);

//when the new script's load event fires, execute the callback

script.onload = callback;

};

getScript(function(){

console.log("the new script has been loaded"); //much better!

});

In Example # 2, we pass an anonymous function to the getScript() method. Inside of getScript(), we take advantage of the fact that any dynamically loaded script element has an “onload” event. We assign that event to the callback that was passed-in. This means that when the script has successfully loaded, we execute the callback. As a result, we have complete control over the timing of events, even though the entire process is asynchronous. What happens is that message # 1 executes first, and then message # 2. This is what we want.

Here is a JSFiddle link for Example # 2: http://jsfiddle.net/dfCM2/

What if the script that we are loading has properties and methods that we need to act upon once the script is available? In Example # 3, we demonstrate how using a callback allows us to call a method that does not exist before the script is loaded, but we are able to control the timing of when it is called, so that it works every time.

Example # 3

PHP File:

<?php
sleep(3);
header('content-type: text/javascript; charset=utf-8');
?>

window.getSecretWord = function(){
	return "milkshake";
};

<?php

sleep(3);

header('content-type: text/javascript; charset=utf-8');

window.getSecretWord = function(){

return "milkshake";

};

Client-side JavaScript:

function getScript(callback){
   //create a script element and inject it into the page
   var script = document.createElement('script');
   script.src = 'http://sub1.kevinchisholm.com/blog/examples/sleep2.php';
   document.getElementsByTagName('head')[0].appendChild(script);

  //when the new script's load event fires, execute the callback
   script.onload = callback;
};

getScript(function(){
   //window.getSecretWord now exists
   var secret = getSecretWord();

   //output the secret
   console.log("The secret word is: " + secret);
});

function getScript(callback){

//create a script element and inject it into the page

var script = document.createElement('script');

script.src = 'http://sub1.kevinchisholm.com/blog/examples/sleep2.php';

document.getElementsByTagName('head')[0].appendChild(script);

//when the new script's load event fires, execute the callback

script.onload = callback;

};

getScript(function(){

//window.getSecretWord now exists

var secret = getSecretWord();

//output the secret

console.log("The secret word is: " + secret);

});

In Example # 3, after the PHP file “sleeps” for three seconds, it adds a new method to the window object. That method returns a secret word. We need access to that secret word in our page, but we need to make sure that we don’t try to call the method getSecretWord() until it is available. So by passing a callback to the getScript() function, we yield control to getScript() and basically ask it to fire our callback for us. Inside of getScript(), the script’s onload event is assigned to the callback, which means we only attempt to execute getSecretWord() once we know for sure that it exists (because the script’s onload event fired).

So the important thing to keep in mind here is that if the script we are loading takes five minutes to return, or never returns, it does not matter. Our callback will only fire when that script successfully loads. While it is loading, the user still has complete access to the browser. That is really important.

Here is a JSFiddle link for Example # 3: http://jsfiddle.net/fAn4g/

Summary

In this article, we covered the very basics of JavaScript callback functions. We learned that functions are first-class citizens in JavaScript, and can be passed to and from functions. We looked at an example of why callbacks are so critical to the JavaScript language and how they are an excellent tool for working around the asynchronous nature of the language,

Helpful Links for JavaScript Callback Functions

http://recurial.com/programming/understanding-callback-functions-in-javascript/

http://www.impressivewebs.com/callback-functions-javascript/

http://javascript.about.com/od/byexample/a/usingfunctions-callbackfunction-example.htm

Mar112013 by dcmNo Comments

Less CSS – The Absolute Basics

Less CSS

Less CSS makes organizing, writing and managing your CSS code a breeze.

Although the CSS 1 specification was completed in 1996, it was not until 2000 that most major browsers fully implemented it. Ever since, we have all come to know and appreciate cascading style sheets. CSS rocks.

But…

The kind of logic that even the most basic programming languages enjoy is still absent from CSS. Granted, CSS is not a programming language, but with the kinds of challenges that today’s web developers face, concepts such as variables, functions and nested logic are difficult to live without in CSS. The end result is a syntax that quickly yields to unnecessary repetition and does not, by nature, allow you to mirror the very DOM you are styling. In addition, your CSS code base can quickly become large and difficult to manage.

Enter Less CSS.

This CSS preprocessor brilliantly allows you to employ the kind of structure and logic found in virtually any programming language. The syntax is easy to understand, it mimics your DOM structure and it allows you to keep your code base clean.

Two Implementation Methods

There are two ways that you can implement Less CSS: client-side or compiled. For the sake of simplicity, we will look at the client-side implementation and cover the compiled approach in a later post. Client-side implementation of Less CSS is not recommended for a large code base. In theory, it is inefficient and can quickly slow your page down. But it is perfect for getting to know Less CSS and for simple testing.

Client-side implementation is achieved in two steps. First, rename your .css file to .less. Also, in the LINK tag, change the “rel” attribute from “stylesheet” to “stylesheet/less”. Second, after your LINK tag that points to your .less file, pull in less.js via a SCRIPT tag. That’s it. Brilliant.

Example # 1

/* normal CSS */
h1,div{
	width:800px;
	margin:25px auto;
}

h1{
	text-align: center;
	font:bold 22px Verdana,Arial,Sans;
	color:#444;
}

div{
	padding:10px;
}

/* LESS CSS starts here */
.foo{

	background-color:#ccc;
	border:1px solid blue;

	h2{
		color:red;
	}
}

.bar{
	background-color:yellow;
	border:1px solid #fc0000;

	overflow:auto;

	h2{
		color:blue;
	}

}

/* normal CSS */

h1,div{

width:800px;

margin:25px auto;

}

h1{

text-align: center;

font:bold 22px Verdana,Arial,Sans;

color:#444;

}

div{

padding:10px;

}

/* LESS CSS starts here */

.foo{

background-color:#ccc;

border:1px solid blue;

h2{

color:red;

}

.bar{

background-color:yellow;

border:1px solid #fc0000;

overflow:auto;

h2{

color:blue;

}

Example # 1 starts out by illustrating one very important point: Less CSS is a superset of CSS. This means that any valid CSS will work just fine in a .less file. In fact, there is no reason why you would not write normal CSS in a .less file. There are certainly situations where it makes perfect sense. For example, if I want all H1 and DIV tags to be 800px wide and have a top/bottom margin of 25px, then it just makes sense to say h1,div{ width:800px; margin:25px auto; }.

Nothin’ wrong with that!

The power of Less CSS really becomes apparent when you have a rule that forks. Once you start to write rules like this in CSS, things become inefficient:

.foo{

	background-color:#ccc;
	border:1px solid blue;
}

.foo h2{
	color:red;
}

.foo{

background-color:#ccc;

border:1px solid blue;

}

.foo h2{

color:red;

}

Here we have referred to the “foo” class twice. Example # 1 illustrates how, by nesting our rules, we can refer to .foo only once, but define not only the style of the class, but any H2 elements that are descendants of that class. The same goes for the “bar” class.

Here is a link to a fully-functioning page from Example # 1:

http://sub1.kevinchisholm.com/blog/examples/less-css-example-1.html

Example # 2

/* LESS CSS starts here */
.foo{

	background-color:#ccc;
	border:1px solid blue;

	&amp;:hover{
		background-color:green;
		cursor:pointer;
	}

	h2{
		color:red;

		&amp;.ital{
			font-style:italic;
		}
	}
}

/* LESS CSS starts here */

.foo{

background-color:#ccc;

border:1px solid blue;

&:hover{

background-color:green;

cursor:pointer;

}

h2{

color:red;

&.ital{

font-style:italic;

}

In Example # 2, we see the use of the ampersand (“&”). This character is used to indicate the following kind of relationships:

div.className
p#idName
a:hover
ul:nth-child()
etc…

What’s happening here is that when we don’t use the ampersand, then the nested rule indicates a descendant. So, “div .foo” means “any element with the class foo that is a descendant of any DIV element.” But what if we want to indicate “any DIV element with the foo class?” Then we use the ampersand:

div {
	&amp;.foo{
		color: red;
	}
}

div {

&.foo{

color: red;

}

Here is a link to a fully-functioning page from Example # 2:

http://sub1.kevinchisholm.com/blog/examples/less-css-example-2.html

Example # 3

@red: #A52A2A;
@gray: #444;
@blue: #008080;
@black: #000;
@tomato: #FF6347;
@yellow: #DAA520;
@babyBlue: #7FFFD4;
@light-gray: #ccc;

@StdWidth: 600px;
@wide: 800px;
@narrow: 400px;

/* mix-ins */

.center(@howWide: @StdWidth){
	width:@howWide;
	margin:25px auto;
}

.backColor(@color){
	background-color:@color;
}

.onePxSolidBorder(@brdColor: @black){
	border: 1px solid @brdColor;
}

.setFont(@weight: normal, @size: 18px, @family: 'Verdana,Arial,Sans'){
	font: @weight @size @family;
}

/* rules */

h1{
	.center(@StdWidth);
	.onePxSolidBorder;

	text-align: center;
	.setFont(bold,44px);
	color: @gray;
}

div{
	padding:10px;
}

.foo{
	.center(@narrow);

	.backColor(@light-gray);
	.onePxSolidBorder(@blue);

	&amp;:hover{
		.backColor(@tomato);

		cursor:pointer;
	}

	h2{

		.setFont(bold,22px,courier);

		color:@red;

		&amp;.ital{
			font-style:italic;
		}
	}

	p{
		.setFont(normal,18px,Times);	
	}

}

.bar{

	.center(@wide);
	.backColor(@yellow);
	.onePxSolidBorder(@red);

	overflow: auto;

	h2{
		color: @blue;
	}

	p{
		.setFont(normal,18px,Arial);	
	}

	li{

		.backColor(@babyBlue);
		.onePxSolidBorder(@red);
		.setFont(normal,14px,courier);

		list-style:none;
		float:left;
		margin-left:10px;
		padding:5px;
	}

}

100

101

102

103

104

105

@red: #A52A2A;

@gray: #444;

@blue: #008080;

@black: #000;

@tomato: #FF6347;

@yellow: #DAA520;

@babyBlue: #7FFFD4;

@light-gray: #ccc;

@StdWidth: 600px;

@wide: 800px;

@narrow: 400px;

/* mix-ins */

.center(@howWide: @StdWidth){

width:@howWide;

margin:25px auto;

}

.backColor(@color){

background-color:@color;

}

.onePxSolidBorder(@brdColor: @black){

border: 1px solid @brdColor;

}

.setFont(@weight: normal, @size: 18px, @family: 'Verdana,Arial,Sans'){

font: @weight @size @family;

}

/* rules */

h1{

.center(@StdWidth);

.onePxSolidBorder;

text-align: center;

.setFont(bold,44px);

color: @gray;

}

div{

padding:10px;

}

.foo{

.center(@narrow);

.backColor(@light-gray);

.onePxSolidBorder(@blue);

&:hover{

.backColor(@tomato);

cursor:pointer;

}

h2{

.setFont(bold,22px,courier);

color:@red;

&.ital{

font-style:italic;

}

.setFont(normal,18px,Times);

}

.bar{

.center(@wide);

.backColor(@yellow);

.onePxSolidBorder(@red);

overflow: auto;

h2{

color: @blue;

}

.setFont(normal,18px,Arial);

}

li{

.backColor(@babyBlue);

.onePxSolidBorder(@red);

.setFont(normal,14px,courier);

list-style:none;

float:left;

margin-left:10px;

padding:5px;

}

In Example # 3, we introduce two new concepts: variables and mixins.

Less CSS Variables

Variables in Less CSS are indicated by preceding the variable name with the “at” symbol (otherwise known as an ampersat). You then initialize that variable as if you were writing a CSS rule. It is important to note that in Less CSS, variable values cannot change during the life of the page; once you define a variable, the value you have assigned it remains fixed.

Less CSS Mixins

I like to think of Less CSS Mixins as functions. In my opinion, the syntax is similar to a JavaScript function:

.mixinName(@argument-1: value,@argument-1: value){
	propertyName1: @argument-1;
	propertyName2: @argument-2;
	propertyName3: normalCSSValue;
	propertyName4: normalCSSValue;
	//etc...
}

.mixinName(@argument-1: value,@argument-1: value){

propertyName1: @argument-1;

propertyName2: @argument-2;

propertyName3: normalCSSValue;

propertyName4: normalCSSValue;

//etc...

}

In the above Less CSS mixin, the arguments are optional. If you include an argument, you must initialize it. But, you do not have to use the argument inside of the mixin, nor do you have to pass-in the argument when calling the mixin. The mixin simply does whatever you tell it to do (i.e. it returns whatever CSS you define inside of it). The power of the mixin is that you can pass it a value as an argument, and this will override the initialized value.

You’ll also notice the last line inside of the mixin: “//etc…”. This is a Less CSS comment. While you can always use valid CSS comment syntax /* comment */ you can also use the double-slash syntax that is found in JavaScript: “//comment”

Here is a link to a fully-functioning page from Example # 3:

http://sub1.kevinchisholm.com/blog/examples/less-css-example-3.html

Summary

In this article, we covered the absolute basics of Less CSS. We learned what Less CSS is and about simple client-side implementation. We also covered nested rules, variables and mixins. These are the very basics of Less CSS and there is much more to discover and talk about.

Helpful Links for Less CSS basics

http://lesscss.org/

http://en.wikipedia.org/wiki/LESS_(stylesheet_language)

The beauty of creating an HTTP server with Node.js is that you are doing so using a language that you already know: JavaScript.

Summary

Helpful Links for creating a simple Node.js HTTP Server

Gracefully handling corner cases is the key to writing more robust, error-free JavaScript.

Example # 1A

Example # 1B

Example # 2

Example # 3

Summary

Here is the JS Fiddle link for Example # 1: http://jsfiddle.net/tQxxK/

Helpful Links for the CSS cubic-bezier class

You have an anchor tag, the href is a “mailto”, but what if you can’t have the hyper link follow?

Applying CSS3 transitions to all properties of your declaration

Applying a delay to your CSS3 transition

Helpful Links for applying CSS3 transitions to multiple properties

Sometimes “return false” is not enough; you need to prevent the event from bubbling up the DOM

There’s lots to talk about when it comes to cascading style sheets and animation, but for this article, we’ll keep it short and sweet; just the basics you need for getting started with CSS3 transitions.

A Basic Transition

Specifying the Duration for Your CSS3 Transition

Adding Easing to Your CSS Transition

Summary

Helpful Links for CSS3 Transitions Basics

Hard to believe, but a mere “fifteen years ago….” this little Frankenstein rack was the heart and soul of Google’s entire operation… at least for a minute or two

Decent programmers tests their code before deploying it. In JavaScript development, this usually means viewing the web page that your code interacts with, and clicking one or more elements in the page to ensure that the desired result is achieved

jQuery QUnit

Learn How to Build a Social Media Plugin, Using Require.js and the Asynchronous Module Definition (AMD) Pattern

Helpful Links for Require.js and Asynchronous Module Definition (AMD)

Require.js

Asynchronous Module Definition (AMD)

Nested success callbacks are messy business. The jQuery Promise interface provides a simple and elegant solution.

The jqXHR object

Here is a link to the working code for Example # 1: http://examples.kevinchisholm.com/jquery/promise/promise-and-ajax-beginner/example-1.html

Here is a link to this article’s full working example: http://examples.kevinchisholm.com/jquery/promise/promise-and-ajax-beginner/example-2.html

Summary

Helpful Links for the jQuery Deferred, jQuery Promise and jqXHR Objects

jQuery Deferred

jQuery Promise

jQuery jqXHR

Step beyond the basics, and learn how Require.js modules can return various kind of values, depend on other modules, and keep those dependencies transparent to the outside world

Once again, here is the full working example for this article:

Helpful Links for Require.js and Asynchronous Module Definition

Require.js

Asynchronous Module Definition

jQuery’s two .each() methods are similar in nature, but differ in level of functionality

jQuery().each()

Here is the JSFiddle Link for Example # 1.A: http://jsfiddle.net/wcRmd/

Here is the JSFiddle Link for Example # 1.B: http://jsfiddle.net/9C8He/

jQuery.each()

Here is the JSFiddle Link for Example # 2.A: http://jsbin.com/epanov/1/edit

Here is the JSFiddle Link for Example # 2.B: http://jsbin.com/examuz/1/edit

Here is the JSFiddle Link for Example # 2.C: http://jsfiddle.net/XjxvZ/

Summary

Helpful Links for jQuery().each() and jQuery.each()

jQuery().each()

jQuery.each()

Learn how to decouple your code and organize it into reusable modules

The working example for this article can be found here: http://examples.kevinchisholm.com/javascript/requirejs/part-i/

The jQuery.each() method makes it trivial to iterate over or inspect any kind of collection: arrays, objects, array-like objects, even jQuery DOM Objects.

Example # 1

Here is a JSBin link for Example # 1: http://jsbin.com/epanov/1/edit

Example # 2

Here is a JSBin link for Example # 2: http://jsbin.com/epezuc/1/edit

Example # 3

Here is a JSBin link for Example # 3: http://jsbin.com/okoxej/1/edit

Example # 4

Here is a JSBin link for Example # 4: http://jsbin.com/usewoj/1/edit

Example # 5

Here is a JSBin link for Example # 5: http://jsbin.com/examuz/1/edit

Example # 6

Here is a JSFiddle link for Example # 6: http://jsfiddle.net/n7PRD/

Example # 7

Here is a JSBin link for Example # 7: http://jsbin.com/iriwer/1/edit

Summary

Helpful Links for the jQuery.each() Method.

Understanding the basic components of an AJAX request / response, and being able to write it all out by hand is an important skill for any JavaScript developer to have.

The XMLHttpRequest Object

Determining Support for the XMLHttpRequest object

Example # 1

The onreadystatechange Event

The status Property