Adam Argyle

Adam Argyle

By
Download on the App Store

Adam Argyle episodes

  • WWW Ep237 Using AI Wrong With Leon Noel And Danny Thompson

    Ep #237

    The Transactional Trap:
    How 97% of Developers Are Using AI Wrong
    - with Leon Noel & Danny Thompson

    🤖 agentic dev
    💬 prompt engineering
    🦞 OpenClaw
    🎼 orchestration, harnesses, and models
    💀 leet code interviews
    🕹️ Pokemon Go
    🥃 whiskey & whatnot

    ⤷ whiskey.fm · youtube · spotify · apple

    0 min
  • Rfc Latest Color Input Concept

    Try the latest concept
    (I think it's hella rad)

    ⚓️ anchor() progressive enhancement
    🤖 workers for color compute
    🙈 new animations & interactions
    🎨 gamut boundaries, mapping, stretching
    ☯️ contrast scores
    & much more

    QA and comment on GitHub if you may.

    0 min
  • WWW Ep236 The Manager Has Become The Managed (Presented By Warp)

    Ep #236

    The Manager Has Become The Managed
    (Presented by Warp)

    Robbie and I chat with guest Amelia Wattenberger about:

    📄 Why specs still aren't taking off
    🤖 Being managed by your own bots
    🛠️ Amelia's rad project Intent
    🦆 Rubber duck debugging with Claude
    🥃 A little whiskey & whatnot

    ⤷ whiskey.fm · youtube · spotify · apple

    0 min
  • Hot Pockets Pro Max

    Ep #235

    Hot Pockets Pro Max (presented by Warp)

    Robbie and I chat OpenClaw, token optimizations, liberating data from walled gardens, burn windows, and of course some whiskey and some whatnot.

    ⤷ whiskey.fm · youtube · spotify · apple

    0 min
  • View Transitions can swoop‽

    Like Zoolander who can't turn right, I thought View Transitions couldn't swoop.

    I had been under the impression that they couldn't curve towards the destination, and it was one of those things that you like can't unsee. All view transitions going in straight lines…

    CodePen

    All my prior attempts had failed, til now.

    The way of the swoop
    #

    When you give something a view-transition-name like:

    #ball1 {
    view-transition-name: view-transition-ball;
    }

    The browser creates keyframes with a predictable naming pattern:

    @keyframes -ua-view-transition-group-anim-view-transition-ball {
    …
    }

    If you pause a view transition, you can see the keyframes and the keyframe name applied to the pseudo elements:

    Anticipating that naming consistency, add a comma to the ::view-transition-group() element and include some keyframes of our own:

    ::view-transition-group(view-transition-ball) {
    animation:
    -ua-view-transition-group-anim-view-transition-ball 2s ease-in-out,
    /* 👉*/ swoop 2s ease-in-out;
    }

    The special sauce, the THING THAT TOOK FOREVER TO FIND, is that you can only use individual transforms, NO transform shorthand:

    @keyframes swoop {
    50% {
    /* ❌ */ transform: translateY(50px);
    /* ✅ */ translate: 0 50px;
    }
    }

    If you try to change the transform, things fail. And if you try to add animation-composition, things fail harder (don't know why).

    BUT, using individual transforms, and just like that, you can blend a scale, translate, or whatever in combination with the browser native transition.

    The trick also shows you how you can add a blur to a view transition.

    CodePen

    The key to the unlock was individual transforms.

    Below is a demo you can try that makes a simple wiggling view transition.

    The green ball uses custom keyframes and animation composition, and the pink ball uses view transitions. They dont perfectly match either, which is interesting (exaggerated with a scale added). There's a perspective difference at play I don't fully understand.

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

    You can stop reading here if you want, but I'm about to rant about how this was lame as crap to discover.

    The limits
    #

    While I'm glad there's a little bit of a way for it to work, there's plenty to still want.

    • No access to the dynamic values that the browser calculates for view transitions
    • The solution is clunky and requires static view-transition-names (no match-element support), it breaks if the browsers name their keyframes something else or if I'm assigning names with JS
    • No support for animation-composition: add
    • No way to control the easing of the x vs the y axis separately, or separate durations

      • I really just wanted to change the X easing to be ease-out and the Y easing to be ease-in. That would give a nice swoop. Or even add a slight delay the X and not the Y, another way to create a swoop.

      None of these more normal and better ergonomic ways are available. Just this narrow case with individual transforms and trying to piggy back on a browser keyframe naming convention.

      But hey, now we can add swoops to a native view transition and we learned a trick that can make motion blur view transitions. That's coo.

      0 min
    • My OpenClaw Token Dashboard

      First off, I call my OpenClaw assistant "Punk Ass," short for "Punk Assistant." It's been great so far having a punk ass for various projects. I hadn't been using my gaming machine much; now it's a work horse.

      But, when you're running an AI assistant that handles Discord messages, cron jobs, and various projects; costs add up. But where exactly?

      I directed a simple dashboard to find out.

      How It Works
      #

      OpenClaw stores session logs as JSONL files. Each assistant response includes token counts and costs. I had a Node.js script written that extracts this data, cross-references it with Discord thread metadata embedded in each conversation, and aggregates everything by thread, day, model, and session type.

      The output is a single static JSON file that powers an Astro dashboard. No backend needed, just parse, deploy, and refresh when you want updated data.

      What I Track
      #

      I track a few things that help me make keep costs low:

      • Cost per Discord thread
        Which conversations are burning tokens?
      • Daily spend trends
        Are costs stable or spiking?
      • Token breakdown
        Input vs output vs cache hits
      • Session types
        Discord vs cron jobs vs direct chat
        • What I Learned
        #

        The data was immediately actionable. Two threads accounted for 60% of the total spend: a Shopify web store project ($73) and the #general channel ($70).

        The store project made sense, I've been async art directing it alot. It's looking sweet. But #general? That's just a catch-all channel accumulating context from random conversations. Expensive by accident.

        The Fix
        #

        Now I know: long-running threads in Discord are context traps. Each message carries the full conversation history. The solutions:

        • Start fresh threads for new topics instead of continuing in the same one
        • Have OpenClaw delegate to sub-agents for self-contained tasks as they don't carry the parent context
        • Treat #general as a lobby, not a workspace

          • The dashboard cost less than a dollar to make. But now, knowing where tokens go changes how I work with OpenClaw, I'll earn all that buck back quick; I can stop guessing and start optimizing.

          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.