Unit testing with JavaScript and NodeJS

In my latest project I needed a way to execute JavaScript from the command line. I knew a little about the Rhino project which achieves this and of course the Google V8 Project.

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.

Building server and client applications using JavaScript

JavaScript has become an essential tool that allows web developers to produce sophisticated web applications that often use AJAX to communicate with the server. JavaScript source code is becoming increasingly more complex and so it has become necessary for web browser developers to increase the performance of their JavaScript virtual machines.

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!

Documenting JavaScript with jsdoc3

JavaScript is an extremely dynamic language which allows it to be applied in a variety of interesting ways. Some prefer to take the structured approach whilst others prefer an object-oriented approach using the prototype object or a library that offers a more classical approach. This diversity makes docblock type documentation seem impossible…but it isn’t!!

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

Using namespaces with jQuery Widgets

Creating plugins for jQuery is a relatively straightforward task, however poorly named plugins can conflict with one another (or even with core jQuery functionality). I have seen numerous attempts at solving this problem which each have their advantages and disadvantages.

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.

Improve consistency of button element across browsers

The button element can be styled easily for the desired look, however as soon as padding is specified the button appearance is drastically different across web browsers. So I did some searching and found several different fixes and found that a combination of all of them does the trick (mostly).

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/

Business Process and Data with MVC (Model-View-Controller)

I have been thinking about the general issues with the MVC and the Vespa concept “Vespa: A better MVC”. The idea of splitting the Model component has really helped me a lot with a project that I am working on.

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.

Encoding Video for Websites

These days there are many more web browsers in active use which are running on different devices. It is important to design and develop websites which are going to work on the majority of these platforms. HTML5 has many new offerings which intend to address many cross-comparability issues, and web browsers have been quite fast the uptake of this standard.

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

Redesign of “My Art Gallery”

My Art Gallery (http://my-art-gallery.co.uk/) is my fathers online art gallery which features most of his artwork. The website also includes a variety of downloads including backgrounds, 3D models, textures, etc. which people can use in their own artwork. I originally created this website in 2006 using ASP.NET in conjunction with a MS-SQL database which has served well for 4 years.

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.

UML Simpler with Cadifra

Cadifra is an excellent UML editor which makes designing with UML a breeze. Cadifra is great for illustrating concepts in technical reports, but gains its real purpose during the design process where ideas change and evolve rapidly (especially when working with other team members). Cadifra makes it easy and very quick to change diagrams in this fashion, and very neatly too.

Cadifra supports Class, Object, Use Case, Sequence and State diagrams.

J2ME: Alert followed by Alert

I have been working on a J2ME application. There is an instance where a message box appears to confirm an action with the user, if the user confirms the action then a subsequent alert may be shown. Whilst in theory this should have been straightforward the application just kept throwing an IllegalArgumentException.

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.