In most programming languages, for example C, pointers are symbolized with an asterisk. JavaScript relies on the developer to know which vars are references and which aren’t. Why is this important? To put it succinctly, it is the difference between a variable being immutable or dynamic.

An example may be in order. Here’s a simple script you can paste into Firebug to see how pointers work.

var marxBros = ['Chico', 'Harpo', 'Groucho']
var marxBrosPointer = marxBros;
marxBrosPointer.push('Zeppo');
console.log(marxBros); // ['Chico', 'Harpo', 'Groucho', 'Zeppo']
console.log(marxBrosPointer); // ['Chico', 'Harpo', 'Groucho', 'Zeppo']

As you can see, marxBros and marxBrosPointer are identical. Anything you do to marxBrosPointer will change marxBros and vice versa. You can think of them like aliases which both reference the same thing.

There is actually no difference now. marxBros is the original and marxBrosPointer is the pointer. But, for all intents and purposes, they are identical. One thing to note is that if you reassign one of them to something else, it does not affect the other.

var marxBros = ['Chico', 'Harpo', 'Groucho']
var marxBrosPointer = marxBros;
marxBros = null;
console.log(marxBrosPointer); //  ["Chico", "Harpo", "Groucho"]

Now let’s look at a case where we are not dealing with pointers. Let’s do the same thing as our first example, but instead of using an array, we’ll use strings. Yes, this makes a big difference.

var marxBros = 'Chico, Harpo, Groucho';
var marxBrosCopy = marxBros;
marxBrosCopy += ', Zeppo';
console.log(marxBros); // 'Chico, Harpo, Groucho'
console.log(marxBrosCopy); // 'Chico, Harpo, Groucho, Zeppo'

When using strings instead of arrays, we find that changes to one do not change the other. Whether you change the original or the copy, they are not linked in the same way arrays and objects are. In the first example, changing either the original or the pointer resulted in changes to both variables. In this case, because strings are immutable in JavaScript, the var keyword copies a string instead of referencing it.

The same is true of numbers:

var numberOfMarxBros = 3;
var numberOfMarxBrosCopy = numberOfMarxBros;
++numberOfMarxBrosCopy;
console.log(numberOfMarxBros); // 3
console.log(numberOfMarxBrosCopy); // 4

Compare this to properties and functions, which use pointers:

// First let's make a cleanHouse function which has an action property
var cleanHouse = function() {
 console.log(arguments.callee.action);
}
cleanHouse.action = 'Doing your dishes...';

// Let's test and make sure it works as expected.
cleanHouse(); // 'Doing your dishes'

// So far so good. Now let's make a pointer to this function.
var actionToTake = cleanHouse;
actionToTake(); // 'Doing your dishes...'

// Now actionToTake is identical to cleanHouse. Any changes to one affect the other.
cleanHouse.action = 'Vacauuming the rug...';
actionToTake(); // 'Vacauuming the rug...'

actionToTake.action = 'Watering the plants...';
cleanHouse(); // 'Watering the plants...';

Here’s an example where the reference is lost and it does not achieve the goal:

var cleanHouse = function() {
    console.log('Doing your dishes...');
}

var actionToTake = cleanHouse;

actionToTake(); // 'Doing your dishes...'

// Off to a good start, but here's where it goes wrong:

cleanHouse = function() {
    console.log('Vacauuming the rug...');
};

// Now the reference has been broken and actionToTake no longer refers to cleanHouse.
// Instead, actionToTake refers to, literally, the anonymous function that cleanHouse previously referred to.

actionToTake(); // 'Doing your dishes...'

// cleanHouse now refers to a new separate function.
cleanHouse(); // 'Vacuuming the rug...'

As you can see, it’s important to know how to use pointers. It will help you decide when you need a copy or something, or when you need a reference to it.

Feel free to post clarifications or other explanations. This topic is certainly important to becoming an advanced JavaScript developer, yet it is not addressed too often. I think we could all benefit from more clarity on the subject, myself included.

I hope this article has helped shine some light on this issue. Happy coding!

Thanks to the popularity of high profile websites that use Rails such as Hulu and Twitter, it is now considered a viable option for large sites. This kind of exposure means a lot of new development and movement. Rails seems to have outgrown many of the scaling woes of yesteryear. Now that it’s recognized in the mainstream as a stable and feature-rich platform for making websites, adoption has taken off, which means more tutorials, more resources, less bugs, lower barrier to entry and an overall better experience all around.

Another great development occurred quite recently in the Rails community. Two days before Christmas, on December 23, 2009, it was announced that Merb would be merged into Rails 3. This is another huge development which will end the duplication of efforts and fracturing of the developer community that occurred due to competition between Merb and Rails.

In the spirit of celebrating this current Rails renaissance, here are some of the best Rails resources we’ve come across in the past year. We hope you find these as useful as we did!

Less CSS

Less is an extension for CSS that allows you to use variables, perform operations such as mathematical calculations  and other neat features. It uses a Ruby script to read the .less file and generate a .css file to serve up to the browser.

Having variables is hugely helpful and it seems like an oversight in the CSS spec that it wasn’t included to begin with. Also, being able to add modifiers is nice. You can add, subtract, multiply, divide and even change colors. For instance, #FF0 + #00F would equal #FFF.

They also have mix-ins, which are classes that you can include in selectors, and it will include all of the properties from that class. This is the same thing functionally as adding that class to the elements matched by the selector, but without going into the HTML code. Mix-ins aren’t allowing us to do anything new that we couldn’t do already by adding the classes in HTML, but now it allows us to do this in CSS, without even touching the HTML. Some people will like this feature, others will deplore it– after all, we have a perfectly functional system where we can add multiple classes to a given element to achieve the same effect. But, I for one feel that this is a very useful feature to have. This is great for its reuse of code, and I love making modular CSS classes (for example, “rounded-corners”) that can be mixed into other CSS selectors.

Git and GitHub, Social Coding

These are two of the most useful tools of the year, hands down. Git caused a paradigm shift in distributed development. GitHub has become the de facto standard for Git hosting. If you’re unfamiliar with Git, read up on the Wikipedia page. To summarize, it’s a code versioning system that is well-suited for distributed development groups and open source software. It encourages users to make a fork of the repository so that any useful bug fixes, additions and changes can be easily merged back in, should the developers so desire.

I don’t see the advantage of using Git for personal projects or small in-house projects, but it is wonderful for open source efforts like Rails. It’s certainly a fine choice for any project, though I don’t see a big advantage over, say, Subversion, until you get into large scale distributed development situations like open source projects. Once you’re looking at open source projects, like those hosted on GitHub, we’re talking about a paradigm shift in efficiency.

Historically, most people would download zipped packages of code. Git encourages forking the repository instead. Let’s look at a quick example of how this works with Rails plugins.

Typically you could install a plugin by downloading some files somewhere and installing them, either with a script or by decompressing them directly to your vendor directory. This works fine but is unidirectional — you can only get the file from the developer, there is never an opportunity to submit code back, say, if you fix a bug.

The paradigm shift in efficiency that Git brings about is closing the loop: it allows you to easily submit code back to the trunk, thus capturing all those useful improvements to the code that would otherwise be lost on so many hard drives.

