I have also made public the list of my favorite addons on the Mozilla website.

• Firebug – The best thing for web development, irreplaceable really.
• Feedly – My favorite RSS reader and sharing toolbox. If you don’t use it, give it a go – I am still amazed.
• Readability – Convert the page to a more readable format and save to read later (on other devices as well). Good stuff.
• Firegestures – Execute browser commands using mouse gestures for faster browsing.
• AdBlock Plus – No annoying banners and ads, just content.
• Awesome Screenshot – Capture and Annotate – The name pretty much explains it all.
• HTML Validator – Run HTML / XHTML validation in the browser.
• Firecookie – Nice extension to Firebug dealing with cookies.
• YSlow – Firebug extension by Yahoo team with page loading performance analysis.
• ColorZilla – Color picker, palette generator etc.
• QuickJava – The name is a bit misleading, it provides status bar buttons to easily enable / disable JavaScript, Java, Flash, SilverLight, Images and CSS Styles.
• IE View – Just one click to view the same URL in IE.

Obsolete

Some extensions have become obsolete or I have started using another instead, but that doesn’t mean they are not awesome anymore. :)

• Ubiquity – Task-centric web browsing, awesome stuff, too bad that it’s not in development anymore.
• XMarks – Bookmarks synchronization – not required anymore if you use only Firefox, but can synch across browsers.
• Screengrab! – Save the page as image.

Share your favorite extensions in the comments, and if you like to improve your browsing experience further have a look at my post on Firefox quick searches.

Marc Andreessen on Why Software Is Eating the World - WSJ.com http://t.co/Jhcdmr1 via @feedly

August 20, 2011 21:42 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

Interesting thinking, but I would say that the world is embracing and running on software. Permalink

Paranoia (never hurts?) BBC News - When algorithms control the world http://t.co/4hl2bBj #ia #algorithms #futureisnow

August 23, 2011 13:00 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

A bit more on the same theme… Permalink

The Evolution of the Web: a nice visualization of Web technologies and evolution of browser capabilities - http://t.co/jJlhs1V

September 4, 2011 19:00 via HootSuiteReplyRetweetFavorite

@smashingmag

Smashing Magazine

Beautiful and informative infographic. Permalink

Don't keep calm and carry on. http://t.co/e32mkYb via http://t.co/KoWwSDD

September 5, 2011 22:08 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

Don’t just wait for things to happen. Permalink

I love the expression "infini-surf" in the article - YouTube Founders Aim to Revamp Delicious: http://t.co/LxS8ReG #infinisurf

September 12, 2011 09:38 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

The term “infini-surf” is just awesome. Permalink

RT @tablewhite Attention: Human Trader, You Are No Longer Needed http://t.co/RvAK63P

September 12, 2011 12:33 via feedlyReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

Machines are taking over? (Not yet) Permalink

Scientists use brain imaging to reveal the movies in our mind http://t.co/SHEb4HQ8 #futureisnow

September 26, 2011 09:04 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

Generating images from thoughts. Permalink

Building the largest Chess AI ever (in JavaScript) - Chess@home: http://t.co/Kns73yfn #ai #javascript

September 29, 2011 12:33 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

JavaScript is increasingly becoming first-class language, used to solve “real” problems instead of just web page interaction. Permalink

RT @sivers: Wow. Watch as you shoot into space in one minute: http://t.co/u09C3S2y Best thing I've seen in a long time http://t.co/opwyhqgW

October 9, 2011 08:27 via Twitter for MacReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

Since I don’t think I’ll become a spaceman – YouTube it is. Permalink

on zenhabits: The Single-Changing Method http://t.co/lTQP4qgf

October 17, 2011 22:49 via Tweet ButtonReplyRetweetFavorite

@zen_habits

Leo Babauta

I can say that this is the way to changing things around. Permalink

So then I realized I took engineering as an art : Steve Wozniak - founder Apple Computers http://t.co/y2cgJCLd #inovator #engineer #art

October 20, 2011 21:18 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

You said it Woz. Permalink

It turns out that IE7 doesn’t support the forEach construct, and in while rewriting it, I noticed how the code becomes so much uglier and less readable, which led me to think about the programming language evolution.

Here’s an excerpt for comparison:

// in case you're wandering:
// GOOD
_.neighbours.forEach(function (neighbour) {
	sum += +neighbour.alive;
});

