Adam ArgyleModify

2025-09-16 01:00:00

I'm stoked to share my next role:

Design Engineer at Shopify;
alongside Jason Miller to hack on next-gen admin UI/UX and a new Polaris.

I'm also workin to rejoin the CSSWG via Shopify too 🙂

Thanks for all y'all's support! 💀🤘🏻

2025-09-11 23:42:49

Ep #209
Is Cracker Barrel a JS Framework?

Robbie and I talk about JavaScript trends, from the overuse of hooks to frameworks chasing sameness, and why Cracker Barrel’s rebrand feels like a frontend metaphor.

⤷ whiskey.fm · youtube · spotify · apple

2025-09-11 07:02:20

Whether I'm giving a talk or on a podcast, these two things constantly pop up:

• how do I find what to study to keep up?
• what's new in CSS?

If you've wondered those things before, then this list is for you.

Find something you've never heard of, click the link; and look at you, you're already getting more familiar with what's new!

Selectors #

• :has()
• :is() and :where()
• :focus-visible
• :user-valid
• :user-invalid
• :active-view-transition
• :active-view-transition-type()
• :target-current
• :popover-open
• :scope
• :heading
• :heading()
• :state()

Pseudo Elements #

• ::backdrop
• ::slotted()
• ::part()
• ::highlight()
• ::grammar-error
• ::spelling-error
• ::view-transition-new()
• ::view-transition-old()
• ::view-transition-group()
• ::view-transition-image-pair()
• ::scroll-button()
• ::scroll-marker()
• ::details-content
• ::picker()
• ::picker-icon
• ::checkmark
• ::column
• ::target-text

Language #

• CSS Nesting

@rules #

• @property
• @container
  • size query
  • style query
  • state query
• @scope
• @layer
• @keyframes with entry and exit
• @supports
• @starting-style
• @view-transition
• @position-try
• @mixin
• @function
• @else
• @when

Color #

• color-mix()
• color(from …)
• contrast-color()
• oklch(), oklab(), hwb(), color()
• linear-gradient(in oklab, …)

Functions #

• var()
• if()
• linear()
• fit-content()
• repeat()
• min()
• max()
• attr()
• env()
• circle(), polygon()
• scroll()
• view()
• clamp()
• sibling-count() and sibling-index()
• cos(), sin(), tan(), pow(), atan2() asin() acos()
• shape()
• light-dark()
• at-rule()
• image-set()
• anchor()
• random()
• random-item()
• control-value()
• progress()
• media-progress()
• container-progress()
• mix()
• calc-mix()
• cross-fade()
• transform-mix()
• first-valid()
• toggle()

Properties #

• accent-color
• color-scheme
• container-type
• content-visibility
• contain-intrinsic-size
• aspect-ratio
• animation-composition
• animation-timeline
• animation-range
• text-wrap
• font-palette and font-palette-values
• scrollbar-gutter
• forced-color-adjust
• reading-flow
• scroll-behavior
• interpolate-size
• corner-shape
• overscroll-behavior
• scroll-marker-group
• scroll-target-group
• transition-behavior
• scrollbar-color and scrollbar-size
• text-box
• anchor-name
• anchor-scope
• position-anchor
• position-area
• position-try-fallbacks
• position-try-order
• position-visibility
• field-sizing
• initial-letter

Values #

• grid-template-columns: subgrid;
• text-align: start | end;
• overflow: clip;

Queries: #

• @media (prefers-contrast)
• @media (prefers-reduced-data)

Units #

There's a whole lot of units now. In my opinion, each are unique and useful in their own occasions. Super powers, knowing which to use when.

Relative #

• ex
• ch
• cap
• ic
• lh

Root Relative #

• rex
• rch
• rlh
• ric
• rcap

Absolute #

• pt
• pc
• in
• cm
• mm
• Q

Viewport #

• vw
• vh
• vi
• vb
• vmin
• vmax
• dvw
• dvh
• dvi
• dvb
• dvmin
• dvmax
• svw
• svh
• svi
• svb
• svmin
• svmax
• lvw
• lvh
• lvi
• lvb
• lvmin
• lvmax

Container #

• cqw
• cqh
• cqi
• cqb
• cqmin
• cqmax

Have a suggestion? Let me know on Bluesky or Twitter! 🤝

2025-09-06 06:31:33

Well aren't keyframe offsets just super handy!

circle.animate([
  { offset: 0,   transform: 'scale(0)', opacity: 1 },
  { offset: .10, transform: 'scale(1)', opacity: 1 },
  { offset: .75, opacity: 1 },
  { offset: 1,   opacity: 0 },
])

See those useful offset values?

In CSS #

Keyframe percentages are super important in crafting animations; for both complex animations or just well orchestrated timings.

You've probably seen the % values in the keyframes.

#circle {
  animation: scale-then-fade-out 3s ease infinite;
}

@keyframes scale-then-fade-out {
  0%   { transform: scale(0); opacity: 1; }
  10%  { transform: scale(1); opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

They're pretty much 2nd nature.

But I bet you've never thought to yourself, "Let me specify this keyframe offset value to 15%" 🤓 At least I hadn't, but I like the more formal name!

So… what about in JS?

In JS #

In the animate function, the keyframes are passed as an array of objects, where each object is a keyframe.

The logical place to put an offset value is right there!

circle.animate([
  { offset: 0,   transform: 'scale(0)', opacity: 1 },
  { offset: .10, transform: 'scale(1)', opacity: 1 },
  { offset: .75, opacity: 1 },
  { offset: 1,   opacity: 0 },
], {
  duration: 3000,
  easing: 'ease',
  iterations: Infinity,
})

and there you have it, the tip in this article, how to set offsets in your JS keyframe animations. At least… that's why I wrote this. Was new to me!

Try it out in this Codepen if you want to 🙂

2025-09-04 21:46:32

Ep #208
I've joined Whiskey Web and Whatnot as a permanent show host 🎉

In this episode, Robbie and I talk about CascadiaJS, my new role at Shopify 👀, and why tech interviews are so broken.

⤷ whiskey.fm · youtube · spotify · apple

2025-08-29 04:39:59

I'm happy to share that gradient.style is out of beta and:

• has been Open Sourced
• finally supports multiple background layers

Open to feedback and comments 🙂