Category: Javascript

Controlling a directive in a parent state with Angular UI-Router

A while ago, I ran into the following problem: I had a page with a sidebar that could be toggled on and off, with a sliding transition. At some point, it was needed to add a sibling state to the page that didn’t need the sidebar. However, when I switched states, the sidebar would stay on the screen for the duration of the slide transition. No matter what I tried, I couldn’t get Angular to ignore the transition and it became quite frustrating.

However, after using the power of Stack Overflow, I came across some hints that pointed me in the right direction. I managed to solve my problem by moving the enabled/disabled flag up to the parent state’s resolve block and then injecting the resolved object into the resolve block for each state. Okay, that sounds way more complicated than it actually is. Just take a look at this fiddle:

If you click on “State B” and then back to “State A”, you’ll notice that the block to the left appears and disappears without waiting for the duration of the open/close transition.

Debugging Mocha tests in WebStorm

I’m a recent convert to the WebStorm IDE and for Node development especially, the debugger is a godsent. No longer do I need to add console.log statements to my code to figure out what’s going on, I can just set a breakpoint and go from there. Simply awesome! However, I wasn’t able to do this for Mocha test scripts. I tried these instructions that I found, but that didn’t work for me.

When I came across a post on Stack Overflow asking if Mocha could be used as a Node.JS module, I immediately figured out the solution. Create a Node.js script, include Mocha as a module and start the tests like that. Using the Mocha JS API, this was a simple task.

var Mocha = require('mocha'),
	path = require('path'),
	fs = require('fs');

