Adam Argyle

Adam Argyle

By
Download on the App Store

Adam Argyle episodes

  • Prop For That

    Announcing Prop For That, a JS library that backfills what CSS doesn't provide us yet (and maybe never will).

    I'm done waiting for CSS to catch up to all the valuable information JS knows and done watching folks write the same little JS to just write a custom property to a component.

    demo · docs · npm

    Here's a basic example taking the value from a range slider to draw a nice gradient that fills up the slider:

    import 'prop-for-that/auto'
    // or import 'https://esm.sh/prop-for-that/auto'
    <input type="range" data-props-for="range" min="0" max="100" value="40" />
    input[type="range"] {
    background: linear-gradient(
    to right in oklab,
    var(--theme) calc(var(--live-value-pct) * 100%),
    var(--track) 0
    );
    }

    codepen · docs example · codepen collection

    Why?
    #

    It's super common to need a few lines of JS for a simple thing like:

    • the value of the color input
    • the mouse pointer position
    • the size of the scrollbar
    • the colors present in an image or video
    • the battery level
    • an element's visibility
    • etc

      • With Prop For That, you just declaratively specify on any element the props you want, and live props show up.

      There's an imperitive API too, but the data attribute path is the slickest

      Everything is a plugin that loads only if you need it too, ultimately putting you right where you wanted to be: creating something sick in CSS using dynamic information without wiring up some dorky JS.

      What kind of props?
      #

      My talk at CSS Day was an enumeration of all the ways CSS can adapt to users, contexts, pages, etc… which made me hyper aware of all the ways CSS couldn't adapt without JS.

      Here's a flat list of all the live props currently supported by the library:

      1. Pointer x/y in the window
      2. Pointer x/y inside/local to an element
      3. Viewport pixel height/width values
      4. Visual viewport information
      5. Element size information
      6. Element visibility
      7. Scrollbar and thin scrollbar sizes
      8. Input element values
      9. Input element dirty, touched, pristine, etc
      10. Select element value, index, count, etc
      11. Colors from an image or gradient (average, accent, light, dark, etc)
      12. Colors occuring in a video
      13. Video progress
      14. Image loaded or broken + natural h/w
      15. Clock time
      16. FPS
      17. Online/offline status
      18. Page focused/visible
      19. Scroll velocity
      20. Accelerometer and device tilt/orientation
      21. Geolocation
      22. DPR, CPU cores, memory
      23. Page navigation type (reload, back, etc)

        24. And a few Chromium only props:

        1. Network status like type, speed, save data, etc
        2. Battery status
        3. CPU pressure
          4. Style Queries
          #

          Style Queries being in all major browsers marks an important milestone for CSS, and made this library much more viable.

          Using Prop For That with Style Queries looks like this:

          import 'https://esm.sh/prop-for-that/auto'
          <form data-props-for="form-state">
          <input name="name" required>
          <input name="email" type="email" required>
          <button type="submit">Savebutton>
          form>
          @container style(--live-all-valid: 1) {
          …
          }
          Bye noise
          #

          Import, add attribute(s), have CSS fun.

          Go make cool shit and share it with me 🤘🏻💀

          0 min
        6. CSS Day 2026

          🛬 Landed and stoked for CSS Day 2026!

          💀 Tattoo scheduled
          🤜🤛 Excited to see fellow CSS nerds
          🎁 Have a special surprise at the end of my talk that I can't wait to reveal

          0 min
        9. WWW Ep244 Live At React Miami With Seth Webster

          Ep #244

          Live at React Miami with Seth Webster

          Robbie and I chat with Seth Webster (executive director of the React Foundation, former React lead at Meta, and chief developer evangelist at Expo) to talk the past, present, and future of React and some 🔥 hot takes.

          ⤷ whiskey.fm · youtube · spotify · apple

          0 min
        10. WWW Ep243 Keyframes Cash And Codepens With Stephen Shaw

          Ep #243

          Keyframes, Cash and Codepens with Stephen Shaw

          Robbie and I chat with Stephen about CSS animations, web components, SSR nightmares, and why building things by hand still matters in the age of AI slop.

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