• Plugin can be customised using options
• Setters/Getters for options
• Private and public methods
• Callback hooks
• Plugin instances can be destroyed

The boilerplate

Here is the bare bones, uncommented boilerplate source code:

/**
 * A jQuery plugin boilerplate.
 * Author: Jonathan Nicol @f6design
 */
;(function($) {
  var pluginName = 'demoplugin';

  function Plugin(element, options) {
    var el = element;
    var $el = $(element);

    options = $.extend({}, $.fn[pluginName].defaults, options);

    function init() {
      // Add any initialization logic here...

      hook('onInit');
    }

    function fooPublic() {
      // Code goes here...
    }

    function option (key, val) {
      if (val) {
        options[key] = val;
      } else {
        return options[key];
      }
    }

    function destroy() {
      $el.each(function() {
        var el = this;
        var $el = $(this);

        // Add code to restore the element to its original state...

        hook('onDestroy');
        $el.removeData('plugin_' + pluginName);
      });
    }

    function hook(hookName) {
      if (options[hookName] !== undefined) {
        options[hookName].call(el);
      }
    }

    init();

    return {
      option: option,
      destroy: destroy,
      fooPublic: fooPublic
    };
  }

  $.fn[pluginName] = function(options) {
    if (typeof arguments[0] === 'string') {
      var methodName = arguments[0];
      var args = Array.prototype.slice.call(arguments, 1);
      var returnVal;
      this.each(function() {
        if ($.data(this, 'plugin_' + pluginName) && typeof $.data(this, 'plugin_' + pluginName)[methodName] === 'function') {
          returnVal = $.data(this, 'plugin_' + pluginName)[methodName].apply(this, args);
        } else {
          throw new Error('Method ' +  methodName + ' does not exist on jQuery.' + pluginName);
        }
      });
      if (returnVal !== undefined){
        return returnVal;
      } else {
        return this;
      }
    } else if (typeof options === "object" || !options) {
      return this.each(function() {
        if (!$.data(this, 'plugin_' + pluginName)) {
          $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
        }
      });
    }
  };

  $.fn[pluginName].defaults = {
    onInit: function() {},
    onDestroy: function() {}
  };

})(jQuery);

…and with liberal comments:

/**
 * A jQuery plugin boilerplate.
 * Author: Jonathan Nicol @f6design
 */
;(function($) {
  // Change this to your plugin name.
  var pluginName = 'demoplugin';

  /**
   * Plugin object constructor.
   * Implements the Revealing Module Pattern.
   */
  function Plugin(element, options) {
    // References to DOM and jQuery versions of element.
    var el = element;
    var $el = $(element);

    // Extend default options with those supplied by user.
    options = $.extend({}, $.fn[pluginName].defaults, options);

    /**
     * Initialize plugin.
     */
    function init() {
      // Add any initialization logic here...

      hook('onInit');
    }

    /**
     * Example Public Method
     */
    function fooPublic() {
      // Code goes here...
    }

    /**
     * Get/set a plugin option.
     * Get usage: $('#el').demoplugin('option', 'key');
     * Set usage: $('#el').demoplugin('option', 'key', value);
     */
    function option (key, val) {
      if (val) {
        options[key] = val;
      } else {
        return options[key];
      }
    }

    /**
     * Destroy plugin.
     * Usage: $('#el').demoplugin('destroy');
     */
    function destroy() {
      // Iterate over each matching element.
      $el.each(function() {
        var el = this;
        var $el = $(this);

        // Add code to restore the element to its original state...

        hook('onDestroy');
        // Remove Plugin instance from the element.
        $el.removeData('plugin_' + pluginName);
      });
    }

    /**
     * Callback hooks.
     * Usage: In the defaults object specify a callback function:
     * hookName: function() {}
     * Then somewhere in the plugin trigger the callback:
     * hook('hookName');
     */
    function hook(hookName) {
      if (options[hookName] !== undefined) {
        // Call the user defined function.
        // Scope is set to the jQuery element we are operating on.
        options[hookName].call(el);
      }
    }

    // Initialize the plugin instance.
    init();

    // Expose methods of Plugin we wish to be public.
    return {
      option: option,
      destroy: destroy,
      fooPublic: fooPublic
    };
  }

  /**
   * Plugin definition.
   */
  $.fn[pluginName] = function(options) {
    // If the first parameter is a string, treat this as a call to
    // a public method.
    if (typeof arguments[0] === 'string') {
      var methodName = arguments[0];
      var args = Array.prototype.slice.call(arguments, 1);
      var returnVal;
      this.each(function() {
        // Check that the element has a plugin instance, and that
        // the requested public method exists.
        if ($.data(this, 'plugin_' + pluginName) && typeof $.data(this, 'plugin_' + pluginName)[methodName] === 'function') {
          // Call the method of the Plugin instance, and Pass it
          // the supplied arguments.
          returnVal = $.data(this, 'plugin_' + pluginName)[methodName].apply(this, args);
        } else {
          throw new Error('Method ' +  methodName + ' does not exist on jQuery.' + pluginName);
        }
      });
      if (returnVal !== undefined){
        // If the method returned a value, return the value.
        return returnVal;
      } else {
        // Otherwise, returning 'this' preserves chainability.
        return this;
      }
    // If the first parameter is an object (options), or was omitted,
    // instantiate a new instance of the plugin.
    } else if (typeof options === "object" || !options) {
      return this.each(function() {
        // Only allow the plugin to be instantiated once.
        if (!$.data(this, 'plugin_' + pluginName)) {
          // Pass options to Plugin constructor, and store Plugin
          // instance in the elements jQuery data object.
          $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
        }
      });
    }
  };

  // Default plugin options.
  // Options can be overwritten when initializing plugin, by
  // passing an object literal, or after initialization:
  // $('#el').demoplugin('option', 'key', value);
  $.fn[pluginName].defaults = {
    onInit: function() {},
    onDestroy: function() {}
  };

})(jQuery);

