The present and potential future of progressive image rendering

Progressive image formats allow the decoder to create a partial rendering when only part of the image resource is available. Sometimes it's part of the image, and sometimes it's a low quality/resolution version of the image. I've been digging into it recently, and I think there are some common...

Making XML human-readable without XSLT

Ok. This one is niche. But heh, you might enjoy a dive into this esoteric corner of the web – I certainly did. XSLT and browser support I want to get to the technical-fun bits quickly, so here's a quick rundown: XSLT is an XML language for transforming XML, including transforming it into non-XML...

Animating zooming using CSS: transform order is important… sometimes

I was using Discord the other day. I tapped to zoom into an image, and it animated in an odd way that I'd seen before. Like this: Notice how it kinda 'swoops' into the wildcat's face, rather than zooming straight in? See how the right-hand side of the cat's head goes out-of-frame, and then back i...

The case against self-closing tags in HTML

Let's talk about /: 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...

Avoiding <img> layout shifts: aspect-ratio vs width & height attributes

By default, an takes up zero space until the browser loads enough of the image to know its dimensions: &origin=source&to=/c/senna-d1c8a036.jpg When you run the demo, you'll see the immediately. Then, after a few seconds, this paragraph and subsequent page content shifts downwards to make room for...

Streaming template literals

Template literals are pretty cool right? const areThey = 'Yes'; console.log$areThey, they are; // Logs: Yes, they are You can also assign a function to process the template, known as "tagged" templates: function strongValuesstrings, ...values return strings.reducetotalStr, str, i = totalStr += st...

Iterators gonna iterate

ES6 gives us a new way to iterate, and it's already supported in stable releases of Firefox, Chrome, & Opera. Here it is: for var num of 1, 2, 3 console.lognum; // Result: 1 // Result: 2 // Result: 3 Unlike for part in thing which iterates through property names of an object in a generic way, for...

Solving rendering performance puzzles

You're missing demos in this post because JavaScript or inline SVG isn't available. The Chrome team are often asked to show the process of debugging a performance issue, including how to select tools and interpret results. Well, I was recently hit by an issue that required a bit of digging, here'...

Firefox + custom elements + iframes bug

Over at Shopify we've been building a bunch of web components to use internally and in third party contexts. All of a sudden, we found some strange errors in our logs, all from Firefox. This is the post I wish existed when we discovered it. Update: This is now fixed, and should land in Firefox 15...

Sounds fun

I played with the web audio API for the first time recently, so I thought I'd write up what I learned. I think that's my job or something. Playing a sound The simplest demonstrable thing we can do with web audio is "play a sound". But to do that, we first we need to load & decode something: // Th...

If we stand still, we go backwards

Recently, ppk claimed the web is going too fast in the wrong direction, and asked for a year's moratorium on web features. I was so angry I ran straight to a dictionary to find out what "moratorium" meant. Turns out it means "suspension". I got a bit snarky about it on Twitter, which isn't really...

The browser cache is Vary broken

Jake, why are your blog posts always so depressing? -- Domenic Denicola @domenic Well, I wouldn't want to disappoint… TL;DR If you use "Vary" to negotiate content, the responses will fight for the same cache space. Additionally, IE ignores "max-age" and Safari is buggy. Content negotiation using...

Give footnotes the boot

I hate footnotes1, and hopefully by the end of this, you will too. Let's get down to it… The UX of footnotes in printed media You, the reader, encounter a tiny number2 within some prose. This indicates to you that I, the writer, have something more to say on this topic. And, for your inconvenienc...

How should work?

We're finally getting a way to fully style & customise elements! But there's a detail I'd like everyone's opinion on. A brief intro to customisable If you want to hear about it in depth, I talked about it on OTMT, and there's a great post by Una Kravets. But here's a whirlwind tour: / Opt in to t...

Drawing a star with DOMMatrix

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

Fetch streams are great, but not for measuring upload/download progress

Part of my role at Mozilla is making sure we're focusing on the right features, and we got onto the topic of fetch upload streams. It's something Chrome has supported for a while, but it isn't yet supported in either Firefox or Safari. I asked folks on various social platforms what they thought o...