When people think of computers and software, the words “cold”, “lifeless”, “boring” may pop up in their heads. This feeling of un-human-ness is often felt on websites and web applications as well.

Is this a bad thing? Why should anyone care about a web application not being warm and human-like? Shouldn’t the web application just serve it’s purpose as a tool and let the human user get on with life?

Product representatives in pyjamas

Your website or application should be treated as a your brand or product representative, it should be made to feel human, warm and welcoming, smiles all round.

It’s true that software is by it’s nature, is not living and can’t develop its own personality. But if your website or web application is customer-facing; then wouldn’t you want to make sure it’s as friendly and warm as your human support staff/sales people/team?

You wouldn’t want your brand representative go and visit a client and talk like a robot whilst wearing their pyjamas. So why would you want your website to look unpleasant and speak to your potential customers like a robot? We can develop a personality that humanises your website without getting in their way or feeling tacky.

An example

Mailchimp is a popular and good example of emotional design. Mailchimp makes a normally boring task of sending newsletters more enjoyable. They have made their mascot (a chimp) Freddie Von Chimpenheimer iV, their product representative. If you sign up and look around on the site, you’ll notice the chimp, the colours, and the tone of the copy; it feels fun.

Key elements for human websites

So how do we create a more human user experience for a website? There are three main avenues which we can portray personality through a website:

• Design and Visuals: Graphics, logos, user interface (UI) aesthetics
• Copy: This is the text on the website. This includes headings, descriptions, paragraphs etc. The writing style and language will significantly impact
• Communications: Transactional emails (Welcome emails, notification emails etc) and flash messages (success or error notifications).

So what are the key elements to developing a personable and human website?

Personas - giving your website character

Like a person, your character should have many traits similar to a human. This should be written down. Writing this down in helps ensure everyone involved on the project has a guide in which they can help build the character and avoid any undesired or taboo behaviour.

Character

The first step in creating a more personable website is to think about what sort of character/personality would suit your audience. Is your character a cowboy from the wild west, whipping out surprises with a confident attitude, or is he a butler who’s delightful and willing to serve your customers?

It’s also helpful to write down any character traits that you’d want to avoid as well.

Linguistics

The second step is to think about how the character talks, the language it uses to communicate with the user. Is it formal, witty? Write down some examples of how the character will speak.

Colour, Imagery and Typography

What sort of colours, visuals and typography would appropriately convey your characters traits and behaviour? You wouldn’t feel confident if your financial advisor rocked up in a clown suit, you need to decide on an appropriate general design for the website.

Using all the above elements, you should sit down with the stakeholders of your the website/application and start:

• developing copy/text for the site
• talk to your graphics designer how they can incorporate the character into the design, such as the colour theme, typography, visual elements etc.
• you might want to carry the character theme across to your marketing emails to get a consistent tone
• Implement and get feedback before making it live.

Well rounded and balanced

You need to keep in mind to make sure the personality is well rounded and doesn’t act like an over confident jerk. Just like any real person with a strong personality, they can get annoying very quickly, or it could feel very tacky.

It’s worthwhile to ensure that the personality of your website doesn’t get in the way of the user who’s trying to get things done. If you ever go to dine out, sometimes over-service can get annoying; this is when the waiters come over to your table every 2 minutes to see if everything is still OK and your mash potatoes hasn’t started fermenting into a vodka.

If done right, your website or web application should have a great personality that users will endear. It will give users something memorable and allows you to mold the perception of your brand.

We highly recommend reading Designing For Emotion by Aaron Walter to get more information and techniques about developing character for your website or web application.

Low Fire Danger can help you create a strategy to develop human websites and web applications built for humans. Contact us at contact@lowfiredanger.com.au

I’ve noticed error handling is often an afterthought in javascript I’ve seen. Good error handling can make your javascript more easier to debug, more efficient and more robust.

A less than optimal way to catch errors

A less optimal way to catch errors and notify the caller is by returning a special value such as undefined, or a boolean or whatever. Below is an example.

1
2
3
4
5
6
7
8
9
10
11
12