Usage

The first thing you’ll need to do is change the name of the plugin, which is hardcoded as ‘demoplugin’, to something a little more descriptive. After that you should be able to follow the comments in the source code to customise the plugin.

Here are examples of how an end-user would interact with the plugin:

// Initialize plugin with default options.
$('#element').demoplugin();

// Initialize plugin with user defined options.
$('#element').demoplugin({
  option1: 2000,
  option2: 'value',
  callback1: function () { ... }
});

// Call a public method, no arguments.
$('#element').demoplugin('publicFunctionName');

// Call a public method with arguments.
$('#element').demoplugin('publicFunctionName', 'arg1', 'arg2');

// Get a plugin option.
$('#element').demoplugin('option', 'key');

// Set a plugin option after plugin initialization.
$('#element').demoplugin('option', 'key', value);

// Destroy plugin.
$('#element').demoplugin('destroy');

Setup options

It is very useful to be able to customise jQuery plugins on a per instance basis. The boilerplate implements default settings which can be overwritten when the plugin is initialized:

// Default plugin options.
$.fn[pluginName].defaults = {
  color: '#ff0000',
  height: 200
};

$('#element').demoplugin({
  color: '#0000ff',
  height: 400
});

Options can also be overwritten after the plugin is initialized, using the option method:

$('#element').demoplugin('option', 'color', '#00ff00');

An option value can be fetched using the same method by simply omitting the third parameter:

var color = $('#element').demoplugin('option', 'color');

Public and private methods

Private functions reduce the chance of your users inadvertently calling the plugin’s utility methods. I’m a fan of the Revealing Module pattern, so that’s how I chose to implement private/public functionality in my boilerplate.

function Plugin(element, options) {
  // This method is public.
  function fooPublic(param1, param2) {
    // ...
  }

  // This method is private.
  function fooPrivate() {
    // ...
  }

  // Expose methods of Plugin we wish to be public.
  return {
    fooPublic: fooPublic
  };
}

Public functions can be called by your users like so:

$('#element').demoplugin('fooPublic', 'val1', 'val2');

Callback hooks

Callback hooks are incredibly powerful. They allow your users to listen for events in your plugin’s behaviour and respond accordingly. Hooks are implemented as functions in the default options object:

$.fn[pluginName].defaults = {
  onSlideshowFinished: function() {}
};

Each function is empty to begin with, since the callback’s behaviour will be defined by the user. This is done by overwriting the callback function when setting the plugin’s options. The scope of the callback is the DOM element the plugin is attached to, so in the following example the DOM element would be hidden.

$('#element').demoplugin({
  onSlideshowFinished: function() {
    $(this).hide();
  }
});

