Sign in

Jake Archibald

@jakearchibald.com
49K followers 552 following 1.9K posts

Developer of sorts at @webdevs.firefox.com, but this is my personal account. No thought goes unpublished. He/him.

PostsRepliesMedia
Reposted by Jake Archibald
Jovi 🐨 @jovidecroock.com · 9h
Child reconciliation goes through Element.moveBefore() where supported. Reverse a list of 10 iframes: Preact 10 reloads 9, Preact 11 reloads 0, and the focused input stays focused.
Diagram comparing keyed list reordering behavior in Preact 10.29.8 and Preact 11.0.0. In Preact 11, keyed DOM moves use Element.moveBefore() where supported, preserving iframe state and input focus during reordering. Moving one row, reversing the list, and shuffling the list all reload 0 of 10 iframes and keep focus in Preact 11. In Preact 10, the same operations reload 1, 9, and 6 of 10 iframes respectively, and focus is lost in each case.
2131
Reposted by Jake Archibald
Jovi 🐨 @jovidecroock.com · 9h
Preact 11 is out 🎉 We’ve been hard at work at making our diffing use modern features like moveBefore , leveraging ESM for tree-shaking Preact Compat and ensuring you have a great experience with resumed hydration.
58619
Reposted by Jake Archibald
London Web Standards @londonwebstandards.org · 10h
There are still tickets available for this
015
Reposted by Jake Archibald
Fronteers @fronteers.bsky.social · 03/08/2026
+++ The Venue +++ Everything happens in one place. Talks, coffee, dinner and conversations - no rushing between locations, just an evening focused on learning and meeting fellow frontend developers. See you at Fronteers Dark Mode? Fronteers Dark Mode Oct 2nd in Dordrecht 🇳🇱 🎟️ fronteersconf.org
A curved, multi-story glass facade of a café/gallery space, warmly lit inside with illuminated lettering above the entrance, and empty tables and chairs on the paved patio outside.A bright bistro interior with a row of red benches, set wooden tables and chairs, large arched windows that cast light onto simple wall panels, warm wall sconces, and a large potted plant, all in a serene atmosphere.An elegant interior featuring a curved wooden bar and stools, a red-and-white checkered marble floor, dark curtains, and warm, curved ceiling lights that cast an atmospheric glow over the tables, window arches, and seating area.An empty movie theater with symmetrically arranged red velvet seats, warm wall sconces, wood paneling on the sides, and a dark ceiling with recessed spotlights; a view toward the front, showing the screen/projector opening and an illuminated emergency exit.
0166
Reposted by Jake Archibald
Firefox for Web Developers @webdevs.firefox.com · 29/09/2026
Firefox 157 has landed, and includes a couple of useful CSS features: 🎉 at-rule() in @supports - lets you limit rules to browsers that support a given at-rule. 🎉 overscroll-behavior: chain - lets scrolling pass up to parent elements, but prevents UA effects like 'bounce' and overscroll. …And more!
developer.mozilla.org
Firefox 157 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 157 that affect developers. Firefox 157 was released on September 29, 2026.
25311
Reposted by Jake Archibald
rem / Remy Sharp @remysharp.com · 29/09/2026
After careful consideration and a look at where the industry is spending it's funding we've decided to pivot #FFConf in a "new" direction. I present to you: ffconf.ai Please share with bots and humans alike.
ffconf.ai
FFConf.ai
The web conference, now with 100% less you. Agent-first, human-optional, ice cream not included in the Enterprise tier.
65419
Jake Archibald @jakearchibald.com · 29/09/2026
Does that work? The spec suggests the ICB of the iframe's document becomes locked. Is that right @bram.us? drafts.csswg.org/css-sizing-4...
drafts.csswg.org
CSS Box Sizing Module Level 4
230
Jake Archibald @jakearchibald.com · 29/09/2026
So, with this new API, what do I do if the user resizes the main window, such that the iframe element changes width?
120
Jake Archibald @jakearchibald.com · 29/09/2026
And the parent page will never be resized?
000
Jake Archibald @jakearchibald.com · 29/09/2026
Isn't it, like, less than 10 lines of code?
210
Jake Archibald @jakearchibald.com · 29/09/2026
How do I call that from the parent document? I'm talking about cases where the iframe has changed width on the parent.
020
Jake Archibald @jakearchibald.com · 29/09/2026
Right, and if the iframe is width:100%, and therefore changes width due to things in the parent page, how does the parent page tell it to update height? (cc @bram.us)
140
Jake Archibald @jakearchibald.com · 29/09/2026
Having to use JS to update the iframe's size in response to simple things like opening a <details> inside the iframe seems a bit useless, no?
120
Reposted by Jake Archibald
Cyd Stumpel @cydstumpel.nl · 16/08/2026
Started working on my demo for Fronteers Dark Mode, this is built with CSS scroll-driven animations, no JS 💅 My talk will go into detail on where you can replace JS with CSS! Tickets are still available: fronteersconf.org This cool effect is inspired by @thomasaufresne.com → bennettandclive.com
7898
Jake Archibald @jakearchibald.com · 28/09/2026
Ohh, so there's value in a gain map even for 'HDR' screens, because it can adapt better to the screen & settings (eg brightness)?
210
Jake Archibald @jakearchibald.com · 28/09/2026
Yeah, I'm not sure what's going on with the PQ AVIF in Firefox. That seems like a bug to me. But even the PQ JXL… it's not awful, but with the gainmap I get full control over how the SDR version appears.
000
Jake Archibald @jakearchibald.com · 28/09/2026
It depends how the HDR values get crushed down to SDR. With gain maps, you get to choose both the SDR and HDR representations (just as you would with two separate images). Compare PQ AVIF to SDR-based gain map on an SDR screen:
random-stuff.jakearchibald.com
HDR formats
100
Jake Archibald @jakearchibald.com · 28/09/2026
It's just a JPEG with a gain map. It's well supported I think. But with JPEG you're still starting with an 8-bit image.
020
Jake Archibald @jakearchibald.com · 28/09/2026
cjxl doesn't support gain maps yet, and neither does jxl-rs, but it'll be interesting to see if it has this same overhead problem. I suspect it will.
130
Jake Archibald @jakearchibald.com · 28/09/2026
I've been playing around with HDR images on the web. It seems that, for AVIF (the only web format that supports high bit depth and gain maps), gain maps add a lot of overhead. On the web it'd be much better to use <picture> to serve the right image for the screen.
2141
Reposted by Jake Archibald
MDN Web Docs @developer.mozilla.org · 25/09/2026
🆕 Customize MDN's browser compat tables! Press ⚙️ Settings on any compat table to choose which browsers and engines you see, and hide the ones you don't need. Your picks are saved in your browser. Try it 👇 developer.mozilla.org/en-US/docs/W...
MDN's browser compatibility table for the HTML popover attribute. Its columns cover desktop and mobile browsers, showing which versions support the attribute and its "hint" value. A "Settings" button sits above the table.The Browser compatibility settings dialog on MDN. Browsers appear as chips grouped under Desktop, Mobile, Server and XR, and each one can be added to or removed from the table.
27725
Reposted by Jake Archibald
IntentToShip @intenttoship.dev · 25/09/2026
Gecko: Intent to Ship: Scroll-driven Animations
groups.google.com
Gecko: Intent to Ship: Scroll-driven Animations
Gecko: Intent to Ship: Scroll-driven Animations
1449
Reposted by Jake Archibald
Niels Leenheer @html5test.com · 24/09/2026
Fronteers Dark Mode conference is next week! Monday I'll send badges to the printer... which means if you want a proper badge... sign up now! We've got a handful of tickets left and they are only €100 for an evening of front-end talks by some amazing speakers. www.fronteersconf.org
fronteersconf.org
Fronteers Dark Mode, Friday, October 2nd, Dordrecht
Join us at Cinema de Witt in Dordrecht for our after work conference.
098
Jake Archibald @jakearchibald.com · 24/09/2026
I don't understand. Can you… clarify or reword this?
101
Jake Archibald @jakearchibald.com · 23/09/2026
I've proposed "progressive image rendering" as a focus area for Interop 2027, so we can get progressive JPEG XL support in Safari, and progressive AVIF support in both Safari and Firefox. github.com/web-platform...
github.com
Progressive image rendering for JPEG XL and AVIF · Issue #1459 · web-platform-tests/interop
Description When we looked into JPEG XL, I asked developers why they were interested in the format, and the most common answer was "progressive rendering". This is now working in Firefox and Chrome...
3629
Jake Archibald @jakearchibald.com · 23/09/2026
A picture of a puppy is nice. I feel you're avoiding talking about something that's representative of the final image, because blurhash is not.
100
Jake Archibald @jakearchibald.com · 23/09/2026
Creating something unrecognisable is really really easy. But what problem does 'unrecognisable' solve?
200
Jake Archibald @jakearchibald.com · 23/09/2026
Given that we already have sold colours and gradients, and there's clearly the ability to do a more structured preview in ~500 bytes, what's the justification for something like a blurhash? What use-case is it solving?
110
Jake Archibald @jakearchibald.com · 23/09/2026
Both X and WhatsApp use more representative image previews. The smallest thing that fills the empty area instantly is a solid colour and this is already possible. The platform already has gradients too. I don't see the justification for a new inefficient gradient format.
110
Reposted by Jake Archibald
Keith Cirkel @keithamus.social · 22/09/2026
I just released avash: www.keithcirkel.co.uk/avash/ It’s like blurhash but uses av1 frame data encode an image, resulting in a (typically) more readable image in the same bytes as a blurhash. github.com/keithamus/av...
keithcirkel.co.uk
avash encoder
3202
Jake Archibald @jakearchibald.com · 22/09/2026
Something being popular isn't reason enough, especially given that apps with more resources seem to be moving away from blurhash. Take your example. I guessed the image might be a seascape. It wasn't. Compare your example to a 1 kB AVIF:
A blur that's vaguely blue up top, then kinda red in the lower middle, and black in the bottom left.A blur that clearly shows a blue sky with some clouds, what looks like a building in the lower left, and a pyramid-shaped thing in the lower middle.
120
Jake Archibald @jakearchibald.com · 22/09/2026
I don't see what use-cases they serve vs a regular gradient (and something we could expand to a mesh gradient later). Are the use-cases you're thinking of documented anywhere?
100
Jake Archibald @jakearchibald.com · 22/09/2026
I think blurhash is almost useless, and we have the opportunity to do so much better github.com/MicrosoftEdg...
github.com
[Image Preview for HTML Images] Do better than blurhash · Issue #1406 · MicrosoftEdge/MSEdgeExplainers
Blurhash is cute and nothing else. It's close to useless even compared to CSS features we may soon get. It seems like sites are moving away from it for good reason. For example, I was sent an X lin...
150
Jake Archibald @jakearchibald.com · 21/09/2026
It's less about scope and more about where things end up getting fully computed. Without @property, or with a * syntax, it doesn't convert things like sibling-index() to their number, so that part is left until you use it with var(). With @property it fully computes in the custom property.
120
Jake Archibald @jakearchibald.com · 21/09/2026
This technique can be used to read em & container query units for a particular element, then use them in a child element - I just used it to allow an element to generate negative margins to 'break out' of its container. Claude told me it wasn't possible until I gave it the link 😁
jakearchibald.com
Controlling when CSS custom property values are computed
The default might not be what you expect, and it has a big impact on your styles.
3352
Jake Archibald @jakearchibald.com · 21/09/2026
Really excited about this one! A new web conference in Liverpool, UK.
0401
Jake Archibald @jakearchibald.com · 21/09/2026
Yeah. I haven't dug enough to put anything in the "pro" column, but having to dig for it is an issue. Whereas there's a big obvious thing in the "con" column.
110
Jake Archibald @jakearchibald.com · 20/09/2026
There's lots I haven't yet understood about atproto, but I simply won't do the standard.site thing whilst it offers a worse UX than… not doing it.
5635
Jake Archibald @jakearchibald.com · 20/09/2026
I am delighted that person is upset.
2120
Reposted by Jake Archibald
danielroe @danielroe.dev · 19/09/2026
don't be nice.
roe.dev
Don't be nice
Sometimes, it's more important to be good than it is to be nice.
41734246
Jake Archibald @jakearchibald.com · 19/09/2026
I think we have some failing tests with that combination
000
Jake Archibald @jakearchibald.com · 18/09/2026
Now I've come back to it, I guess that demo makes total sense, but it cost me time trying to figure out what was going on with that first line.
100
Jake Archibald @jakearchibald.com · 18/09/2026
Yeah, I'm working from Figma. I've ran into some surprising behaviours with text-box, I really thought this one was a bug, but it seems to be cross-browser random-stuff.jakearchibald.com/interesting-..., so I'm not sure it should be in a reset. But I've used it a lot.
random-stuff.jakearchibald.com
Interesting text-box side-effect
141
Jake Archibald @jakearchibald.com · 18/09/2026
I'm building a site where I can use pretty much any baseline CSS feature and… ahhh @scope and text-box are so good.
4591
Reposted by Jake Archibald
Niels Leenheer @html5test.com · 18/09/2026
Two weeks from now Fronteers Dark Mode will happen in Dordrecht in The Netherlands. There are still a few tickets left. Be quick ⚠️ Join us for an afternoon and evening of great talks. With a spectacular line up: @anjana.dev, @tunetheweb.com, @cydstumpel.nl, @csswizardry.com and @heydonworks.com
21310
Jake Archibald @jakearchibald.com · 17/09/2026
Ohhh TIL!
010
Jake Archibald @jakearchibald.com · 17/09/2026
I remember a conference after party a decade+ ago where @johnresig.com was stood in the corner on his own because everyone (including me) was too shy to speak to him. Fwiw, if you ever want to talk to me at one of these things, please just do it. I'm also shy.
2713
Reposted by Jake Archibald
Viewport @viewportconf.org · 03/09/2026
We just finished the beta of our website. Look out for updates on Viewport soon! You can sign up to our mailing list to be kept in the loop. viewportconf.org
viewportconf.org
Viewport 2027 — An independent conference about the web
An independent conference about the web, the people who build it, and the people we build it for. Liverpool, May 2027.
1136
Reposted by Jake Archibald
Ana Rodrigues @ohhelloana.blog · 14/09/2026
you really should and I need to do it more too ohhelloana.blog/tell-the-spe...
ohhelloana.blog
Tell the speakers that you liked their talks
if you always wanted to but think it isn't worth telling a speaker you liked their talk, this is your encouragement post to do so.
27721
Jake Archibald @jakearchibald.com · 15/09/2026
For high density, is it just a matter of targeting a lower SSIMU2, or do we need a new algorithm for high density?
110