// BAD
for (var i = 0; i < _.neighbours.length; i++) {
	sum += +_.neighbours[i].alive;
}

Sometimes, the way the syntax is changing can lead to huge improvements in coding and readability. One great example is JavaScript’s forEach.

Now, while this might not seem like a big difference, I think it’s HUGE.

Not only we need to introduce a variable to iterate, but we also need to access the array itself. This takes the focus away from the primary concern, which is the current element that we want to work with.

I prefer to just work with the current member of the array instead of focusing on _.neighbours in the loop.

Now consider the following more complicated example:

_.cells.forEach(function (row, i) {
	row.forEach(function (cell, j) {
		neighboursY = neighbourIndexes(j);
		neighbourIndexes(i).forEach(function (x) {
			neighboursY.forEach(function (y) {
				cell.neighbours.push(_.cells[x][y]); // check this
			});
		});
	});
});

for (i = 0; i < size; i++) {
	for (j = 0; j < size; j++) {
		indexesX = neighbourIndexes(i);
		indexesY = neighbourIndexes(j);
		for (k = 0; k < indexesX.length; k++) {
			for (l = 0; l < indexesY.length; l++) {
				_.cells[i][j].neighbours.push(_.cells[indexesX[k]][indexesY[l]]); // against this
			}
		}
	}
}

Do you see the difference? In the second excerpt, I feel like I can’t see the tree from the forest. :)

Another great thing is that the syntax enables the easy refactorization, just take out the function, whereas you would have to rewrite the code.

All this points to me that the evolution of programming languages is a very good thing in the means of the way we see and work with the code.

Conway’s Game Of Life

In short, it’s a cellular automaton, which means that it’s a matrix of cells where they live or die based on the surroundings to produce the next generation.

The state of each cell for the next generation is based on simple rules – three surrounding cells bring life, two cells will maintain the current state, and any other number of surrounding cells will result in death.

Here is an example when there will be one more living cell (green) in the next generation. Since all others have two living neighbors, they will remain alive as well. It will stagnate after that – no new ones alive, no deaths.

This one will result in just one living cell in the second generation, and there will be none after that.

There are also some specific configurations, such as oscillators, for example this one.

Here’s an image where each cell is marked with the number of surrounding cells alive, so it might be easier to grok.

I hope this gives you an idea… Have a look at Wikipedia for more detailed information. But let’s move on.

The code

But the code was the true problem, so I decided to redesign it, just for the fun of it, and I thought it could be interesting to share this – the demos, a bit about the code and the redesign process.

The demos basically do the same thing, and the new one is not much to look at (visually), but this article is about the code redesign process and decisions involved. There will be a new article soon on the subject of visual redesign, so keep a lookout.

View the initial demo

View the new demo

The old

Here’s the full source code of the old version if you like to have a look, but I’ll overview it piece by piece, so you don’t need to remember anything…

