Adam Argyle

Adam Argyle

By
Download on the App Store

Adam Argyle episodes

  • CSSday 2025

    Speaking in just a couple hours šŸ¤˜šŸ»šŸ’€

    The Slides Ā· Codepen Collection

    0 min
  • Mt Rainier Boat Banjo

    Mt. Rainier in the bg, on a friend's little personal website boat, playin banjo tunes in double C:

    • Sally in the Garden
    • Darlin' Cori
    • Fly Away
    • Zelda's Lullaby
    • 30 Turkeys
    • Smoke
    • Mario Overworld Theme

      • Vibe check? This is the way.

      0 min
    • 3 Unintuitive CSS Layout ā€œSolutionsā€

      Here are a few of my least favorite, easy to forget, unintuitive CSS layout "solutions":

      .wat {
      min-height: 0;
      min-width: 0;
      flex-shrink: 0;
      }

      Height 0? Wat? Shrink 0? Wat? Theo thinks he likes it. Butā€¦

      Then there's minmax(min(), 1fr)? Wat?

      .uhhhhhh {
      grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
      }

      Functional programming much?ā€¦

      Remove intrinsic minimal sizing
      #

      The minimum width of grid and flex children is auto. Setting it explicitly to 0 removes the intrinsic size, unlocking various things.

      .example-1 {
      min-height: 0;
      min-width: 0;
      }

      Study more about it on CSS Tricks by Chris Coyier or from Theo over on YouTube.

      Don't squish me
      #

      Often I'll make a flex layout where 1 child should be "pushy" or a dominant space consumer. Works great until a sibling to the pusher goes oval at small viewports, even though a firm height and width are set.

      The fix:

      Don't squish me, my flex-shrink is 0... which indicates false? which means I don't want to shrink? I am unshrinkable. I have no shrinkability.

      .example-2 {
      flex-shrink: 0;
      }

      So intuitive. Not.

      Intrinsically responsive grid columns
      #

      So I don't have this full, triple nested function memorized. I can remember "repeat, auto-fit, minmax" as like the summary of the trick. Which gets me this far:

      .example-3 {
      grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr))
      }

      But that's not the full snippet I end up using in production. It works great until it's a single column of 10rem minimum width boxes. At which point, they dont go smaller, and so they can cause horizontal overflow in a parent container that's smaller than 10rem.

      The fix:

      add min(10rem, 100%) in place of 10rem.

      .example-3 {
      grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
      }

      It's extra to write, but it unlocks the "intrinsically responsive grid layout", which behaves as I was hoping all along.

      Study more in this post from Evan Minto:

      When the container is smaller than 10rem, the minimum value in our minmax() expression is set to the full width of the container, giving us a nice single-column view with no overflow. When the container is larger than 10rem, the minimum value is set to 10rem, so we get a responsive grid with equal tracks of at least 10rem each.

      0 min
    • WebDev Challenge - S2E2

      What could you create if you had 30 minutes to plan and 4 hours to build? Me,

      Lane Wagner,
      Sarah Shook, Nikki Meyers,
      Shashi Lo, and
      Nick Taylor took on the
      Web Dev Challenge
      to find out.

      They picked the Napoleon Dynamite thumbnail for Lane and I šŸ¤£

      The Challenge
      #

      We lucked out and got a rad one.

      Single player, multiplayer, cooperative, competitive, or something totally

      different ā€” your challenge is to come up with something fun that is played
      across at least two
      devices.

      Temporalā€™s
      workflow tools will allow you to manage sending information between devices
      dependably.

      Lane and I def

      leaned into the "fun" portion
      of the challenge.

      We chose to try a game that uses the

      camera video stream API
      to feed faces to
      Media Pipe (locally
      running a face detection machine learning model) to flap a bird's wings in a
      flappybird-like game.

      A Temporal

      workflow will
      capture the game round and let us see all the player moves.

      At least that's what we planned onā€¦

      The Teams
      #

      These were the lovely folks I got to spend 4 hours with:

      1. Sarah Shook && Nikki Meyers
      2. Shashi Lo &&
        3. Nick Taylor
      3. Lane Wagner && I
        4. The Tools
        #

        Temporal was pretty cool, but as

        you'll see in the videoā€¦ we um, didn't figure that out til a bit later.

        I did get the pleasure to use a BenQ RD280U tho.

        The 4k 3:2 matte UHD display was really nice. They say it's made for coding, and

        I see what they mean.

        Plus, HDR content is awesome, and I could capture high quality UI captures and

        place lots of windows around.

        I got to take one home and try it out. It's light years ahead of the one I had

        before.

        The arm is super strong. There's tons of charging ports. It's a really great

        product.

        3D Bird
        #

        Here's that 3D bird Codepen that's

        featured in the episode.

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

        The Results
        #

        There were no winners or losers!

        We all had a blast; I'm lookin forward to seein the

        YouTube comments,
        maybe a 3D bird joke or two.

        0 min
      5. Zen Garden Leave

        CSS Zen Garden Leaveā€¦

        Taking time, breathing slow, clearing my head, tending to a

        brutalist garden on Codepen.

        Seems appropriate.

        0 min
      6. Carousels On Shoptalk

        CSS

        ::scroll-button(),
        ::scroll-marker,
        Carousel Configurator, and
        Carousel Gallery with
        Chris and Dave on
        ShopTalk Show.

        Watch Ā·

        Listen Ā·
        Read

        0 min
      8. CSS Mixins are ready for experimentation!

        CSS Mixins and

        Functions
        are both ready for you to hack on šŸ¤Æ. I think of functions as returning a value
        and mixins as a way to apply a chunk of styles.

        Bramus has a great intro on

        @function,
        don't miss it. But this post is about @mixin, don't miss
        the explainer, it is
        packed with valuable information:

        @mixin --box {
        aspect-ratio: 1;
        inline-size: 100px;
        block-size: 100px;
        }

        and using it:

        .box {
        @apply --box;
        }
        Getting started
        #

        For CSS Mixins as of writing this, you'll need

        Canary and you'll need to
        launch it from the command line
        with this flag CSSMixins:

        open -a "Google Chrome Canary" --args --enable-features=CSSMixins
        Go make stuff!
        #

        You have all the latest information now:

        • how to enable Canary to understand mixins
        • what the basic syntax is like
        • links to
          • more advanced examples and documentation
          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.