iiinova — where your digital self keeps evolving

James Stuckey Weber @jamessw.com · 15/09/2026

Excellent table from the HTML spec.

A table showing the average and maximum legs and tails for Cats and English Speakers. Interestingly, the maximum number of legs for an English speaker is 4, and the average number of tails for English speakers is 0.33.

James Stuckey Weber @jamessw.com · 24/05/2026

Before I call it a night, I wanted to check in on @nerdy.dev's lovely gradient.style. If you have been relying on browser's clipping to create gradients as vibrant as possible, gamut mapping will be a bit disappointing.

Side by side screenshots of gradient.style, showing a vibrant orange to maroon on the left, which is clipped, and a duller peach to hot pink on the right, which is gamut mapped.

110

James Stuckey Weber @jamessw.com · 24/05/2026

I'm guessing there's a bug somewhere in Firefox's render- very specific colors are rendering wildly incorrect, like in this extremely narrow gradient.

A pink background with green and lavender lines running through.

200

James Stuckey Weber @jamessw.com · 24/05/2026

By default, gradients are interpolated in Oklab. Switching to OkLCh shows another oddity, with a random jump to a bluish green.

A subtle pink gradient, with a green line near the left side, and a lavender line on the right edge.

100

James Stuckey Weber @jamessw.com · 24/05/2026

The jump to lavender seems to be happening right on the edge of the gradient- I "zoomed in" on the gradient, with linear-gradient(to right, oklch(90% 0.11 375.67), oklch(90% .1 20)), and there's a sudden jump to lavender right at the end.

A very subtle pink gradient, with a lavender edge on the right.

100

James Stuckey Weber @jamessw.com · 24/05/2026

Now things are getting interesting. It looks like the color `oklch(90% .1 20)` is getting rendered by Firefox much more lavender than expected, and doesn't match the ColorJS implementation. Note the final step here is inside rec2020, while everything else is outside, which may be why.

2 gradients, from light blue to pink, but the None gradient, showing the browser's gamut mapping, jumps suddenly to lavender rather than pink.

110

James Stuckey Weber @jamessw.com · 24/05/2026

For comparison, here is the current state of Firefox - note how it matches the Clip gradient, where values outside of the gamut (I forget which one, is it rec2020? P3? The display?) are just clipped, which skews the colors to be much more saturated.

4 gradients, from blue to maroon. The ones labeled None and Clip are identical, starting with vibrant blue Raytrace and CSS start with a lighter blue.

100

James Stuckey Weber @jamessw.com · 24/05/2026

From the first glance, things are looking good- way better than clipping! I'm using the apps.colorjs.io/gamut-mappin... tool to do some comparison. None is the browser's GMA, compared to the Raytrace and CSS (Binary Search) algorithms, and then naive clipping (which is what is active in browsers).

4 gradients, from light blue to maroon. The ones labeled None, Raytrace and CSS are identical. Clip has very vibrant blues.

110

James Stuckey Weber @jamessw.com · 19/05/2026

When your aria labels leak into your social share card…

A social share card on Bluesky reading “Amazon.comopen prime modalclose prime modalClose buttonopen rating modalclose rating modalClose button”

270

James Stuckey Weber @jamessw.com · 06/08/2025

When you use position-area, you're actually creating a new containing block for your positioned element. Learn more about how this makes anchor positioning just work in many situations in my email course here - oddbird.dev/learn/course...

A rough diagram showing how position-area works, with an anchor in the center of a 3x3 grid, and a positioned element below it inside of a larger containing block.

0227

James Stuckey Weber @jamessw.com · 01/04/2025

Today's release of Firefox shows you the offsetParent of fixed position elements in the DevTools Layout (if it's not the root). They're the only browser (so far) that shows the offset parent, which is super useful for troubleshooting anchor positioning.

The Firefox Dev Tools Layout panel, showing a fixed position element that has an offset!

120

James Stuckey Weber @jamessw.com · 22/01/2025

I Googled "Does beer freeze at 0deg", and the AI told me that 0°F equals 0°C. So I Googled "is this true?" and pasted what it told me... and it got managed to get it even more wrong.

Google AI Overview saying "Yes, beer will freeze at 0 degrees Fahrenheit (which is the same as 0 degrees Celsius), as a typical home freezer operates at a temperature low enough to freeze most beers, which generally freeze around 28 degrees Fahrenheit due to their alcohol content."

Google AI Overview saying "No, this statement is not true; beer will not freeze at 0 degrees Fahrenheit (which is the same as 0 degrees Celsius). Because beer contains alcohol, its freezing point is lower than pure water, so it would need a significantly colder temperature to freeze, usually around 28 degrees Fahrenheit."

010

James Stuckey Weber @jamessw.com · 04/01/2025

Helping out on the local Christmas Bird Count on a cold and snowy morning.

A path through the woods covered in snow.

010

James Stuckey Weber @jamessw.com · 01/01/2025

I first started making the body a grid, with 7 divs, but before I got the nth selectors set up, he had lost interest. My second thought was a linear-gradient, but the attached image shows the named colors don't make a great rainbow. They've moved on, but I want to be prepared for next time...

A rainbow gradient from red to violet, with significant banding.

100

James Stuckey Weber @jamessw.com · 01/11/2024

the best commits have a trailing double quote because you forgot you started the message with a single quote

Github Git commit message of Indented comment fixes with a double quote at the end.

120