Typically, they look like this:

class EmailSignup extends React.Component {
  state = {
    email: ''
  }

  handleChange({target}) {
    this.setState({email: target.value})
  }

  render(){
    return <input onChange={this.handleChange} value={this.state.email} />
  }
}

And then comes the dreaded error and a new forum post:

TypeError: Cannot read property ‘setState’ of undefined on line 8.

This is an event handler, contextually this will be the event.target by default. Patterns to solve it are so many…

1. Preferred way is to bind the method to your instance in your constructor.

constructor(props){
  super(props)
  this.state = { email: props.email }
  this.handleChange = this.handleChange.bind(this)
}

It is preferred as it happens once only at instantiation of the component, so it’s cheap.

2. Use an arrow function to keep contextual this. This works but makes a new function on every render of your component (tree)

render(){
  return <input onChange={event => this.handleChange(event)} value={this.state.email} />
}

3. Use local binding. It works but also makes a new function on every render of your component (tree)

render(){
  return <input onChange={this.handleChange.bind(this)} value={this.state.email} />
}

4. Use the new experimental (not in ECMAScript yet[tm]) bind syntax ::. Essentially, sugar for #3

render(){
  return <input onChange={::this.handleChange} value={this.state.email} />
}

5. Use the new Class property transforms

// just inside your class definition - just like the state = 
handleChange = ({target}) => {
  this.setState({email: target.value})
}

CSS pseudos allow us to style different form input states, like input:focus. This is fine but ever wanted to also highlight the label element for that input? You just can’t do it.

Typical markup is:

<label for="email">LOGIN</label>
<input required type="email" name="email" id="email" class="dark-input" />

CSS3 has no backreference (reverse combinator) selector so we can’t go input:focus < label or whatever syntax (eg. ! in MooTools Slick). What you can do is apply a sibling style instead by re-arranging your DOM

<input required type=”email” name=”email” id=”email” class=”dark-input” />
<label for=”email”>LOGIN</label>

The above HTML now allows for the natural CSS selector of:

input:focus + label {
    color: white;
}

But now the label looks like it’s underneath the control. You can move it back up by using some translate() to offset the order:

label {
    transform: translate(0, -30px);
    color: #ccc;
}

Want to see it in all in action? Here comes batman…

However, the examples often fail to demonstrate how to use it from a main.js file which does a require call, rather than a define. Doing something like this is quite useful, particularly when your config object is not a require call in itself:

