Adam Argyle

Ep #251

Robbie and I do a mostly whatnot episode about our path getting into tech, playing in bands, and getting into trouble. We sip Glen Morangie "A Tale of Ice Cream" and share some stories.

⤷ whiskey.fm · youtube · spotify · apple

Presented by GitKraken

Jack (CEO of Patreon) gives a great talk about the struggles of being an artist with the internet from the 90s to today, a history of tech and art, and lessons learned.

Heartfelt insights into working through 2026 "content creation" culture.

Watch on YouTube.

Watch my talk "Contextualism" from CSS Day on Conffab

I first noticed web scroll areas had scroll locking behavior when making 2D scroll snap demos; I couldn't scroll diagonally without getting hijacked and locked into an x or y axis.

Even on a touch device, where a diagonal gesture is so easy and natural.

Thanks to Bramus's rad interactive blog post I saw Chrome 153 with the remedy:

spec | check for support

Freedom from the axis lock 🤘🏻

I was thinking:

Just seems worth while to use the natural inertia, tensions, perf and feels that scroll snap has for the snap feedback of "didnt swipe far enough" and the browser owned easing.

Can also mitigate scrollTo strangeness that might do x then y.

I saw some performance regressions in the first 2 demo's I pulled up to test with

Filed a bug.

I wouldn't necessarily file this as perfectly fixed, I still felt it was a bit clumsy or not enabling diagonal scrolling as smoothly as I'd like.

Overall exciting and meaningful IMO tho.

Your thoughts?

My Blogspot in 2011: Ranting Devigner

Devigner = Designer + Developer

Kevin Powell tries out Prop For That, makin it look so slick and easy 🫶

Watch on YouTube

Ep #250

Robbie, Christina and I chat fun coding experiments, personifying agents, OpenClaw, hot takes and a little bit of whatnot.

⤷ whiskey.fm · youtube · spotify · apple

CSS infinity (and -infinity!) solve some pretty specific problems elegantly, but can also just be plain fun to use.

Baseline browser support

Showing support for infinity, -infinity, NaN, pi, and e

Lets spur creative CSS juices with infinity and follow a couple use cases.

infinity and -infinity need to always be wrapped in calc().

If you want it to represent a dimension, it also needs to be multiplied by a unit like:

Not quite limited to calc() too, you can use it with other calc()-like scenarios like clamp(), min(), max(), etc, which we'll dig into a bit 🤘🏻

Before infinity, I would have used scientific notation like 1e9px (which is 1000000000px) to create a "big enough" radius for circles and pills at any size.

But with infinity..!?

Setting duration calc(infinity * 1s) makes an animation/transition so long that it appears to be frozen ⛄️

Hover over those boxes and the duration will be pinned to happen over infinity seconds, sticking the state for the duration of the page's life.

I like how the duration of your hover is permanently made visible too. Visible millisecond duration via background color.

Need to beat z-index: 999999999 or something?

This will max out at the largest int a browser allows: 2147483647. Speaking of that number, you can see it by using counters like this:

See!

Use calc(infinity * 1px) to remove the floor or ceiling of a clamp.

Make view transitions never complete.

The ::view-transition tree stays in the devtools DOM, giving you an opportunity to inspect or tweak.

You can also freeze and inspect animations using the Animations panel in devtools.

Another scenario where I would have reached for making a large number with scientific notation, is a responsive border radius.

If the elements inline-size is less than 100vi, the radius will be 0. If it's greater than 100vi, the radius will be 20px.

There are a set of these available in Open Props.

Clamp an arbitrary number down to exactly 0 or 1, then use it:

One variable now can drive color, offset, opacity, gaps, whatever.

You can use the spread feature of box-shadow to create a non-interactive backdrop:

Paint past the "entire viewport".

Warning: This actually doesn't work!

Try on Codepen

Bramus explains it here

Trigger a scroll driven transition in, and never transition out.

Though you'll see in the demo I use scroll 100% which is a specced way that feels closer to the intent I was going for, in that I wanted the range end to be the end of the scroll area.

Try it:

Also, just for funsies to share, here's the scroll driven version of the same navbar effect. Doesn't use infinity, but fun to try and compare scroll-triggered vs scroll-driven animation.

Hope you found that interesting!

Comment with your own creative uses of infinity?

Ep #249

Robbie, Joel and I chat about Pi, OpenClaw, JoelClaw, YOLO mode, AGI, custom harnesses and a little bit of whatnot.

⤷ whiskey.fm · youtube · spotify · apple

Ep #248

Robbie and I chat with 4 guests in 1 episode!

Topics span things like Lambo's, MCP vs OpenClaw, agents building agents, polymorphic UI libraries, SDD + state machines, how Prolog is the most hated programming language, and whatnot.

⤷ whiskey.fm · youtube · spotify · apple

Presented by GitKraken and Clerk