With GitHub, instead of downloading the Rails plugin, you fork the Git repositor to your vendor directory. Then, if you have to make changes to the plugin (which I almost always have to do, despite my best efforts to avoid it), you still retain the ability to update the code without losing your fixes. The old way was that if I wanted to upgrade a plugin that I had customized, I would have to download the new one and then manually go through and make whatever customizations I’d done. This way, you can automate the merging process and only have to go in if there are conflicts. That’s a big win to me. Then, if I actually do something with a plugin that others might find useful, I can offer up my own fork on GitHub, or submit it to the trunk if I think it’s useful enough to be included there.

Although Git was released in 2005 and GitHub in 2008, I included them on the 2009 list here because I think they have really broken through to the mainstream in a big way this past year. GitHub achieved meteoric rise during 2009. In January alone 17,000 new repositories were made, according to a talk given by GitHub founders at Yahoo in February of that year. In July of 2009 they had 90,000 unique repositories, double the previous year– and 45,000 forks of those repositories.

So, get on the bandwagon! Head over to GitHub and see what they have to offer. Or, if you don’t know where to start, check out this next useful resource for pointers …

The Ruby Toolbox

The Ruby Toolbox is a wonderful resource for finding out what is popular. It uses metrics such as SVN commits and GitHub forks to determine which Ruby scripts are most popular. You can find out about a lot of great tools this way. I’ve discovered plenty of useful Rails gems and plugins here. There are also some useful standalone Ruby scripts for a variety of development tasks, such as Less, which doesn’t depend on Rails to do it’s thing.

Prawn, PDF Generation Made Easy

Prawn is a gem for generating PDFs. Let me tell you, working with PDFs is never easy, but Prawn greatly reduces the pain.

Check out this tutorial at RailsTips for more info.

jRails

I think it’s pretty obvious that jQuery has hit the big time in popularity. Endorsements by Microsoft, Amazon.com and other major players have led it to become the go-to JavaScript library of 2009. While Prototype still hangs in there, and MooTools has a great offering, an article I read recently summed it up perfectly when they said ‘jQuery is the guitar.’ It had a screen grab of Google search results for guitar versus banjo, along with similar numbers for jquery versus mootools. You get the idea. If you aren’t using jQuery, you’re playing the banjo. If you want to really rock out, get on the bandwagon!

I am being facetious here but there is certainly some truth to the fact that a web developer in 2010 must be well-versed in jQuery. It’s also a viable alternative to Prototype in Ruby on Rails. In fact, I’ve heard that Rails 3 will be JavaScript framework agnostic, but don’t quote me on that.

In any case, you don’t have to wait until Rails 3 to start using jQuery in your Rails app. Simply install the jRails gem and you can go along using all those nifty Rails helpers, completely unaware that they are now implemented in jQuery instead of Prototype. Isn’t encapsulation great?

HAML

HAML (pronounced like Mark “Luke Skywalker” Hamill’s last name) is a great alternative to HTML. You write clean, concise HAML and the parser generates verbose and ugly HTML to serve up to the browser. Thus you can avoid typing those obnoxious closing tags that markup languages are so fond of. Keep your code simple, clean and pure. Or that’s the idea.

In practice, HAML can be a bit complex. Check out the HAML Wikipedia page to see what I mean — look at all those obscure symbols. But once you learn what they all mean, it is a very concise, some might say beautiful language.

Paperclip

What can I say? Paperclip rocks. It is the standard for attachments in Rails and with good reason. It has been consistently updated, bug-fixed, and best of all, it is simple with not a bit of bloat. It requires the bare minimum of information from you, the developer, and does all the heavy lifting– even light lifting like database migrations– for you.

The next time you need to allow for file uploads in your Rails app, look no further than Paperclip.

Acts_As_Taggable_On, a Gem For Tagging

Originally forked from Acts As Taggable On Steroids, the truncated form, has a number of improvements and goodies. Here is an excerpt from the Readme:

This plugin was originally based on Acts as Taggable on Steroids by Jonathan Viney. It has evolved substantially since that point, but all credit goes to him for the initial tagging functionality that so many people have used.

For instance, in a social network, a user might have tags that are called skills, interests, sports, and more. There is no real way to differentiate between tags and so an implementation of this type is not possible with acts as taggable on steroids.

Enter Acts as Taggable On. Rather than tying functionality to a specific keyword (namely “tags”), acts as taggable on allows you to specify an arbitrary number of tag “contexts” that can be used locally or in combination in the same way steroids was used.

Read more at Github.

Thinking Sphinx, Front End to Sphinx Search Engine

Thinking Sphinx is a great Ruby client to the Sphinx search engine that allows your Rails application to seamlessly integrate with Sphinx. This means you can get blazing-fast search results that are so fast because they’ve been optimized with filesystem-based indices, and even delta indices which only track changes to those indices, meaning they can avoid database calls when possible. Sounds fancy, huh? In practice, it’s a relatively painless set up that gets you professional quality search results. Sure, it can’t beat Google Mini, and feature for feature, heavy hitters like Java’s SOLR may win out, but for every project I’ve worked on, this has been sufficient. I like it a lot better than Ultrasphinx, the other Sphinx front end I’ve worked with.

All right, that’s all I have for now.  I’m sure I missed tons of great resources.

Please add your own favorite Ruby on Rails gems, plugins and resources in the comments!

function randomInteger(low, high)
{
    return low + Math.floor(Math.random() * (high - low));
}

It is the images on the top right.

I wrote this in Object Oriented format so you can use it again and again on the same page.

Javascript:

var ImageGallery = new Function();

ImageGallery.prototype = {
 initialize: function(mainImage, listWrapper){
  // large image that is shown
  this.mainImage = document.getElementById(mainImage);
  // a list of all the anchors for the thumbnails. Must be a tags for graceful degradation
  this.thumbnails = document.getElementById(listWrapper).getElementsByTagName("a");
  // 0 image is shown already so the first one we want to switch to is the next image or 1
  this.i = 1;
  // this is a work around to allow calling this within nested functions
  var Scope = this;
  // Here starts the rotating of the image by first focusing the thumbnail, then switch the primary image
  this.start = setInterval(function(){
   Scope.focusCall();
  // Here we choose 5 seconds in between each image change. You may want to change this.
  }, 5000);
  // This lets the browser know to do something if one of the thumbnails is clicked
  this.clickEvent();
 },

 // This stops the rotation of the thumbnails. We do that if the user clicks one of them
 stop: function(){
  if (this.start)
   clearInterval(this.start);
 },

 // When an thumbnail loses focus we must use this css class now
 resetBorderColor: function(reset){
  reset.getElementsByTagName("img")[0].className="thumbnailDefault";
 },

 // When the thumbnail gains focus we most give it the corresponding styles
 focusBorderColor: function(focused){
  focused.getElementsByTagName("img")[0].className="thumbnailFocus";
 },

 // Here we grab the href of the a tags and make their path be the path of the current image
 imageRotator: function(){
  this.mainImage.src = this.thumbnails[this.i].href;
  this.previousImage = this.thumbnails[this.i];
  this.i++;
  // This closes the loop for the rotation
  if (this.i == this.thumbnails.length)
   this.i = 0;
 },

 // We focus the thumbnail
 focusCall: function(){
  // reset the last image that was shown
  if (typeof this.previousImage != 'undefined')
   this.resetBorderColor(this.previousImage);
  // Remember the newer one
  this.currentImage = this.thumbnails[this.i];
  // Give the newer image some focus
  this.focusBorderColor(this.currentImage);
  var Scope = this;
  // Les that have image rotate to the new one 300 miliseconds after the thumbnails get the css focus
  window.setTimeout(function(){
   Scope.imageRotator()
  // You may want to change this number
  }, 300);

 },

 // This is what happens when you click the thumbnails
 clickEvent: function(){
  var Scope = this;
  for (k = 0; k < this.thumbnails.length; k++) {
   this.thumbnails[k].onclick = function(){
    if (typeof Scope.previousImage != 'undefined')
     Scope.resetBorderColor(Scope.previousImage);
    Scope.focusBorderColor(this);
    // Stop the rotation
    Scope.stop();
    // This is where the switching happens for the click
    Scope.mainImage.src = this.href;
    Scope.previousImage = this;
    // Make sure to not allow default behavior of the a tag
    return false;
   }
  }
 }

}

