Archive

Three years ago I shared the struggles my team faced trying to get Webpack 4 to compile files with consistent names across the 20+ separate codebases which serve FT.com. Webpack 5 was released soon after my post and one change in particular would have made our struggles almost entirely redundant.

Node has always shipped with enough features to create basic web services but until recently it's standard library has been fairly bare bones. Thankfully, Node has started to include functionality for some of the most repeated use cases and features from the Web platform have started appearing too.

My heatmap was not very good because the shops and restaurants I'd plotted were a proxy for a population map rather than highlighting outstandingly fancy places so I learned how to read the British National Grid.

How does FT.com serve 40 million page views a month? With help from an old, imperfect and somewhat inefficient solution.

We wanted our collection of microservices to share and reuse the JavaScript assets they each compile. How hard could that be?!

A project at the start of my career came with very little chance of success.

Our last set of tech principles became obsolete so we updated them to reflect the current environment and have taken steps to keep them relevant.

Earlier this year I spent a few weeks researching, testing and re-building the search functionality for FT.com. This is general guide for non-experts trying to gain some understanding of full-text search.

— 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.

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.

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.

— 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.

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'.

— 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.

— 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

— 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.

— 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.

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.

— 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.

— 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.

— 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.

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.

— 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.

— 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.

— 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.

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.

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.

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.

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.

— 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.

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.