Ollie Williams

A clean looking graphic with sharp lines and crisp colour

The same graphic, but muddy and blocky. The previously sharp lines are blurry.

I think it's often overlooked that AVIF is also really good at flat colour & sharp edges.

Don't go straight for a lossless format just because it's the kind of image that would look bad as a JPEG.

Here's an 11kb image as an AVIF, vs JPEG XL.

Customisable select! (Single select in dropdown mode only for now)

Gecko: Intent to ship: ariaNotify

Pretty shocking that this didn't exist already.

I’m still hoping we get a standardized DOM templating API github.com/justinfagnan...

[css-images] Disabling image animation · Issue #1615 · w3c/csswg-drafts It would be nice to have a CSS property for disabling image animation. Use cases include: thumbnails Twitter-like "only animate images in focus" not wanting to animate user-uploaded content user st...

Just tried this out in Chrome Canary. Pause/play animated gif/png/webp/avif/JPEGXL. Very cool github.com/w3c/csswg-dr...

I find the one on macOS very strange with the crayons and an overwhelming amount of tabs but on iOS the fact that it’s a sheet that takes up most of the screen means it’s not fiddly. It has a built-in eyedropper. Nice slick animations and interactions that match the platform.

One worry I have about this: I’m guessing a native picker like the iOS color picker will never be styleable via CSS? But its UX/functionality is far better than a styleable customizable in-page picker would be.

Please help with this, they don't even need to be good examples, feel free to send us the bad ones too! This is gonna take *years* but the more examples we have now the sooner we can start getting to the really detailed discussions.

Browser developers are working on custom form controls ( `appearance:base`), the next giant task is looming: customisable input type=date/datetime/color pickers.

These are huge and have wildly varied UI. Send me your examples, I'd love to see them and build up a body of these pickers.

👀 Interop 2026 dashboard just dropped

See what browsers will focus on this year, more likely be come widely available soon.

Particularly interested in:
- Navigation API
- Scroll-driven animations
- popover="hint"
- Continue work on ViewTransition, anchor positioning
- more

Working on some interesting stuff...

Web Weekly 182 The Navigation API is now baseline! formaction & formmethod Anchor positioning beyond popups Custom Invoker Commands The new text-scale meta element ::search-text:current 🤯

This week's Web Weekly is about to hit all the inboxes in just a little bit! As always, it's jam-packed with baseline updates and new web dev features. 🎉

webweekly.email/archive/web-...

If you're into web dev news close to the platform, you should check it out!

Harsh noise composition ...

I have really unfortunate music taste. I was trying to get it to make something similar to Merzbow (harsh industrial noise). (I've not read any of the code, it's all Gemini). This was my favourite attempt. codepen.io/cssgrid/pen/...

I'm not a fan of Udio or Suno so I tried asking ChatGPT and Gemini to write me a song using the Web Audio API... it's not great.

One more custom <select> demo, with a bunch of CSS transforms and animations.
I can't get enough of this. So cool.

Blink: Intent to Ship: JSON and style support for link rel=modulepreload

Astro is joining Cloudflare By joining forces with the Astro team, we are doubling down on making Astro the best framework for content-driven websites for many years to come.

The Astro Technology Company team — the creators of the Astro web framework — is joining Cloudflare. We’re doubling down on making Astro the best framework for content-driven websites. https://cfl.re/4qlJCd3

Despite the ubiquity of WOFF2 for smaller font files and modern image formats (WebP, AVIF) page weight continues to grow 🤔

A CSS `image-animation` property: groups.google.com/a/chromium.o.... The example below would pause all animated images (like GIFs), and only play them when hovering or focusing an image:

```css
img { image-animation: paused; }
img:hover, img:focus { image-animation: running; }
```

Gecko: Intent to ship: colorspace and alpha attributes for `<input type=color>`

Graphic with headline “Initiating navigations with the Navigation API”, showing code snippets and the site name “olliewilliams.xyz”, alongside a circular portrait.

Initiating navigations with the Navigation API. @ollie-williams.bsky.social shows navigate(), reload(), back(), forward(), and traverseTo(), plus state, info, and committed and finished promises for intercepted navigations. #js #router #url

olliewilliams.xyz/blog/initiat...

New year, new web performance mystery (and it's a huge one):

calendar.perfplanet.com/2025/the-cur...

My Christmas wish is for someone to just add the necessary internal test API to check if it's worked. Then I can get it working 😅.

The showPicker() method is still unusable There's still no reliable way to show a picker for any input other than <input type="file">.

My Christmas wish is for Safari to fix showPicker

olliewilliams.xyz/blog/showpic...

The navigate event Using the Navigation API for same-document navigations

olliewilliams.xyz/blog/the-nav...

Man, I love that view transitions make things like this possible with only a few lines of code. 🥰

Streams are now iterable in Safari Technology Preview
developer.apple.com/documentatio...

web.dev/articles/str...

I take that back it does work in Safari

Done issues.chromium.org/issues/46902...