This is to load it on the window object and create an instance of the viewer

var imageGallery1 = new ImageGallery();

// Not sure where I got this.. I didn't write this but it allows you to load multiple functions on the window.onload.
function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != "function") {
  window.onload = func;
 } else {
  window.onload = function() {
   oldonload();
   func();
  }
 }
}

var onLoad = function() {
 imageGallery1.initialize("index_largepic_display", "index_thumbnail_display");
}

addLoadEvent(onLoad);

For the version on my homepage alexgrande.com here is the CSS and HTML. The CSS is up to you but I suggest following a similar mode with the HTML

HTML:

<div id="gallery">
     <ul id="index_thumbnail_display">
        <li>
   <a href="images/index/fernlarge.jpg" >
  <img class="thumbnailDefault" src="images/index/fernthumb.jpg" alt="A picture of a fern just as it is unraveling in front of a log." />
   </a>
 </li>

        <li>
   <a id="partythumb" href="images/index/partylarge.jpg" >
      <img class="thumbnailDefault" src="images/index/partythumb.jpg" alt="Downtown Seattle at night." />
   </a>
 </li>

        <li>
   <a id="alexthumb" href="images/index/alexlarge.jpg" >
      <img class="thumbnailDefault" src="images/index/alexthumb.jpg" alt="I'm on a laptop at night in a field on using the internet via hacking a telephone box...legally." />
   </a>
 </li>
        <li>
   <a href="images/index/trucks.jpg" >
     <img class="thumbnailDefault" alt="Trucks lined up in Sodo in Seattle at night." src="images/index/trucksthumb.jpg" />
   </a>
        </li>
      </ul>
      <img id="index_largepic_display" src="images/index/fernlarge.jpg" alt="A picture of a fern just as it is unraveling in front of a log." />
</div>

CSS:

div#gallery {
 position:relative;
 float: left;
 overflow: hidden;
 width: 65%;
}

img#index_image_display {
 border:1px black solid;
 margin-bottom:20px;
}

ul#index_thumbnail_display {
 list-style-type:none;
 position:absolute;
 top: 0;
 left: 0;
 margin-top: 15px;
}

ul#index_thumbnail_display li a {
 padding:10px;
}

.thumbnailDefault {border: 1px solid gray !important;}

.thumbnailFocus {border: 1px solid red !important;}

The effects of losing application state can range from
minor annoyances like losing what page you’re on, to
all-out frustration after losing a carefully-typed message
because you accidentally triggered the browser’s back
button. (It’s easier than you think– hitting backspace
when the document is in focus triggers the back button in
most browsers). Couple this with the fact that some users
may expect pages to save form data, because of their prior
experience to that effect, and it becomes apparent that a
robust strategy for preserving application state must be
devised.

Browsers automatically save data entered into form
fields, but all JavaScript variables are lost when the user
leaves the page. Furthermore, any form fields that were
created by JavaScript will also be lost. So, for all but
the most simple applications, JavaScript must have a
strategy for saving state that deals with these
limitations.

Some sites like “http://www.thesixtyone.com”>thesixtyone.com
reside entirely on a single page and capture users’ back
button clicks with named anchors. But, try writing a wall
post on Facebook and you’ll find that it does not save the
post if you leave the page. Accidentally pressing backspace
is all too easy in cases like this where typing is
involved, which is why sites like Gmail and Blogger warn
users that they will lose data before leaving the page.

How To Warn Users Before Leaving the Page

One way you can do this is by assigning a confirmation
message to the return value of the
window.onbeforeunload event handler. The user will
be presented with two choices, OK and
Cancel, along with a custom message of your
choosing.

In the following example, we regsiter an anonymous
function as the event handler for
window.onbeforeunload, and add our own custom
message:

Using window.onbeforeunload to confirm if a
user wants to leave the page ( “/examples/saving-state/example-1.html”>example 1)

window.onbeforeunload = function() {
  return "You will lose any unsaved information.";
};

The browser displays your custom message, given in the
return statement of the onbeforeunload event
handler, along with the browser default message. In
Firefox, the result is:

Are you sure you want to navigate away from this
page?
You will lose any unsaved information.
Press OK to continue, or Cancel to stay on the current
page.

Retaining Data When Users Do Leave the Page

You may opt to silently save the user’s data when they
leave the page. This may give a better user experience
since they are not confronted with a choice, and their data
is saved automatically.

This is one of the times where Ajax comes in handy.
However, there are also other ways to do this without using
Ajax, such as cleverly storing information in named anchors
or hidden form fields. We’ll examine each of these
practices in more depth, but suffice it to say that the
hidden form fields approach works better for conventional
websites that are spread across many pages, whereas storing
data in named anchors is better for single-page, pure
JavaScript applications.

It turns out that while you could (and should) save
state to the server using Ajax, for some cases you will
want to avoid Ajax altogether and use a simpler,
clientside-only model.

Using Hidden Form Fields to Save State

As mentioned, all JavaScript objects are lost when the
user leaves or refreshes the page. But, browsers will
retain data in form fields, provided that the form elements
were not generated using JavaScript. Given this limitation,
it is necessary to save JavaScript variables (or the
serialized JSON strings of such objects) to hidden form
fields if they need to be retained.

Here is a basic example showing how variables can be
stored to hidden form fields and restored on page load:

Saving data in hidden form fields ( “/examples/saving-state/example-2.html”>example 2)

// The variable userData is some necessary information we need from the user.
// The first time the user visits the page, they must enter this data manually.
// But, when leaving and returning to the page (or refreshing the page), we'll check
// if they already entered the data, and if so, restore it from a hidden form field.

var userData;

// Register event handlers
window.onload = function() {
 restoreState();
 if (!userData) {
    userData = prompt('Please enter the data to save', 'test');
 }
 document.write("userData: " + userData);
}

window.onbeforeunload = saveState;

// This function is called onbeforeunload and writes the userData to the hidden form field
function saveState() {
   document.getElementById('saved-data').value = userData;
}

// This function is called onload and checks if any data is present in the hidden form field
// If so, it defines userData to be the saved data
function restoreState() {
   var savedData = document.getElementById('saved-data').value;
   if (savedData != "") {
        userData = savedData;
   }
}

In the above example, all we’re saving is one string
from the user. But what about cases where we need to save
many different values? For instance, what if we’re using
object-oriented code and have numerous nested objects
within objects we need to store? At times like this,
serializing objects with JSON is the
easiest way to store the data. Without using JSON, you’d
have to create a hidden form field for each value you want
to save, whereas JSON can create string representations of
complex data structures that you can easily eval
back into JavaScript objects once they’re fetched from the
DOM.