function Cell(i, j) {
	this.Alive = false;
	var el;
	var x = j;
	var y = i;
	var id = "cell"+ i.toString() + j.toString();
	this.Live = function() {
		this.Alive = true;
		el.className = el.className.replace("false", "true");
	}
	this.Die = function() {
		this.Alive = false;
		el.className = el.className.replace("true", "false");
	}
	this.ChangeState = function () {
		var tmp = this.Alive.toString()
		this.Alive = ! this.Alive;
		el.className = el.className.replace(tmp, this.Alive.toString());
	}
	this.Red = function(OnOff) {
		el.className = (OnOff) ? el.className+= " red" : el.className.replace(" red", "");
	}
	this.Green = function(OnOff) {
		el.className = (OnOff) ? el.className+= " green" : el.className.replace(" green", "");
	}
	this.Element = function (parent) {
		el = document.createElement("div");
		el.onclick = function()
		{
			parent.ChangeCellState(x, y);
		}
		el.id = id;
		el.className = "cell "+ this.Alive.toString();
		return el;
	}
}
function GameOfLife(Size, HTMLElementId) {
	var Size = Size;
	var Cells = new Array(Size);
	var Next = new Array(Size);
	var id = HTMLElementId;
	var i, j;
	var el = document.getElementById(id);
	el.style.width = (5*Size) + "px";
	for(i=0; i<Size; i++) {
		Cells[i] = new Array(Size);
		Next[i] = new Array(Size);
		for(j=0; j<Size; j++) {
			Cells[i][j] = new Cell(i, j);
			el.appendChild( Cells[i][j].Element(this) );
		}
	}
	this.ChangeCellState = function(x, y) {
		Cells[y][x].ChangeState();
	}
	this.RandomStart = function() {
		var OneOrZero = 0;
		var i, j;
		for(i=0; i<Size; i++) {
			for(j=0; j<Size; j++) {
				OneOrZero = Math.round(Math.round(Math.random() * 2)/2);
				if (OneOrZero) Cells[i][j].ChangeState();
			}
		}
	}
	this.NextStep = function () {
		var i, j;
		for(i=0; i<Size; i++) {
			for(j=0; j<Size; j++) {
				var neighboursAlive = NeighboursAlive(i, j);
				switch ( neighboursAlive ) {
					case 3 : {
						Next[i][j] = true;
						break;
					}
					case 2 : {
						Next[i][j] = (Cells[i][j].Alive) ? true : false;
						break;
					}
					default : {
						Next[i][j] = false;
					}
				}
			}
		}
		for(i=0; i<Size; i++)
			for(j=0; j<Size; j++)
				(Next[i][j]) ? Cells[i][j].Live() : Cells[i][j].Die();
	}
	function NeighboursAlive(y, x) {
		var horizontal = new Array( (x<=0) ? Size-1 : x-1, x , (x>=Size-1) ? 0 : x+1 );
		var vertical = new Array( (y<=0) ? Size-1 : y-1, y, (y>=Size-1) ? 0 : y+1 );
		var sum = 0;
		var i, j;
		for (i=0; i<3; i++)
			for (j=0; j<3; j++)
				if( vertical[i]!=y || horizontal[j]!=x ) sum += (Cells[ vertical[i] ][ horizontal[j] ].Alive) ? 1 : 0;
		return sum;
	}
	var playerId;
	var playing = false;
	this.Play = function (name) {
		if (!playing) {
			this.NextStep();
			playerId = setInterval( name +".NextStep()", 100);
			playing = true;
		}
	}
	this.Stop = function () {
		if (playing) clearInterval(playerId);
		playing = false;
	}
}

It’s old school, no selectors, direct HTML elements injection and so on. Looks fine. But not the code.

Redesign

Ok, let’s start with the first entity, the cell. Here we go…

Cell class

Here is the original Cell class source code.

function Cell(i, j) {
	this.Alive = false;
	var el;
	var x = j;
	var y = i;
	var id = "cell"+ i.toString() + j.toString();
	this.Live = function() {
		this.Alive = true;
		el.className = el.className.replace("false", "true");
	}
	this.Die = function() {
		this.Alive = false;
		el.className = el.className.replace("true", "false");
	}
	this.ChangeState = function () {
		var tmp = this.Alive.toString()
		this.Alive = ! this.Alive;
		el.className = el.className.replace(tmp, this.Alive.toString());
	}
	this.Red = function(OnOff) {
		el.className = (OnOff) ? el.className+= " red" : el.className.replace(" red", "");
	}
	this.Green = function(OnOff) {
		el.className = (OnOff) ? el.className+= " green" : el.className.replace(" green", "");
	}
	this.Element = function (parent) {
		el = document.createElement("div");
		el.onclick = function()
		{
			parent.ChangeCellState(x, y);
		}
		el.id = id;
		el.className = "cell "+ this.Alive.toString();
		return el;
	}
}

The first thing that bothered me is that the Cell has a constructor with coordinates. The only place where the Cell uses the coordinate is to let the parent know of the state change, but this is closely related to the next eyesore.

The Cell knows about the Element that displays it and furthermore – operates on it, creating the representation and collecting events. While this can be regarded as convenient, it breaks the single responsibility principle, since we have a logical Cell model, but also it’s dealing with HTML. This means that it’s tightly coupled with representation.

So here’s the redesign.

gameOfLife.cell = function() {
	return {
		alive : false,
		live : function() { this.alive = true; },
		die : function() { this.alive = false; },
		touch : function () { this.alive = ! this.alive; }
	};
};

Much better, right? :)

GameOfLife class

How about the GameOfLife class…

