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]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // 'hello world' </script> It seems like fewer and fewer developers know this, partially thanks to frameworks: <input className="…" type ..read more

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 the content changes aspect ratio. Here's how to handle it ..read more

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 up: The facts Enter XHTML Back in the late 90s and early 2000s, the W3C had a real thing for XML, and thought that it should replace HTML syntax. There were good reasons for this. At the time there was no HTML parsing spec, so when it came to anything non-trivial, you'd often end up with 4 browser engines interpreting the same HTML document 4 different ways. On ..read more

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 fetch(url); const chapterData = await response.json(); appendChapter(chapterData); } } This gives the correct result – all the chapters appear in the right order. But, it's kinda slow, because it waits for each chapter to finish fetching before it tries to fetch the next one. Alternatively, you could do the fetches in parallel ..read more

I recently recorded an episode of HTTP 203 on DOMPoint and DOMMatrix. If you'd rather watch the video version, here it is, but come back here for some bonus details on a silly mistake I made, which I almost got away with. DOMMatrix lets you apply transformations to DOMPoints. I find these APIs handy for drawing shapes, and working with the result of transforms without causing full layouts in the DOM. DOMPoint Here's DOMPoint: const point = new DOMPoint(10, 15); console.log(point.x); // 10 console.log(point.y); // 15 Yeah! Exciting right? Ok, maybe DOMPoint isn't interesting on its own, so l ..read more

By default, an <img> takes up zero space until the browser loads enough of the image to know its dimensions: When you run the demo, you'll see the <figcaption> immediately. Then, after a few seconds, this paragraph and subsequent page content shifts downwards to make room for the image. This makes the user experience massively frustrating, as content moves out from under the user's eyes/finger/pointer. For over a decade, we had to use silly hacks to manually apply an aspect ratio, and then, bloody typical, two better solutions arrived at roughly the same time. They are CSS aspect-r ..read more

Ok, it isn't always impossible. Be amazed as I cross-fade the word "good" with the word "goat": goodgoat Cross-fading is easy when one of the elements is opaque and covers the other element. As you adjust the slider, the element displaying "goat" moves from opacity: 0 to opacity: 1. Job done! But, what if neither element is fully opaque? Well, you can't use the same technique: goodgoat …as you can still see the first item underneath. In this situation, you've probably done the same as me, and faded the other item out at the same time: goodgoat And there's the problem. The "go" part of the elem ..read more

CORS 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; adding features, improving defaults, and papering over past mistakes without breaking too much of the web. Anyway, I figured I'd write down pretty much everything I know about CORS, and to make things interactive, I built an exciting new app: The CORS playground You can dive right into the playground now if you want, but I'll link to it throughout the article to demonstra ..read more

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 doesn't fit. Regardless, the cat seems pleased with itself." /> Good alt text means that screen reader users get the same 'meaning' from the page as a fully sighted user. But sometimes that's easier said than done. I recently got stuck trying to figure out the right alt text for a particular speaker image on a conference website: Jake Archibald This wa ..read more

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 the way. I'm going to leave the circular dependency stuff to the end of the article, as it isn't totally related. First up: Imports are references, not values Here's an import: import { thing } from './module.js'; In the above example, thing is the same as thing in ./module.js. I know that maybe sounds obvious, but what about: const modul ..read more