So What is JSON, Anyway?

JSON (pronounced “Jason”), short for JavaScript
Object Notation is a lightweight, human- and
machine-readable way to represent the string serializations
of objects. These strings can be evaluated back into
JavaScript objects as needed. For instance, say I create a
JavaScript object to represent a person (in this case,
me):

var person = new Object();
person.name = "Jonah";
person.age = 24;
person.gender = "male";
person.location = "Seattle, WA";

The JSON representation of this object is as
follows:

{
    'person': {
        'name': 'Jonah',
        'age': 24,
        'gender': 'male',
        'location': 'Seattle, WA'
    }
}

Then, if you need to reconstruct the object at a later
point, you can simply eval the JSON string:

var jsonString = "{'person': {'name': 'Jonah', 'age': 24, 'gender': 'male', 'location': 'Seattle, WA'}}";
var person = eval( '(' + jsonString + ')' );    

console.assert(person.name == 'Jonah');
console.assert(person.age == 24);
console.assert(person.gender == 'male');
console.assert(person.location == 'Seattle, WA');

If you’ve written JavaScript using object literal syntax
before, this should be familiar to you. The only minor
difference between JSON and the standard JavaScript object
literal syntax is that JSON requires quotes around key in a
key/value pair. So, name is a valid JavaScript key
but in JSON it would have to be ‘name’. (Note: It
doesn’t matter if you use single- or double-quotes, as long
as they are matched).

Stringifying Objects in JSON

To use JSON, it’s necessary to include a library of JSON
methods. Don’t worry, the library is quite small. The
entire thing shouldn’t be more than 2k and can be obtained
from json.org.
Eventually, the JSON methods will be included as part of
the core JavaScript language, but for the time being, we’re
left to use the methods provided by json.org or those found
in libraries such as MooTools, Prototype and jQuery.

Depending on the library used, the method names for
serializing an object into a JSON string are different.
But, they are all used in rather similar fashion. For now,
we’ll assume you’re using the library from “http://www.json.org/js.html”>json.org and use the
method names provided in its API.

Saving complex JavaScript data structures as JSON
strings (example 3)

// The variable userData is some necessary information we need from the user.
// The first time the user visits the page, they must enter this data manually.
// But, when leaving and returning to the page (or refreshing the page), we'll check
// if they already entered the data, and if so, restore it from a hidden form field.

var userData;

// Register event handlers
window.onload = function() {
 restoreState();
 if (!userData) {
    userData = new Object();
    userData.name = prompt('Please enter a name', 'Jonah');
    userData.age = parseInt(prompt('Please enter an age', '24'));
    userData.gender = prompt('Please enter a gender', 'male');
    userData.location = prompt('Please enter a location', 'Seattle, WA');
 }
 displayData(userData);
}

window.onbeforeunload = saveState;

// This function is called onbeforeunload and writes the userData to the hidden form field
function saveState() {
   document.getElementById('saved-data').value = JSON.stringify(userData);
}

// This function is called onload and checks if any data is present in the hidden form field
// If so, it defines userData to be the saved data
function restoreState() {
   var savedData = document.getElementById('saved-data').value;
   if (savedData != "") {
        userData = eval( '(' + savedData + ')' );
   }
}

// This is a helper function that iterates through each property in an object and renders it in HTML.
function displayData(obj) {
 var list = document.createElement('ul');
 for (var property in obj) {
    var text = document.createTextNode(property + ': ' + obj[property])
     var line = document.createElement('li');
     line.appendChild(text);
     list.appendChild(line);
 }
 document.getElementsByTagName('body')[0].appendChild(list);
}

This example is pretty similar to the previous one where
we saved a string. The only difference is that in this
case, the string is a representation of a complex
JavaScript object. In fact, you can save the entire state
of your application in one JSON string, as long as the
application state is completely stored as properties of a
single object. There are a few minor gotchas, such as
having to add parentheses around the JSON string when
evaluating it. But, overall this is a clean and
straightforward approach that is very useful when complex
data structures must be retained.

Using Named Anchors to Save State

An alternate option for retaining state is to not
actually let the user leave the page at all. Rather, when
following links on the site, update the named anchor
(everything after the number sign in a URL), instead of
changing the actual document being displayed.

The problem that this is trying to solve is the fact
that Ajax applications will normally break the back button.
A user loads the application on the homepage and clicks to
visit a different page, but since the new page is loaded in
via Ajax, the browser URL doesn’t change. Then the user
clicks the back button and leaves the application
altogether– not the intention of the user, who just wanted
to get back to the homepage.

Storing data in named anchors offers a solution to this
problem. Each time the application state changes,
JavaScript updates the named anchor with a token
representing the application state. When the page is
loaded, data is read from the named anchors and the state
can be restored.

Say you’re on the homepage of an ecommerce Ajax
application and click on a product you’d like to view.
Instead of changing URLs to the detail page, the
application loads in new data with Ajax. So, when a user
clicks on the new Brad Mehldau CD for instance, instead of
going to a different URL (yoursite.com/brad-mehldau/) the
document URL remains the same, but JavaScript updates the
named anchor: yoursite.com/#brad-mehldau.

One site which does this unbelievably well is “http://www.thesixtyone.com”>thesixtyone.com
(Thanks, Derek!). The entire site resides in one document,
truly a rich JavaScript application if I’ve ever seen one.
But, despite the fact that the entire application is
contained in a single document URL, due to clever use of
named anchors, the site has full back button support and
you can even email working links to friends.

Implementing code to save state in named anchors is out
of scope for this article, but you can see how it is
somewhat similar to saving data in hidden form fields. In
this case, there are a few more issues to mitigate and it’s
somewhat tricky, but the reward is an Ajax site with fully
functional back button support and the ability to share
links — worth all the effort, in my book.

So What Use is Ajax, Then?

Since we’ve made it this far, you might think that there
is no use for Ajax in all this. Actually, Ajax is great for
saving state to the server, especially for saving data
beyond the lifespan of the browser session. Ajax can be
used to save messages periodically (like how Gmail and
Google Docs automatically save on a timer every few
minutes). It can also be used to send data when the user
leaves the page by capturing the onbeforeunload
event, but this is unreliable and I would not depend on
this Ajax request to complete. Instead, try to save the
data before the user attempts to leave the page, by either
firing the Ajax request on a timer or another event on the
page (leaving focus on a form element, for example).

Some frameworks like Prototype have serialize() methods
that return URL query string representations of objects.
This is perfect for saving data through GET requests. Yes,
GET requests have a 2000-character limit and other
limitations, but in most cases this won’t be an issue. Even
without helper methods to serialize objects, it’s a fairly
simple matter to construct an Ajax request that will save
the necessary data to the server.

Wrapping Up

To re-cap, it is a good practice to check if users are
sure they want to leave a page when they are entering
information, but it’s even better to silently save that
information for them. (Arguably you would want to do both,
like how Gmail and Blogger save state and ask
users if they are sure they want to leave the page). There
are many different ways to save state, some purely
client-side and others relying on saving data to the server
with Ajax. The solutions which save data to the server are
suitable for times when the data needs to be saved beyond
the browsing session.

Of the two client-side solutions explored, hidden form
fields and named anchors, the former is more suitable for
conventional websites spanning many pages while the latter
better suits single-page Ajax applications. Using named
anchors also has the added benefit of allowing users to
bookmark and send links to the JavaScript application in
various states, and the state is preserved beyond the
browsing session.