function GameOfLife(Size, HTMLElementId) {
	var Size = Size;
	var Cells = new Array(Size);
	var Next = new Array(Size);
	var id = HTMLElementId;
	var i, j;
	var el = document.getElementById(id);
	el.style.width = (5*Size) + "px";
	for(i=0; i<Size; i++) {
		Cells[i] = new Array(Size);
		Next[i] = new Array(Size);
		for(j=0; j<Size; j++) {
			Cells[i][j] = new Cell(i, j);
			el.appendChild( Cells[i][j].Element(this) );
		}
	}
	this.ChangeCellState = function(x, y) {
		Cells[y][x].ChangeState();
	}
	this.RandomStart = function() {
		var OneOrZero = 0;
		var i, j;
		for(i=0; i<Size; i++) {
			for(j=0; j<Size; j++) {
				OneOrZero = Math.round(Math.round(Math.random() * 2)/2);
				if (OneOrZero) Cells[i][j].ChangeState();
			}
		}
	}
	this.NextStep = function () {
		var i, j;
		for(i=0; i<Size; i++) {
			for(j=0; j<Size; j++) {
				var neighboursAlive = NeighboursAlive(i, j);
				switch ( neighboursAlive ) {
					case 3 : {
						Next[i][j] = true;
						break;
					}
					case 2 : {
						Next[i][j] = (Cells[i][j].Alive) ? true : false;
						break;
					}
					default : {
						Next[i][j] = false;
					}
				}
			}
		}
		for(i=0; i<Size; i++)
			for(j=0; j<Size; j++)
				(Next[i][j]) ? Cells[i][j].Live() : Cells[i][j].Die();
	}
	function NeighboursAlive(y, x) {
		var horizontal = new Array( (x<=0) ? Size-1 : x-1, x , (x>=Size-1) ? 0 : x+1 );
		var vertical = new Array( (y<=0) ? Size-1 : y-1, y, (y>=Size-1) ? 0 : y+1 );
		var sum = 0;
		var i, j;
		for (i=0; i<3; i++)
			for (j=0; j<3; j++)
				if( vertical[i]!=y || horizontal[j]!=x ) sum += (Cells[ vertical[i] ][ horizontal[j] ].Alive) ? 1 : 0;
		return sum;
	}
	var playerId;
	var playing = false;
	this.Play = function (name) {
		if (!playing) {
			this.NextStep();
			playerId = setInterval( name +".NextStep()", 100);
			playing = true;
		}
	}
	this.Stop = function () {
		if (playing) clearInterval(playerId);
		playing = false;
	}
}

So the GameOfLife class has really a lot of things going on, let’s have a look at all the things it does.

1. Has the Cells (the current generation) and Next matrix (the next generation of cells),
2. sets up both
3. changes the state of each cell
4. finds the neighbors of a cell
5. calculates the the next generation
6. randomly sets up the Cells matrix
7. plays and stops itself.

Whew.

Again, coupling with representation?! Seems that I really LOVED doing that back then…

Aside from that, I don’t like how it has the Play and Stop methods, I don’t think this belongs to this class, so I will extract it to a player a bit later. So here’s the redesign.

gameOfLife.game = function(size) {
	var next = new Array(size);
	var iterations = 0;
	function neighboursAlive(x, y) {
		var horizontalIndexes = getNeighbourIndexes(x);
		var verticalIndexes = getNeighbourIndexes(y);
		var sum = 0;
		for (var i = 0; i < 3; i++) {
			for (var j = 0; j < 3; j++) {
				if (verticalIndexes[i]!=y || horizontalIndexes[j]!=x) sum += (_.cells[horizontalIndexes[i]][verticalIndexes[j]].alive) ? 1 : 0;
			}
		}
		return sum;
	};
	function getNeighbourIndexes(x) {
		return new Array( (x = size - 1) ? 0 : x + 1 );
	};
	var _ = {
		size : size,
		cells : new Array(size),
		liveRule : 3,
		noChangeRule : 2,
		touch : function(x, y) {
			cells[x][y].touch();
		},
		nextStep : function () {
			var i, j;
			for(i=0; i < size; i++) {
				for(j=0; j < size; j++) {
					var aliveInTheHood = neighboursAlive(i, j);
					switch (aliveInTheHood) {
						case _.liveRule : { next[i][j] = true; break; }
						case _.noChangeRule : {
							next[i][j] = (_.cells[i][j].alive) ? true : false;
							break;
						}
						default : {
							next[i][j] = false;
						}
					}
				}
			}
			for(i=0; i < _.size; i++)
				for(j=0; j < _.size; j++)
					(next[i][j]) ? _.cells[i][j].live() : _.cells[i][j].die();
		}
	};
	for(var i = 0; i < size; i++) {
		_.cells[i] = new Array(size);
		next[i] = new Array(size);
		for(var j = 0; j < size; j++)
			_.cells[i][j] = new gameOfLife.cell();
	};
	return _;
};

