| GitHub | https://github.com/jakearchibald |
When I look at the source order (which will be the tabbing order) vs the rendered order. I think… 'help!'
When faced with content, aside from the 'latest', I have no idea which order the content is in.
It's nice to have new layout systems landing, but… I find grid-lanes layouts really hard to follow as a user, especially with written content.
WebKit did a great article on how it can be used as a progressive enhancement https://webkit.org/blog/17758/when-will-css-grid-lanes-arrive-how-long-until-we-can-use-it/, but when I see the 'fallback' grid rendering, I feel that, as a user trying to consume content, that's the one I'd prefer.
I've been playing around with Chrome's experimental HTML-in-Canvas API (I use it to create my videos), and I wanted to see if I could make text-selection work on a curved surface by moving the underlying element around on pointermove. It works pretty well!
Live demo: https://random-stuff.jakearchibald.com/apps/curved-markup/ (needs Chrome Canary with the canvas-draw-element flag.
Source: https://github.com/jakearchibald/random-stuff/blob/main/apps/curved-markup/src/App/index.tsx#L113
Because you can provide arbitrary image data to the encoder for the progressive passes, you're in full control over what those passes look like.
In this example, I've created a pass that's blurred except for the 'focal point' of the image (I'm not sure it's a good effect though).
There's something quite exciting happening with AVIF and progressive rendering.
Some recent patches let you provide custom 'frames' as progressive passes, so you can provide e.g. smaller blurry versions of the full image to use as a progressive pass.
So @eeeps pointed out that cjxl has a hidden 'modular' mode that fairs better for this kind of image. It's still pretty bad compared to the AVIF, but it's sharper than the previous example.
Here's the 11kb AVIF again vs the modular JPEG XL:
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.