Whatever strategy you follow, your users will thank you
for the time saved and frustration avoided of having to
re-enter lost information.

The reason to do these optimizations are for client-side performance. Concatenating many files together into one is especially effective: 10 1-kilobyte files are much slower to download than a single 10k file. You might not think it makes much of a difference, but I estimate that removing 10 additional JS files, for instance, will shave 500-1000ms off latency. Plus, all of the time spent loading the JS will leave the page blank, if you put it in the head.

We’ll need to be able to easily toggle between fully commented code and minified code, both for code hosted by us and code from the Google AJAX Libraries API. Since Google offers both minified and normal versions of the code, this should be no problem.

Including JavaScript in Ruby on Rails

First of all, let’s look at how JavaScript is included in Ruby on Rails, the javascript_include_tag method. The method quite simply takes any number of source URLs and returns an HTML script tag for each of the sources provided. For instance:

  javascript_include_tag("script1.js", "script2.js", "script3.js")

Result:

<script type=”text/javascript” src=”/javascripts/script1.js”></script>

<script type=”text/javascript” src=”/javascripts/script2.js”></script>

<script type=”text/javascript” src=”/javascripts/script3.js”></script>

There’s a little bit of magic you can do which is to include all JavaScript files in the /public/javascripts folder automatically, as well as having them concatenated into a single file. It looks like this:

  javascript_include_tag :all, :cache => true # when ActionController::Base.perform_caching is true

The resulting code is:

<script type=”text/javascript” src=”/javascripts/all.js”></script>

If you don’t want them concatenated into a single file, e.g. for development purposes, you could do something like this:

# config/environments.rb:
DEBUG_JS = false;

# environments/development.rb:
DEBUG_JS = true;

# app/views/layouts/site.html.erb or wherever you include the JavaScript in your site:

I’m not sure how to integrate JSMin, YUICompressor or any other minification into the cached file, though, so I will explore the options for manual building and inclusion next.

Something else to remember is that caching needs ActionController::Base.perform_caching to be true in order to work. This is the default in production, but not development, though of course you can override it in your environments/development.rb file. For more information, view the docs for the javascript_include_tag.

JavaScript Concatenation and Minification

Next, we’ll write a custom build script to generate a concatenated, minified version of our files. Ideally, Rails would automatically run it through a minifier, but I’m not sure how to set that up. In the meantime, this is a working solution that is pretty straightforward and requires minimal effort. I wish I were more skilled at shell scripting (and I highly urge readers to contribute their own code), but I’ll show my implementation as an example regardless.

I’m on a Windows machine and wrote it as a batch file (.bat), but you can easily do this on linux, just using pipe (the | character) instead of the two right-angle brackets (>>). Here goes:

java -jar yuicompressor-2.3.5.jar "script1.js" -o main.js
java -jar yuicompressor-2.3.5.jar "script2.js" >> main.js
java -jar yuicompressor-2.3.5.jar "script3.js" >> main.js
java -jar yuicompressor-2.3.5.jar "script4.js" >> main.js

Nothing too sophisticated, just a straightforward script that generates main.js using the YUICompressor. To use it, simply run the batch file in the same folder as the JavaScripts and yuicompressor-2.3.5.jar. It will output a main.js file. I chose to run it separately for each individual file so if there are any errors, you can see where they occurred. If you concatenate all of the files into one and then compress it, debugging is difficult as the line number which threw the error is unknown.

I chose to use YUICompressor over JSMin since it seems to have better error messaging, warnings, and be a bit more strict. One of my former colleagues did some tests that determined that JSMin was faster in terms of using less CPU than YUICompressor (and certainly for minifiers which use eval(), such as Dean Edwards’ packer). Unfortunately, I can’t remember the specifics of the test or which platforms it was on, so that data is pretty much worthless. In any case, I decided on YUICompressor but you can use JSMin or whichever minifier you prefer.

If you are going to use YUICompressor, you must have Java installed and included in your path. If it isn’t in your path, you can use the full path to Java, for instance, “C:\Program Files\Java\bin\java.exe” -jar [filename] [options].

Using the Google AJAX Libraries

Depending on your opinion about Google’s recent offer to host the world’s JavaScript frameworks with its AJAX Libraries API, you may not find this suggestion too useful, but I think it’s helpful, especially to those without access to their hosting provider’s response header settings, to present here. Without going into too much detail, suffice it to say that besides the caching benefit of using Google’s API, their servers are configured “correctly” for best performance (far future expires headers, Gzip, etc).

One thing, though, is that you will want to include a minified version of the JavaScript in production and a full version in development, to ease debugging. It’s impossible to debug minified JavaScript (don’t even try), so we have to set a toggle like in the above example. Say your site is including jQuery. You may want to include a minified version on the live server but read the full code locally.

Toggling Minified Google JS

Here’s how you can include minified jQuery in the production Ruby on Rails code while including the full jQuery library, comments and all, in development:

<

Or, if you didn’t want to include everything in the JS folder, and wanted to granularly include only specific files, you might rewrite it like so:

That’s all there is to it! Just switch the DEBUG_JS flag when you want to test in development mode with/without compression, and don’t worry about when it’s in production since it will always serve up the minified, concatenated JavaScript. The logic ensures that you won’t accidentally start serving up the separate files in production, while giving you the flexibility to store your JavaScript in as many files as you like without negative consequences on the front end, as well as reading fully-commented code./p>

The first thing to understand as an interviewer is the requirements of the job position and what competencies a candidate must possess to be a good fit. If the job is for back-end development, then experience working with databases, performance tuning, and writing scalable code is crucial, and only a cursory understanding of HTML and CSS is required. Alternately, for UI development work, it isn’t necessary to have a candidate who is wrapped up in the back-end code or has Big O notation at the tip of their tongue. There are certainly jacks-of-all-trades but when interviewing, it’s better to focus on a few crucial areas than try to set high standards for all areas across the board.

These are some of the areas you may want to explore, depending on the requirements of the position:

Software Development Skills

• Proficiency in at least one high-level programming language: C++, Java
• Basic understanding of object-oriented design & analysis: classes/inheritance, interface vs implementation, encapsulation
• Experience with source code version control: SVN, CVS, P4
• Algorithms: binary search, quicksort
• Data structures: array, hash, linked list
• Complexity/performance analysis: Big O notation, performance testing

Web Development Skills

• Candidate tests web-deployed code in big 3 browsers: IE6+, Firefox 2+, Safari 2+
• Candidate uses browser-specific debugging tools: IE Web Developer Toolbar, Script Debugger/Script Editor (IE), Firebug (Firefox), WebKit/Drosera (Safari)
• Extensive knowledge of at least one JS framework: jQuery, Prototype, MooTools, YUI
• Experience creating dynamic, database-driven websites: PHP/JSP/ASP, MySQL etc
• Candidate uses Selenium for front-end automated testing
• Proficient in Fireworks or other image editing software, and knowledgeable about how to best export images for the web (CSS sprites, GIF/JPG/PNG, etc)
• Follows front-end best practices like CSS-based layouts and unobtrusive JavaScript
• Experience developing rich user interfaces (drag-and-drop, Ajax, web applications/RIAs, animation effects)

General and Miscellaneous Skills