To trigger a hook, call the plugin’s hook method:

hook('onSlideshowFinished');

There are two callbacks implemented by default in the boilerplate: onInit and onDestroy.

Destroying a plugin instance

Your users can remove an instance of the plugin by calling its destroy method:

$('#element').demoplugin('destroy');

The plugin stores all its functionality in its DOM element’s data object. By default the destroy method simply removes the stored data values. You will probably need to customise destroy to restore the DOM element to its original state and remove any event handlers your plugin has created.

Credit

My boilerplate takes inspiration from a number of sources, most notably the jQuery plugin authoring guidelines, Stefan Gabos’ boilerplate, and Zeno Rocha and Addy Osmani’s jQuery Boilerplate.

The questions are divided into five topics covering different aspects of the language: arrays, objects and context, functions, asynchronous behavior and Backbone views. If, like me, you have a decent grasp of JavaScript, but wouldn’t feel confident writing “JavaScript programmer” on your curriculum vitae, then I think you’ll find the tests an enjoyable challenge. None of the questions are super difficult, though I confess to needing help from MDN to arrive at a few of the solutions. I definitely learned a thing or two about JavaScript along the way.

Because Rebecca’s application is built in Node, you’ll need to have Node and NPM installed before you can run it. That’s a shortcoming I think, since it throws up a fairly large barrier-to-entry, but if you’re serious about JavaScript then you really ought to delve into Node anyway. I won’t bore you with instructions for installing Node – you can do it using Homebrew or download an installer from the official Node website. After that, just follow the steps on the js-assessment github and you’ll be up and running.

Rebecca seems undecided about whether to publish solutions to the tests, but in the name of sharing the knowledge (and at the risk of exposing my own shortcomings as a programmer), you’ll find my answers below. My solutions won’t make much sense taken out of context like this, but once your start working your way through js-assessment things will become a lot clearer.

Although my solutions pass Rebecca’s tests I’m sure some of them could be improved, so if you have suggestions for optimizing my code please leave a comment below.

Arrays

1. You should be able to determine the location of an item in an array

fn = function (arr, targ) {
  for (var pos=0; pos < arr.length; pos++){
    if (arr[pos] == targ){
      return pos;
    }
  }
};

2. You should be able to add the values of an array

fn = function (arr) {
  var total = 0;
  for (var pos=0; pos < arr.length; pos++) {
    total += arr[pos];
  }
  return total;
};

3. You should be able to remove an item from an array

fn = function (arr, itemToRemove) {
  for (var pos=0; pos < arr.length; pos++){
    if (arr[pos] == itemToRemove){
      var removedItem = arr.splice(pos,1);
    }
  }
  return arr;
};

4. You should be able to add an item to the end of an array

fn = function (arr, itemToAdd) {
  arr.push(itemToAdd);
  return arr;
};

5. You should be able to create an array from two arrays

fn = function (arr1, arr2) {
  var arr = arr1.concat(arr2);
  return arr;
};

6. You should be able to add an item anywhere in an array

fn = function (arr, itemToAdd, pos) {
  arr.splice(pos, 0, itemToAdd);
  return arr;
};

Objects and context

1. You should be able to alter the context in which a method runs

fn = function () {
  // Call the sayIt() function and pass it the
  // 'b' object as its context.
  return a.sayIt.call(b);
};

2. You should be able to alter multiple objects at once

fn = function (greeting) {
  C.prototype.greeting = greeting;
};

3. You should be able to iterate over an object’s ‘own’ properties

fn = function (obj) {
  var ownProperties = [];
  for (var prop in obj) {
    // hasOwnProperty returns true if the property
    // belongs to the object, not its prototype chain.
    if (obj.hasOwnProperty(prop)) {
      ownProperties.push(prop + ': ' + obj[prop]);
    }
  }
  return ownProperties;
};

Functions

1. You should be able to use an array as arguments when calling a function

fn = function (opts) {
  // Call the sayIt() function in the context of 'this'
  // and pass it the 'opts' array.
  return sayIt.apply(this, opts);
};

2. You should be able to change the context in which a function is called

fn = function (opts){
  // Call the speak() function in the context of 'obj'.
  return speak.call(obj);
};

3. You should be able to return a function from a function

