<![CDATA[Adam Argyle]]> <![CDATA[RSS Feed for Adam Argyle: Web design & development tips & tricks: CSS, JS, HTML, Design, & UX.]]> https://nerdy.dev https://nerdy.dev/rss-icon.png Adam Argyle https://nerdy.dev RSS for Node Thu, 12 Mar 2026 22:27:44 GMT <![CDATA[2026 Adam Argyle]]> <![CDATA[en]]> <![CDATA[[email protected] (Adam Argyle)]]> 60 <![CDATA[CSS]]> <![CDATA[HTML]]> <![CDATA[JavaScript]]> <![CDATA[Front-End]]> <![CDATA[Design]]> https://nerdy.dev/rss-icon.png https://nerdy.dev/skull-card.png <![CDATA[Hot Pockets Pro Max]]> <![CDATA[ Hot Pockets as an Apple ad

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

]]>
https://nerdy.dev/hot-pockets-pro-max?utm_source=rss https://nerdy.dev/hot-pockets-pro-max?utm_source=rss <![CDATA[note]]> <![CDATA[shows]]> <![CDATA[ai]]> <![CDATA[[email protected]]]> Thu, 12 Mar 2026 22:21:14 GMT
<![CDATA[View Transitions can swoop‽]]> <![CDATA[ Two ghosts, one flying in a straight line and one on a curve

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.

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.

]]>
https://nerdy.dev/swoop-there-it-is?utm_source=rss https://nerdy.dev/swoop-there-it-is?utm_source=rss <![CDATA[blog]]> <![CDATA[css]]> <![CDATA[atom@argyleink]]> Sat, 07 Mar 2026 05:32:21 GMT
<![CDATA[WWW Ep234 Pay No Attention To The Llm Behind The Terminal With Zach Lloyd Of Warp]]> <![CDATA[ Whiskey web and whatnot episode 234

Ep #234
Pay No Attention to the LLM Behind the Terminal with Zach Lloyd of Warp

Robbie and I chat latest agentic workflows with the CEO of Warp, digging into our favorite features, cloud agents with Oz, some delicious smokey whiskey and some whatnot.

whiskey.fm · youtube · spotify · apple

]]>
https://nerdy.dev/www-ep234-pay-no-attention-to-the-LLM-behind-the-terminal-with-zach-lloyd-of-warp?utm_source=rss https://nerdy.dev/www-ep234-pay-no-attention-to-the-LLM-behind-the-terminal-with-zach-lloyd-of-warp?utm_source=rss <![CDATA[note]]> <![CDATA[shows]]> <![CDATA[ai]]> <![CDATA[[email protected]]]> Thu, 05 Mar 2026 18:29:48 GMT
<![CDATA[Things Openclaw Is Making Me]]> <![CDATA[

Hello personal software:

]]>
https://nerdy.dev/things-openclaw-is-making-me?utm_source=rss https://nerdy.dev/things-openclaw-is-making-me?utm_source=rss <![CDATA[note]]> <![CDATA[ai]]> <![CDATA[atom@argyleink]]> Mon, 02 Mar 2026 03:34:38 GMT
<![CDATA[My OpenClaw Token Dashboard]]> <![CDATA[ Text emphasized alt text example

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.

]]>
https://nerdy.dev/openclaw-token-dashboard?utm_source=rss https://nerdy.dev/openclaw-token-dashboard?utm_source=rss <![CDATA[blog]]> <![CDATA[ai]]> <![CDATA[atom@argyleink]]> Mon, 02 Mar 2026 03:15:27 GMT
<![CDATA[CSS Scroll Driven Gyro Trig Experiments]]> <![CDATA[

scroll-driven geometric orbit experiments

Featuring billboarding, center of mass pivoting, and CSS trig functions.

]]>
https://nerdy.dev/css-scroll-driven-gyro-trig-experiments?utm_source=rss https://nerdy.dev/css-scroll-driven-gyro-trig-experiments?utm_source=rss <![CDATA[note]]> <![CDATA[css]]> <![CDATA[atom@argyleink]]> Fri, 27 Feb 2026 16:13:38 GMT
<![CDATA[WWW Ep233 Humans Are Now Legacy Dependencies]]> <![CDATA[ Whiskey web and whatnot episode 232

Ep #233
Humans Are Now Legacy Dependencies

Robbie and I chat agentic workflows, OpenClaw, Pi, malleable software, some whiskey and some whatnot.

whiskey.fm · youtube · spotify · apple

]]>
https://nerdy.dev/www-ep233-humans-are-now-legacy-dependencies?utm_source=rss https://nerdy.dev/www-ep233-humans-are-now-legacy-dependencies?utm_source=rss <![CDATA[note]]> <![CDATA[shows]]> <![CDATA[ai]]> <![CDATA[[email protected]]]> Fri, 27 Feb 2026 03:57:00 GMT
<![CDATA[WWW Ep232 No Ralph Wiggum No Training Wheels Just Agents]]> <![CDATA[ Whiskey web and whatnot episode 232

Ep #232
No Ralph Wiggum. No Training Wheels. Just Agents.

  • do Ralph Wiggum loops automatically produce better results?
  • is context pollution killing productivity?
  • the rise and fall of MCP servers and skills
  • why vanilla Claude might be the only tool you actually need
  • CSS anchor positioning failures
  • Stranger Things hot takes
  • why small distilleries are just like indie startups

whiskey.fm · youtube · spotify · apple

]]>
https://nerdy.dev/www-ep232-no-ralph-wiggum-no-training-wheels-just-agents?utm_source=rss https://nerdy.dev/www-ep232-no-ralph-wiggum-no-training-wheels-just-agents?utm_source=rss <![CDATA[note]]> <![CDATA[shows]]> <![CDATA[ai]]> <![CDATA[[email protected]]]> Thu, 19 Feb 2026 19:16:08 GMT
<![CDATA[WWW 231 We Stopped Coding By Hand]]> <![CDATA[ Whiskey web and whatnot episode 231

Ep #231
We stopped coding by hand because agentic AI is too good

Robbie and Chuck dig into agentic AI loops, the rise of prompt-driven development, whether coding by hand is officially dead, and what happens when tools like OpenCode and Claude become the new normal.

whiskey.fm · youtube · spotify · apple

]]>
https://nerdy.dev/www-231-we-stopped-coding-by-hand?utm_source=rss https://nerdy.dev/www-231-we-stopped-coding-by-hand?utm_source=rss <![CDATA[note]]> <![CDATA[shows]]> <![CDATA[ai]]> <![CDATA[[email protected]]]> Fri, 13 Feb 2026 05:09:09 GMT
<![CDATA[Site Updates Feb 2026]]> <![CDATA[

Site Updates

]]>
https://nerdy.dev/site-updates-feb-2026?utm_source=rss https://nerdy.dev/site-updates-feb-2026?utm_source=rss <![CDATA[note]]> <![CDATA[webmaster@admin]]> Sun, 08 Feb 2026 06:36:42 GMT