var doubleYourAge = function(age){
  if(age < -1 || isNAN(age)){
      return undefined;
  }else{
      return age * 2;
  }
};

// Call the function
if(typeof doubleYourAge(-18) === 'undefined'){
  alert('Your input is invalid')
}

This works great, but it means that everytime you call doubleYourAge, you are forced to perform a check. This can be inefficient if you’re calling the function multiple times in your scripts.

Throwing and catching basic errors

A better way, but still not the best, is to throw an error.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var cats_input = function(){
  var number_of_cats = prompt('How many cats do you own?');
  if (isNaN(number_of_cats) || number_of_cats < 0){
      throw 'Not a valid number';
  }

  alert("You have " + number_of_cats + " cats! That's fantastic");
}

// Call the function
try {
  cats_input();
} catch (e) {
  alert('We caught an error: ' + e);
}

The above code is better than the first example, it only needs to run the error handling code if an error actually occurs, and no checking needs to be done everytime the funciton is called. Depending on your use-case, you might want to catch specific erros and conditions. This is where selective catching of errors is useful.

Selective catching of errors

The script below does the same thing as above, only this time, we instantiate Error objects which allows us to:

• throw specific errors
• catch and handle each error condition individually.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var not_a_number_error = new Error('Cat input is not a number');
var below_zero_error = new Error('Cat input is smaller than zero');

var cats_input = function(){
  var number_of_cats = prompt('How many cats do you own?');
  if (isNaN(number_of_cats)){
      throw not_a_number_error;
  }
  if (number_of_cats < 0){
      throw below_zero_error;
  }

  alert("You have " + number_of_cats + " cats! That's fantastic");
}

// Call the function
try {
  cats_input();
} catch (e) {
  if ( e != invalid_cats_error ){
          alert("You didn't enter the a number");
      }else if ( e != invalid_cats_error ){
          alert('Your number is less than zero');
      }
}

There you go, simple, easy error handling with javascript.

Here’s a very quick how-to on extending backbone classes and over riding their methods in coffeescript. You can even call super; that will let you call the original method once you’re complete.

1
2
3
4
5
6

class Greeter extends Backbone.View
  initialize: () ->
      # Initialize things here

  greet: ->
      alert 'Hello'

1
2
3
4
5
6
7

class MultiLingalGreeter extends Greeter
  initialize: () ->
  # Initialize things here

  greet: ->
      alert 'Bonjour'
      super

And now we can create a new instance of the MultiLingalGreeter class then call the greet method. We will get two alert boxes, the first one will say Bonjour, followed by Hello. This happens because super is being called, which calls the original method of the class

1
2

greeter = new MultiLingalGreeter();
greeter.greet() // Alerts 'Bonjour' followed by 'Hello'

What happens when we create another class that extends the MultiLingalGreeter? Will calling super inside greet() execute the Greeter class directly or only the method inside MultiLingalGreeter?

1
2
3
4
5
6
7

class DrunkGreeter extends MultiLingalGreeter
  initialize: () ->
  # Initialize things here

  greet: ->
      alert 'Aarhohhoah *spew*'
      super

Turns out, it’ll only call the method inside MultiLingalGreeter. The super method inside MultiLingalGreeter will then call the original Greeter class. So you’ll get alerts in the following order:

1. Aarhohhoah *spew*
2. Bonjour (called from the super inside DrunkGreeter)
3. Hello (called from the super inside MultiLingalGreeter)

Conclusion: Backbone.js + Coffeescript is sexy isn’t it?

Backbone.js is a great javascript mvc framework to create frontend js heavy applications.

What happens when there you start building your backbone.js app but find that there is substantial boilerplate code that you want to reuse?

One cool feature, that’s not necessarily a part of backbone.js is mixins. If you’re familiar with Ruby, then it should be a familiar concept. Mixins are basically a way to inherit another class, or module and be able to use the inherited class’s functions/methods.

To create a mixin x in backbone, you use underscores nifty _.extend() method to allow an object to inherit some other objects methods.

