Articles

2016

— Updated

The aim of CSS was to separate content and style but our layouts are as tied to our markup as ever. Grid layout has the chance to deliver a huge shift in the way we rationalise layout systems for the web and drastically reduce the complexity of the markup and styles currently required.

Read more

2015

Use of the icon font is in decline. Recently it’s been argued that there are many good reasons to think about not using them and switch to using SVG images instead. At the Financial Times we must provision proper fallbacks for much of the 4% of browsers that don't support SVG. As it turns out, that's hard.

Read more

The tools we use to build interfaces for the web browser are pretty low level so if we want to compete with native applications we have to implement everything ourselves on the client-side in JavaScript. This can mean we end up with a lot of code but we can't afford to make our sites clunky.

Read more

2014

— Updated

Managing typographic rhythm consistently across different screen sizes is a designer's favourite but many developer's nightmare. Using the maps feature of Sass I create a simple interface that's for both designers and developers.

Read more

One of the main advantages of using a CSS pre-processor is the ability to use variables. Colours are usually one of the first pieces of repetitive code to be abstracted into variables but I like to take colour management one step further and specify the relationship between the colours, a process which I call 'themes'.

Read more

— Updated

At last I'm going to make my Tube Tracker application run first on the server and then try to use as much of the the same code in the browser. With careful planning doing so can make the brittle, client-side JavaScript app robust and reliable but structuring the code to work as one took many times longer than anticipated.

Read more

— Updated

In part 2 covered the process of optimising my Tube Tracker application for the browser but each change I made still required refreshing the browser to check everything was still working. The application really needed a test suite and as it turns out, this is easier said than done

Read more

— Updated

In part 1 I covered the reasons why I think React is an exciting tool but the code being delivered to the browser in the initial demo failed every basic web performance test. Browserify enables developers to write separate CommonJS style modules, as used by Node.js, with the intention of compiling them into a single file for the browser.

Read more

— Updated

The robustness engrained into key parts of the web stack gets forgotten as we build more dynamic applications, users might not get anything when even a small problem occurs. React provides a straightforward means to creating adaptive-hybrid or isomorphic web applications which can inject robustness back into our projects.

Read more

Centring elements horizontally or vertically often works in mysterious ways and one of the seemingly simple layout problems that can make CSS so frustrating to use. This is a battle-tested dropdown menu able to cope with an unknown number of option columns and always centred relative to its toggle using only IE8-compatible CSS.

Read more

2013

— Updated

Images with text overlays are should be bread and butter for most front-end developers but sometimes they're not so simple. Now within CSS there is the separation between layout and visual effects which is very good news indeed.

Read more

— Updated

In my opinion the JavaScript bootstrap is one of the most awkward parts of a web page. To try and find the best compromise between plug-and-play scripts, code maintainability, content flexibility and performance I have written GroundworkJS, a simple bootstrap for loading and binding DOM elements to JavaScript modules.

Read more

— Updated

Device diversity gives all web designers and developers a headache. Fortunately front-ender tools continue to beat challenges and provide the means to quickly tool-up and get results without owning a personal device lab or managing a stack of virtual machines and SDKs.

Read more

There are few projects where content is provided up-front but content is the only constant and it is not appropriate nor future-proof to think about anything else first.

Read more

— Updated

Using a little basic CSS, JavaScript and a dash of animation it's simple to avoid the performance hit of re-calculating layout and provide a smooth user experience.

Read more

— Updated

We need smarter tools to enable us to create truly modular, interoperable CSS components. I propose extending existing functional selectors to accept property expressions.

Read more

— Updated

The mouseover is a standard interface paradigm but in theory should not add any distinguishable behaviour to your website when browsing on a touch device, but that's not quite what happens.

Read more

The W3C recently announced 'HTML5 Definition Complete' which has left me feeling even more awkward than usual, so much of what we do in the browser is still a hack.

Read more

2012

It's no secret web designers and developers do not enjoy working with SEO companies but it isn't (always) because we feel their advice is patronising, homoeopathic bullshit.

Read more

The entire paradigm of WYSIWYG for producing website content is inherently broken. Online content relies on markup to give meaning to the text, a property you can't always see.

Read more

Integrating dependency managers and understanding modular JS proposals is (probably) the end goal for all website development but using a simple, structural approach is sane, faster and a step in the right direction.

Read more

— Updated

The CSS float property is the building block of the present web page. Except floats exist only for one reason so it stands out as inappropriate when our disposition is to believe in how advanced CSS has become.

Read more

It's tough hiring top developers when the talent pool is so small. To help avoid frustrating already fraught interviewers I've considered some candidate pre-reading.

Read more