While I would say that this is much better, after some thought I still didn’t like it.

First of all, I don’t like all this running around the matrix checking states, calculating next state. Looks too convoluted.

Round two

Cell

I have decided to move all the functionality that deals with the state of cells from the game to the cell class itself.

gameOfLife.cell = function () {
	"use strict";
	var future, _;
	_ = {
		alive : false,
		touch : function () { _.alive = !_.alive; },
		neighbours : [],
		neighboursAlive : function () {
			var sum = 0;
			_.neighbours.forEach(function (neighbour) {
				sum += +neighbour.alive;
			});
			return sum;
		},
		progress : function () {
			if (future === undefined) {
				_.futureIsBright();
			}
			_.alive = future;
			future = undefined;
		},
		futureIsBright : function () {
			if (future === undefined) {
				var neighboursAlive = _.neighboursAlive();
				future = neighboursAlive === gameOfLife.cell.neighboursToLive || (_.alive && neighboursAlive === gameOfLife.cell.neighboursToStagnate);
			}
			return future;
		}
	};
	return _;
};
gameOfLife.cell.neighboursToLive = 3;
gameOfLife.cell.neighboursToStagnate = 2;

So while the cell class now is nowhere clean as in the first round, it looks better.

The cell is now aware of its neighbors, talks to them, can see into the future and progress. :)

The neighbor’s changes awareness is possible due to the fact that the objects are passed by reference in JavaScript, so all changes that happen to neighbors will be visible because only the references are held, not the actual values.

Additionally, the game rules are now extracted to static variables on cell object.

To accommodate these changes, the game object has to change also, so the new version is below.

Game

gameOfLife.game = function (size) {
	"use strict";
	var _, i, j;
	_ = {
		cells : [],
		touch : function (x, y) {
			_.cells[x][y].touch();
		},
		progress : function () {
			_.cells.forEach(function (row) {
				row.forEach(function (cell) {
					cell.futureIsBright();
				});
			});
			_.cells.forEach(function (row) {
				row.forEach(function (cell) {
					cell.progress();
				});
			});
		}
	};
	function correctIndex(x) {
		return (x < 0) ? size - 1 : ((x > size - 1) ? 0 : x);
	}
	function neighbourIndexes(x) {
		return [correctIndex(x - 1), x, correctIndex(x + 1)];
	}
	for (i = 0; i < size; i++) {
		_.cells[i] = [];
		for (j = 0; j < size; j++) {
			_.cells[i][j] = new gameOfLife.cell();
		}
	}
	_.cells.forEach(function (row, i) {
		row.forEach(function (cell, j) {
			neighbourIndexes(i).forEach(function (x) {
				neighbourIndexes(j).forEach(function (y) {
					cell.neighbours.push(_.cells[x][y]);
				});
			});
			cell.neighbours.splice(4, 1);
		});
	});
	return _;
};

The game now has only the cell matrix setup role and the access point to progress to next generation. Much better.

I played with the idea of using recursion to propagate setting the future state on all cells instead of running two loops in the propagate method, but I easily ran into an stack overflow, so sticking with the less elegant but practical solution.

Player

As I said before, I didn’t like how the game had play and stop methods, so the logic to run the game is now moved to the player object.

gameOfLife.player = function (game, screens) {
	"use strict";
	var i, playerId, refreshScreens, _;
	for (i = 0; i < screens.length; i++) {
		screens[i].setup(game);
	}
	refreshScreens = function () {
		var i;
		for (i = 0; i < screens.length; i++) {
			screens[i].refresh();
		}
	};
	_ = {
		speed : 100,
		play : function () {
			playerId = window.setInterval(_.step, _.speed);
		},
		on : function () {
			refreshScreens();
		},
		step : function () {
			game.progress();
			refreshScreens();
		},
		stop : function () {
			if (playerId) {
				window.clearInterval(playerId);
			}
		}
	};
	return _;
};