• Familiarity with agile development methodology: scrum, burndown charts
• Proficiency at Search Engine Optimization (SEO), Search Engine Marketing (SEM), and related fields
• Knowledgeable about security vulnerabilities in code. Experience with threat analysis software (e.g. Fortify for Java)
• Familiarity with automated unit/integration tests: JUnit (Java), Selenium (front end)
• DBA-related skills such as database optimization
• Usability skills and knowledge of user behavior
• Project management skills

You can choose from these or other criteria to create a baseline for what makes an ideal candidate, ignoring the skills which aren’t relevant. Once you’ve determined the skills necessary for the position, you may find that a Ph.D. is less qualified than someone without a college degree, depending on the skills required. So, never make assumptions about candidates simply based on their credentials or previous work experience. Developers can take drastically different amounts of time to complete tasks based on their prior experience and their ability to learn new things quickly.

Criteria for Various Job Positions

Let’s look at a few example job positions and apply criteria from the list above.

Quality Assurance Engineer

An ideal QA engineer for a website will be an expert at creating automated test suites for front and back end, and should also be aware of security issues. So you could focus the interview on how they choose to write test suites, and come up with sample test suites for real-life objects (e.g. an elevator). Then you could ask them to list some of the common security threats (e.g. XSS, XSRF) and how to mitigate them.

Of course, if you already have a security engineer at your company, then you may not require your QA to wear another hat. But for most small- to medium-sized businesses, it’s most efficient and cost effective for your developers to wear many hats. In fact, you may have a software developer who also does QA on the site, or a QA engineer who does project management. It all depends on the size of your company and the particular restraints in budget for your development team.

Software Developer / Programmer

Let me say right off the bat that I’ve never conducted a software development interview. But, I have been through a few, and I have an idea of what types of questions I would ask depending on the position.

There are some general software development skills that I would consider, such as experience with SVN (or other source control), automated testing, knowledge of data structures and algorithms, and perhaps object oriented design and analysis.

If the candidate is a Java developer, then you can ask about things like exception handling, reflection, familiarity with libraries (Swing, Struts, JSF etc), or other Java-specific questions. If they are a C++ developer then you should drill down into memory management, constructors/destructors, and other tropes of C++. It’s up to you as the interviewer to determine the right questions to ask based on the job requirements, or to find someone else to conduct the interview if you can’t. I know I would have a hard time conducting an interview with a C++ developer, unless I had a “cheatsheet” with all the correct answers to the questions.

Web Developer

For a web development position, the focus will be less on knowledge of traditional computer science and more on the candidate’s knowledge of current best practices. Since best practices are always changing, the ideal web developer is enthusiastic and passionate about their field, and stays up to date by reading/contributing to blogs, belonging to email lists or other online communities and generally keeping “in the know” about the best way to solve problems.

Unlike traditional computer programming, in which code is executed in a controlled environment and changes to the language take years to complete, web development is a fast-paced field where changes happen all the time and code is executed in a wide range of environments, each with its own caveats and bugs. So, the ideal web developer is familiar with the issues surrounding development on each platform and environment, especially the Big 3 browsers (IE, Firefox and Safari).

Interview Coding Challenges

A great way to test a developer is to actually have them write some code for you. As they say, “the proof is in the pudding,” and even a developer who successfully answers your questions may not be able to complete the test put forth. The test can be verbal (if conducting the interview by phone), on a whiteboard (if in person) or you can give the candidate a time limit and have them email you the code. The choice is yours, just make sure that you choose one modality for all candidates. It isn’t fair comparing one candidate’s typed code to what another said on the phone, or drew on a whiteboard. Also remember that generally typed code will be higher quality than that spoken over the phone or written on a whiteboard.

I’ve posted a few JavaScript challenges on this blog that would make good interview questions for a JS developer. You could also adapt some of these to other languages such as C++, PHP or Java:

• Reverse a Linked List
• Dispense Change
• Cardinal Numbers

Other challenges include reversing a string, reversing the words in a string, finding words that occur in both files, converting a clock from digital time to degrees (e.g. for an analog clock’s hands), or generally any other relatively simple test you can come up with.

Layouts and HTML/CSS

For candidates doing CSS, just send them a mock-up and give them a reasonable amount of time to complete the HTML/CSS for it. You could optionally send a PSD or layered PNG, but more commonly people just send flat images. Really, the test shouldn’t be much — maybe the wireframe for a site, or a navbar, menu or UI component. You can also give them some challenge questions about explaining various CSS properties and how to use them. Challenges I’ve had in the past are:

• Make a banner and horizontal navbar that matches the dimensions of a wireframe
• Make a 3-column site with a fluid-width center column
• Create a vertical drop-down menu or horizontal flyout menu (bonus points for a cross-browser CSS-only solution, though JavaScript solutions are accepted)
• Explain the difference between absolute and relative positioning, and what happens when you put one type of element inside another
• Explain the difference in block and inline display
• Explain what effect float has on elements. Does float change elements’ display property, and if so, does it make it block or inline? (Answer: block)
• Explain what effect z-index has on elements and the natural z-index order.
• Explain CSS specificity.

On this last point, CSS specificity, I find it’s fun to show a list of CSS rules and ask which rule wins out. If you know the trick how rules are calculated, it’s easy to tell:

<!-- Sample HTML code -->
<p class="description" id="main">
  Some text.
  <span class="special">
      Some more text.
  </span>
</p>

/* Challenge:
 * What color is the "special" text? */

body .description span {
   color: blue;
}

p.description {
   color: red;
}

body .description .special {
   color: pink;
}

#main .special {
   color: orange;
}

#main span {
   color: green;
}

For those of you unfamiliar with how CSS specificity is calculated by browsers, it is a point-based system where the selector with the highest point value wins. The three main things selectors consist of are elements, classes and ids. These are worth 1 point, 10 points and 100 points respectively. Given this knowledge, do you know which rule wins out in the above example?

By calculating the point values of the rules, you see that the rule #main .special is worth 110 points and is the winner, hence the color of the “special” text is orange.

Hiring People who Write Good Code

Besides “just working”, the criteria for what makes good code differs from person to person, but in general, you’ll want to look for readability, useful comments, simplicity, accuracy, good formatting and code that doesn’t repeat itself. So, even if two candidates submit working solutions to a problem, you can still determine which is the better candidate by analyzing the code itself with these criteria in mind.

In addition to this, you may consider their talent, as opposed to their current skill in any one area. If the candidate is highly talented and passionate about the position, then they will most likely be able to learn any particular skills required for the position, within reason. Of course, talented individuals should demonstrate expertise in a number of domains already, which will give you an idea of their potential for growth in job-specific areas. You may also consider their participation in online forums, discussion groups and blogs (like this one, wink wink) related to their job field. Active participation in online communities demonstrates dedication and passion for those particular fields of interest.

I hope this article has been informative for interviewers and perhaps interviewees as well. Feel free to post your favorite (or least favorite) interview questions.

This challenge is to write a function that takes an amount of change and returns a String Array with the coins to dispense.

Examples:

• .25 returns ['quarter']
• .26 returns ['quarter', 'penny']
• .30 returns ['quarter', 'nickel']
• 1.01 returns ['dollar', 'penny']
• 1.16 returns ['dollar', 'dime', 'nickel', 'penny']

One of the requirements is that this returns the least amount of units of currency as possible. In other words, you can’t return 100 pennies or even 4 quarters when 1 dollar would suffice. This is modeled after how real-life vending machines work.

Land of the Vending Machines By gullevek

