Otaqui.Com

Pete Otaqui’s blog about web development and everything else

Archive for the ‘Professional’ Category

Multiple jQuery instances can’t unbind each others events

leave a comment

If you have multiple versions (or indeed instances of the same version) of jQuery on a page, you may end up with the problem of not being able to unbind events between them.

Here’s an example:

Written by pete

October 6th, 2011 at 6:56 pm

Posted in Professional

Stop console.log causing errors in IE6 and other browsers

leave a comment

You know what it’s like … you leave a console.log buried somewhere in your code, and the error that causes in IE stops your javascript from running. Well, this little snippet will create a fake copy of the Firebug API if it can’t find a window.console.

Written by pete

September 22nd, 2011 at 5:13 pm

Posted in Professional

Simple Javascript Validator Library – Validator.js

leave a comment

I had a need to do some data validation in javascript, and all the libraries I looked at seemed quite opinionated about *what* you were going to validate – i.e. form data – let alone the increase in server-side javascript in the last couple of years. My data wasn’t directly tied to a form, so it didn’t quite seem worthwhile trying to shoe horn my needs into what the libraries expected, and I could also see a need for a validation library that could be adapted for Node.

Enter Validator.js.

Validator’s only dependency is on underscore.js from Document Cloud.

Validator has two usage forms: the first for very quick and simple one-off cases:

// Simple use:
var result
result = Validator.isEmail('not_an_email');
console.log(result); // false
result = Validator.isEmail('joe@example.com');
console.log(result); // true

I found this on its own quite a lot more flexible than most of the form-driven libraries out there. However, I also wanted to be able to create more complex sets of validations to run on a piece of data. For that case, you create an instance of Validator and use it’s add() method:

var result,
    myValidator

myValidator = new Validator();

myValidator.add('unique');
myValidator.add('minLength', 6);

result = myValidator.validate( [1, 2, 3, 4, 5, 6, 6] );
console.log(result); // false, the array is long enough but contains non-unique members

This got me a fair bit closer to what I wanted, but you don’t know which part failed, so it’s harder to give reasonable feedback. I added a set of error messages to validator instances which gets populated after a call to validate():

var result,
    myValidator

myValidator = new Validator();

myValidator.add('unique');
myValidator.add('minLength', 6);
myValidator.add('maxLength', 8);

result = myValidator.validate( [1, 2, 3, 4, 5, 6, 6, 8, 9, 10] );
console.log(result); // false, the array is long enough but contains non-unique members
console.log(myValidator.errors);
/*
myValidator.errors == [
    'The list must be made up of unique items',
    'The list is too long'
]
*/

Again, this is pretty good but even though Validator supports adding messages in any language you want and falling back (by default) to English (see the source code), default error messages still aren’t always what you need. I also added the ability to set a custom error message per “validation”.

var result,
    myValidator

myValidator = new Validator();

myValidator.add('unique').message('You are repeating yourself');
myValidator.add('minLength', 6).message('Too tiny!');
myValidator.add('maxLength', 8).message('Too bloated!');

result = myValidator.validate( [1, 2, 3, 4, 5, 6, 6, 8, 9, 10] );
console.log(result); // false, the array is long enough but contains non-unique members
console.log(myValidator.errors);
/*
myValidator.errors == [
    'You are repeating yourself',
    'Too bloated!'
]
*/

You can also chain calls to add() and message():

var result,
    myValidator

myValidator = new Validator();

myValidator.add('unique').message('You are repeating yourself')
    .add('minLength', 6).message('Too tiny!')
    .add('maxLength', 8).message('Too bloated!');

I’ve added some code which should make it easy to use this as a CommonJS AMD javascript module. In it’s default form you can just include it with a script tag.

If you’re interested in developing Validator itself, the project is tested with Jasmine and documented with JSDoc. Both of these can be run with Rake, and the easiest way to get setup is to use Bundler. Once you’ve got the dependencies you get three rake tasks:

# Start the jasmine server, and open http://localhost:8888/ to run the test suite:
$ rake jasmine
# Start the jasmine server and also run a browser through the tests automatically:
$ rake jasmine:ci
# Generate the docs
$ rake jsdoc

If you fork the project and add any more validations, please also add tests and docs.

Written by pete

August 14th, 2011 at 1:58 pm

Posted in Professional

Tagged with ,

Testing remote (PHP) websites with Capybara, Cucumber, Mechanize, Selenium 2 Webdriver … and SauceLabs

leave a comment

This is more or less the perfect setup for me, and it lets us run our tests against our PHP web application using the very fast mechanize driver where possible, and for tests that require javascript we can use either the “normal” selenium driver in capybara, or send the tests off to your local grid, or even send them off to Sauce Labs where we want to cover more platforms and versions than we have setup locally.

https://gist.github.com/1139797

Next step … running the tests in parallel!

Written by pete

August 11th, 2011 at 10:40 pm

Building Conway’s Game of Life in Javascript

leave a comment

As part of an interesting exercise at work, I built an implementation of Conway’s Game Of Life in Javascript. If you haven’t come across the Game Of Life, it’s really quite interesting and worth looking at. My colleagues also made variations, including canvas-based and Web GL 3 dimensional (there was even discussion about n-dimensional, with sliders to view the 4th, 5th and further dimensions). My particular take was to make the game space “infinite” rather than a fixed grid.

It’s not really infinite of course, I haven’t made any attempt to have a position greater than Number.MAX_VALUE. The real point is that it is possible to have a huge playing area, and only the living & possibly-living-next-round cells are taken into account.

I avoided using any ready-made frameworks, in part so that it could be transported to the server-side on top of something like NodeJS – I was imagining a multi-player game where each user could “paint” cells onto the canvas, and maybe even that next-generation cells would take an identifier from their parents, letting people “fight”. I haven’t really got the time for that at the moment, but it seemed a nice idea.

Written by pete

August 2nd, 2011 at 8:00 pm

Posted in Professional

Tagged with ,