Simple stuff, allowing better modularity.

Screen

This is the concept that will enable different visual representations of the game. But it’s pretty simple for now.

gameOfLife.simpleScreen = function () {
	"use strict";
	var game, el;
	return {
		setup : function (game1, elementId) {
			game = game1;
			el = document.getElementById(elementId === undefined ? 'simpleRenderer' : elementId);
		},
		refresh : function () {
			var i, j, html;
			html = '';
			for (i = 0; i < game.cells.length; i++) {
				for (j = 0; j < game.cells[i].length; j++) {
					html = html.concat(game.cells[i][j].alive ? '&diams;' : '.');
				}
				html = html.concat('<br/>');
			}
			el.innerHTML = html;
		}
	};
};

Random start

You may wander where did the random start method go. Since it doesn’t have anything to do with the game, but is just a fancy feature, I have extracted it to a separate function.

gameOfLife.randomize = function(game) {
	var i, j;
	for(i = 0; i < game.cells.length; i++) {
		for(j = 0; j < game.cells.length; j++) {
			if (Math.round(Math.round(Math.random() * 2) / 2))
				game.cells[i][j].touch();
		}
	}
};

Done

At the end of this exercise I am pretty much satisfied with the outcome.

The redesign ended up looking like MVC pattern, where the model domain consists of cell and game classes, the player class is the controller, and the screen class is the view.

Here’s the demo, the tools and full code if you’re interested to have a look. In the next article I’ll work on the visual representation of the game, and I think it will be pretty interesting.

window.gameOfLife = {};
gameOfLife.cell = function () {
	"use strict";
	var future, askNeighboursFuture, _;
	askNeighboursFuture = function () {
		_.neighbours.forEach(function (neighbour) {
			neighbour.futureIsBright();
		});
	};
	_ = {
		alive : false,
		touch : function () { _.alive = !_.alive; },
		neighbours : [],
		neighboursAlive : function () {
			var sum = 0;
			_.neighbours.forEach(function (neighbour) {
				sum += +neighbour.alive;
			});
			return sum;
		},
		progress : function () {
			if (future === undefined) {
				_.futureIsBright();
			}
			_.alive = future;
			future = undefined;
		},
		futureIsBright : function () {
			if (future === undefined) {
				var neighboursAlive = _.neighboursAlive();
				future = neighboursAlive === gameOfLife.cell.neighboursToLive || (_.alive && neighboursAlive === gameOfLife.cell.neighboursToStagnate);
				askNeighboursFuture();
			}
			return future;
		}
	};
	return _;
};
gameOfLife.cell.neighboursToLive = 3;
gameOfLife.cell.neighboursToStagnate = 2;
gameOfLife.game = function (size) {
	"use strict";
	var _, i, j;
	_ = {
		cells : [],
		touch : function (x, y) {
			_.cells[x][y].touch();
		},
		progress : function () {
			_.cells.forEach(function (row) {
				row.forEach(function (cell) {
					cell.progress();
				});
			});
		}
	};
	function neighbourIndexes(x) {
		return [correctIndex(x - 1), x, correctIndex(x + 1)];
	}
	function correctIndex(x) {
		return (x < 0) ? size - 1 : ((x > size - 1) ? 0 : x);
	};
	for (i = 0; i < size; i++) {
		_.cells[i] = [];
		for (j = 0; j < size; j++) {
			_.cells[i][j] = new gameOfLife.cell();
		}
	}
	_.cells.forEach(function (row, i) {
		row.forEach(function (cell, j) {
			neighbourIndexes(i).forEach(function (x) {
				neighbourIndexes(j).forEach(function (y) {
					cell.neighbours.push(_.cells[x][y]);
				});
			});
			cell.neighbours.splice(4, 1);
		});
	});
	return _;
};
gameOfLife.randomize = function (game) {
	"use strict";
	var i, j;
	for (i = 0; i < game.cells.length; i++) {
		for (j = 0; j < game.cells.length; j++) {
			game.cells[i][j].alive = (Math.random() > 0.5);
		}
	}
};
gameOfLife.player = function (game, screens) {
	"use strict";
	var i, playerId, refreshScreens, _;
	for (i = 0; i < screens.length; i++) {
		screens[i].setup(game);
	}
	refreshScreens = function () {
		var i;
		for (i = 0; i < screens.length; i++) {
			screens[i].refresh();
		}
	};
	_ = {
		speed : 100,
		play : function () {
			playerId = window.setInterval(_.step, _.speed);
		},
		on : function () {
			refreshScreens();
		},
		step : function () {
			game.progress();
			refreshScreens();
		},
		stop : function () {
			if (playerId) {
				window.clearInterval(playerId);
			}
		}
	};
	return _;
};
gameOfLife.touchScreen = function () {
	"use strict";
	var game, el;
	var _ = {
		setup : function (game1, elementId) {
			var i, j, dot;
			game = game1;
			el = document.getElementById(elementId === undefined ? 'simpleRenderer' : elementId);
			for (i = 0; i < game.cells.length; i++) {
				for (j = 0; j < game.cells[i].length; j++) {
					dot = document.createElement('a');
					dot.addEventListener('click', _.touch(i, j), false);
					el.appendChild(dot);
					dot = null;
				}
				el.appendChild(document.createElement('br'));
			}
		},
		refresh : function () {
			var i, j, dots, dot;
			dots = el.getElementsByTagName('a');
			for (i = 0; i < game.cells.length; i++) {
				for (j = 0; j < game.cells[i].length; j++) {
					dot = dots[j + i * game.cells.length];
					dot.className = (game.cells[i][j].alive) ? 'cell alive' : 'cell dead';
				}
			}
		},
		touch : function(x, y) {
			return function() { game.touch(x, y); _.refresh(); };
		}
	};
	return _;
};
gameOfLife.simpleScreen = function () {
	"use strict";
	var game, el;
	return {
		setup : function (game1, elementId) {
			game = game1;
			el = document.getElementById(elementId === undefined ? 'simpleRenderer' : elementId);
		},
		refresh : function () {
			var i, j, html;
			html = '';
			for (i = 0; i < game.cells.length; i++) {
				for (j = 0; j < game.cells[i].length; j++) {
					html = html.concat(game.cells[i][j].alive ? '&diams;' : '.');
				}
				html = html.concat('<br/>');
			}
			el.innerHTML = html;
		}
	};
};
function run() {
	gameOfLife.spaceship = new gameOfLife.game(30);
	gameOfLife.spaceship.cells[0][2].alive = true;
	gameOfLife.spaceship.cells[1][3].alive = true;
	gameOfLife.spaceship.cells[2][1].alive = true;
	gameOfLife.spaceship.cells[2][2].alive = true;
	gameOfLife.spaceship.cells[2][3].alive = true;
	gameOfLife.station = new gameOfLife.player(gameOfLife.spaceship, [new gameOfLife.touchScreen()]);
	gameOfLife.station.on();
}

