Web development

The new HTML5 audio element now has pretty decent support across all browsers (even IE9) so is starting to be a pretty compelling alternative to using Flash. This article explains how to use the audio element, talks about which audio formats are supported by which browsers and how to control it using javascript.

A talk that I gave at the Developer, Developer, Developer day in Reading in 2011 about my experiences trying to make CSS easier to maintain. Contains slides and sample downloads.

In languages like C# and Java you never really need to give a thought to the this operator. In javascript things are a little more complicated due to functions being first class objects.

Firefox 3.6 supports multiple background images so I thought it was time to give them a go and figure out how they work. May contain small rant about beautiful markup.

A small browser quirk for IE6 where absolute positioning with the CSS right property is one pixel out when the parent container has an odd number of pixels.

How to use a tool called Packer.NET to build javascript minification into a MSBuild script.

I don’t much like reset stylesheets. They make extra work when creating CSS and are an extra request for the browser to make to build a page.

Prototype chaining is used to build new types of objects based on existing ones. It has a very similar job to inheritance in a class based language.

Experimenting with using an SVG image as a CSS background image.

Inline-block is a halfway point between setting an element’s display to inline or to block. It keeps the element in the inline flow of the document like display:inline does, but you can manipulate the element’s box attributes (width, height and vertical margins) like you can with display:block.

The story of how Joe and I used our favourite web tools to organise our wedding and share the experience with the people who couldn’t be there.

The javascript object prototype is javascript’s way of sharing implementation across similar objects, much like the way classes are used to do this in many other languages. Although constructor functions look a lot like classes, javascript does not have a class based object system like C# or Java. Instead it has a prototype based object [...]

A neat little trick I learnt from Ting is a way to check whether a value was null or undefined using the or operator (||). It’s really simple. If valueThatMightBeEmpty has a value set, you get that value. If it is null you get the default. It’s just like the ?? operator in C#: var [...]

One problem I’ve had a couple of times when using Firebug to show things during code demos is I haven’t been able to make the font big enough for people at the back to read it. I found the solution at stack overflow: 1. Open firebug in new window 2. Go to the view->text size [...]

My find for today was a Firefox extension called Dust-Me Selectors from the SitePoint guys that scans a web site looking for unused selectors in the CSS. It extracts the style references for the current page and then looks at the page to see where they are used. It can look at the current page [...]

CSS3 is going to include a new attribute called box-sizing so we can choose whether the width set on an element will include borders and padding or whether borders and paddings will be added to the width. The difference is basically the difference between the IE5 and W3C box models. The default will still be [...]

Javascript closures are a really powerful feature of the javascript language. Closures are created when a function that’s nested inside another function accesses a variable from its parent’s scope. This is really useful for passing state around your application when the inner function is called after the outer function has exited. Javascript supports functions nested [...]

The object literal syntax is great for setting up one off objects but sometimes you’ll want to mass produce objects that all have the same properties and methods. It would be a pain to have to set up each object individually so instead you can use a constructor function to do it for you. There’s [...]

I downloaded Google Chrome tonight. It’s the pretty! Only scary thing is something Joe noticed… how much the logo looks like GlaDOS from Portal. Remember that time I pretended to murder you?

In 2008 I did a talk at a .NET user group in Oxford about the nuts and bolts of how objects actually work in javascript. Here are the presentation slides and code samples.

Anonymous functions are functions that are dynamically declared at runtime. They’re called anonymous functions because they aren’t given a name in the same way as normal functions. Anonymous functions are declared using the function operator. You can use the function operator to create a new function wherever it’s valid to put an expression. For example [...]

Functions in javascript are first class objects. This means that javascript functions are just a special type of object that can do all the things that regular objects can do. Really, just like any other variable Here are a few of the important objects things that you can do with a function in javascript. A [...]

Javascript objects are basically just hash tables, a group of related properties and functions that can be accessed by a key. Properties are dynamically added at runtime. Methods are just properties that happen to be functions. Building a simple object The simplest way to build objects in Javascript is by declaring a new variable of [...]

This is a series of articles about how to use the javascript language features to write object oriented type code. It’s designed for people who are already sold on the idea of bundling functionality up into objects and want to know the javascript way of doing things.

My favourite new webdev tool of the moment is IETester. You can use it to test pages in IE5.5, IE6, IE7 and IE8 all on the same machine without messing around with your main installed version of IE. I was pretty amazed when I saw it because I’d always believed that it was a bit [...]