Adam Argyle

Adam Argyle

By
Download on the App Store

Adam Argyle episodes

  • Web elements know about the user, device, variables, layout and more

    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!

    #some-singleton {
    container-name: --some-area;
    }
    .some-component {
    @container --some-area {
    /* component owned adaptability */
    }
    }

    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)
    20. which browser it's in
      (navigator.userAgent or CSS selectors)
    21. is in a web component
      (this instanceof HTMLElement)
    22. where other elements are and their size
      (position-anchor, anchor-size())
    23. distance from other elements
      (anchor)

      24. 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
      • Bart Veneman - Which browser it's in
      • jh3yy - anchoring
        • 0 min
      • Beyond Tellerrand 2025

        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

        0 min
      • WWW Ep215 Rust Is Overrated With Naman Goel

        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

        0 min
      • WWW Ep214 Npm Worms Rubygem Coups

        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

        0 min
      • closedBy=any

        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

        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.


        Also checkout the Dialog Starter notebook!

        0 min
      • WWW Ep213 With Kevin Powell

        Ep #213

        Is CSS A programming language?

        Robbie and I chat with Kevin Powell about the quirks and complexities of CSS, Tailwind and Flexbox, AI’s failure to write decent styles, anchor dingles, trim styles, and more.

        ⤷ whiskey.fm · youtube · spotify · apple

        0 min
      • WWW Ep212 With Dave Rupert

        Ep #212

        TalkShop Show w/ Macho Man Randy Standards

        Robbie and I chat with Dave Rupert about whiskey, web culture, the quirks of building side projects, the shifting landscape of the web, AI-driven development, spec-driven workflows, RSS’s decline, and more.

        ⤷ whiskey.fm · youtube · spotify · apple

        0 min

      About Adam Argyle

      From the publisher's feed

      RSS Feed for Adam Argyle: Web design & development tips & tricks: CSS, JS, HTML, Design, & UX.