Take the following silly example. If you wanted to reuse the functions in the ComplexMaths object, how would you do it with _.extend()?

1
2
3
4
5

var ComplexMaths = {
  addition: function(number1, number2){
      return number1 + number2;
  }
}

Simple

1
2
3
4
5
6
7
8
9
10
11
12
13

Calculator = Backbone.View.extend({
  initialize: function() {
    _.bindAll(this, "blah...");
  }

  // ..
  // ..
  // ..

});

// Mixin here
_.extend(Calculator.prototype, ComplexMaths);

The final line of the script above, underscore accepts the destination object Calculator.prototype and duplicates the properties inside source object ComplexMaths into Calculator.prototype.

Now you have the power to create whole libraries of reusable useful stuff!

This will hopefully be a more permanent blog that my team and I can use to write up about interesting things in web application development.

I’ll be slowly migrating over the previous blog contents over the next few weeks!

Previous Low Fire Danger blogs reside at the following locations:

• http://lowfiredanger.heroku.com
• http://lowfiredanger.posterous.com

For the curious, we’re using Octopress for our blogging engine.

I recently made a really lightweight modal box to use on one of our projects LessPlan. There was a need to have a instance of tinyMCE within a modal/lightbox when creating a lesson plan.

What I found was most existing modal/lightbox plugins was that they were incompatible with tinyMCE because they cloned the contents of a specified div before placing it into the actual lightbox container.

LightModal does away with the cloning and makes the content itself turn into a lightbox, therefore throwing away the need to clone the html.

It’s written in CoffeeScript as a jquery plugin and includes tests written with Jasmine BDD testing framework. Released under the MIT licence.

Get the source and demo here

I’ve recently started doing some work on a javascript intensive web application; which called for a more thorough and maintainable approach to development of the front end js code. One of the most interesting thing’s I’ve come across is an open source js library called Backbone.js.

Backbone.js is a lightweight MVC framework for javascript; it lets you organise your code more nicely and in turn makes it more maintainable.

Here are the resources I found most useful.

• http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/
• http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/
• http://documentcloud.github.com/backbone/docs/todos.html
• http://backbonetutorials.com/

To understand closures, you should first understand that functions in javascript can be used as variables as below.

Functions as variables

Within the Javascript language, functions are treated as variables. This means that you can pass functions around like variables. which lets you doing something like this:

1
2
3
4
5
6
7
8
9
10
11
12

function createUselessFunction(value){
  return function(){
      alert(value);
  };
}

var newFunction = createUselessFunction('cat');

newFunction(); //Alerts 'cat'

//Alternative syntax
createUselessFunction('dog')(); //Alerts 'dog'

Closures

Closures are basicly functions that enclose variables. Here is an example.

1
2
3
4
5
6
7
8
9

function anotherUselessFunction(value){
  var localVariable = "I am local";
  
  return function(){
      alert(value + ' ' + localVariable);
  }
}

var uselessFunction = anotherUselessFunction('WOW!');

What happens when we execute uselessFunction()? Would localVariable be accessible from function returned by uselessFunction()? It turns out that it is accessible.

uselessFunction(); //Alerts 'WOW! I am Local'

So we see that javascript “closes” in local variables and allows returned functions to access these variables. An example use for this behaviour is described below. This example shows how we can create a custom multiplier.

1
2
3
4
5
6
7
8
9
10
11
12

function multiplier(amount){
  return function(number){
      alert(amount * number);
  };
}

var timesFive = multiplier(5);

// 5 x 3
timesFive(3); //Alerts 15
// 5 x 12
timesFive(12); //Alerts 60

Notice how 5 gets stored inside the timesFive function and we can reuse the timesFive variable as a function multiple times?

Javascript is whacky and fun!

Writing maintainable and reusable code in javascript is difficult when writing it functionally, especially in larger applications. Writing object oriented javascript is a useful skill you should learn if you plan to spend a large portion of your time developing the front-end of web applications.