(function(config, require, define){
    'use strict';

    // config in
    require.config(config);

    // main logic, wrapped in a define but working as a require
    define(function(require){
        var App = require('apps/foo/controllers/main'),
            instance = new App();
    });
}.call(this, {
    baseUrl: 'js',

    paths: {
        apps: '../bower_components/',
        react: '../bower_components/react/react'
    }
}, require, define); 
// passes local refs to closure, sets scope to global object with strict mode on.

Unfortunately, less and less people use MooTools these days, myself included. This made Epitome redundant – and yet I wanted to continue using the API.

So, without further delays, I present Epik.

API is nearly identical with Epitome, with some slight changes and fixes. If anything, Epik is more powerful and more resilient. Built on top of the tiny class library Primish, it even offers a syntax that is similar to that of MooTools.

Architecture wise, it is built on top of lodash with jQuery or zepto for the views and a RivetsJS adapter for bi-directional model binding.

What does the code look like?

;(function(factory){
        // works under nodejs (CJS) and requirejs (AMD)
	if (typeof define == 'function' && define.amd){
		define([
			'epik/index',
			'epik/model'
		], factory);
	} else if (typeof module != 'undefined' && module.exports){
		module.exports = factory(
			require('epik'),
			require('epik/lib/model')
		);
	}
}).call(this, function(epik, model, big){
        // currency pair model
	var cp = epik.primish({

		extend: model,

		options: {
			refreshMin: 100,
			refreshMax: 2000
		},

		validators: {
			size: function(value){
				return Number(value) == value || 'size needs to be a number';
			}
		},

		defaults: {
			title: '',
			formatter: '0.0000',
			bid: 0,
			ask: 0,
			oldBid: 0,
			oldAsk: 0,
			changeBid: '',
			changeAsk: ''
		},
                
                constructor: function(data){
			this.parent('constructor', data);
			this.set('spread', spreads[this.get('title')] || 1);

			this.formatter = this.get('formatter').replace(/[1-9]/g, '0');
			this.set('formatter', null, true);
			this.maxPips = Number(this.formatter.substring(0, this.formatter.length - 2) + _.random(50,70));
		}
	});


	return cp;
});

Available via web, Bower and npm (node), written with UMD wraps throughout.

For more complete examples, look at the following:

• Currency Pairs demo, repo here: https://github.com/dimitarchristoff/cp, via RivetsJS bindings
• The classic TodoMVC implementation
• Examples in epik repo

So I give you the demo first: http://jsfiddle.net/dimitar/fFzKg/

Several things that are special in this implementation that has no JavaScript whatsoever.

Disclaimer: broken on IE6-8, also broken on windows phone. Who cares, though…

Centering – using the absolute-center technique first ‘discovered’ by Simon.

.absolute-center {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

This won’t work in IE older than IE9, BTW. Caveats include: the element that gets this className needs to have a known width AND height so dynamic height changes are not going to work – you need to use overflow hacks within the modal body to keep it from breaking.

To do the toggle, a small adjacent selector hack that is reliant on the order of elements and the :checked pseudo selector.

<style>
.modal {
    display: none;
}
input:checked + .modal {
    display: block;
}
</style>
...
<input type="checkbox" id="modal1" class="hide" autocomplete="off" />
<div class="absolute-center modal text-center">
    content here.
</div>

...
Press here to <label for="modal1">toggle modal</label>

That’s about it – the rest are simply sugary effects. There is also a blocker div that uses the same technique. Have fun and don’t use in production – unless you only care about modern browsers anyway.

Object.monitor = function(obj, quiet){
	var keys = (function(obj){
			// include from prototype also, any function.
			var keys = [], key;
			for (key in obj) typeof obj[key] === 'function' && keys.push(key);
			return keys;
		}(obj)),
		// alternating foreground colours for odd/even calls.
		colours = [
			'#FFFFFF',
			'#CCCCCC'
		],
		token = '%c',
		monitor = ' monitor:',
		log = function(what, method){
			// more use goes red in console.
			console.log(token + '%d' + token + monitor + '%s',
				'font-family:courier;background-color:rgb(' + Math.min(255, what) + ',0,0);color:' + colours[+(what %2 == 0)],
				what,
				'font-family:courier',
				method
			);
		},
		counters = {};

	keys.forEach(function(key){
		var orig = obj[key];
		Object.defineProperty(obj, key, {
			get: function(){
				key in counters || (counters[key] = 0);
				counters[key]++;
				quiet || log(counters[key], key);
				return orig;
			}
		});
	});

	return function(){
		// serialize the calls and order by counts
		return {
			raw: counters,
			sorted: keys.map(function(key){
				return {
					key: key,
					value: counters[key]
				};
			}).filter(function(obj){
					return !!obj.value;
				}).sort(function(a, b){
					return a.value <= b.value;
				}).map(function(obj){
					var o = {};
					return o[obj.value] = obj.key, o;
				})
		}
	}
};

Basically, saving a reference of the original method, logging and returning the method. Downside: just asking for a reference or toSource does not guarantee the method is being called. If you need to take that into account, simply wrap the method into a function instead.

Object.monitor will return a reference to a function that you can call at any time to inspect the current results.

To use it, simply go:

var foo = {
    count: 0,
    one: function(){
        this.count++;
    },
    two: function(){
        this.count += 2;
    }
};

var fooStats = Object.monitor(foo);
foo.one();
foo.two();
var c = 150;
while(c--) foo.one();

console.log(fooStats()); // returns an object with sorted and raw counters. 

See it in action: http://jsfiddle.net/dimitar/aCcVX/

Tweaks you can do to get different methods:

// only local keys not proto
keys = Object.keys(obj).filter(... fn only ...);
// local and prototype keys on a class
keys = Object.keys(obj).concat(Object.keys(obj.constructor.prototype)).filter(... fn only ...);

The quiet argument will prevent it from spamming your console. You can tweak to use console.count as well if you prefer.

How is that being used? For starters, Element Storage. It relies on the uid as the key in the Storage object inside a closure, which will have anything you have .store’d for that element.

element.store('foo', 'bar');

translates to:

Storage[Slick.uidOf(element)].foo = 'bar';

and

element.retrieve('foo'); // getter of the storage key
element.eliminate('foo'); // delete Storage[Slick.uidOf(element)].foo

Initializing storage for an element you have created externally, eg, via var foo = document.createElement(‘div’) and not Element constructor

Slick.uidOf(foo); // makes it compatible with Storage
// same as:
document.id(foo);

Things that are stored by the framework into Storage also include all events callbacks, validators instances, Fx instances (tween, morph etc) and so forth.

What can you do knowing the UIDs of elements? Well, cloning an element does NOT get the element’s storage or events. You can actually write a new Element.cloneWithStorage prototype that will also copy all of the stored values you may have, which is useful upto a point – instances that reference a particular element (such as, Fx.Tween) will continue referencing the old element, so it may have unexpected results. This can be useful in moving your own storage, though, all you need is a similar method that will record what you have stored and allow you to clone it.

Example Storage puncture of another Element’s data:

var foo = new Element('div'),
    uid = foo.uniqueNumber;
    
foo.store('foo', 'foo only');
    
var bar = new Element('div');

console.log(bar.retrieve('foo')); // null

bar.uniqueNumber = uid; // force overwrite of uid to the other el

console.log(bar.retrieve('foo')); // foo only - OH NOES

console.log(Object.keys(foo)); // ["uniqueNumber"] - oh dear. enumerable!

anything in a require() is an npm module, installable via npm install name

Interaction with the OS

• require(‘node-growl’)

– Growl is a OSX style notification system, also available for windows or linux. node-growl abstracts having to deal with the different implementations of growl / messaging notifications between different operating systems and gives you a unified API.

var growl = require('growl');
growl('5 new emails', { title: 'Email Client', image: 'Safari', sticky: true });

Serving HTTP and sockets

Often, you need to do quick prototypes, test APIs or work with a node.js backend altogether. This is a standard stack of tools that will cater for most of your needs

• require(‘express’); – Express.js is great tool that allows you to set a node.js HTTP server in no time. Works with the http stock npm as well as support for things like socket.io for streaming. Here’s an example express app for Epitome
• require(‘socket.io’); – a sockets implementation available for the server and client with a wide browser support and graceful degradation by Guillermo Rauch. A viable alternative to Kaazing, no support for Binary Data Types yet
• require(‘ws’); – one of the fastest websockets implementations available, ws that also supports Binary Data.

Building / Generators

A lot of the time, you want to automate builds and processes.

• require(‘requirejs’); – the npm version for the excellent AMD library is super cool, allowing you to use r.js functionality within your script and package/minify your scripts for production in a bespoke way with great control. It also allows you to use AMD modules instead of CJS, but that’s just silly, unless you want isomorphic code… How-to’s here. Also, read r.js instructions for CLI use.
• require(‘grunt’); – GruntJS is … something else. A fully blown task runner, Grunt provides a platform of config-based tasks that can aid your project in many things, including building, testing, linting, minfication, templating / generators, hot-reloaders and much more. Have a read, install grunt-cli and get going. P.S. sometimes, it is easier to do things w/o grunt, rather than figuring out how various grunt task runners work. Don’t use grunt for the sake of using grunt – use it when it makes sense. Make sure you scan the list of available grunt tasks before making your own.
• Yeoman – a whole workflow manager, using Yo (template / generators), GruntJS and Bower for packaging. http://yeoman.io/ for hipster development. A must in your toolkit and a must on your C.V.

To be continued… WIP.

So primish was born. Primish is just like a fork of prime that works in a browser. Out of the box.. With AMD loaders (RequireJS, almond etc). Or without (yeah, pesky global exports). It still works in node.js as an npm module – npm install primish.

It also does a few things differently to prime and tries to be more MooTools 1.x-ish. Eg. emitter AND options mixins as standard. The options mixin knows of emitter and does the onEventname sugar for you. implement as standard as method or mutator key! .parent(‘methodname’, args) as standard. Emitter events support pseudos as standard, eg this.on(‘load:once’, fn). Multiple events to same callback can be added on a single line this.collection.on(‘change add remove’, this.render).

That’s the sort of thing we were thinking. But just read the docs page, play with the live examples and have fun. It does not try to be a library and shim / do things to Types etc. It does Class and that’s it. For everything else, there is lodash.

Oh yes, and bower support, thanks to that Simon Smith guy that is a regular on JavaScript Daily. bower install primish will add just the 3 .js files you may use. No extra baggage, you won’t download the web when you init your bower!

One more time. The link is here.

Chances are, Kamicane, Arian and Kentaromiura will knock something amazing up with prime. Until then, primish all the things.

Here’s a small list of things I find I often reuse in different projects.

anything in a require() is an npm module, installable via npm install name

Working with files

• require(‘fs’); – obvious but the default node fs is useful
• require(‘fs-extra’); – an extended file system util that lets you do a lot more, like make files and directories and make files in paths that don’t exist yet, work with JSON etc.
• require(‘watch’); – an awesome file system watch tool you can configure to fire events on file change, creation etc. with various patterns and callbacks.

Headless browsers and DOM

Being in node does not mean you cannot work on a DOM or on a DOM-like abstraction to either open HTML documents, parse them etc.

• require(‘jsdom’); – jsdom is great, if you can get it to work in a hurry. It is also slow and has a dependency list longer than the Nile (including contextify, which is hard to build on WIN32 due to node-gyp and python). But it lets you get a very reasonable DOM to work with, loaded with JavaScript etc.
• require(‘cheerio’); – a light pseudo-DOM implementation that can load a document and allow you to use a jQueryLite-like version to query and manipulate it. For those that have given up on jsdom.
• PhantomJS – An actual headless implementation of webkit. PhantomJS is very useful for testing and CI. Powers frameworks like CapserJS

Working with Class

Goes without saying but. It’s much nicer to use a more classical OOP interface in your nodejs modules.

• require(‘mootools’); – mootools-server, comes with Class (global) as well as the mixins Events, Options and some prototype enhancements to String etc. As you’d expect. No return value, just require(‘mootools’) then use as per client.
• require(‘prime’); – Kamicane and MooTools’ next gen micro lib that does OOP style classes but is more lightweight. Don’t forget to also install Arian’s prime-utils for some sugar like supers, setOptions etc.
• require(‘primish’); – My own version of prime, which does a lot on top of prime to make it nicer and easier to use in the browser, as well as sugar around emitter, supers and options

Working with CLI

Working on build tools often requires you to do several things: process arguments and format stuff nicely.

• require(‘clintish’); – Clintish is a fork of clint – also by Kamicane, it’s a micro processor for arguments with events and parsers, helper syntax etc. Very nifty.
• require(‘colors’); – a very clever implementation that prototypes the String native with some getters for default colour names. Allows you to do stuff like console.log(“hello”.red + ” there”.blue);, no return value – just require once.

In the next part, I will cover a lot of tools like growl notifiers, build tools / minifiers, linters, (trans)compilers, HTTP / socket servers, streaming and so forth.

The storage event is fired when a storage area changes, as described in the previous two sections (for session storage, for local storage).

When this happens, the user agent must queue a task to fire an event with the name storage, which does not bubble and is not cancelable, and which uses the StorageEvent interface, at each Window object whose Document object has a Storage object that is affected.

This allows for a neat inter-browser window communication trick that can let multiple window instances of the same domain (same origin applies) to talk to each other.

Imagine you have the following situation: same site is open twice, the user then logs off in one of the two instances. Ideally, instance #2 should also find out about the fact they logged off and adjust accordingly.

// some imaginary event handler on an element
$('.log-off').on('click', function(){
    // pretend to do something on an app controller
    App.controller.logOff();

    // store something in localStorage
    localStorage.setItem('state', 'logged out');
});

// listen for this event
window.addEventListener('storage', function(storageEvent){
    // the event seems not to fire on own state changes, only other windows
    console.log(storageEvent);
    App.controller.setLoginState(storageEvent.newValue);
}, false);

The event object itself looks like this:

type storage
target Window /_display/
currentTarget Window /_display/
eventPhase 2
bubbles false
cancelable false
timeStamp 1371809245502028
defaultPrevented false
stopPropagation stopPropagation()
preventDefault preventDefault()
initEvent initEvent()
stopImmediatePropagation stopImmediatePropagation()
originalTarget Window /_display/
explicitOriginalTarget Window /_display/
preventBubble preventBubble()
preventCapture preventCapture()
getPreventDefault getPreventDefault()
isTrusted true
key state
oldValue logged in
newValue logged out
url http://localhost/_display/
storageArea 1 item in Storage state="logged out"

Type can be session or local. You can reconcile paths and more.

To play with it, open this http://jsfiddle.net/dimitar/jTfdq/ twice and open your console, then keep on running the fiddles in alternative windows.

Here’s an example creating a server via express and socket.io with a collection and a model that can be shared on the client as well:

#!/usr/bin/env node
'use strict';

var express = require('express'),
    app = express(),
    http = require('http'),
    server = http.createServer(app),
    io = require('socket.io').listen(server);

// load mootools globals and extend protos
require('mootools');

io.set('log level', 1); // disable debug from socket.io

// example server root at dist.
app.use(express.static('./dist'));

server.listen(3333);

// use some epitome models and collections
var epitome = require('epitome'),
    Model = epitome.Model,
    Collection = epitome.Collection;

var User = new Class({
    Extends: Model,
    options: {
        defaults: {
            title: 'Mr.'
        }
    }
});

var Users = new Class({
    Extends: Collection,
    model: User
});

var users = new Users([{
    name: 'Bob',
    surname: 'Roberts'
}]);

// example adds to collection when a data:add message arrives from client
io.on('connection', function(socket){
    socket.on('data:add', function(model){
        users.addModel(model);
        console.log('added new model', model);
    });

    socket.emit('data', users.toJSON());
});

To get this to work, you need to install a few npms first

$ npm install mootools express socket.io epitome

The grunt-doctor-md grunt task has also been updated to use doctor-md@0.1.14.

$ npm install -g doctor-md
$ doctor

var foo = ['one','two'],
    key;

for (key in foo){
    // lists all mootools methods and properties as well as 0, 1
    console.log(key, foo[key]); // needs hasOwnProperty etc, ppl complain.
}

// protect enumerables under ES5 in Array
(function(){
    // set mootools expandos to non-enumerables under ES5
    var key,
        a = [];
    
    for (key in a) a.hasOwnProperty(key) || Object.defineProperty(Array.prototype, key, {
        enumerable:false
    });
}());

console.info('trying again...');

for (key in foo){
    console.log(key, foo[key]);    
}

See this in action on jsfiddle.

An alternative approach may be available by patching MooTools core. You need to mod the implement function in Core.js here: https://github.com/mootools/mootools-core/blob/master/Source/Core/Core.js#L192-L209 and adding something like:

if (previous == null || !previous.$protected) this.prototype[name] = method;
Object.defineProperty && Object.defineProperty(this, name, { enumerable: false });

We will extend the Slick selector engine with a data pseudo selector, which will look at the outerHTML of the element and find a match for the attrbute, starting with data-value*:

Slick.definePseudo('data', function(value){
    // wildcard data-startswith search
    var outer = this.outerHTML || new XMLSerializer().serializeToString(this);
    return outer.test('data-' + value);
});

console.log($$("div:data(media-)")); // return all divs with data-media-* attribute

This is it at a first reading. Now, given how performance is important, especially if used on a large DOM without a qualified selector, let’s see if we can optimise it by using a closure where the setup takes place. We will cache the strings we reuse so no new strings need to be made for each element passed to Slick, as well as a single instance of the XMLSerializer, used by the fallback when outerHTML is not available. We also go to Array.join instead of string concatenate for small gains in IE6/7/8

(function(){
    // cache reusable strings 
    var data = 'data',
        hyphen = '-',
        // set the fallback via XMLSerializer, if no outerHTML (eg. FF 2 - 10)
        XS = this.XMLSerializer && new XMLSerializer();

    Slick.definePseudo(data, function(value){
        return (this.outerHTML || XS.serializeToString(this)).test([data, value].join(hyphen));
    });
}());

Happy coding.

(function() {
    var spyId = 'spyEvent';
    
    Class.extend({
        addEventSpy: function (instance) {
            /* 
            accepts one argument - Class instance. 
            works by adding a local fireEvent method on the instance  
            instead of going TO proto chain to Class.Event::fireEvent 
            */

            // check if there's a local fireEvent method or already installed spy
            if (instance.hasOwnProperty('fireEvent') && instance.fireEvent.name == spyId) {
                console.log('ERROR: Already have a local fireEvent method');
                return;
            }          
            // Events need to be mixed in.
            if (!instance.fireEvent) {
                console.log('ERROR: Can only spy on class instances with an Events mixin');
                return;                
            }
            // store original
            var orig = instance.fireEvent;
            instance.fireEvent = function spyEvent() {
                // log to console or do your own observer logic
                console.log('EVENT SPY', this, 'fired', arguments);
                // allow chaining.
                return orig.apply(this, arguments);
            };
                        
        },
        removeEventSpy: function(instance) {
            // clean up that restores orignal if possible.
 
            // not needed? already using proto one.
            if (!instance.hasOwnProperty('fireEvent')) return;

            // it has a local fireEvent but it needs to be our spy, else it's unsafe.
            if (!instance.fireEvent.name || instance.fireEvent.name != spyId) {
                console.log('ERROR: Somebody else has done this fireEvent');
                return;
            }          
            // remove it.
            delete instance.fireEvent;            
        }
    });
    
}());

This is the setup code. Now, you can use it on a Class and test it:

// define a class that uses events
var a = new Class({

    Implements: Events,
    
    initialize: function() {
        this.events = 0;    
    },
    
    doEvent: function() {
        this.events++;
        console.log('do event', this.events);
        return this.fireEvent('awesome');    
    }
});

// make the instance
var b = new a();

// subscribe to all events
Class.addEventSpy(b)

// try firing 2 quick events    
b.doEvent().doEvent();    

// clean up spy.
Class.removeEventSpy(b);

// test spy is gone.
b.doEvent();

I hope it is of some use to you. See it in action in this fiddle

You can see it live here.

If you checkout Epitome from git, you can use:

git submodule init
git submodule update

… and point your browser to your local example/todo/epitome/ folder.

Read more about how to implement this in your javascript projects in this blog post on the QMetric Tech Blog.

Pattern one. It relies on delay creating a function and passing arguments to that function at the time of invocation. Does not actually fire until time is due, but the arguments will be saved during invocation (unless they are objects, therefore by reference).

var a = new Class({
   
    Implements: [Events],
    
    initialize: function() {
        this.foo = 1;
        this.fireEvent.delay(1000, this, ['event', [this.foo, 'moar']]);
        // won't actually fire until time is due.
        this.addEvent('event', function() {
            console.log(arguments, this);
        });
        
        this.foo = 2;
    }
    
});


new a();

In pattern #2, we use the delayed event provided by MooTools. The key thing here is that the event actually fires at the time of invocation but does not arrive until the due time. The problem is, ‘just-in-time’ adding of the event after won’t work as there is no event handler prior to calling .fireEvent. In this example, nothing will log – but you can add your event before firing. Arguments will be the same as at the of invocation.

var b = new Class({
   
    Implements: [Events],
    
    initialize: function() {
        this.foo = 1;
        this.fireEvent('event', [this.foo, 'moar'], 1000);
        // has already fired, so adding the event handler now is pointless
        this.addEvent('event', function() {
            console.log(arguments, this);
        });
        
        this.foo = 2;
    }
    
});


new b();

In pattern 3, we wrap things into an anonymous function that is deferred for later via setTimeout (well, Function.delay() which is the same thing). The bonus to this pattern is that it will dispatch the value at the time of firing, not at the time of deferral.

var c = new Class({
   
    Implements: [Events],
    
    initialize: function() {
        this.foo = 1;
        (function() {
            this.fireEvent('event', [this.foo, 'moar']);
        }).delay(1000, this);
        
        // only pattern that uses fresh enough data
        this.addEvent('event', function() {
            console.log(arguments, this);
        });
        
        this.foo = 2;
    }
    
});

new c();

Hope this gives you something to take away in your app development. Look at the jsfiddle and your console here: http://jsfiddle.net/dimitar/mTkvE/

You can read the 2 blog posts I wrote on creating the Model and adding the Sync. More coming when I get time…

Storage. https://github.com/DimitarChristoff/Storage – it’s a class that allows you to API localStorage or sessionStorage, when available – with a fallback to using window.name in older browsers like IE6/7. It can be used as standalone or as a mixin (implemented) class within any other class. It also namespaces each instance within the storage so it can occlude nicely.

And…

Do you remember Router? I had liked it some months back. Turned out, it benefited from a rewrite / refactor and is now a lot more mootoolish. Though Rado accepted my pull request so I can probably delete my fork, leaving it there for now in case I think of anything else.

And then, there’s case 2: pre-emptive image loading / cache priming, which is the more interesting use. This is a relatively new trend that involves examining the user’s browsing pattern and anticipating what they do next. For instance, if they are browsing product listings as a result of a search with 100 results (20 per page), it is almost safe to assume they may want to go to page 2 or 3. It is also safe to assume the average user would take a while to finish appraising their results, scroll down and locate the ‘next’ link. This idle slot is where you can put their connection to better use by priming the browser cache with the product thumbnails of the next results page. In this instance, you don’t really care for any onload / oncomplete events, the benefits of the cache will be reaped on the next page instead.

Alternatives for priming cache are available for HTML5 browsers!
You can now use the HTML5 link prefetching API: MDN Link Prefetching

<link rel="prefetch" href="/images/big.jpeg">

Now, we’ve established why you may want to preload images, let’s focus on the how instead.

There are some considerations we need to be aware of here:

1. It needs to be threaded in parallel (to use the browser’s maximum threads, normally 6 per domain)
2. It needs to also be sequential (pipelined) for when you want to use a single thread
3. It needs to handle individual image events – onload, onabort, onerror
4. Work cross-browser and without any dependencies
5. We need to clean up resources and memory, not leak memory and prevent IE GIF onload from firing multiple times

First of all, it’s important to understand that you need to assign the onload event BEFORE you set the src property of the image object:

// a common mistake seen, adding event after src assign:
var image = new Image();
image.src = 'image.jpg';
image.onload = function(){ 
    // won't work if image already cached, it won't trigger
    // ...
};

// correct way:
var image = new Image();
image.onload = function(){ // always fires the event.
    // ...
};
// handle failure
image.onerror = function(){

};
image.src = 'image.jpg';

And second, in Internet Explorer 5/6/7, the onload event fires ALL THE TIME for animated GIFs. That’s right, on each animation loop it fires an onload for you. Which is why you need to make sure you release your image objects for GC by not saving a reference – or should you need to store them as objects into a new array – remove all onload and other events attached to them.

Anyway, without further ado, the code.

See the this in action at this jsfiddle, now also available as a repository on GitHub: pre-loader. Please note the demo needs a HTML5 browser but the preLoader class does not and should work IE6 and up.

// define a small preLoader class.
(function(){
    'use strict';

    var preLoader = function(images, options){
        this.options = {
            pipeline: false,
            auto: true,
            /* onProgress: function(){}, */
            /* onError: function(){}, */
            onComplete: function(){}
        };

        options && typeof options == 'object' && this.setOptions(options);

        this.addQueue(images);
        this.queue.length && this.options.auto && this.processQueue();
    };

    preLoader.prototype.setOptions = function(options){
        // shallow copy
        var o = this.options,
            key;

        for (key in options) options.hasOwnProperty(key) && (o[key] = options[key]);

        return this;
    };

    preLoader.prototype.addQueue = function(images){
        // stores a local array, dereferenced from original
        this.queue = images.slice();

        return this;
    };

    preLoader.prototype.reset = function(){
        // reset the arrays
        this.completed = [];
        this.errors = [];

        return this;
    };

    preLoader.prototype.load = function(src, index){
        var image = new Image(),
            self = this,
            o = this.options;

        // set some event handlers
        image.onerror = image.onabort = function(){
            this.onerror = this.onabort = this.onload = null;

            self.errors.push(src);
            o.onError && o.onError.call(self, src);
            checkProgress.call(self, src);
            o.pipeline && self.loadNext(index);
        };

        image.onload = function(){
            this.onerror = this.onabort = this.onload = null;

            // store progress. this === image
            self.completed.push(src); // this.src may differ
            checkProgress.call(self, src, this);
            o.pipeline && self.loadNext(index);
        };

        // actually load
        image.src = src;

        return this;
    };

    preLoader.prototype.loadNext = function(index){
        // when pipeline loading is enabled, calls next item
        index++;
        this.queue[index] && this.load(this.queue[index], index);

        return this;
    };

    preLoader.prototype.processQueue = function(){
        // runs through all queued items.
        var i = 0,
            queue = this.queue,
            len = queue.length;

        // process all queue items
        this.reset();

        if (!this.options.pipeline) for (; i < len; ++i) this.load(queue[i], i);
        else this.load(queue[0], 0);

        return this;
    };

    function checkProgress(src, image){
        // intermediate checker for queue remaining. not exported.
        // called on preLoader instance as scope
        var args = [],
            o = this.options;

        // call onProgress
        o.onProgress && src && o.onProgress.call(this, src, image, this.completed.length);

        if (this.completed.length + this.errors.length === this.queue.length){
            args.push(this.completed);
            this.errors.length && args.push(this.errors);
            o.onComplete.apply(this, args);
        }

        return this;
    }


    if (typeof define === 'function' && define.amd){
        // we have an AMD loader.
        define(function(){
            return preLoader;
        });
    }
    else {
        this.preLoader = preLoader;
    }
}).call(this);

This can be in a separate file or as part of your utilities. Use is up to you, the API supports the following:

new preLoader(['image1.jpg', 'image2.jpg'], /*optional*/options);

In a more comprehensive example, it can be used to load multiple images, display a progress indicator (HTML5 browsers) and fire a function when cache is primed.

// assign 50 non-cache-able images via an image generator
var imagesArray = new Array(50).join(',').split(',');
imagesArray = imagesArray.map(function(el, i){
    return 'http://dummyimage.com/600x400/000/' + i + '?' + +new Date();
});

// create a HTML5 progress element
var progress = document.createElement('progress');
progress.setAttribute('max', imagesArray.length);
progress.setAttribute('value', 0);
document.body.appendChild(progress);

var legend = document.createElement('span');
document.body.appendChild(legend);
var imageContainer = document.getElementById('images');

// instantiate the pre-loader with an onProgress and onComplete handler
new preLoader(imagesArray, {
    onProgress: function(img, imageEl, index){
        // fires every time an image is done or errors. 
        // imageEl will be falsy if error
        console.log('just ' +  (!imageEl ? 'failed: ' : 'loaded: ') + img);
        
        var percent = Math.floor((100 / this.queue.length) * this.completed.length);
        
        // update the progress element
        legend.innerHTML = '<span>' + index + ' / ' + this.queue.length + ' ('+percent+'%)</span>';
        progress.value = index;
        
        imageContainer.appendChild(imageEl);
        // can access any propery of this
        console.log(this.completed.length + this.errors.length + ' / ' + this.queue.length + ' done');
    }, 
    onComplete: function(loaded, errors){
        // fires when whole list is done. cache is primed.
        console.log('done', loaded);
        imageContainer.style.display = 'block';
        
        if (errors){
            console.log('the following failed', errors);
        }
    }
});

The preLoader supports two different modes of operation: parallel and pipeline (pass it in the options). In parallel, it just dumps the queue to the browser and lets it manage threads/concurrency on its own. When pipeline: true is passed, it will only use a single thread and won't start downloading the next image until the previous has finished or errored out. For more info, look at the example folder on the repository to see the difference.

parallel waterfall

pipeline waterfall

Three years ago I wrote a mootools plugin for password strength checking, based upon a stack overflow jquery post. I just had cause to revisit this for work at QMetric and refactored it (read, rewrote from scratch) for MooTools 1.4+

The Class is on the forge, it’s fairly flexible and can either be styled to use the default strength indicator or to output whatever you like based upon pass/fail events and scores.

You can check it out here: http://mootools.net/forge/p/strongpass or if you prefer, head to the GitHub repo directly here instead: https://github.com/DimitarChristoff/StrongPass

Links to demos are in the README.md as well as a basic buster.js test suite. Use responsibly!

The plugin works by comparing the domain typed vs a list of pre-configured popular TLDs for email, such as gmail.com, hotmail.com and so forth – and providing recommendations based upon string similarity. As a result, typing ‘foo@gnail.com’ ought to offer a suggestion ‘Did you mean foo@gmail.com?’

We decided to implement it at work and I sat down to convert it to mootools. Regretfully, none of the code of the original plugin remains, including the string distance algo ‘sift3’, which proved inaccurate and failing in IE7.

The result? A brand-spanking-new mootools.mailcheck.js (on github) for your pleasure (specific github project pages here

The mootools version now features a few improvements over the original, namely:

• choice of method for determining string distance between Levenstein (the default choice) and sift3
• more performant
• look-up cache – any strings compared that return a match are cached
• shared cache – any new instances created will benefit from old lookups, useful for use in single page applications
• automated testing via buster.js – all included with a kick start guide.

Visit the repo and give it a go, it’s a solid idea now. I have even included a jsfiddle demo and it comes with little mysql query that will grab the most popular email domains from your existing user database so you can set it up to suit your own target audience.

View a video of CI auto testing via buster.js on this plugin:

First off, my favourite find over the last month has to be the MooTools Router. What it does is handle application paths for hashes in the style of the Backbone.js router but it’s really a normal MooTools class. It can tackle dynamic parameters rather well and raises some warnings / events you can work with. For example:

BO.Router = Router.implement({
    // routes definition
    routes: {
        '#!customer/:id/'           : 'loadCustomer',
        '#!customer/:id/cancel/'    : 'cancelCustomer',
    },

    // router init
    init: function(){
        console.log('init')
    },

    loadCustomer: function() {
        console.log("loading customer with id " + this.param.id);

        BO.user.model.set({
            id: this.param.id
        });

        BO.user.model.on("change", function() {
            BO.user.view.render();
        });

        BO.user.model.fetch({
            success: function() {
                BO.user.model.off("change");
                BO.user.model.trigger("fetch");
            }
        });

    }
});

Second. Twipsy – It’s a port of the Twitter Bootstrap Twipsy tooltip plugin (now renamed in BootStrap 2.0 to bootstrap-tooltip.js). Rather nice and just works. Also, extendible so you can implement the boostrap-popover.js through it.

Third. A plugin by yours truly and Arian from mootools-core – it’s scrollspy. That’s not David Walsh’ scrollspy, it’s a port of the Twitter Bootstrap scrollspy instead. It allows you to react to elements of interest that come into view and do things to them or your nav items that are somehow related.

Fourth. “MooStrap offers the initialization function of large-scale application from middle-scale. Every one initialization processing is performed and it secures that initialization of application is ensured.” – well, perhaps english is not their strong part but if you can get past things like ‘paturn’, it does provide a nice platform to build on.

Last but not least. Composer.js is a nice alternative to Backbone.js in MooTools. It is early days but it’s looking promising for the lyonbros plugin. There are some differences in terms of approaches vs Backbone or Spine but it gets the job done. Only downside is, not mature enough and lack of tests supplied make it difficult to build on it and contribute. Hopefully, easily fixed.