View the new demo

The tools I have used:

• JSLint, The JavaScript Code Quality Tool
• QUnit, An easy-to-use JavaScript Unit Testing framework

Daily Idioms: "information parkour", "lean logic", "Placebook", "Bitizen Configurator"

July 27, 2011 17:55 via Tweetie for MacReplyRetweetFavorite

@nicolasnova

nicolasnova

Nice tool to do a quick test how a site performs on different resolutions.

Nice #tool: Screenfly by QuirkTools — #Test Your Website at Different #Screen #Resolutions http://t.co/EqO3Uwp #webdevelopment

July 26, 2011 21:07 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

Ahh, the dreams of becoming an astronaut… Great photos.

Photos in the Space Project are really something. http://t.co/sWuYg9T Overview here: http://t.co/didDtD6 #space #photos

July 26, 2011 09:51 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

Extraordinary to see this kind of robot behavior.

Swarming Quadrotor Landing Pad http://feedly.com/k/nDeY5w #robots #futureisnow

August 2, 2011 12:44 via feedlyReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

Cool project, something I just HAVE TO play around with.

"@github_csharp: JSIL - MSIL to Javascript Compiler http://t.co/j6RpU5W" looks very interesting!

July 31, 2011 10:56 via Twitter for AndroidReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

Sometimes it’s worthy to just look at the world around. Great photo and message.

The world for a while -http://t.co/6ykVt2O #lifeisgood #photos #smile

August 5, 2011 08:50 via webReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

At first it was surprising to see how is minority dictating the majority opinion, but when I consider that the minority “holds an unshakable belief”, not really.