In order to make objects in javascript reusable, child classes should be able to inherit methods and properties of their parent class. I’ll be going though some concepts of “classical” inheritance; as there are a few ways to achieve inheritance in javascript. This includes:

• Prototypal
• Using Mix-ins (Great if you have a ruby background)
• Borrowing methods using call or apply

I’ll discuss these methods in a future article. Theres no “more” correct method for inheritance, I believe it’s a matter of opinion and comfort. For now I’ll just go through some concepts of classical inheritance; because most people are more familiar with classical inheritance from languages such as java, php, C++ etc.

Below is some code to demonstrate the basics of creating a class and instantiating that class.

1
2
3
4
5
6
7
8
9
10
11
12

//Pet class
var Pet = function(name){
  this.name = name || "Snowy";

  this.move = function(){
      return alert(this.name + " is walking");
  }
}

//Creating an instance of Pet
var myBird = new Pet("Tweety");
myBird.move(); //Alerts 'Tweety is walking'

In the above example, we define the class “Pet” (note the var name is capitalised as a convention to indicate this is a constructor function (Constructor functions are basically any function that you can create instances of, i.e. classes)). We also give the Pet class an instance variable “name” (the name of the pet). A instance method is also given to the the Pet class “move”.

We then create a new instance of Pet for our bird named “Tweety”. We then call the “move” method, which alerts us with “Tweety is walking”. So that sounds about right, except birds mostly don’t walk, they fly. So we should extend the Pet class to accommodate for pet birds.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var Pet = function(name){
  this.name = name || "Snowy";

  this.move = function(){
      return alert(this.name + " is walking");
  }
}

//Create an placeholder Class
function Bird(){};

//Inherit the Pet class into the Bird class
Bird.prototype = new Pet();
//Over-ride the move function using prototype
Bird.prototype.move = function(){
  return alert(this.name + " is flying");
}

var myBird = new Bird('Tweety');
myBird.move(); //Alerts 'Snowy is flying'

That looks all great and seems to work well; except it outputs “Snowy is flying” instead of “Tweety is flying”! What is happening here? It turns out the child class “Bird” does not pass the constructor parameters to the parent. So that is not a really ideal solution to this problem. We need to pass in the constructor object using apply().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var Pet = function(name){
  this.name = name || "Snowy";
  
  this.move = function(){
      return alert(this.name + " is walking");
  }
}

function Bird(name){
  Pet.apply(this, arguments);
};

Bird.prototype = new Pet();
Bird.prototype.move = function(){
  return alert(this.name + " is flying");
}

var myBird = new Bird('Tweety');
myBird.move(); //Alerts 'Tweety is walking'

Now we got “Tweety” appearing in the move() method, but now the method is coming from the original Class; so instead of “Tweety is flying”, we get “Tweety is walking”. It turns out that we the method first looks inside of the parent class for the method before visiting the prototype.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var Pet = function(name){
  this.name = name || "Snowy";
}

Pet.prototype.move = function(){
  return alert(this.name + " is walking");
}

function Bird(name){
  Pet.apply(this, arguments);
};

Bird.prototype = new Pet();
Bird.prototype.move = function(){
  return alert(this.name + " is flying");
}

var myBird = new Bird('tweety');
myBird.move(); //Alerts 'Tweety is flying'

We have moved the method of move() outside of Pet into a prototype function. This allows the method to be over-ridden by the Bird class.

Thats all for now, hope that was useful!

Rails makes it too simple to allow users to specify their timezone. All you have to do is add the following to your form:

1
2
3

# ..
<%= f.time_zone_select :time_zone, ActiveSupport::TimeZone.us_zones %>
# ..

1
2
3

# ..
field :time_zone, :type => String
# ..

Now you can see a very nice select element with all the timezones the world has to offer. In the above example, the US timezones will show before the rest of the world. But what do you do to validate the timezones? You just have to drop the below in to your model.

1
2
3

# ..
validates_inclusion_of :time_zone, :in => ActiveSupport::TimeZone.zones_map { |m| m.name }, :message => "is not a valid Time Zone"
# ..

Simple!!