var mocha = new Mocha({
	reporter: 'dot',
	ui: 'bdd',
	timeout: 999999

var testDir = './test/';

fs.readdir(testDir, function (err, files) {
	if (err) {
	files.forEach(function (file) {
		if (path.extname(file) === '.js') {
			console.log('adding test file: %s', file);
			mocha.addFile(testDir + file);

	var runner = () {

	runner.on('pass', function (test) {
		console.log('... %s passed', test.title);

	runner.on('fail', function (test) {
		console.log('... %s failed', test.title);

The only problem is the Mocha timeout setting. When you’re debugging, the timer will continue to run, so by the time you are done debugging, the timeout will have fired. Of course, this can be solved by setting the timeout value to a sufficiently high value for debugging. Running the tests can actually be done more easily by invoking mocha from the command line.

How to use Mocha.js to unit test YUI

We’ve recently started using YUI as the basis for a new version of our product. It’s a very solid library, which provides a lot of high quality code. And although YUI has a nice testing framework as well, we wanted to use Mocha.js, so we could run tests continuously. At first, it was unclear how to integrate YUI into Mocha tests, but in the end the solution was very simple:

var path = require("path"),
    YUI = require("yui3").YUI,
    chai = require("chai"),
    expect = chai.expect;

(function () {
    describe("MyModule", function () {
        var Y, myModule;

        before(function (done) {
            Y = YUI({
                modules: {
                    'mymodule': {
                        fullpath: path.join(__dirname, '../modules/mymodule.js')
            }).use(['base','mymodule'], function () {

        beforeEach(function (done) {
            myModule = new Y.MyModule();

        it('should instantiate the MyModule class', function (done) {

        it('should have a title', function (done) {
            myModule.set('title', 'test');

        it('should have a description', function (done) {
            myModule.set('description', 'test description');
            expect(myModule.get('description'))'test description');

The trick is to use the ‘before’ method of Mocha.js to create a YUI sandbox and assign that to a variable that is in the larger scope, so it can be accessed in the other classes. To make sure everything has loaded, the ‘before’ method’s ‘done()’ call should be done inside the callback function of YUI’s use method.
And finally, the required YUI modules for custom modules aren’t loaded properly, unless they are mentioned in the use method’s first parameter.

Questions? Ping me on Twitter!

Fronteers 2011 – The videos

All the presentations at Fronteers 2011 have been recorded, and the first presentation (The Future is Native by Aral Balkan) has now been uploaded to vimeo, the other talks will follow soon. View the presentation below:

Aral Balkan | The Future is Native | Fronteers 2011 from Fronteers on Vimeo.

All videos will appear on this page at a later time:

Fronteers 2011 Day 2 – more thoughts

The second day promised to match the quality and depth of the talks on the first day and it totally fulfilled that promise. Although it started off a bit rocky for me, because I arrived about 20 minutes late for the first presentation, I still managed to get the most important information out of it. So let’s go through the various talks.Read More

Fronteers conference 2011 Day 1 – my thoughts

The past two days, I’ve been at the Fronteers 2011 conference. Fronteers is the Dutch trade union for front end developers and this is the fifth year they’ve organized this conference. Last year was the first time I went to the conference, which was okay. This year’s conference, however, was very much worth the time and money spent.

Read More

Recreating a C64 game

To challenge myself as JavaScript programmer and to learn new things, I’ve decided to try and rebuild a Commodore 64 educational game called “Topography Netherlands”. I couldn’t find a C64 video of it, but this MSX version is basically the same. The idea is that the game gives you a name of a Dutch city and you need to fly there as fast as possible. The goal is to score as many points as you can in a set amount of time. The game was intended to teach younger children the location of Dutch cities. Later versions of the game also offered German and European maps.

As you can tell from the video, the game isn’t that complex. Here’s my shopping list:

  • an animation of a helicopter
  • a map of the Netherlands
  • coordinates of all Dutch cities
  • a clock
  • a scoring system
  • a randomizer to select different cities
  • some form of collision detection to determine if the helicopter is at the required location on the map
  • a way to convert keyboard presses into directional controls

To make things slightly more interesting, I want to use a canvas element. It would probably be easier to use a collection of divs, but where’s the challenge in that, right?

I’ve already found a nice, large map with all Dutch municipalities on it that I can use as a basis for my map and for my coordinates list.

As I’m doing this in my spare time, I’m giving myself one month to finish it. Also, I’m not going to use any library (except for excanvas.js to make it work in IE as well). Reason for this is that I’m not used to work without the safety net of a framework, and I notice that it limits me in being a good JS programmer (basically, I’m too used to the Prototype.js idiom). This will probably mean that I’ll need to look at code optimization at some point.

I’ll start on this next week, after a weekend of relaxing. I hope you (read: someone) will follow my endeavours and maybe learn something from it (as I hope I will).

HTML5 forms with fallback for non-supporting browsers

Last week, I did some research into creating fallbacks for the new HTML5 form elements, such as email fields, date fields, etc. As it turns out, this is very easy. I used Modernizr for the feature detection. Although it’s just a 5k script, you could easily extract the required code from it if you want to keep your footprint to a minimum.

Based on the Modernizr results, I applied a CSS class for design purposes and attached event handlers. For example, the code below handles the “required” attribute.

function validateRequired(e) {
var fld = e.element(),
ph = fld.getAttribute('placeholder') || '';
if (fld.value === '' || fld.value === ph) {
console.log('field ' + + ' is required');
} else {

if (!Modernizr.input.required) {
$$('input[required]').invoke('addClassName', 'required')
.invoke('observe', 'blur', validateRequired);

I use Prototype.js as my framework of choice, but it can be done just as well with other frameworks or plain javascript. As long as you use Element.getAttribute you can access the new attributes without any problems in all browsers. Of course, this is just proof-of-concept code, so it needs some tidying up for actual production use. I’ll probably create a full Prototype.js library of modules to handle the various attributes and field types. I’m also figuring out a good way to handle data-* attributes so you get an easy way to access those. My aim is to stay as close as possible to the official spec for those interfaces.

I’ve tested the code in IE6, IE7, IE8, Firefox 3.0, Firefox 3.6, Safari 5 (Win), Chrome 6 and Opera 10 and they all work as expected.


At 2010, Chris Williams closed the conference with an inspiring speech to rally javascript programmers to help newcomers to the language find decent documentation and to be proud of the work we do. His goal is to build a community that is open to new members and supportive of existing members. We should accept that our language is a true programming language, not just a “toy language” to create some silly effects on a web page.

He also pointed out that there are many people out there that are just in it for the money. They’ll sell whatever they can, not worrying about quality, about what they leave behind for the next developer to come along. He called them privateers, hirelings without an honor code, who aren’t in it for love of the language, or the challenge it brings.

Of course, some of his speech might be no more than good rethoric, but at least part of it rings true. The bit about promoting the language documentation in particular is a strong point, in my opinion. It’s silly that old, out-dated documentation like w3schools still comes in higher than the quite good, actively maintained documentation at Mozilla’s Developer site. It’s even worse that a download link for Java scores higher than actual javascript documentation.

If you’re serious about javascript development, I urge you to watch the speech. Even if you don’t care about what he says, the presentation in itself is worth watching :-).

Community.js by Chris Williams:

Promoting JavaScript documentation

Here’s a little help for improving search results for people looking for JavaScript documentation!

JavaScript JS Documentation: JS Array forEach, JavaScript Array forEach, JS Array .forEach, JavaScript Array .forEach

So what is this all about? At JSConf.EU, Chris Williams (JSConf US organizer) gave a closing speech about that the javascript community needed to come together to promote knowledge of javascript, so that people who want to come into the community, can learn about the language as a whole, instead of some form of javascript (like jQuery). One way to do that is to get the Mozilla Developer Center documentation higher in the Google search results for searches like “javascript”, “javascript documentation” or specific javascript elements, such as Arrays. That is what the promotejs banner is about. At the promotejs website you can find code to place a banner to specific pages in the MDC JavaScript documentation. By placing this banner on your site, you increase the value of that link from Google’s point of view and thus help getting good documentation at the top of the search results!

As a JavaScript developer, I sincerely support this effort and I hope it will help to give new JavaScript developers the knowledge they need to advance their knowledge. I know that, even at my knowledge level of the language, I can still learn some good things from the documentation, so for someone new, it will most definitely be a great way to understand the actual language, instead of some framework built with the language.