Minority rules: Scientists discover tipping point for the spread of ideas http://t.co/nMNcEA6 (10% minority actually) #ideas #ideaadaptation

August 12, 2011 14:59 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

I hope this will help me remember the milk. :)

Smart skin: Electronics that stick and stretch like a temporary tattoo (w/ video) http://t.co/gnM7gii via @feedly #futureisnow

August 12, 2011 09:15 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

Dropbox

To keep files synchronized on all the devices.

KeePassDroid

I stick to the policy of having a password for each service. Which means I don’t know half by heart – this is a great app to keep up.

Google Translate

My native language is Serbian, I work on English, and live in Vienna where people speak German. So translation is … hm what was that word… ;)

Springpad

Notes, bookmarks – organizer that stays in synch, works offline too. There’s a web app that is more convenient when at the computer.

Google Docs

Office online. ’nuff said.

AndFtp

Great little FTP client to do things on the move.

Feedly

To keep up with the information overload ;) – phenomenal RSS reader, works with Google reader.

Shush! Ringer Restorer

I never remember to turn the ringer back on when I put my phone to silent. This one fixes that. :)

Only for specific cases. RT An interesting Data URIs/CSS technique: Inline Images with Data URLs - http://t.co/U6uR6vP @smashingmag

July 17, 2011 13:31 via webReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

Interesting video on data visualization.

Interesting stuff... Numbers, Words and Colors | MIT World http://t.co/Yxvp2l0 #video #visualization #infographics

July 13, 2011 13:52 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

Please take note and use in case of stress. :)

Simply wonderful. The magic button — Make Everything OK http://t.co/xVINvGk #ifeelbetter #everythingisok

July 13, 2011 20:56 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

So here are some links and posts I enjoyed for the previous week (4. July 2011 – 11. July 2011).

JavascriptTips - jslibs - JavaScript language advanced tips and tricks - http://t.co/aRGGGh5 #javascript #webdevelopment

July 11, 2011 09:28 via Tweet ButtonReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

http://code.google.com/p/jslibs/wiki/JavascriptTips

At 10:05a.m. EDT, space shuttle Atlantis began the nine-minute Rendezvous Pitch Maneuver, or “backflip.” - live at http://t.co/0FTPto2

July 10, 2011 15:06 via webReplyRetweetFavorite

@NASA

NASA

There was the live video feed of the last shuttle flight that I watched on my Android Samsung Galaxy S.

Collecting all the shims, fallbacks, and polyfills to implant html5 to browsers with no support. http://t.co/k6Ptr9t #html5 #browsers

July 7, 2011 10:40 via webReplyRetweetFavorite

@bojanbjelic

Bojan Bjelic

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

"What would you do if you weren’t afraid?"

July 5, 2011 08:14 via webReplyRetweetFavorite

@shanselman

Scott Hanselman

This is a question everyone should ask themselves.

The integration with phpBB was a critical point of development, and the end product fully exploits this.

The content is on German, check it out.

Here are possible patterns, just to make it clear:

• Multiple checkboxes to pick the values for the same purpose.
  • Select columns to show in the table
  • Select post categories
• User can add as much values as he/she likes.
  • Add new tag
  • Add language
• User can remove multiple items from a list.
  • Remove items from shopping cart

This can be handled by passing many values in one parameter with a common delimiter, or by passing multiple values as the same parameter. Here are examples with the GET method, for the POST it works the same.

Passing many values in one parameter looks like this:

http://www.bjelic.net/example?param=1,2,3,5

Passing many values as the same parameter:

http://www.bjelic.net/example?param=1&param=2&param=3&param=5

Many people don’t know about this, but this is a common feature for a long time, I’ve been using it where applicable since the 90′s.

Even if the latter looks more verbose, there is a good reason I prefer it. When used in forms, the former would require the use of JavaScript to collect the values. The latter works out of the box.

Now there is even a better reason if you are using ASP.NET MVC, and that is that such parameters will be passed as a List.

public string Save(List<string> languages)

And for numeric values, something like this.

public string Remove(List<int> ids)

If in this case there is a id that can’t be cast to a integer, the route won’t be found resulting in 404 – which completely makes sense since it looks for an “Remove” action method that would accept a list of strings.

A big advantage of this is that there is no need to parse the input values, as they will be conveniently cast and assigned. Also, this enables having input models that have a list of values.