Adam Argyle

Adam Argyle

By
Download on the App Store

Adam Argyle episodes

  • WWW Ep228 Santa Exe

    Ep #228

    Santa.exe 🎄💻🥃

    Robbie, Chuck and I bring you the holiday edition of Whiskey Web and Whatnot: random whiskeys, Christmas hot takes, and dev debates.

    ⤷ whiskey.fm · youtube · spotify · apple

    0 min
  • WWW Ep227 Ai And Oath With Will Johnson

    Ep #227

    AI and Oath with Will Johnson

    Robbie and I talk with Will Johnson, senior developer advocate at Auth0, about web dev, parenting, and internet culture.

    ⤷ whiskey.fm · youtube · spotify · apple

    0 min
  • WWW Ep226 A Very Merry Descent Into Holiday Madness

    Ep #226

    A very merry descent into holiday madness

    Robbie and I talk about holiday travel chaos, parenting stress, and health scares before diving into AI-assisted coding, Linux quirks, IDE trends, burnout in open source, and more.

    ⤷ whiskey.fm · youtube · spotify · apple

    0 min
  • 4 CSS Features Every Front-End Developer Should Know In 2026

    2026; I think every front-end developer should know how to

    query
    scroll states, trim
    typographic whitespace, stagger with sibling-index(), and
    use type safe attr().

    This is only some of the CSS that shipped in 2025 you need to know.


    This post is a themed post!

    Check out 2023, 2024 and 2025.
    sibling-index() and sibling-count()
    #

    Earlier this year these were just experiments, now they're available in stable Chrome and Safari!

    They let you use an element's position relative to its siblings as values in calculations. For example, you can stagger elements with a transition delay based on their sibling-index().

    A nice trick is to subtract 1 so the first element starts immediately:

    li {
    transition: opacity .3s ease;
    transition-delay: calc((sibling-index() - 1) * 100ms);
    }

    Stagger enter stage animations easily by combining with @starting-style!

    li {
    transition: opacity .3s ease;
    transition-delay: calc((sibling-index() - 1) * 100ms);
    @starting-style {
    opacity: 0;
    }
    }

    See the Pen <a href="https://codepen.io/argyleink/embed/preview/KwKXPYW"> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>)
    on <a href="https://codepen.io">CodePen</a>.

    You can rotate hues in oklch, automatically number elements, and all sorts of fun things.

    Resources
    • Earlier post I wrote
    • sibling-index()
    • sibling-count()
    • Brecht
    • CSS Tricks
    • @container scroll-state()
      #

      These features fit nicely into progressive enhancement, similar to scroll driven animations, as they're enhancements rather than requirements. IMO at least.

      Three states of a scroller are now queryable:
      stuck, snapped, scrollable and scrolled.

      To start, you need the element that's stuck, snapped, or scrollable to have container-type: scroll-state. Then, a child can query it with @container scroll-state().

      An element cannot query itself, but its pseudo elements can!
      stuck
      #

      Perfectly know when position: sticky elements are stuck.

      /* when .outer-navbar is stuck */
      @container scroll-state(stuck) {
      .inner-navbar {
      box-shadow: var(--shadow-3);
      }
      }

      Use this to help users understand an element will now be overlaying their scroll content.

      snapped
      #

      Perfectly know when scroll-snap alignment is active.

      /* when
    • parent is snapped */
    • @container scroll-state(snapped) {
      .box {
      scale: 1.1;
      }
      }
      /* or not snapped! */
      @container not scroll-state(snapped) {
      .box figcaption {
      translate: 0 100%;
      }
      }

      Great for highlighting the item, or demoting every other item.

      scrollable
      #

      Perfectly know when content overflows its container, and in which direction(s).

      @container scroll-state(scrollable) {
      .scroll-hint {
      opacity: 1;
      }
      }

      Use this to toggle hints, scroll indicators, or adjust padding to signal more content.

      scrolled
      #

      Perfectly know when content is scrolled in a direction.

      @container scroll-state(scrolled: bottom) {
      translate: 0 -100%;
      }

      Use this for sticky headers or navbars that showy hidey based on scroll direction.

      Resources
      • Chrome blog
      • MDN
      • Una on scrolled
      • Bramus on scrolled
      • Me on remaking the Switch Homescreen
      • The CSS Podcast
      • text-box
        #

        text-box lets you slice half-leading right off a text box!

        Web font rendering includes whitespace above and below glyphs for "safe spacing", but sometimes you want pixel-perfect alignment to baselines or x-heights.

        Achieve the above image with:

        h1 {
        text-box: trim-both cap alphabetic;
        }

        That one-liner trims spacing above cap height and below alphabetic baselines.

        Learn more in my interactive notebook

        Perfect for type and grid alignment nerds. I think it'll become the default.

        Resources
        • Chrome blog article
        • Interactive notebook
        • Codepen collection
        • Una and I on Syntax
        • typed attr()
          #

          There's an advanced version of attr(); type-safe and more powerful.

          It allows using HTML attributes directly in CSS with type checking and fallbacks.

          Pass colors:

          <div data-bg="white" data-fg="deeppink">div>
          .theme {
          background: attr(data-bg color, black);
          color: attr(data-fg color, white);
          }

          Pass numbers:

          <div class="grid" data-columns="3">…div>
          .grid {
          --_columns: attr(data-columns number, 3);
          display: grid;
          grid-template-columns: repeat(var(--_columns), 1fr);
          }

          This creates a powerful bridge between HTML and CSS.

          Here's a scroll snap example where CSS basically controls the enums and HTML must pass valid values to get the desired snap results:

          <li scroll-snap="start">li>
          <li scroll-snap="center">li>
          <li scroll-snap="end">li>
          <li scroll-snap="nothing">li>
          [scroll-snap] {
          scroll-snap-align: attr(scroll-snap type(start | center | end));
          }

          The type() function validates attribute values against allowed keywords. Invalid values fall back gracefully.

          Try it on Codepen

          Resources
          • My post in 2025 about it
          • Try it on CodePen
          • Chrome Developers article
          • Temani Afif's post
          • Temani slider tooltips
          • CSS rules.

            Now let's laugh at this hilarious obvious AI generated nano banana image I made about us having our cake and eating it too.

            Still can't do hands lol

            0 min
          • WWW Ep225 Soc 2 In The Streets

            Ep #225

            SOC 2 in the Streets, Spaghetti in the Sheets

            Robbie and Chuck sip Jack Daniel’s Single Barrel Rye, and discuss why SOC 2 compliance is a painful but necessary sign of company maturity.

            ⤷ whiskey.fm · youtube · spotify · apple

            0 min
          • Games Of December 2025

            Some people read about the hero, some people play as the hero. If you don't play video games, you have 2 choices:

            1. Suffer through my ramblings
            2. Realize you're missing out and give one of these a try
            3. Here's what we've been playing:

              Skate Story
              #

              You're a glass skateboarder stuck in the Underworld who has to skate to (get out?). A rad soundtrack, interesting visuals, and a weird story.

              Steam

              Wheel World
              #

              Ride a fixie through cell shaded worlds to a chill beat. Race others, discover stuff, collect things, and just take in the atmosphere.

              Steam

              Lego Voyagers
              #

              We loved Lego Builder's Journey, and this one has local co-op (our favorite). Play as 2 little Lego's who admire rocket ships and want to build one. Use your building skills and unravel the visually engaging and beautifully lit story.

              Steam

              Bubble Bobble Sugar Dungeons
              #

              We love retro games around here and got super pumped when we saw they were making a 2025 version of Bubble Bobble. BUT, we played Sugar Dungeons a few times and were disappointed it was single player. While it's fine… it's lacking some soul. It's just a bit bland and doesn't really tickle the nostalgia bug like we hoped.

              Steam

              Dorf Romantik (the Boardgame)
              #

              This house has played a lot of Dorf Romantik the video game. Everyone, young to old, feels satisfied with the cozy yet solitaire-like experience you get from this game. The board game does an AMAZING job of capturing the charm of the video game while combining it with the limitations of a board game.

              The board game is beautifully done, creating a compelling campaign arc, unlocks, and other exciting elements.

              Board Game

              Ball Pit
              #

              Whelp, we got super addicted to this one. Very arcade-like, super fun roguelike-style gameplay, and a fun gameloop. Super fun 5-20 minute sessions.

              Steam

              Just Shapes and Beats
              #

              Connect up to 4 controllers and dodge the shapes as they react to the beat. Each level is a full on custom visual beat experience to a track from a rad retro-bit playlist. All you gotta do is dodge stuff, you can move a stick right?

              Steam

              Curse Of The Dead Gods
              #

              Mix a little Hades with FTL and you've got yourself this roguelite. See how far you can get, do your best not to get hit, get some synergy in a sweet build, hack and slash your way to freedom.

              Steam

              0 min
            4. WWW Ep224 Spooky Scary CSS

              Ep #224

              Spooky Scary CSS

              This week, Robbie and Adam talk about Halloween vibes, excellent scotch, and the

              strange state of modern web development. After rating an Orphan Barrel single
              malt, they dig into AI coding workflows, agent tools, why one-shot prompts so
              often fail, and more.

              ⤷ whiskey.fm · youtube · spotify · apple

              0 min
            5. WWW Ep223 With David K Piano

              Ep #223

              The Piano Man of State Machines w/ David K. Piano

              This week, Robbie and Adam talk with David K. Piano about state machines, the

              chaos of overusing React hooks, Tailwind controversies, AI agents, security
              risks in emerging AI tooling, and why determinism still matters.

              ⤷ 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.