fn = function (prefix) {
  var concatFn = function(suffix) {
    return prefix + ', ' + suffix;
  };
  return concatFn;
};

4. You should be able to create a ‘partial’ function

fn = function (func, greeting, name) {
  var partialFn = function(punctuation) {
    return func(greeting, name, punctuation);
  };
  return partialFn;
};

Async behavior

1. You should understand how to uses ‘promises’

As far as I know promises are not part of the JavaScript language, and need to be implemented using a third party library. In my solution I used jQuery’s deferred object to return a promise.

fn = function () {
  // This is a contrived example to demonstrate that the promise
  // is returned asynchronously after a 1sec timeout.
  var dfd = $.Deferred();
  var timeoutID = window.setTimeout(function(){
    dfd.resolve(true);
  }, 1000);
  return dfd.promise();
};

2. You should be able to receive data from the server and manipulate it

var get = $.ajax({
  url: url
});

// Since jQuery's $.ajax returns a promise, we can use
// .done and .fail callbacks.
get.done(function(response){
  peopleArray = [];
    for (var person in response.people){
      peopleArray.push(response.people[person].name);
    }
    peopleArray.sort(); // Not required in this case.
    tests();
});

get.fail(function(){
  console.log('Load failed');
});

Backbone views

This section of the test relies on knowledge of the Backbone framework. Personally that doesn’t bother me since I have used Backbone before, but I’m not sure that Backbone knowledge should be considered mandatory for a JavaScript professional.

1. You should be able to render a view using a template

var MyView = Backbone.View.extend({
  template : tpl,
  render : function() {
    // This could be written on a single line, but I've
    // split across 3 lines for readability:
    var compiledTemplate = _.template(this.template);
    var viewHTML = compiledTemplate(this.model.toJSON());
    $('body').append(viewHTML);
  }
});

2. You should be able to update the view when the model changes

var MyView = Backbone.View.extend({
  initialize : function() {
    this.model.bind('change:greeting', this.render, this);
    this.model.set({greeting: 'Goodbye, world'});
  },
  template : tpl,
  render : function() {
    $('#my-view').html(this.model.get('greeting'));
  }
});

The Meteor website is full of claims about how amazingly easy the framework will make web developer’s lives. It will allow us to build “top-quality web apps in a fraction of the time.” Its demo applications require “no programming knowledge.” What “once took weeks, even with the best tools, now takes hours.” In fact, you can “build a complete application in a weekend.”

If building Facebook or Twitter was really something that could be done in a weekend, wouldn’t everyone and their dog be CEO of their own Internet startup? If the barrier to entry was as low as the Meteor team would have us believe, then business owners would have no need for developers at all – a few hours of training and they’d have all the skills required to build their own app or website.

Obviously that’s not the case. Success in any field is hard earned, and it bugs me that some of our industry’s leaders perpetuate the idea that there are short cuts to becoming an accomplished web developer. Sure, it’s possible to build a killer app in a weekend, but to do so requires years of experience and a deep knowledge of your tools, and many more days, weeks, or months are required to turn that prototype into a robust website or application.

It may sound as if my gripe is with Meteor specifically, but that isn’t the case. I see similarly hyperbolic claims wherever I look. Publishers hawk their technical reference books with promises to convert novice coders into “ninjas”. The sales pitch for a commercial iOS design tutorial implies that it can “make you tons of money, and elevate your status within the design community”. An advertisement for Treehouse suggests that after joining their service you’ll soon be rubbing shoulders with Mark Zuckerberg. If you take these claims at face value you could be forgiven for thinking that all that is required to excel as a developer is a few hours of your time, a couple of hundred bucks to spend on training, and the right JavaScript framework.

In reality, web design and development are highly specialised disciplines that take years of practice to master, and require ongoing training to stay abreast of the near-constant advances in the field. I don’t think it does our industry any favours to pretend that mastery can be achieved in a weekend. If we don’t take our own professional expertise seriously, why should anyone else?

By default XAMPP won’t start the Apache and MySQL services at system startup, so every time you reboot your computer you’ll need to restart them. Wouldn’t it be nice if those services started automatically? One way of doing that is to create a Launch Daemon that runs at system startup and have it start XAMPP for us.

Fire up Terminal, and run the following command:

cd /Library/LaunchDaemons
sudo nano apachefriends.xampp.apache.start.plist