If you want to attempt to solve this challenge yourself, read no further! The rest of the article will go on to describe my solution to this problem and some of the issues I encountered along the way.

Using MooTools’ round() Method

I originally wrote my solution to this challenge without the use of JavaScript libraries. However, I ran into a common problem when dealing with dollar values, which is that I needed to round them to the 2nd decimal place. Without rounding to the 2nd place, you end up with subtle flaws in the data.

For instance, I was using an if() statement to check if the change remaining to dispense is greater than or equal to 0.1 (one cent). Before I added the code to round to the 2nd decimal place, the if() statement wouldn’t evaluate to true when there should be a penny left to dispense. The change remaining should have been .1, but it wasn’t entering the if(changeToDispense >= 0.1) statement. How could this be? Well, I was subtracting the change, but upon closer inspection, some of the values were not what I expected. When I subtract .25 from .48, I ended up with 0.22999999999999998 for instance.

Of course, I should have ended up with 0.23, not .022999 (repeating). But, without rounding the number, it ended up slightly less than the correct amount, introducing subtle bugs into the code. Since the full amount wasn’t being subtracted, the last penny would never be dispensed because there wasn’t a whole penny left (it was something like 0.09999999999999998). Thus, I rounded to the second decimal place and it solved the problem.

Using core JavaScript methods, it’s possible to work around this problem. It involves multiplying by 100, rounding and then dividing by 100. But, since most of the projects I work on use JavaScript libraries and nearly all of them have round() functions in some form or another, I decided to get a little help from a library. Specifically, I use the MooTools round() method for solving this problem.

The round() method takes how many places after the decimal to round to, so by calling round(2), a number like 0.0999 (repeating) is converted to 0.1.

Vending Machine – Japan
By rytc

Note that as the method is added to the prototype of the Number object (i.e. base class), it is called as an instance method of the number you want to round, not as a method of the Math object as with core JS methods. Compare:

• Core JS: Math.round(1.8);
• MooTools: 1.8.round();

Designing a Solution

My idea for the solution is to store a hash of the coin values keyed by their name, and then iterate over them checking if each value is higher than the amount of remaining change to dispense. For this to work, I need to iterate over them in order from highest to lowest. Otherwise, if I start in random order, it will break one of the requirements: This must return the least units of currency as possible. If I start at the penny, then it would keep dispensing pennies until there was no change left, and never get on to the other units of currency.

Therefore, the loop needs to iterate over the currency values in order of highest to lowest: dollar, quarter, dime, nickel, penny. Here is the hash object that I created to represent the currency values, and then we’ll discuss how to iterate over them in order:

 var money =
     'dollar': 1.00,
     'quarter': 0.25,
     'dime': 0.10,
     'nickel': 0.05,
     'penny': 0.01
 };

You might think it’s as easy as using a for/in loop, but unfortunately, browser compatibility issues prevent it from being this simple. Using a for/in loop will iterate over the items but there is no guarantee of the order. Internet Explorer and Firefox use the correct order (the order of declaration) as far as I know, but Safari in particular does not follow this. So, it’s not as simple as:

function dispenseChange(changeToDispense) {
 var result = new Array();
 for (var unit in money) {
     if (money[unit] > changeToDispense) result.push(unit);
 }
 return result;
}

It would be nice if it were this simple, and indeed in most browsers it is. But due to obscure quirks with the order of iteration over objects of properties, we need to store the order in its own array.

Asahi Beer Vending Machine: Komatsu
By jpellgen

A Working Solution

I’ve changed the money object to now contain two properties, a values hash and an order array.

 var money = {
     values: {
         'dollar': 1.00,
         'quarter': 0.25,
         'dime': 0.10,
         'nickel': 0.05,
         'penny': 0.01
     },
     order: ['dollar', 'quarter', 'dime', 'nickel', 'penny']
 };

Now I can iterate over the order array and use that to key the values hash. It’s one extra step in the process but it doesn’t add too much bloat to the code, and it actually works (at least, in the browsers I’ve tested):

function dispenseChange(changeToDispense) {
 var result = new Array();
 while (changeToDispense.round(2) >= 0.01) {
     for (var i = 0; i < money.order.length; i++) {
         var value = money.values[money.order[i]]; // Number, e.g. 1.00
         if (changeToDispense.round(2) >= value) {
             result.push(money.order[i]); // String, e.g. "dollar"
             changeToDispense -= value;
             break;
         }
     }
 }
 return result;
}

You can test the function with logging statements:

window.addEvent('domready', function() {
 var tests = [.01, .05, .11, .27, .74, 1.08, 1.99, 2.07];
 tests.each(function(testValue) {
     console.log(testValue.toString() +
                 ': ' +
                 dispenseChange(testValue)
     );
 });
});

Improving the Implementation

One area for improvement is the nested for() loop inside the while() loop. Right now it isn’t ideal, since it will waste iterations checking for currency amounts higher than the current currency. To explain what I mean, let’s look at the loop again:

 while (changeToDispense.round(2) >= 0.01) {
     for (var i = 0; i < money.order.length; i++) {
         // ...
         if (changeToDispense.round(2) >=
             money.values[money.order[i]) {
             // dispense unit of currency
             break;
         }
     }
 }

I commented out some of the implementation details so we can focus on the structure. The reason that this is sub-optimal is that after each unit of currency is dispensed, the for() loop breaks and the while() loop starts it over again. Say there is less than a dollar remaining to dispense– for each unit of currency dispensed, the for() loop will still check for a dollar.

To optimize this code, we’d have to only iterate over the order array once. This means the for() loop would be outside the while() loop, and for each unit of currency, the while() loop would continue to dispense change of that unit until the change remaining is less than the unit’s value. It would be optimized to n (see Big O notation for details) at that point.

Optimized Code

Here is the new and improved code with the optimized loops:

var money = {
 values: {
     'dollar': 1.00,
     'quarter': 0.25,
     'dime': 0.10,
     'nickel': 0.05,
     'penny': 0.01
 },
 order: ['dollar', 'quarter', 'dime', 'nickel', 'penny']
};
function dispenseChange(changeToDispense) {

 var result = new Array();
 money.order.each(function(unit, i) {
     var value = money.values[unit]; // Number, e.g. 1.00
     while (changeToDispense.round(2) >= value) {
         result.push(unit); // String, e.g. "dollar"
         changeToDispense -= value;
     }
 });
 return result;
}

window.addEvent('domready', function() {
 var tests = [.01, .05, .11, .27, .74, 1.08, 1.99, 2.07];
 tests.each(function(testValue) {
     console.log(testValue.toString() +
                 ': ' +
                 dispenseChange(testValue)
     );
 });
});

An observant reader will notice that I changed the for() loop to use MooTools’ each() method. The reason I did this is that we no longer need to break out of the for() loop, and I prefer the each() notation. (Thanks for recommending it, Lowell!)

As always, feel free to post your own solutions to this challenge in the comments.

The latest in Japanese vending machines
By El Fotopakismo ]]> http://www.thetruetribe.com/2008/05/javascript-challenge-dispense-change/feed/ 0 http://www.thetruetribe.com/2008/05/using-mootools-hash-cookie-api/ http://www.thetruetribe.com/2008/05/using-mootools-hash-cookie-api/#comments Thu, 08 May 2008 08:01:00 +0000 admin http://wordpress.thetruetribe.com/?p=23

MooTools makes working with cookies quite easy. Based on functions from Paul Peter Koch’s QuirksMode, the MooTools API for handling cookies is intuitive and easy to remember.

