Writing

Mostly web development, some of it personal, and lately the odd thought about software and the people it’s for. Posts are tagged, so if you follow the RSS feed you can filter out what you don’t want.

Recent

Dear Zach

I suppose it's time I responded...

From the archive

2013–2016

🌟 When everything's important, nothing is! 🌟

Do libraries and frameworks prioritize components on boot? If so, how, and if not what can we do? And, in exploring that question, I discovered that Server-Side Rendering isn't a silver bullet!

Slicing SVG 9 Ways

I recently made a 3D Card Flip element as part of my Supercharged YouTube video series, and I ran into some challenges with the shadows. I decided I should explain how I approached the solution.

The Anatomy of a Frame

I'm often asked by other developers about parts of the pixel workflow, and what fires when and why, so I figured it might be worth putting up a little reference for what's involved in shipping pixels to screen.

The Hack is Back!

Image decoding can be a source of checkboarding and jank. What if there was a way to work around it without resorting to a cluster of horror hacks? Step right up and meet my new friend createImageBitmap!

The Cost of Frameworks

I recently delivered a talk at FFConf in Brighton, called "You should use <insert library / framework here>, it's the bestestest!". I wanted to do a write-up of the presentation's content here, hopefully so it can start a broader conversation that I think we need to have, mainly around the cost of modern frameworks on mobile devices.

Big Rig

I'm a big fan of performance testing, but for many it's hard to get at extended data about what's going on during important parts of their website or web app's lifecycle. I've built Big Rig to try and make a dent in that problem.

CORS for Concern

.... and something I couldn't turn into a link-baity title for Mixed Content. (Sorrynotsorry.) So there's this podcast sample web app I want to ship, but I can't. Well, more accurately, I won't. I wanted to explain why I'm taking that stance, and to ask for a little help.

Spelunking in Decoratorland

There's a rumour of a suggestion of a thought of a concept about these things called decorators. All being well they'll land in ES7 or ES8, depending on how things pan out. I kind of do hope they pan out, because I think they're rather useful.

React + Performance = ?

React is very popular at the moment, and I can see why: its developer ergonomics are very attractive. JSX and vDOM are really nice to work with, and it certainly enables composability. But, being the performance-minded person that I am, I wanted to test the claims that it's default-fast.

Guitar Tuner

Given we have the Web Audio API and getUserMedia, I wondered if I could make a passable guitar tuner. Looks like I can, and in the process I learned way more stuff about audio than I care to mention. Cool stuff, though! I thought I'd do a breakdown of what went into building it.

Polymer for the Performance-obsessed

I'm building a small web app at the moment, and so I've taken the opportunity to give Polymer 1.0 a proper test drive. The question I was asking myself: can I get all these goodies without making users pay a huge performance cost?

Moar Performance!

It's been a while since I posted an update, so I wanted to give a brief breakdown of what I've been up to. As a huge spoiler it's... wait for it... performance stuff. But this is cool: I have three new resources just for you!

FLIP Your Animations

Animations in your web app should run at 60fps. Not always easy to achieve that,and it really depends on what you're trying to do, but I'm here to help. With FLIP.

Some Gotchas That Got Me

I've been building a web app recently and I've had one of those builds. You know, one of the ones where you seem to stumble across a bunch of bugs or unhelpful behaviours that cause you to question your own life choices...

CSS Triggers

I figure we needed a definitive reference for what work is triggered by changing various CSS properties. It's something I get asked about often enough by developers, and while we can do tests with DevTools, I have both the time and inclination to shortcut that for everyone. I'm nice like that.

Pixels are expensive

How pixels get onto your users' screens is something you should know about. Not for the sake of knowing, but because in order to be effective as a modern web developer you're going to need to optimize for it.

Better password form fields

The best experiences are all about reducing friction, and that takes many forms. Sometimes it means adding things in, like labels, tooltips or other signifiers. At other times it’s about stripping things back to the core, making it super clear what you’re supposed to do next.

trigger vs triggerHandler in jQuery

It's never nice to see bugs crop up because libraries and browsers aren't interacting as expected. In this case jQuery can cause a bit of funk with newer versions of Chrome.

Web Components and the Three Unattractive Pillars

Web Components are the future, for better or worse! That was the summary provided by Peter Gasston at Edge Conference last Friday. I finally managed to figure out, off the back of his presentation, what my primary concern over Web Components are.

My Performance Audit Workflow

Sometimes I get asked to do performance audits on web projects and to make some recommendations. So what I thought I’d do is run through what my process is, what I’m looking for, and what I typically suggest. It’s not exactly perfect, but hopefully it’ll give you an idea of what you might want to do.

Bye Bye Layer Hacks, Hello will-change

Have you ever used the translateZ hack to create a new compositor layer? Most developers have. Now there is an incoming property that's going to change how we tell the browser what we're trying to achieve. And that, in my opinion, is almost invariably a good thing.

Algowhatnow?

There have been some posts recently that lament the way that companies hire front-end developers, and in particular "Computer Science questions". I feel like throwing my hat in the ring on this one, because I have some thoughts.

Dart: on its merits

Younger Paul was an inquisitive chap. He liked to mess about with loads of different technologies, frameworks and platforms. That's changed, and I've found myself opposed to one technology in particular: Dart. But I think that's because I was conflating the language with the VM...

The Web Needs Containment

Making views in HTML is impossible largely because the browser has no idea what a view is. And that means that we end up fighting with the browser, and that's never a good idea. Let's look at why this even matters...

Bad Benchmark, Right Result

A benchmark is a benchmark, right? How wrong can it be? Turns out I got hoodwinked by one, but even when I unpicked it I discovered some interesting bugs. Come with me on a voyage of API discovery!

New Site, Same Old Priorities

A new site! The last version was getting a little bit dated, both in terms of design but also in terms of focus. I decided it was time to take a step back, simplify and reprioritise.

Making a 60fps Mobile App

Mobile apps are difficult to make. To stay relevant I decided to give it a crack. And I tried to make it run at 60fps...

It should "just work"

The browser is an opaque box, yet we often have to optimize for implementation specifics. Is that fair?

Reinventing the Wheel

I'm worried about the web. I mainly worry that we're not advancing the state of the art quickly enough. Let me explain why...

Hello, Blink!

The browser is an opaque box, yet we often have to optimize for implementation specifics. Is that fair?

Don't Guess it, Test it!

The browser is an opaque box, yet we often have to optimize for implementation specifics. Is that fair?

On translate3d and layer creation hacks

Translate3d is often hailed as something of a silver bullet. In many cases it will drastically improve rendering performance in WebKit and Blink browsers like Chrome, Opera and Safari. Let's take a look at why it can improve rendering performance, and what we need to be careful of.