I probably could have named this post something like “Writing clean, validating and portable JavaScript”, but that would be no where near as catchy. The problem with “great” is it means different things to different people. I am going to show you my idea of great which may differ from many developers views, but I hope it helps someone improve their code.So what’s the point in this, why can’t you just carry on writing JavaScript as you have been for ages. It works doesn’t it? Well if you took the same opinion with a car and drove on 20 year old tires...

It is very often that I have to do video motion tracking for interactive video campaign in my daily work.If I’m used used to do that in Flash, I made a quick experiment to do the same in javascript.Thanks to Olof Storm who made me a perfect corner pin motion tracking in After Effects, and I’ve been using some code from Steven Wittens to draw an image in perspective.Click here to see the motion tracking demo (give it a bit of time to fully load).What I’m doing in this demo is drawing a video in a canvas, and using the corner pin tracking data to draw an image on top of the ...

A web developer today is expected to be an expert in every aspect of their craft and JavaScript is no exception.  Years ago JavaScript seemed to be more of an annoyance, producing those trailers at the bottom of the browser.  This has changed and JavaScript is a first-class citizen as a functional programming language and what seems like an unlimited number of resources covering the language.I have been doing more and more JavaScript lately, both on the front-end and some node.js on the back end.  I wanted to share some great resources I use for what’s new with regards to...

I was making a change to a page that needed to pull from a remote API and make changes to various parts of the page. Sounds like the time to pull out jQuery and Ajax, doesn't it? Instead, I just used old fashioned JavaScript. Actually, I used new fashioned JavaScript. Browsers haven't stood still in the advent of libraries and frameworks. As a result, we can take advantage of those features when we need to bake in a little extra.Some JSONPThe first step was to get the JSONP call executing. This is generally straightforward: embed a script tag into the page. The script will run a function that ...

So, a while back I had an internal presentation at work about this topic. A few good friends in the community took a look at my slides, and they thought it would make a nice blog post because “there can’t be too many good posts about jQuery introduction and best-practices.” Whether this post is going to be good or not, is up to you but I’ll try to outline what jQuery is, and how you can start working with it.For most of you, this will just be a re-cap and probably not provide much new information but can perhaps serve as a reference post if you ever need one. I will e...

Forget everything you know about object-oriented programming. Instead, I want you to think about race cars. Yes – race cars. Recently I was watching the 24 Hours of Le Mans –a popular racing event in France. The fastest cars in the race are the Le Mans Prototypes. Although these cars are built by car manufacturers like Audi and Peugeot, they are not cars you’ll see on the streets and highways of your home town. They are built exclusively for high-speed endurance racing.Manufacturers put an enormous amount of money into researching, engineering, and building these prot...

function when(conditionFunc, execFunc, interval){ if (conditionFunc()){ execFunc(); }else{ setTimeout(function(){ when(conditionFunc, execFunc, interval);}, interval); }}You have some code which should only execute when a condition is true. E.g. You have code which relies on a javascript library but can't be sure the library has loaded yet and don't want the code to execute until it has. This is common if you have a bookmarklet which injects more than one <script> tag or you have code which should only execute when an image or other asynchronously loaded element is...

Did you know var π = Math.PI; is syntactically valid JavaScript? I thought this was pretty cool, so I decided to look into which Unicode glyphs are allowed in JavaScript variable names, or identifiers as the ECMAScript specification calls them. Reserved words The ECMAScript 5.1 spec says: An Identifier is an IdentifierName that is not a ReservedWord. The spec describes four groups of reserved words: keywords, future reserved words, null literals and boolean literals. Keywords are tokens that have special meaning in JavaScript: break, case, catch, continue, debugger,...