Adam Argyle

Ep #233

Robbie and I chat agentic workflows, OpenClaw, Pi, malleable software, some whiskey and some whatnot.

⤷ whiskey.fm · youtube · spotify · apple

Ep #232

⤷ whiskey.fm · youtube · spotify · apple

Ep #231

Robbie and Chuck dig into agentic AI loops, the rise of prompt-driven development, whether coding by hand is officially dead, and what happens when tools like OpenCode and Claude become the new normal.

⤷ whiskey.fm · youtube · spotify · apple

nice, n' simple (codepen)

Ep #230

Robbie and I dig into the shift from code-first to spec-first development, whether TypeScript still matters in an AI-driven world, the rise of agency over specialization, and why the future might belong to prompt-driven tinkerers instead of traditional developers.

⤷ whiskey.fm · youtube · spotify · apple

This post pushes customizable to an extreme. I think it turned out nice.

Anchor positioning plus some special JS sauce to write an inline CSS variable unlocks the picker to position near the selected option (obviously this can't work at the viewport edges). This creates a pleasant morphing effect that feels connected.

Maybe I should have used AIM?

Scale effects with spring physics to scroll-driven option reveals, every interaction respects user motion preferences while providing rich feedback.

Automatic light/dark adaptation leverages system colors and modern color functions for seamless theme switching. Definitely check the support for light/dark forced colors too, a really great way to debug spacing and skeletal aspects of the UI.

Logical properties enable true internationalization with automatic RTL support, while text-box trim delivers pixel-perfect vertical alignment. Custom properties create a flexible design token system.

Scroll-state queries dynamically detect when content is scrollable and when sticky headers become stuck. Custom scrollbar styling and smooth scrolling enhance the browsing experience within long option lists.

New pseudo-elements provide surgical styling control over picker components, while superellipse corners deliver the modern aesthetic popularized by iOS. State selectors enable precise targeting of open and selected states.

Accessibility is built-in with proper focus indicators, keyboard navigation, and semantic markup thanks to the web platform. Touch-friendly targets and overflow handling ensure the component works elegantly across all input methods.

Careful optimization strategies keep animations smooth while minimizing layout thrash. Smart caching and compositor hints ensure the component performs well even on lower-end devices.

The component architecture supports diverse use cases, from simple toggles to rich content pickers. Each variation demonstrates how the base patterns adapt to different content and interaction models.

Experience the component in action on CodePen:

There's room for improvement, please fork and offer feedback!

I tried many variants of animation, trying to reduce some of the shift of the positioning, but never found something that worked across all the variants. Help me?! 🙏

This select component intends to showcase what's possible when we combine modern CSS features with thoughtful progressive enhancement. The appearance: base-select property provides the foundation, while anchor positioning, scroll-state queries, and entrance animations create a polished, accessible experience.

The real power lies in how these features compose together—each enhancement builds on platform primitives rather than fighting against them. The result is a component that's maintainable, accessible, and ready for the next generation of web interfaces.

Most importantly, this approach lets us create custom experiences without sacrificing the keyboard navigation, focus management, and screen reader support that come free with native elements.

For more, checkout nice details!

This week I compete in Syntax's March madCSS; me against 16 other badass devs in CSS & UI challenges 😅

Wish me luck 🤞

Ep #229

Robbie and I talk about the ethics and economics of AI, and why “stealing with extra steps” feels like the right metaphor for where things are headed.

We also dig into open source burnout, whether AI replaces developers or just reshapes the job, and some whatnot over whiskey.

⤷ whiskey.fm · youtube · spotify · apple

Need to catch up on a tech topic? Try one of the 🆕 WhiskeyFM Collections!

It's more natural when animations start near the trigger point, this CSS technique makes it easy. AIM animates from any element, and to any element.

Thanks to anchor(), anchor-size(), @starting-style, and interpolate-size.

All together they can create an anchor interpolated morph: an interruptible contextual transition from where a user invoked it.

That's a popover=hint + interestfor,
no JS CSS transition. Try it

This is a very powerful and capable feature combination.

Similar results are visually possible with child elements using their parent as the anchor, but:

AIM is the remedy.

This technique is inspired by Paul Lewis's coined animation technique called FLIP (First, Last, Invert, Play).

The gist of FLIP is to use JS to calculate the difference in positions/size/whatever of an element, before and after some DOM change.

The gist of AIM is to use CSS to access properties from where another element is (first), to where natural render is (last), and let transition handle invert and play.

First: anchor(), anchor-size() & @starting-style

The roles where JS was accessing properties, measuring natural sizes, and calculating the differences… are now handled by CSS. Definitely not 100% like FLIP 😅 but hopefully you see the connection. Jhey saw the connection too 🤘🏻 He sent me this demo which breaks down the basics really well too.

Here's a less designed example (so there's less CSS to sift through) that's a

Try it. You can uncomment a top-left position example too!

1: The anchor-name property is used to identify the element that the element is morphing from.

Can you believe this one line of CSS enables any other element to observe the height, width, and position of this element 🤯

Want more about that emoji naming convention?

2: Link up the dialog with that anchor.

3: Enable transitioning to auto width/height.

4: Enable transitions for all properties you want in the morph.

5: Now we can use @starting-style to apply the styles from the anchor to the dialog before it opens. I call this "enter stage from" styles, and you can apply as many of the anchor values as you want.

I specify all corners here and setup a mask system to allow the dialog to transition to fit it's content, from the anchor size, without distorting the dialog contents.

Notice anchor-size() for height and width, this combined with height and width auto and interpolate-size: allow-keywords will allow the dialog to transition to its natural size from the anchor with a nice reveal.

And for exit out on the dialog, it's similar as enter stage in my example but you could easily transition a different way or to a different element.

That's it for a dialog!

AIM can be used for:

Here's the popover from the video at the beginning. It's using all the above techniques, plus some extras, precise timings, easings and intentionality.

What about view transitions and morphing, don't they do that too?

Yep! They do, and can do some neat morphing tricks. Here's a view transitions demo I called "anything to anything".

But… that requires JS, is always a straight line and is not elegantly interruptible.

"always straight lines"… once you notice it you can't unsee it. View transitions can't curve or swing to a new destination.

Here's some slides I made using the Astro Morphull repo I made that use no JS view transitions so content morphs: https://cascadiajs-2025.netlify.app.

Traditional transitions often appear out of thin air or fade in from a generic center point. By leveraging anchor() and @starting-style, we can let CSS tell a story about where an element came from.

Go forth and make more natural transitions that feel spatially contextual. Stop letting your elements "teleport" into view, start letting them grow, stretch, and evolve directly from the components that triggered them.

Your users (and their muscle memory) will thank you. Speaking of, don't forget to gate the motion behind a prefers-reduced-motion media query (test the dialog and popovers).

Hot tip: You could easily morph to a different element than the invoking element, anchor() doesnt care.

Summary checklist for AIM: