Jake Archibald

Jake Archibald has an excellent post about progressive image rendering, including some metrics on JPEG XL compared to AVIF[0].

> "I was also surprised to see that, in Safari, JPEG XL takes 150% longer (as in 2.5x) to decode vs an equivalent AVIF. That's 17ms longer on my M4 Pro. Apple hardware tends to be high-end, but this could still be significant. This isn't related to progressive rendering; the decoder is just slow. There's some suggestion that the Apple implementation is running on a single core, so maybe there's room for improvement.

> JPEG XL support in Safari actually comes from the underlying OS rather than the browser. My guess is that Apple is considering using JPEG XL for iPhone photo storage rather than HEIC, and JPEG XL's inclusion in the browser is a bit of an afterthought. I'm just guessing though.

> The implementation that was in Chromium behind a flag did support progressive rendering to some degree, but it didn't render anything until ~60 kB (39% of the file). The rendering is similar to the initial JPEG rendering above, but takes much more image data to get there. This is a weakness in the decoder rather than the format itself. I'll dive into what JPEG XL is capable of shortly.

> I also tested the performance of the old behind-a-flag Chromium JPEG XL decoder, and it's over 500% slower (6x) to decode than AVIF. The old behind-a-flag Firefox JPEG XL decoder is about as slow as the Safari decoder. It's not fair to judge the performance of experimental…

I love the idea of Parcel but I've struggled with a number of non-obvious problems when using it on hobby projects.

° Sourcemaps not working (wrong files / no source translation)

° Randomly losing exports (a module with multiple exports where one of them ends up as an empty object - fix by clearing cache and restarting)

° Errors like "module 71b not found"

° Hot module reload enabled by default, meaning that all top level code runs again when you reload the code (e.g. here's an extra canvas in your dom)

My preferred zero config setup for hobby projects has become <script type="module">[1] and a live reload server[2].

If I'm working on a React project then I will always use Create React App when I can[3].

When I take something beyond the hobby stage and into maintaining it as an ongoing project, I use TypeScript Quickstart[4]—to abstract the underlying Webpack config and start writing code immediately.

I'll only reach for Webpack when I know that I need more flexibility than any of these other tools offer—which isn't very often.

[1]: https://jakearchibald.com/2017/es-modules-in-browsers/

[2]: https://github.com/tapio/live-server

[3]: https://github.com/facebook/create-react-app

[4]: https://github.com/danprince/typescript-quickstart

I've done a few shootouts at various times in the last 10 years. I finally decided WebP was good for the web maybe two years ago, that is, I have 'set it or forget it' settings and get a good quality/size result consistently. (JPEG has the problem that you really need to turn the knob yourself since a quality level good for one image may not be good for another one)

I don't like AVIF, at least not for photos I want to share. I think AVIF is great for "a huge splash image for a web page that nobody is going to look at closely" but if you want something that looks like a pro photo I don't think it's better than WebP. People point out this example as "AVIF is great"

https://jakearchibald.com/2020/avif-has-landed/demos/compare/?show=f1

but I think it badly mangles the reflection on the left wing of the car and... it's those reflections that make sports cars look sexy. (I'll grant that the 'acceptable' JPEG has obvious artifacts whereas the 'acceptable' AVIF replaced a sexy reflection with a plausible but slighly dull replacement)

Offline first isnt more prevalent because:

1. its hard

2. its a significant dev cost

3. there aren't a lot of resources to help you out if you aren't already familiar with CRDTs and the like (and that assumes your backend also already supports them)

I can't help with #1 and #2, but for #3 I found Jake Archibald to be the best source of information online. Here is a great high level presentation (he really is a gem of a presenter. I always drop what I'm doing to watch anything he puts out, offline-first or otherwise): https://www.youtube.com/watch?v=cmGr0RszHc8

Also, Trello put out a multipart blog series which gets into some nuts and bolts which are really valuable when designing your own app: https://tech.trello.com/sync-architecture/

EDIT: I just noticed Jake has a full course available. I'm not sure how good it is, or how indepth, but I'm sure its decent based on the author: https://jakearchibald.com/2014/offline-cookbook/

I wish I had read this earlier today. I wrote my own mini-Cliff-notes on how to do things in SVG that covers a lot of silly SVG things in a Stack Overflow answer...

https://stackoverflow.com/a/54462467/3917602

The real problem with SVG is that you need to be a techie type rather than a paintbrush wielding type to get the most out of SVG. In companies this is forbidden. You can't have a techie do design. So you have to have off the shelf bloated 'assets' because that is how they come out of Illustrator. I find I always have to roll my own even for the simplest things such as the 'moon' icon that I thought worthy of putting in to a Stack Overflow answer for 'future reference'.

Clearly I will be watching every CSS-Tricks video on this series and I hope that this gets mentioned in it:

https://jakearchibald.github.io/svgomg/

This allows you to spot 'obvious' optimisations.

I went ahead and used it yesterday to change the background image of my site to save a couple (426kb) of bytes on page load. While you recommend using smaller image sizes, it still worked well on a 1920 x 1080 image and only took ~10 minutes to run in the background with n = 2500.

I did add an additional step (as lots of extra triangles are generated with a large n like this), which is to put it through SVGOMG[1] to optimize out some of those extra bits.

That cut the generated SVG image size about in half, which I think is an excellent amount of bytes saved for relatively little effort. You can see the result on my site linked in my profile, or compare the PNG and SVG files from the source on my GitHub in this commit[2].

[1]https://jakearchibald.github.io/svgomg/

[2]https://github.com/Adamantcheese/adamantcheese.github.io/commit/2c524895b47491e7fc8191df1bf98e3bf622f9de