Enter your OSX password when prompted, then in nano paste the following into your new plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>EnableTransactions</key>
<true/>
<key>Label</key>
<string>apachefriends.xampp.apache.start</string>
<key>ProgramArguments</key>
<array>
<string>/Applications/XAMPP/xamppfiles/xampp</string>
<string>startapache</string>
</array>
<key>RunAtLoad</key>
<true/>
<key>WorkingDirectory</key>
<string>/Applications/XAMPP/xamppfiles</string>
<key>KeepAlive</key>
<false/>
<key>AbandonProcessGroup</key>
<true/>
</dict>
</plist>

Save the file and exit nano (control+o, return, control+x).

Now run the following terminal command:

sudo nano apachefriends.xampp.mysql.start.plist

And into this new file paste:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>EnableTransactions</key>
<true/>
<key>Label</key>
<string>apachefriends.xampp.mysql.start</string>
<key>ProgramArguments</key>
<array>
<string>/Applications/XAMPP/xamppfiles/xampp</string>
<string>startmysql</string>
</array>
<key>RunAtLoad</key>
<true/>
<key>WorkingDirectory</key>
<string>/Applications/XAMPP/xamppfiles</string>
<key>KeepAlive</key>
<false/>
<key>AbandonProcessGroup</key>
<true/>
</dict>
</plist>

Save the file and exit nano (control+o, return, control+x).

When you restart your computer the XAMPP Apache and MySQL services should start automatically. You can check this by launching XAMPP Control and checking that Apache and MySQL have green lights displayed next to them.

A note about security

If you’re concerned about the security of your system while running XAMPP, the safest approach is not to run Apache or MySQL at all, in which case you might not want to have those services running while you’re not using them. However, I’m fairly certain that unless you intentionally open up port 80 in your hardware/software firewall your XAMPP server should be invisible outside your local network.

Credit

A hat tip to ‘cwd’, who posted this solution on Superuser. I tried a couple of other approaches before I stumbled upon this one which actually works.

Installing XAMPP was a snap, but when I came to create my own Apache VirtualHosts things started getting fiddly. Here are the steps I followed to get everything running smoothly.

What are VirtualHosts?

First, some quick background on what we’re trying to achieve.

VirtualHosts allow Apache to map a hostname to a directory on the filesystem. You can set up as many VirtualHosts as you need, so that each website operates under its own hostname. For example, you might want to map mysite.local to /Users/yourusername/mysite. To test your development site all you would need to do is plug “http://mysite.local” into your browser’s address bar.

Enable VirtualHosts

The first thing you’ll need to do is open the file /Applications/XAMPP/xamppfile/etc/httpd.conf in your favourite text editor. Look for the following lines:

# Virtual hosts
#Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Uncomment the second line by removing the hash (#), so that Apache loads your custom VirtualHosts configuration file:

# Virtual hosts
Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Create your VirtualHosts

Open the file /Applications/XAMPP/xamppfile/etc/extra/httpd-vhosts.conf. Towards the bottom of the file you will see some example VirtualHosts, which you should comment out or delete.

At the bottom of the file, add ‘localhost’ as the default named VirtualHost:

# localhost
<VirtualHost *:80>
    ServerName localhost
    DocumentRoot "/Applications/XAMPP/htdocs"
    <Directory "/Applications/XAMPP/htdocs">
        Options Indexes FollowSymLinks Includes execCGI
        AllowOverride None
        Order Allow,Deny
        Allow From All
    </Directory>
</VirtualHost>

This step is necessary to ensure that http://localhost still points at XAMPP’s htdocs directory once we’ve created our custom VirtualHosts. Personally I don’t use the htdocs directory a lot, but occasionally it’s useful to have somewhere to perform quick tests.

Now you are ready to create your own VirtualHosts. After the default localhost that you just created, add:

# My custom host
<VirtualHost *:80>
    ServerName mysite.local
    DocumentRoot "/Users/yourusername/path/to/your/site"
    <Directory "/Users/yourusername/path/to/your/site">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride None
        Order Allow,Deny
        Allow From All
    </Directory>
    ErrorLog "logs/mysite.local-error_log"
</VirtualHost>

In the above example you should replace “mysite.local” with your own hostname. This can be anything you wish, but make sure you choose a hostname that won’t conflict with a real domain name. Using a .local extension makes it obvious that the site is hosted locally rather than on a public web server.

