HTML attributes vs DOM properties

Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); ... more

View transitions: Handling aspect ratio changes

This post assumes some knowledge of view transitions. If you're looking for a from-scratch intro to the feature, see this article. When folks ask me for help with view transition animations that "don't quite look right", it's usually because ... more

The case against self-closing tags in HTML

Let's talk about /> : <input type="text" /> <br /> <img src="…" /> You'll see this syntax on my blog because it's what Prettier does, and I really like Prettier. However, I don't think /> is a good thing. First ... more

The gotcha of unhandled promise rejections

Let's say you wanted to display a bunch of chapters on the page, and for whatever reason, the API only gives you a chapter at a time. You could do this: async function showChapters(chapterURLs) { for (const url of chapterURLs) { const response = await ... more

How to win at CORS

CORS (Cross-Origin Resource Sharing) is hard. It's hard because it's part of how browsers fetch stuff, and that's a set of behaviours that started with the very first web browser over thirty years ago. Since then, it's been a constant source of development; ... more

Writing great alt text: Emotion matters

If you prefer videos to articles, there's an episode of HTTP 203 on this topic. Ok, on with the article… <img src="/c/silly-cat-9568aaa9.jpg" alt="A black cat lying down, wearing a flip-flop on one foot. It's a human flip-flop so it ... more

`export default thing` is different to `export { thing as default }`

Dominic Elm DM'd me on Twitter to ask me questions about circular dependencies, and, well, I didn't know the answer. After some testing, discussion, and *ahem* chatting to the V8 team, we figured it out, but I learned something new about JavaScript along ... more

In JS functions, the 'last' return wins

In JavaScript functions, which return wins? function test() { return 'one'; return 'two'; return 'three'; } You might say, "well it's the first one", but I'm going to try and convince you it's the last one . Don't worry, the function above ... more

Performance-testing the Google I/O site

I've been looking at the performance of F1 websites recently, but before I dig into the last couple of teams, I figured I'd look a little closer to home, and dig into the Google I/O website. Part 1: Methodology & Alpha Tauri Part 2: Alfa Romeo Part ... more

Who has the fastest F1 website in 2021? Part 8

This is part 8 in a multi-part series looking at the loading performance of F1 websites. Not interested in F1? It shouldn't matter. This is just a performance review of 10 recently-built/updated sites that have broadly the same goal, but are built by ... more

Who has the fastest F1 website in 2021? Part 7

This is part 7 in a multi-part series looking at the loading performance of F1 websites. Not interested in F1? It shouldn't matter. This is just a performance review of 10 recently-built/updated sites that have broadly the same goal, but are built by ... more

Who has the fastest F1 website in 2021? Part 6

This is part 6 in a multi-part series looking at the loading performance of F1 websites. Not interested in F1? It shouldn't matter. This is just a performance review of 10 recently-built/updated sites that have broadly the same goal, but are built by ... more

Who has the fastest F1 website in 2021? Part 5

This is part 5 in a multi-part series looking at the loading performance of F1 websites. Not interested in F1? It shouldn't matter. This is just a performance review of 10 recently-built/updated sites that have broadly the same goal, but are built by ... more

Who has the fastest F1 website in 2021? Part 3

I once spent an hour creating an F1 lights-out reaction test which went viral and was even played by F1 drivers. That sounds like a brag, and it kinda is, but now whenever I pour days or even weeks of work into something, it just seems so inefficient ... more

Who has the fastest F1 website in 2021? Part 2

Ohhh, you've come back for more? Excellent. I was worried it was just going to be me sat here, typing to myself. This is part 2 in a multi-part series looking at the loading performance of F1 websites. Not interested in F1? It shouldn't matter. This ... more

Who has the fastest F1 website in 2021? Part 1

In 2019 I did a performance review of F1 websites, and it was fun so I figured I'd do it again, but bigger (definitely) and better (I hope). Turns out a lot has changed in the past two years, and well, some things haven't changed. Not interested in F1? ... more

Don't use functions as callbacks unless they're designed for it

Here's an old pattern that seems to be making a comeback: // Convert some numbers into human-readable strings: import { toReadableNumber } from 'some-library'; const readableNumbers = someNumbers.map(toReadableNumber); Where the implementation of toReadableNumber ... more

CSS paint API: Being predictably random

Take a look at this: Space invaders If you're using a browser that supports the CSS paint API, the element will have a 'random' pixel-art gradient in the background. But it turns out, doing random in CSS isn't as easy as it seems… Initial implementation ... more

A padlock problem

There's a difference between what the browser 🔒 means to users, vs what it means to browsers. To users, it means "the page is secure", but to the browser: The certificate dialog in Chrome …it means the "connection" is secure. This ... more

Different versions of your site can be running at the same time

It's pretty easy for a user to be running an old version of your site. Not only that, but a user could be running many different versions of your site at the same time, in different tabs, and that's kinda terrifying. For instance: A user opens your site. ... more

Service workers at TPAC

Last month we had a service worker meeting at the W3C TPAC conference in Fukuoka. For the first time in a few years, we focused on potential new features and behaviours. Here's a summary: Resurrection finally killed reg.unregister(); If you unregister ... more

Probably?

Remy Sharp asked a question on Twitter that got me thinking about probability for the first time in a while. The problem Get your copybooks out now! Remy is using an image service that has an API which returns a URL for one of its images, picked at random. ... more

Who has the fastest website in F1?

I was trying to make my predictions for the new Formula One season by studying the aerodynamics of the cars, their cornering speeds, their ability to run with different amounts of fuel. Then it hit me: I have no idea what I'm doing. So, I'm going to ... more

A declarative router for service workers

I'm looking for feedback on this API. It isn't yet supported in any standard or browser. In the very early days of service workers (while they were still named "navigation controllers") we had the idea of a declarative router. This provided ... more

What happens when packages go bad?

I built spritecow.com back in 2011, and I no longer actively maintain it. A few months ago, a user berated me for using a crypto currency miner on the site without their informed consent. And sure enough, the site's JS had a small addition that loaded ... more

I discovered a browser bug

I accidentally discovered a huge browser bug a few months ago and I'm pretty excited about it. Security engineers always seem like the "cool kids" to me, so I'm hoping that now I can be part of the club, and y'know, get into the special parties ... more

Third party CSS is not safe

A few days ago there was a lot of chatter about a 'keylogger' built in CSS. Some folks called for browsers to 'fix' it. Some folks dug a bit deeper and saw that it only affected sites built in React-like frameworks, and pointed the finger at React. But ... more

Arrays, symbols, and realms

On Twitter, Allen Wirfs-Brock asked folks if they knew what Array.isArray(obj) did, and the results suggested… no they don't. For what it's worth, I also got the answer wrong. Type-checking arrays function foo(obj) { // … } Let's say we wanted to do ... more

Netflix functions without client-side React, and it's a good thing

A few days ago Netflix tweeted that they'd removed client-side React.js from their landing page and they saw a 50% performance improvement. It caused a bit of a stir. This shouldn't be a surprise The following: Download HTML & CSS in parallel. Wait ... more

Lazy async SVG rasterisation

Phwoar I love a good sciency-sounding title. SVG can be slow When transforming an SVG image, browsers try to render on every frame to keep the image as sharp as possible. Unfortunately SVG rendering can be slow, especially for non-trivial images. Here's ... more