This morning I found out that the part of Mozilla that I’ve be working within for the past year had collapsed. A meeting was scheduled with HR for them to tell me my job is ‘at risk’. In other words I have a few weeks to find a something new. Here’s my perspective on what happened.

Just over two years after Fastdom was born, I’m happy to announce a formal V1 release.

I’ve been using AMD modules (RequireJS) for various projects for a while. It has some advantages over ‘CommonJS’ (ie. Browserify) solutions, but has additional complexity around package installation.

Last November I left my role at the Financial Times and began a new chapter at Mozilla. I’m now over six months into the experience, and only now does it feel like the dust is finally beginning to settle.

One of the most important things I’ve learnt in my time as a front-end developer is the value of ‘components’. We hear the term being tossed around all to often in the community, but to many of us components are still a foreign concept.

I just managed to flash my Nexus 4 device with Firefox OS, here are the steps I went through to do it.

I recently purchased a premium Dropbox account to make working across multiple machines a little easier. I didn’t want to have to think about what and when to move stuff into my Dropbox, I just wanted my Documents folder to be my Dropbox.

The are two selectors in CSS which are able to target siblings, + and ~. There are few use cases for these selectors, but in the past I have been very thankful for their existence.

Commenting CSS is critical if you are to inform fellow team members (or even just your future self) why you have written code as you have. Code is re-written all the time, and if clever solutions/hacks are not documented, they can easily be left out; this all to often how style regressions get introduced. Clean, consistent formatting also suggests a level of code quality that contributors will feel inclined to match.

Creating dynamic, responsive applications means parts of our interface need to have several different appearances, or ‘states’. We find ourselves having to do a lot more, with the same amount of markup.

Every developer can write CSS, the hard part is keeping things manageable as your app starts to grow.

One of the most expensive things we do inside our app is insert base64 encoded images into the DOM. You can easily blow your frame budget (16ms) if you try to insert too many images in one go. Below is a timeline showing one particular frame being smashed when a load of images get inserted into the DOM.

One of my pet hates in JavaScript is code nested inside deep ifs and elses. It seems to make functions a lot harder to follow, and nine times out of ten can be avoided. I’ll try to demonstrate by showing a few before and after examples.

You’ve probably heard of and used the Math.min and Math.max functions in JavaScript before, they’re pretty self explanatory.

In the past I have used CSS Animations to roll my own loading spinners. I prefer using CSS animations as I can get a smoother frame rate, without the need for any clunky gif assets.

As you may know I have recently migrated my blog from Tumblr to a custom Jekyll solution hosted on GitHub Pages. My main issue was redirecting traffic from old links to my new domain and URL schema. The URL changed as follows:

Object.create() returns a new object with a prototype of the object you passed it.

Inheritance is the process of generating a new class that is based on (or extends from) the properties of an existing class. JavaScript doesn’t offer inheritance out of the box, but with just four lines of code we can make our own inheritance method. I will will introduce this technique, and attempt to explain simply how it works.

Layout Thrashing occurs when JavaScript violently writes, then reads, from the DOM, multiple times causing document reflows.

Most of you will have heard about window.matchMedia. It’s a relatively simple API that accepts a string in the form of CSS @media query.

By default git has no coloured output. Quickly improve the situation with:

‘Layout’ is the process a browser undergoes to calculate the position and size of each element in a document before it can start painting pixels. The process of layout can be costly, especially on low powered mobile devices.

Today I came across some odd behaviour in Chrome Android. In our app we have a module that is responsible for listening for user touch events and responding by panning or swiping to the next page.