The path to your website can point at any folder in your OSX user directory. I store most of my sites inside of Dropbox so that I can access them on both my home and work machines. If your path includes spaces, make sure you enclose it in quotes, like in my example.

Edit your hosts file

Once you’ve saved your httpd.conf and httpd-vhosts.conf files, the next step is to edit your OSX hosts file so it knows how to handle your new ServerName. The hosts file is used by OSX to map hostnames to IP addresses. In this case we want to map your new ServerName to the IP address 127.0.0.1, which is your localhost.

Fire up a Terminal instance, and at the prompt type the following command:

sudo nano /etc/hosts

Enter your OSX password when prompted, and the hosts file will be opened in the nano text editor. You’ll see that the hosts file already contains some default hostname mappings (e.g. “127.0.0.1 localhost”). Use your keyboard’s arrow keys to navigate to the bottom of the file and add your own mapping:

# XAMPP VirtualHost mappings
127.0.0.1 mysite.local

Save the host file using the key combo control+o, and pressing return when prompted to choose the filename. Close the file using control+x.

Restart Apache

So that your changes take effect, restart Apache. This can be done using XAMPP Control, which is found at /Applications/XAMPP/XAMPP Control.app.

Point your browser at http://mysite.local (or whatever ServerName you chose) and you should see your website. However, there’s a chance that instead you’ll be faced with a…

403 error

Because Apache runs as the ‘nobody’ user by default, it may not have adequate permission to browse your OSX user directory or some of its subdirectories, in which case you’ll see a 403 ‘access forbidden’ error when you try and view your development site. Similarly, you may find that although you can view your dev site, PHP throws errors when you attempt to write files or make directories on the filesystem.

To fix this you can configure Apache to run as your OSX user. Open /Applications/XAMPP/xamppfile/etc/httpd.conf and look for the following lines:

# User/Group: The name (or #number) of the user/group to run httpd as.
# It is usually good practice to create a dedicated user and group for
# running httpd, as with most system services.
#
User nobody
Group nogroup

Change User to your OSX username, and save the file:

User yourusername

Restart Apache and you should now be able to navigate your site without any issues, including manipulating files and folders using PHP.

Making the change I’ve described above carries certain security risks, and if you choose to run Apache as your OSX user then you’ll need to be quite certain that XAMPP is not accessible from outside your local network. From what I understand, XAMPP’s built in security features ensure that this is the case out-of-the-box, and it is straightforward to beef up security for additional piece of mind.

If you’re not convinced that it’s safe to let Apache run as your OSX user, another option is to change the permissions of your dev directories so that the ‘nobody’ or ‘_www’ user can read/write to them.I suspect that I would quickly tire of setting folder permissions, which is why I have opted to take the path of least resistance!

Conclusion

Hopefully this post helps someone else to get XAMPP up and running on OSX. I imagine that MAMP Pro streamlines this process somewhat (I know it has a wizard for creating VirtualHosts), but as long as you don’t mind getting your hands dirty XAMPP is a fantastic way to learn how Apache actually works.

The problem

In a fixed width layout it is simple to specify both the width and the height of an element:

.rect {
    width: 800px;
    height: 400px;
}

When creating a responsive layout things get trickier, since (to the best of my knowledge) it isn’t possible to specify a percentage based height that is relative to an element’s width. For example the following CSS rule won’t have the desired result, since the height value will be ignored:

.rect {
    width: 100%;
    height: 50%;
}

A solution

However, when we specify a padding-bottom value for the same element, the padding measurement is calculated relative to the element’s width:

.rect {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}

View a demo

You will notice that I have set the element’s height property to 0, to ensure that the height of any child elements will not be added to the padding value when the visible height is calculated.

A note about child elements

If you also want to specify percentage based heights for a child element, you will need to assign an absolute or relative position value to both the parent and the child:

.rect {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    }
    .rect p {
        position: absolute;
        margin: 0;
        height: 100%;
        }

View a demo

Parallax what?

Even if you’re not familiar with the term “parallax scrolling” you will certainly be familiar with the technique. Parallax scrolling is a 2d animation process that creates an illusion of depth by animating foreground layers faster than background layers. When you observe the landscape from a moving car, objects closer to the car appear to pass you faster than scenery further away. Parallax scrolling uses the same principle to trick the viewer into thinking they are observing a 3d scene.

