I experimented a little with V8 and the default shell sample application that it ships with. I found it easy to introduce native functionality using C++ and this seemed to perform well. I then discovered the nodejs project. nodejs is built on top of V8 and includes lots of general purpose functionality which is great for running JavaScript from the command line and fantastic for developing server applications.

Instead of reinventing the wheel with my custom V8 shell I decided to use nodejs. nodejs has an excellent module system which makes it easy to add new functionality.

Unit testing is important because it helps us to develop code of a high quality. I tend to use QUnit from the jQuery project to perform unit testing on client JavaScripts. Whilst QUnit may not be the most comprehensive unit testing library, it is very easy to use and provides detailed output.

It is now necessary to develop unit tests for command line and server application JavaScripts. Unfortunately the regular QUnit framework cannot be used because it requires the DOM to report feedback. Fortunately the node-qunit module can be added to nodejs which adds support for QUnit style unit testing.

Whilst there are notable differences between the way in which these two QUnit variants behave, it is possible to write unit tests that are compatible with both versions. For example, `QUnit.module` should be used instead of `module` because `module` means something different in nodejs.

Google Chrome features the v8 JavaScript environment which provides outstanding performance by compiling JavaScript into machine code (as opposed to being processed by a virtual machine). The performance boost is massive. V8 is released under an open-source license (http://code.google.com/p/v8/) which can be compiled and used as a standalone JavaScript processor, or more interestingly integrated into custom applications!

V8 could easily be integrated into an application (or game) to provide an extremely powerful and flexible scripting language. It is possible to map functions and classes between the V8 execution context and a C++ application.

A while back I bumped into a project called nodejs. Initially I wasn’t sure what this project was offering nor how it related to JavaScript. It turns out that nodejs is built on top of the powerful V8 JavaScript engine and provides networking capabilities that can be used to produce server applications extremely easily. I would thoroughly recommend watching the video on the project home page for some excellent tutorials.

Here is a very simple web server written in JavaScript that can be executed using nodejs:

var http = require('http');
var server = http.createServer(function(request, response) {
   response.writeHead(200, {"Content-Type": "text/html"});
   response.write('<h1>Hello World!</h1>');
   response.end();
});

// start web server on port 8080 (http://localhost:8080)
server.listen(8080);

This is also an excellent resource:
http://www.nodebeginner.org/

One of the things that confused me was that I thought that nodejs could only be used to develop web server applications. But this isn’t true because nodejs can be used to develop client applications that run from the command line. Better still, nodejs can be compiled to work on Mac, Unix and Windows.

There are also a vast selection of modules that can be used alongside nodejs to allow interaction with databases, frameworks for developing powerful web servers easily. Some JavaScript libraries can be used by a web browser and nodejs environment when implementation specific features (like the DOM in a web browser, or process in nodejs) are not needed.

I do not think that nodejs is a replacement for PHP at the moment because the project is still in its infancy. This could, however, be the case in the future once nodejs and various modules have had a little time to mature. It is certainly a fun project to experiment with.

Thanks to jsdoc3 this task is made significantly simpler. It’s rich selection of tags makes it possible to document even the most abstract concepts that JavaScript permits. It is also extremely easy to create plugins and custom templates. Jsdoc is a command-line tool that works on any platform that supports Java. See project pages for information about usage.

Useful Links:

• jsdoc3 project on GitHub
• Documentation (under development)
• Discussion Forums

A Few Examples

Here are some examples of how jsdoc3 can be applied:

Function

/**
 * Do something really neat
 */
function foo() {
}

/**
  * Do something really neat with parameters - last is optional!
  * @param {string|number} lookup Name or ID of user
  * @param {string} type Type of records to lookup
  * @param {string} [count] Maximum count of entries to retrieve
  * @returns List of records
  */
function getRecords(lookup, type, count) {
}

Note that the other variant of functions can be documented in the same way:

/**
 * Do something really neat
 */
foo = function() {
};

Namespace

Straightforward namespaces can be documented with the following:

/**
 * Root namespace
 * @namespace root
 */
root = {
   /**
    * Do something really neat
    */
   foo: function() {
   }
};

/**
 * Nested namespace
 * @namespace root.nested
 */
root.nested = {
   /**
    * Do something else that is really neat
	*/
   bar: function() {
   }
};

Namespaces can still be documented when a more abstract mechanism is used. @lends allows members to be added to an existing namespace:

/**
 * Root namespace
 * @namespace root
 */
$namespace('root', /** @lends root **/ {
   /**
    * Do something really neat
    */
   foo: function() {
   }
});

/**
 * Nested namespace
 * @namespace root.nested
 */
$namespace('root.nested', /** @lends root.nested **/ {
   /**
    * Do something else that is really neat
    */
   bar: function() {
   }
});

Class (with prototype object)

/**
 * Base class of a game entity
 * @class Entity
 */
Entity = function() {
};

/**
 * Render entity
 * @param {CanvasRenderingContext2D} dc Device context
 */
Entity.prototype.render = function(dc) {
   // Instance method!
};

/**
 * Get new instance of entity
 * @param {string} type Type of entity to instantiate
 * @returns {@link Entity}
 */
Entity.getInstance: function(type) {
   // Static method!
};

Classes (with classical approach)

/**
 * Base class of a game entity
 * @class Entity
 */
$class('Entity', /** @lends Entity# **/ {
   /**
   * Render entity
   * @param {CanvasRenderingContext2D} dc Device context
   */
   render: function(dc) {
      // Instance method!
   }
}, /** @lends Entity **/ {
   /**
    * Get new instance of entity
    * @param {string} type Type of entity to instantiate
    * @returns {@link Entity}
    */
   getInstance: function(type) {
      // Static method!
   }
});
/**
 * Ball entity
 * @class Ball
 * @extends Entity
 */
$class('Ball', 'Entity', /** @lends Ball# **/ {
   /**
    * Force ball to bounce
    */
   bounce: function() {
      // Instance method!
   }
});

My take on this problem is to define widgets in a completely separate namespace and then refer to them using a single jQuery plugin `widget`. This plugin depends upon the following jQuery variant of my `$namespace` function from here.

The source in this post is available under multiple licenses: BSD, GNU/GPLv2, GNU/GPLv3.

/*!
 * (c) 2010-2011 Rotorz Limited. All rights reserved.
 * License:	BSD, GNU/GPLv2, GNU/GPLv3
 * Author:	Lea Hayes
 * Website:	http://leahayes.co.uk
*/
$global = window;
$namespace = function(ns, extension) {
    if (ns == '')
        return $global;

    if (typeof ns === 'string') {
        var fragments = ns.split('.');
        var node = $global;
        for (var i = 0; i < fragments.length; ++i) {
            var f = fragments[i];
            node = !node[f] ? (node[f] = {}) : node[f];
        }
    }
    else
        node = ns;

    if (extension)
        $.extend(node, extension);

    return node;
};

Each widget can be defined as a class within a vendor specific namespace (like `my` for example) using something like the following:

$namespace('my').SpecialWidget = function(options) {
    this.color = options.color;
};

// Invoked automatically when element is attached to object.
my.SpecialWidget.prototype.attach = function(element) {
    this.element = element;
    element.css('color', this.color);
};

my.SpecialWidget.prototype.enable = function() {
    this.element.css('opacity', 1.0);
};
my.SpecialWidget.prototype.disable = function() {
    this.element.css('opacity', 0.5);
};

The following jQuery `widget` plugin will then make the above work in a fairly standard jQuery fashion:

(function($) {

$.fn.widget = function(name, a, b) {
    if (!name) return this.data('widget');
    this.each(function() {
        var widget;
        if (message === 'init') {
            a = $namespace(a);
            widget = new a(b || {});
            widget.attach(this);
            this.data('widget', widget);
        }
        else {
            widget = this.data('widget');
            widget[message].apply(widget, Array.prototype.slice.call(arguments, 1));
        }
    });
    return this;
};

})(jQuery);

The special widget can then be used as follows:

// Attach widget to element.
$('div.my-special-widget')
    .widget('init', my.SpecialWidget, { color: 'red' });

// Disable widget.
$('div.my-special-widget')
    .widget('disable');

// Interact with widget object directly.
var widget = $('div.my-special-widget').widget();
widget.enable();

I have added the following to the end of Eric Meyers fantastic reset stylesheet.

/* Fix for IE7 */
button {
    overflow: visible;
    width: 0px;
    /* Default padding that can be overridden as desired. */
    padding: 2pt 4pt;
}
/* Fix for IE7+ */
button {
    width: auto;
}
/* Fix for FF */
button::-moz-focus-inner {
    padding: 0px;
    border: none;
}

I threw a crude test together and viewed it with Chrome, FireFox, IE9/IE8/IE7 and Opera and it seems to be a solved case. There are minor differences but it is certainly an improvement. IE7 still adds padding above and beneath button text. Please post a comment if you know how to fix that problem!

References:

• http://www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ 
• http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox/

Let me emphasise that this doesn’t define how the model-view-controller (MVC) design pattern is supposed to be used. It merely suggests a slight alternative which allows the Model component to be split into business process and business data.

I decided to split Model into Service and Model (yes I stuck to the same name, but it has a lesser more specific goal). In my project a Service represents a business process whereas a Model only represents business data. I allow the Model to access data via an encapsulated PDO connection.

Plural Model classes are used to access singular Model representations. For example, a user ‘Bob’ can be retrieved via a service which will in turn utilise the UsersModel class.

The following diagram shows the classes and I have labelled the dependancy arrows to offer an idea of the process.

Service MVC Class Diagram with Process

Here are some rules that I am considering for my project:

• Controller objects can load and utilise all Service and Model methods and fields.
• Controller objects cannot instantiate a Model independently. This is a business process and must thus be undertaken by a Service. A business process could potentially decide to use an alternative model under certain situations.
• Model and Service objects may interact with a data source.
• Model objects must conform to the interface dictated by the corresponding Service class(es).
• Model and Service objects can be overridden or adapted.
• Service objects can be accessed by any View, Controller, Service or Model.

The relationship between Model and Service is many-to-many. A service can utilise many data models, and a data model can be processed and interpreted by many services.

I hope that you have enjoyed this article. Please feel free to leave comments!

Despite this, there still isn’t a single video encoding which will work across the board (without additional components). I have been reading into this over the past few weeks and stumbled upon a solution. Video which is encoded as MPEG4 AVC (the H.264 codec) will play on just about everything except Mozilla Firefox. But, not to fear because there are Adobe Flash files which are able to stream H.264 encoded videos. So the idea is to utilise HTML5 H.264 video support for all browsers possible, and then fall back to Flash for other browsers.

This approach also means that video will play on devices like the Apple iPad.

When encoding video I found the following configurations to offer sufficient quality results at acceptable file sizes. I found this to be a process of trial and error to find something which was actually going to play smoothly at a good quality for my client.

• Frame Rate: 25 fps
• Video Bits per Second: between 300 Kbps and 1500 Kbps (Depending upon quality)
• Audio Bits per Second: Either 128 Kbps or 256 Kbps

After 4 years the website began to look a little dated and so it felt necessary to bring it up to date both visually and functionally. The web has changed significantly and nowadays people tend to expect facilities like RSS, comments and track-backs.

Over the past week or so I have designed and implemented a new website which this time is built upon PHP with MySQL and WordPress and utilizes the plug-ins NextGen Gallery and WP Door. This has led to many new features which help make the website both more flexible and easier to use at the same time.

Here is a list of some of these improvements:

• Easier maintenance of website for the author (my father in this case).
• Built-in statistics using WordPress.com Stats.
• Additional horizontal viewing area because navigation menu moved from left side to top.
• More control over how images are presented in pages, posts and galleries.
• Content warning message cannot be bypassed.
• URIs are now “pretty” which helps to make the website easier to navigate and help to future-proof links.
  i.e.  http://my-art-gallery.co.uk/gallery/fantasy/
  instead of http://www.my-art-gallery.co.uk/Listing.aspx?g_id=1
• News is now posted as a blog which provides a lot of added functionality and is additionally printer friendly.
• Search support for both images and posts/pages.

Cadifra supports Class, Object, Use Case, Sequence and State diagrams. A page can include elements from all of these different diagrams if necessary. Whilst Cadifra does support a lot of UML’s features, I have noticed that it does not yet include all connector types. This doesn’t usually cause too many problems, however it is usually possible to use a “Dependency” connector with an appropriate label.

The feature which I love the most is the breaking and connecting of diagram fragments. This is particularly useful when copying and pasting, but is also very useful when rearranging within class diagrams.

Cadifra Screenshot

Anyone who is using UML should definitely give the Cadifra demo a try.

Here are some useful links:

• Cadifra Home Page – http://www.cadifra.com/
• Cadifra Demo – http://www.cadifra.com/download/

In the API documentation for J2ME I found that the Display.setCurrent(alert, nextDisplayable) function will throw such an exception when nextDisplayable is an Alert instance. However, I was not using this function. The alert was being displayed using Display.setCurrent(displayable), and upon selecting “Confirm” was simply displaying another alert again with Display.setCurrent(displayable).

With thanks to James Mernin’s blog (Alert after Alert in J2ME) I found that this is in fact a result of the same limitation within J2ME. For my purposes I found that the simplest solution was to create a blank canvas, and upon the first paint event switch to the intended alert. This essentially breaks the chain into Alert -> Canvas -> Alert.

In light of this new information I decided to amend my DisplayManager so that it deals with this issue transparently. The DisplayManager.setCurrent(displayable) method can be replaced with the following:

public static final void setCurrent(Displayable d) {
   // Switch to new displayable.
   current = d;
   if (current instanceof javax.microedition.lcdui.Alert &&
            display.getCurrent() instanceof javax.microedition.lcdui.Alert) {
      // Switch to a black canvas temporarily!
      display.setCurrent(new BlackCanvas());
   }
   else
      display.setCurrent(current);
}

If an alert is about to be displayed, the above code will show a blank canvas if an alert is already shown. The blank canvas will then show the alert as soon as it is first painted. I implemented this blank canvas as shown below:

public final class DisplayManager {
   ...

   private static class BlackCanvas extends Canvas {
      protected void paint(Graphics g) {
         // Paint canvas to black to reduce flicker.
         // Note: You may decide to change this to suite your needs.
         g.setColor(0x000000);
         g.fillRect(0, 0, getWidth(), getHeight());

         // Now show the alert that we really wanted!
         DisplayManager.setCurrent(DisplayManager.getCurrent());
      }
   }
}