2013 in review

The WordPress.com stats helper monkeys prepared a 2013 annual report for this blog.

Here’s an excerpt:

Madison Square Garden can seat 20,000 people for a concert. This blog was viewed about 61,000 times in 2013. If it were a concert at Madison Square Garden, it would take about 3 sold-out performances for that many people to see it.

Click here to see the complete report.

Advertisements
Great Little Computer!

A simple HTML5 Game tutorial – Part 3

Following on from Part 2 we have put in place the foundation of our game and have some ‘bad guys’ moving in a menacing manner.  We are close to having a game: if we could just shot the ‘bad guys’.  Reminding ourselves of the goals set out in Part 1 we need to achieve the following: Continue reading “A simple HTML5 Game tutorial – Part 3”

Keyboard with historical game keys in orange

A simple HTML5 Game tutorial – Part 2

Following on from Part 1 we have put in place the foundation of our game.  But, we can’t really call it a game as we have no interaction. Reminder ourselves of the goal set out in Part 1 we need to achieve the following:

In you want to have a peek at the result of following this post click here.

Continue reading “A simple HTML5 Game tutorial – Part 2”

A simple HTML5 Game tutorial – Part 1

I’ve always wanted to create a game. It seems the older I get the closer I get. This post is the first in a small series which walks you through the steps I followed to create a simple game. Here is a taster of the end result:

A simple game create using HTML's canvas and JavaScript
Screenshot of HTML5 game

Continue reading “A simple HTML5 Game tutorial – Part 1”

CSS3 animated social cube mash-up

Several brilliant examples of CSS3 animations have caught my eye recently. There are some clever people out there producing cutting-edge examples rich with beautiful animations. I thought I’d mix a few ideas together to produce a 3D spinning globe using CSS3 and JQuery. The final result is here and a screen shot follows:

Cube spinning using  CSS3 technology

Continue reading “CSS3 animated social cube mash-up”

CSS3 cork board with sticky notes!

CSS is rather useful these days.  With the web getting more visual each day CSS3 is taking a central role in visualizing data.  Within this post one covers the basics to create a  This could be used to display your facebook friends, latest tweets or a virtual to-do list. Lets’s start with a screen-shot of the finish product:

css3-message-board-with-sticky-notes

Continue reading “CSS3 cork board with sticky notes!”

JavaScript the hoisting effect

JavaScript is one of the most talked about programming languages of the day. Being the language of the browser any modern programmer, developer or web designer cannot avoid it. It’s even sneaking onto our servers with courtesy of the node.js project. If you’re new to JavaScript there are a few ‘features’ that may trip you up, especially if you have been using a class based language. Take the following example in Java:

	public static void main(String[] args) {
		
		List<String> list = null;
		
		if((list = coloursInImage(img1)) != null) {
			
			int iNoOfColours = 0;
			
			iNoOfColours += list.size();
			System.out.println(iNoOfColours);
			
		}
		
		if((list = coloursInImage(img2)) != null) {
			
			int iNoOfColours = 0;
			
			iNoOfColours += list.size();
			System.out.println(iNoOfColours);
		}
	}

In Java the variable iNoOfColours will hold the size of the list as returned by the method ‘coloursInImage’. So if img1 has 8 colours and img2 two has 256 colours we’d see those numbers printed to the output window.

Let’s look at the JavaScript equivalent:

	var list = null,
		img1, img2;

	if((list = coloursInImage(img1)) !== null) {

		var iNoOfColours = Number();
		
		iNoOfColours += list.length;
		console.log(iNoOfColours);

	}

	if((list = coloursInImage(img2)) !== null) {

		var iNoOfColours;
		
		iNoOfColours +=	list.length;
		console.log(iNoOfColours);
	}

In JavaScript the variable iNoOfColours will hold the size of the array as returned by the method ‘coloursInImage’. So if img1 has 8 colours and img2 two has 256 colours we’d expect to see those numbers printed to the output window. However, we actually get 8 and 264. This is because of the hoisting effect – specifically how JavaScript works when handling declaration statements (var). Regardless of where a variable is declared, its declaration is hoisted to the top. The key here is to understand the declaration and initialization steps are treated separately and only the declaration will be hoisted. In our example, the first declaration also initialises the variable to 0. We then simply increment the variable’s value (zero) by the length of the array; thus, when repeating this within the second if-statement we end up summing the two. This is because the second declaration of the variable has been hoisted. The effect of which is that the expected scope does not mirror that we’d expect in Java. Something to watch out for!

Overview of the Master Boot Record

One of the most important parts of the computer is the Master Boot Record (MBR).  This little known hero is responsible for starting our operating systems – without it your Windows or Linux operating systems would not start.  In this post one will attempt to explain how the Master Boot Record is structured and how it works.  The post is an education for me, as what I’m about to write has been freshly researched due to my odd impulse to give the MBR its five minutes of glory. Continue reading “Overview of the Master Boot Record”

JavaScript Design Pattern – Singleton Pattern

The singleton pattern is a design pattern which restricts the creation of an object to the same instance. In practical terms this means the variable defined below would be looking at the same object instance:

var object1 = new Car(),
object2 = new Car();

object2.colour = 'red';

The example above changes the colour property of object2. With the singleton pattern object1 is the same object, thus, the colour property of object1 also reflects the change. The pattern is useful when there is a need to coordinate the logic across decoupled and thus distinctly separate areas of code while maintaining access to a shared and consistent central object. Let’s look at an implementation of a singleton pattern:

function Game() {
    
    // the cached instance 
    var instance;
    
    // rewrite the constructor
    Game = function Game() {
        return instance;
    };

    // carry over the prototype 
    Game.prototype = this;

    // store the instance 
    instance = new Game();

    // reset constructor pointer 
    instance.constructor = Game;

    // default properties
    instance.lives = 3;
    instance.score = 0;

    return instance;
}

This code above creates an object called “Game”. To make sure the object is a singleton the constructor is rewritten during the object’s first invocation. This rewrite means any subsequent instances of the object simply returns the value of the instance variable. The instance variable within the object is set during the initial creation of the object prior to the new constructor being applied. Two properties are created after the line that rewrites the constructor; to repeat the above for clarity, this property creation will only be performed once for the first object.

Proving the above we can create two instances of the Game object and assert they are equal:


// update prototype and create instance
Game.prototype.player = "Greg";
var g = new Game();

// update prototype and create instance
Game.prototype.difficulty = 'hurt me plenty';

var g2 = new Game();

console.log("New player property works: " + (g.player === g2.player));
console.log("Both instances of Game are equal: " + (g === g2)); // true 
console.log("All prototype properties work: " + 
            (undefined !== 
                 (g.player && g.difficulty && g2.player && g2.difficulty)));
console.log("The initial score property works: " + g.score);
g2.score += 100;
console.log("The properties work after update: " + g.score);
console.log("The constructor points correctly: " + (g.constructor === Game));

The code above creates two instance of the Game object variables: ‘g’ and ‘g2’. The lines which follow then compare the two objects to assert the are truly equal. This will return the following result:

New player property works: true
Both instances of Game are equal: true
All prototype properties work: true
The initial score property works: 0
The properties work after update: 100
The constructor points correctly: true 

The implementation of the pattern is fairly simple. Although, the pattern does endure a fair amount of criticism. This is because the pattern implements a global space into your code which could be argued as being an anti-pattern. In my opinion used sparingly the pattern can be useful.