Demo and Download

My demo web page shows one approach to building a vertical parallax scrolling interface:

View demo
Download source

You can scroll in the usual fashion, use the navigation menu at the right-hand side of the page, or the next/prev buttons that appear underneath each article. As you scroll, the page’s four content layers are animated independently of one another to create an illusion of depth.

The scrolling looks smoothest in Safari (at least that’s the case on my PC), but my demo should work in any modern browser.

Disclaimer 1: Because this is just an experiment I’ve not spent any time optimising the demo to work on mobile devices. I wanted to keep the demo lean ‘n’ mean, and not clutter it by sniffing mobile browsers and forking my code. On a production site you’d want to ensure that the site degrades gracefully on mobile devices, where scroll events and fixed positioning might work in unexpected ways.

Disclaimer 2: The navigation menu in my demo is inspired by the menu on the Nike Better World website. If you plan on implementing a similar menu on a production site, please be aware of its origin.

How it works

The articles and background layers are given a fixed positioned with CSS, and assigned a z-index so that the foreground layers appear above the background layers. The four layers are: small clouds, large clouds, balloon/landscape images, articles.

/* foreground (ballons/landscape) */
#parallax-bg3 {
    z-index: 3;
    position: fixed;
    left: 50%; /* align left edge with center of viewport */
    top: 0;
    width: 940px;
    margin-left: -470px; /* move left by half element's width */
}

Within each layer individual content elements are absolutely positioned. This was the most fiddly part of the process, since the elements need to positioned in such a way that they align in a pleasing manner when the user scrolls to any of the four articles. In this case it was really just a process of trial and error.

#bg3-1 {
    position: absolute;
    top: -111px;
    left: 355px;
}
#bg3-2 {
    position: absolute;
    top: 812px;
    left: 321px;
}
/* etc... */

A few lines of jQuery control the parallax effect, triggered by a scroll event. I was surprised how easy this was to achieve, it is literally just a handful of lines of code.

$(window).bind('scroll',function(e){
    parallaxScroll();
});
 
