Adam ArgyleModify

2025-10-31 07:51:37

Since I've tried and failed like 3 times to try and write a blog post on "sector driven design" or "smart components," this post is just gonna try and elaborate on what Miriam Suzanne kids a li'l and says "containers know stuff."

This is huge though, for development and design.

Components/elements/containers whatever, can own all their presentation aspects for nearly any scenario now. They can feel like magic, perfectly adapting to wherever the component author or designer has condoned.

A new one that not enough people talk about is, CSS named container queries. A component can easily know if it's in the sidenav, footer, article area, callout, whatever!

@container --some-area {
  …
}

That's amazing.

No more chasing down all the styles and variations that scatter across your application.

Components are aware of it's user, device, variables, layout and more. In an attempt to get y'all stoked too, here's a list of all the "stuff" that components know.

What kind of stuff? #

Let's create the ultimate list of all the rad "stuff" that components know:

1. the users preferences
   (dark/light, reduced motion, forced-colors, etc)
2. the users writing and reading preferences
   (rtl, lrt, etc)
3. the user's device size, orientation, and capabilities
   (color, pointer, etc)
4. the app's design system
   (colors, spacing, etc)
5. where they are in the app
   (container name queries)
6. how much space they have
   (container size queries)
7. how many items they contain
   (quantity query)
8. what kind of items they contain
   (:has())
9. what the value of a variable for them is
   (style query)
10. whats in or out of view
    (scroll animations)
11. whether its scrolling or not
    (scroll-state)
12. is the user hovering, focusing or activating elements
13. whether there's focus within or not
    (focus-within)
14. if there's valid in invalid form inputs
    (validity)
15. position within siblings
    (sibling-count() or sibling-index())
16. Moved to or is in an iframe
    (if (window.self !== window.top))
17. is defined or not
    (:defined)
18. if media is playing or not
    (:playing)
19. is being printed and/or fragmented across print pages
    (@media print)

Let me know in the comments what I missed.
I'll give ya a shout for your recommendation 🤘🏻💀

Shouts #

• Nathan Knowler - Position amongst siblings, media pseudo classes like :playing and web components being :defined or not
• Anthony Frehner - Moved to or is in an iframe
• Michael G - Being printed and/or fragmented across print pages

2025-10-30 23:26:16

Ep #216
Live at All Things Open w/ Shruti Kapoor

Robbie and guest co-host Jason Lengstorf chat with Shruti Kapoor about her leap from Slack and PayPal to YouTube, the joys and pitfalls of open source, and eternal web dev debates.

⤷ whiskey.fm · youtube · spotify · apple

2025-10-27 05:04:54

Stoked for my upcoming talk at Beyond Tellerrand in Berlin next month:

🎶 Midi Meets CSS 🎶

Most folks use WebGL to visualize their audio (and it's awesome) but that's not me, CSS is. I've taken a different approach…

Be there or be aspect-ratio: 1

2025-10-23 23:52:39

Ep #215
Rust Is Overrated w/ guest Naman Goel

Robbie and I talk with Naman Goel about the origins and evolution of StyleX, how it integrates with React and other frameworks, the pros and cons of different programming languages like Rust, TypeScript, and Swift, and whatnot.

⤷ whiskey.fm · youtube · spotify · apple

2025-10-21 08:20:07

Ep #214
NPM Worms & RubyGems Coups: Trust Issues in Open Source

Robbie, Chuck, and I talk about the worst whiskey, Tailwind as a “state management library,” recent security scares in open source, NPM dependency hygiene, developer visa drama, and tech salaries.

⤷ whiskey.fm · youtube · spotify · apple

2025-10-16 12:42:39

Quick post on closedBy="any", a declarative way to add light-dismiss to a dialog:

<dialog closedBy="any">
  <p>Hi, I'm a dialog.</p>
</dialog>

And just like that, tapping or clicking outside the dialog will close it.

Oh yeah! Well I bet I can't use it yet. #

Here's the browser support:

Or a bit-o-js to get you started:

someDialog.addEventListener('click', ({target:dialog}) => {
  if (dialog.nodeName === 'DIALOG')
    dialog.close('dismiss')
})

More resources #

You should write one!

I'm writing this because I haven't seen enough folks using it or talking about it. Pretty nifty feature if ya ask me. So I'll make a 10m post.

If you want more <dialog> goodness, I wrote a fun post about how to make nice dialogs cuz the defaults are so poopy. Check it out and have a dialog.