For storing simple bits of information on the browser, the Cookie methods read(), write() and dispose() are adequate. As their names imply, these read, write and delete cookies from the browser, respectively.

But, if you want to do something more complex, such as save a JSON string each time a method is called on the cookie, then Hash.Cookie is for you.

What’s the difference between the Hash.Cookie methods and the standard methods you say? For one, Hash.Cookie is its own module, so make sure the version of MooTools you’re using has it included. Besides that, Hash.Cookie gives you all the functionality of the Hash class, including getters/setters, each(), some(), filter(), has(), keyOf() and more. For the full documentation on all Hash methods available, view the Hash docs here.

Here’s an example that uses the Hash.Cookie class to store how many times a user has visited the page. Note that this uses Firebug so if you don’t have it enabled, you’ll need to override console.log().

window.addEvent('domready', function() {
    var cookie = new Hash.Cookie('test-cookie');

    var numberOfVisits = $defined(cookie.get('numberOfVisits')) ?
                         cookie.get('numberOfVisits') :
                         0;

    cookie.set('numberOfVisits', numberOfVisits + 1);

    console.log('You have visited the page ' +
                 cookie.get('numberOfVisits') +
                 ' times.');
});

On line 1, we start by declaring everything to occur when the DOM is ready.
For MooTools developers, this should be a familiar practice. Although we aren’t
manipulating the DOM in this example, I’ve left it in, as Firebug threw an error
when I tried to console.log() before the DOM was ready.

On line 2, we instantiate a new cookie named ‘test-cookie’ without any options. Interestingly, this also has the effect of loading the cookie if it already exists. This means that the first time the user visits the page, it will write a cookie, but on all subsequent visits it will read a cookie. The end result is the same: we have a reference to the cookie as a hash object, and can use the methods that the Hash class provides.

Next, on lines 4-6, we use a ternary operator to check if ‘numberOfVisits’ has already been written to the cookie. If so, we read it from the cookie. If not, it is initialized to 0.

On line 8, we increment ‘numberOfVisits’ using the set() method. Finally, we log the number of visits using Firebug’s console.log().

Getters, Setters and Auto-Saving Cookies

Getters and setters should be familiar to anyone versed in Java but I imagine some JavaScript developers may be unfamiliar with them. Essentially, get() and set() methods are provided for you to use instead of directly accessing the data. For instance, cookie.hash.numberOfVisits and cookie.get(‘numberOfVisits’) both return the same data, but the former directly accesses the data while the latter uses a wrapper method.

There are numerous reasons to use getters/setters instead of directly accessing the data, but one practical example is the use of Hash.Cookie’s autoSave functionality. There is an autoSave flag in the options which, if enabled, will save the data after each operation on the hash. It defaults to ‘true’ which is why I didn’t have to write() the cookie in the above example.

Since I didn’t define a duration in the options object when instantiating the cookie (nor did I even include an options object, for that matter), it will only live for the duration of the browser. In other words, it’s a session cookie: When the user exits the browser and restarts, the cookie will be destroyed. For the cookie to live beyond the lifespan of the browser, you can specify the duration of the cookie to live (in days).

The other options which I omitted were domain, path and secure. None of those were important for my example but for some applications, setting domain- and path-specific cookies and ensuring they are only accessed over HTTPS may be necessary

This example is somewhat simple but I hope it has provided an introduction to using MooTools’ excellent Hash.Cookie API. Good luck and enjoy a tall glass of soymilk with your Hash Cookies!

In this article I will explore the use of the JavaScript date object and its methods. We won’t be using any JavaScript libraries because the existing API is quite adequate, and most libraries don’t really offer much in the way of extensions anyway.

Let’s start with displaying the current time. You can do this by using the Date() constructor and calling the toString() method on it. If you have Firebug, open up the console and type this code:

var date = new Date();
date.toString();

You’ll see that date.toString() evaluates to a string containing the current time in Greenwich Meridian Time (GMT). In my case, it is “Tue May 06 2008 16:06:39 GMT-0700 (Pacific Daylight Time).”

There are a number of other to methods available as well. You can paste these into the Firebug console to see what they evaluate to. I’ve put my example as a comment after each one:

• date.toDateString(); // “Tue May 06 2008″
• date.toGMTString(); // “Tue, 06 May 2008 23:06:39 GMT”
• date.toLocaleDateString(); // “Tuesday, May 06, 2008″
• date.toLocaleString(); // “Tuesday, May 06, 2008 4:06:39 PM”
• date.toLocaleTimeString(); // “4:06:39 PM”
  

Practical Applications of the JavaScript Date Object

One of the most obvious applications of the date object is to display the current time, should you desire to do so. Oftentimes news websites will contain the day’s date, and sometimes they have a clock as well. For example, see the BBC’s homepage which displays the day’s date and an analog-style clock done in Flash:

The BBC follows the format “Tuesday 6 May 2008″ for example. Let’s construct that using JavaScript:

function getFormattedDate(date) {
    var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var day = days[date.getDay()];

    var months = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "November", "December"];
    var month = months[date.getMonth()];

    // Returns a string formatted like "Tuesday 6 May 2008"
    return day + " " +
           date.getDate() + " " +
           month + " " +
           date.getFullYear();
}

getFormattedDate(new Date());

You could also accomplish this with some RegEx hackery but I think this is cleaner, albeit a bit more verbose. The benefit of doing this with RegEx is that you can use one of the existing toString() methods, such as toLocaleString(), and then parse the data you need from there.

Actually, given that the data is delimited by commas, you could accomplish this simply by splitting the returned string without the use of RegEx. Doing it that way would avoid the need to tediously specify the names of all the days and the months.

Creating a Countdown Timer in JavaScript

Another use case for the JavaScript date object is to count down the time remaining until a certain date. This could be the launch of a new website or product, the cut-off time for a submission, or anything else that requires notification of the time remaining until a specific date and time.

On a website I previously worked on, Endless.com, there is a countdown timer in the banner that notifies the customer how long they have to order to get next day shipping. This is a fun idea because it adds a little pressure for the customer to make an impulse buy as the cutoff time comes closer. I’ve seen similar uses on other e-commerce sites and it adds a nice touch, for those sites which offer next-day shipping.

To do something like this, I imagine you’d need two functions, one to update the HTML with the correct date string (given a date object as input), and another, possibly anonymous function that is declared with a setInterval, which decrements the current time and calls the update function. Without writing the implementation details, I imagine it would look something like this:

function updateTimeRemaining(date) {
    // implementation details for parsing data from date object
    // and updating the DOM
}

window.onload = function() {
    var interval = setInterval(function() {
        updateTimeRemaining(new Date());
    }, 1000);
};

The updateTimeRemaining() function would need to be written to output the time remaining given a date object. I feel that there may be a better way to do this than creating a new Date() instance every second, however. Could we not use the same date object but decrement its time manually every second? In any case, this isn’t a full-fledged solution at this point, just an outline of one possible solution.

What are your favorite uses of the JavaScript date object? Do you have other use cases that I’ve left out here? Please leave them in the comments and I may even devote a whole article to them. There is quite a bit you can do with date and time and I’m always on the lookout for new uses. Hopefully these short examples will get you thinking about how you can use the JavaScript date object on your site. ]]> http://www.thetruetribe.com/2008/05/javascript-date-object/feed/ 0