function parallaxScroll(){
    var scrolled = $(window).scrollTop();
    $('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
    $('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');
    $('#parallax-bg3').css('top',(0-(scrolled*.75))+'px');
}

As you can see the CSS top property is used to move each layer as the user scrolls. The foreground layer is always aligned to the top of the document, while the movement of other layers is adjusted according to their depth. The lower a layer sits in the stack, the less distance it is moved.

The rest of the jQuery is concerned with controlling the navigation menus. When the user clicks a navigation button the page scrolls to the top of the associated article. In the event that the user has JavaScript disabled, regular HTML anchor links still allow the page to be navigated, but without any fancy pants animations.

Next steps

I’m sure there are plenty of other approaches to parallax scrolling, and hopefully my experiment provides a starting point for your own explorations of the technique.

Update

I have updated the demo so that each parallax layer is given a fixed, rather than absolute, position. This approach gives a smoother scrolling effect.

Robert Hoekman, Jr is a user experience designer and consultant who is best known for his books about interface design, Designing the Obvious and Designing the Moment. His self-published book Big Deal: On Being Famous to Almost No One tackles a far more personal subject. In Big Deal Hoekman, Jr recounts his rise to the top of the web design field, and describes how his craving for professional notoriety eventually devastated his personal friendships, marriage, and sense of self worth.

The form of celebrity Hoekman Jr discusses in Big Deal has been dubbed “micro-fame”:

My name is Robert Hoekman, Jr, and in certain rooms, under certain circumstances, at certain moments, surrounded by certain people, and when all these very certain things come together, I am a big fucking deal.

In other words, Hoekman, Jr might be unknown to the general public, but within the web design industry he is a bona fide rock star.

From the unique perspective that this notoriety affords, he takes the reader on a whirlwind tour of the conference rooms, hotel bars, book signings, photo opportunities and corporate retreats that consumed his attention as he rose the ranks of his profession. Along the way we rub shoulders with a veritable who’s who of the web industry: Matt Mullenweg, Jeff Veen, Jeffrey Zeldman, Caterina Fake, Luke Wroblewski, to name but a few.

Ultimately Hoekman, Jr’s craving for recognition and approval forces a crisis in his professional and personal life, and he has to face up to the root causes of his obsession with fame, and deal with the fallout.

This makes for fascinating reading, especially for a web design nerd such as myself, but I was left with the nagging feeling that Hoekman, Jr has – perhaps unwittingly – used his book about the pitfalls of fame as a platform to reinforce his cool kid credentials.

The nonstop cataloging of his professional achievements came across at times like bragging, and I wish he had dialed the self promotion back a notch. Even in the book’s later chapters, where he describes a dawning awareness that his obsession with fame is destroying his marriage, the laundry list of book signings and speaking engagements barely slows down. It is as if he wants to remind the reader that even though he no longer cares about being famous, he still is famous.

It is said that that pride comes before a fall, and in Big Deal Hoekman, Jr talks candidly about the flipside of his micro-fame: spiraling self doubt, professional rejection by Apple and Yahoo, isolation from friends, and the collapse of his marriage. It takes guts for a writer to expose their weaknesses so openly, but it feels a little like sitting in on someone else’s therapy session (in a psychotherapy cliché he lays much of the blame for his low self esteem at the feet of his mother). I imagine the process of writing Big Deal was extremely cathartic, but I question whether the experience of reading the book is equally enlightening.

The problem is that Big Deal is all about Hoekman, Jr, and frankly I’m not sure that his personal experiences provide enough material to do the book’s topic justice. If more of Big Deal had been devoted to examining the impact of micro-fame in a broader context – the cult of celebrity engendered by social networking services like Twitter, say – the book might be better rounded, and have a broader appeal.

Despite the reservations I have outlined above, I still found Big Deal very enjoyable. There is no doubt that Hoekman, Jr is a talented writer, and has penned a book that can accurately be described as a page turner. I finished the book in one day, and certainly wasn’t left unsatisfied. Hoekman, Jr paints a very human picture of his life as a web industry A-Lister, and in a field where technical manuals are the norm Big Deal is quite unlike any other web design book I have read.

Big Deal: On Being Famous to Almost No One will be released as an ebook through Amazon and iBooks later this year. Learn more about the book on Robert Hoekman, Jr’s website.

• Better handling of checkbox results in the emailResults method.
• A custom form submit URL can be passed to the FormBuilder constructor. Useful when using FormBuilder in an environment that is performing URL rewriting.
• Replaced deprecated ergei functions with preg_match.
• Checkbox field types are correctly processed when field is not mandatory, and the user didn’t check any of the available options.
• Added new field type: file (for file uploads). Note that files are currently not emailed when using the emailResults method. Any handling of the uploaded files should be accomplished manually by accessing PHP’s $_Files array.
• The textbox and textarea field types now accept an optional defaultvalue parameter.
• Fixed a bug that meant checkboxes had a CSS class of ‘fbheckbox’ instead of ‘fbcheckbox’.

If you encounter any problems with the new version please let me know.

If you created a website that had “Works best with Netscape Navigator” you may be a #design_og
@_j12

If you remember Adobe PageMill, you may be a web design OG. #design_og
@meyerweb

If you’ve ever said that your “site looks better in Netscape Navigator” you may just be a web design OG! #design_og
@hudsonperalta

If you remember cleaning up bad Word-to-HTML markup by hand in a text editor, you might be a web design OG #design_og
@DataG

If u ever designed an interactive CD-ROM you’re a #design_og
@daveixd

If you remember having to make sure that your hex colour codes were “web safe” you might be web design OG #design_og
@stevecomrie

If you used .midi files for audio on your webpage, maybe you are a #design_og
@blueocto

If you’ve ever optimized a website for 14.4, 28.8 and/or 33.6 baud rate modems, you might be a web design OG #design_og
@digitaljhelms

If you still have some old business cards laying around where ur title was Webmistress, you’re a web #design_og (or OL as case may be)
@flynine

If you used 1×1 spacer gifs you may be a web design OG #design_og
@trafnar

If you ever thought while reading @alistapart article, “That’s great, but I’m still supporting IE3,” you might be a #design_og.
@dylanw

And here are my contributions:

If you ever designed a website that was hosted on Geocities, you may be a web design OG #design_og
@f6design

If you ever designed a website for 640×480 resolution, you may be a web design OG #design_og
@f6design

There are still plenty of goodies pouring in, so keep an eye on the meme…