2 poststoday
3 posts| pastweek
4 posts| pastmonth
58 postsin2026
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

🛬 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

A pile of CSS Day sticker swag is on a table
Whiskey FM
adam@whiskey.fm
noteshowsai

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

Whiskey web and whatnot episode 232
Whiskey FM
adam@whiskey.fm
noteshowsai

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

Whiskey web and whatnot episode 231
Whiskey FM
adam@whiskey.fm
noteshowsai

Ep #230
We accidentally deleted programming

Robbie and I dig into the shift from code-first to spec-first development, whether TypeScript still matters in an AI-driven world, the rise of agency over specialization, and why the future might belong to prompt-driven tinkerers instead of traditional developers.

⤷ whiskey.fm · youtube · spotify · apple

Whiskey web and whatnot episode 230
Whiskey FM
adam@whiskey.fm
noteshowsai

Ep #229
Is AI just stealing with extra steps?

Robbie and I talk about the ethics and economics of AI, and why “stealing with extra steps” feels like the right metaphor for where things are headed.

We also dig into open source burnout, whether AI replaces developers or just reshapes the job, and some whatnot over whiskey.

⤷ whiskey.fm · youtube · spotify · apple

some title
94 postsin2025
Adam pointing at some homework with my 2 kids.
dad@pops
note

iOS vs Android in 2025:

  • iOS apps get more TLC (might not matter over time)
  • iOS scrolling is better (Android needs to fix this)
Whiskey FM
adam@whiskey.fm
noteshowsai

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

some title
Whiskey FM
adam@whiskey.fm
noteshowsai

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

some title
A cartoon skull with a hotpink hat on.
atom@argyleink
notecssshows

I was on the General Musings show with Kevin Powell 🤘🏻💀

We chat front-end job hunting in 2025, the misalignments between the technical interviews and the roles they were looking to fill, the overall state of the industry and hiring processes and how to distinguish yourself from the crowd.

Audio · Video

Show thumbnail with Kevin and I on it
Whiskey FM
adam@whiskey.fm
noteshowsai

Ep #214
NPM Worms & RubyGems Coups: Trust Issues in Open Source

Robbie, Chuck, and I talk about the worst whiskey, Tailwind as a “state management library,” recent security scares in open source, NPM dependency hygiene, developer visa drama, and tech salaries.

⤷ whiskey.fm · youtube · spotify · apple

some title
Whiskey FM
adam@whiskey.fm
noteshowsai

Ep #211
Agents of Chaos: Whiskey Experiments and the Future of IDEs

Chuck and I talk about offbeat experiments, and the chaos of tech culture. They discuss AI workflows, Warp vs. IDE debates, and the realities of coding culture, from bleeding-edge hype to WordPress drudgery.

⤷ whiskey.fm · youtube · spotify · apple

A cartoon skull with a hotpink hat on.
atom@argyleink
note
In a world where agents can reason, generate, evaluate, and deploy, you no longer need a large team to build something remarkable. You need two people: one who understands systems and one who understands the user. Better if they’re the same person. Suff Syed - Why I'm Leaving Design

I'll be your huckleberry.

122 postsin2024
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

Saw this on a skateboard, had to make it in CSS. 

background: repeating-linear-gradient(
  to bottom, 
  #000 0px var(--_stripe-size), 
  #fff var(--_stripe-size) var(--_stripe-gap)
);

Ended up not just being gradient text, but a repeating gradient text effect 🤓

Fun: CSS can repeat a repeating gradient

CSS in a pattern on a pattern
Adam pointing at some homework with my 2 kids.
dad@pops
note

It's cookie party day with our friends, but both kids are sick (and my spouse isn't 100% either), and we call in sick…

So, I bundled everyone on the couch, and we giggled (wrong family, too many hands, etc) our way through making cookies with AI.

some titlesome titlesome titlesome title
An 8-bit adam, animated and occasionally looking at you.
webmaster@admin
note

New Feature just dropped!

  • The big flat list of posts is now grouped
  • On desktop there's a new timeline nav component on the left so you can quick jump around
  • Tag style update
  • Alignment fixes in cards
  • Scroll animations added to new list group dividers
  • View Transitions added to the timeline nav
A cartoon skull with a hotpink hat on.
atom@argyleink
notejs

Play a 🫰(snap) when CSS snaps!

const snap = new Audio('snap.mp3')

scroller.onscrollsnapchange = () =>
  snap.play()

Demo · JS Snap API

Note: you may need to click/tap before scrolling, for the browser to deem playing the audio as user activated.

const snap = new Audio('snap.mp3') scroller.onscrollsnapchange = () => snap.play()
Una and I on the cover of our show.
adam@theCSSpodcast
notecssshows

Ep #91
Season 5 Wrap

Una and I recap our favorite moments from the season: popovers, dialogs, top layers, trig functions, color functions, :has() tricks, balanced text wrapping, linear() easing, nesting, anchoring, state queries, view transitions, and scroll driven animation.

What a year for CSS!

Watch · Listen

Una and Adam sitting in recording chairs smiling over an 80s backdrop with a title saying season 5 wrap-up.
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

Brad Frost shows on YouTube and a blog how LLMs (Cursor and Claude in this case) are helping him create, iterate and ideate over web design. He poses a question at the end; maybe you don't need static comps.

He asks for a funky design; it got funky.
He asks for a form; got a form.

My favorite moment was when he had Cursor rewrite the styles to use Open Props; really nice that it can unite values into tokens with reasonable logic.

the already-here future of prototyping
Una and I on the cover of our show.
adam@theCSSpodcast
notecssshows

Ep #81
Trigonometric Functions

Una and I make math practical for the UI Engineer by avoiding the complex side of the mathematics and instead, focus on use cases.

This is the episode about math in CSS we've always wanted. Follow along as we surprise ourselves over and over with how inspiring the applications of these concepts are.

Watch · Listen

Una and Adam sitting in recording chairs smiling over an 80s backdrop with a title saying popover and dialog.
My google avatar.
devrel@google
notecsshtmlshows

Ep #3
The Looper Pile - Mini Web Machine Fusion
⤷ layout a "Looper" with the "Pile"

This episode represents the overarching theme of the series! Combining small bits of code together can be a great way to build larger experiences.

Watch episode 3 on YouTube

The Looper Pile, Mini Web Machines
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

Normally @keyframes would be used for this technique, but with @starting-style we can transition.

* {
  transition: opacity .5s ease-in;
  @starting-style { opacity: 0 }
}

Triggers via:

  • page load
  • inserted into the DOM
  • going from display none to a visible display value

I feel like there's more use cases to explore. Let me know what you find‽

Try it on Codepen

My google avatar.
devrel@google
notecssoss

CSS4 RFC is live and ready for community feedback!

The CSS4 Community Group has been meeting weekly to categorize every CSS feature into CSS3, CSS4, and CSS5.

Yep, you read that right, CSS5.

  • Curious what features are in each bucket?
    The RFC has it all laid out.
  • Disagree with a categorization?
    Make a comment!

We want to hear from you. Help us ensure we've mapped the features into buckets you agree with, can teach, can learn, and can grow with.

Check it out

some title
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

A gradient border image, transparent at the edges, looks like it thins out as it fades out.

.effect {
  border-image: 
    linear-gradient(
      transparent, 
      var(--indigo-6), 
      transparent
    ) 
    1 / 4px /* slice n' size */
  ;
}
example with the effect on inline bordersexample with the effect on block borders
Evil cyborg Adam
evil@atom
notejs
document.startViewTransition
// too much to write

// makes alias: short for transition
const txn = document.startViewTransition

txn(async () => {
  // much better
})

One alias could save a lot of characters.

sounds like a Geico commercial…

My google avatar.
devrel@google
notecss

A CSS bento-like grid that's aware of the number of children and aspect ratio available thanks to :has() and @container.

Try the demo

Shout out to view-transition's for making the interactive demo so much more compelling.

A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

is it time to forget about physical properties like margin-top and left?

Can't throw out the x/y transforms tho 😭

99 postsin2023
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

Checkbox and radio groups have special powers with keyboard and screen reader interactions; leaning into them can lead to some rad UI:

Picklists · Taglists

Go ahead, open them up and give it a try!

4 lists are shown, 2 checkbox and 2 radio. all have an expanded or undisclosed layout, as to not hide options behind dropdowns or anything.2 light and 2 dark tag lists are shown, each with various options chosen to show how they work. the checkbox list can specify multiple, the radio list can only have 1 selected.
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

Original Codepen set up a vibrant radial gradient in each corner and adjusts their size so their color crossover created a swirly effect.

The animated version uses @property to interpolate each radial gradients position and adds a radial gradient size slider, so you can find other swirly moments of your own.

A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

@Container pattern

✅ nice inline flex layout when there's room in it's Column container

if not?

✅ switch to a nice block layout and center the text

I like the ch unit for this since I'm wanting to switch based on available reading length for the text 🤓

.Message { display: flex; @container Column (width < 40ch) { flex-direction: column; text-align: center; } }2 cards are shown, each with inline layouts2 cards are shown, each with block layouts and centered text
A cartoon skull with a hotpink hat on.
atom@argyleink
note

Had a great vacation!
✅ kids at grandma's
✅ chilled hard w/ my partner
✅ bought a banjo! (always been intimidated)
✅ played a lot of banjo and banjolele
✅ built a CSS demo or two…
❌ play video games

My partner and IMy partner and IMy partner and IMy partner and IMy partner and I
Bad At CSS
adam.is.bad@css
notecssshows

Bad At CSS Podcast
⤷ logo made in the browser

✅ intentionally no font
✅ lack of any styles 😉
✅ looks like you're in devtools
✅ bad layout
✅ bad colors
✅ box around bad is bad

Codepen · Spotify

some title
A cartoon skull with a hotpink hat on.
atom@argyleink
noteshowscss

Experimental #CSS carousel featuring:
subgrid scroll driven animations (SDA) oklch() @property @layer

Lots of code comments
to help break down the effects 🤓

✅ SDA changes hue/theme
✅ SDA toggles next/prev
✅ SDA syncs dots

Try it in Canary with #experiments enabled

Evil cyborg Adam
evil@atom
note

I've been unleashed.
What evil will I do first?

Perhaps, I'll change one char somewhere..
and break the build.

muahahahaHAHAHAAAAA

A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

Multiple hard stops in a radial gradient sized as farthest-corner, this is me changing the x position first from 0 to -100, then the y in the same manor.

A cartoon skull with a hotpink hat on.
atom@argyleink
notecss
.classic-gradient {
  background-image: 
    linear-gradient(45deg, 
      white, 
      black 0% 20%, 
      white 0% 40%, 
      black 0% 60%, 
      white 0% 80%, 
      black 0% 100%
    )
  ;
}
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

This felt like a future of library customization, using @layer:

/* <tool-tip> styles */
@import "tool-tip.css" layer(components.tooltip);

/* later, in some-new-context.css */
@layer components.tooltip {
  .some-new-context tool-tip {
    --_bg: var(--surface-1);
    --_shadow-alpha: 15%;
  }
}

Scope the import, then append tweaks into that scope from anywhere. Safe and sound.

Rad stuff.

My google avatar.
devrel@google
notecss

CSS HD Color Guide

Meet the new web color spaces!

  1. What is a color gamut or color space
  2. Review of the classic color spaces
  3. Meet the new web color spaces
  4. Migrating to HD CSS color
  5. Debugging color

It's the article I wish I had when learning about CSS color updates.

Check it out!!

Wizard of Oz image with Dorothy going from black and white to color.
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

CSS color tip!

Need a rainbow gradient? Let <hue-interpolation> do the work.

.vibrant-rainbow {
  background: linear-gradient(
    to right 
    in hsl      /* vibrant gradient HSL colorspace */
    longer hue, /* hue-interpolation set to longer */
    red, red    /* now red to red goes all the way around */
  );
}
All colors of the rainbow in a gradient from left to right.
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

TcsS - Typed Cascade Style Sheets

Why hasn't this been made yet? CSS has all the type information needed to create a comparable experience to TypeScript.

The TS logo and the CSS logo combine into a TcsS logo
39 postsin2022
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss
html:has(.CertainItem:focus-visible) {
  scroll-snap-type: y mandatory;
  scroll-padding-block-start: 100px;
}

.CertainItem:focus-visible {
  scroll-snap-align: start;
}

On demand with :has(),
when a certain item is focused..

snap dat item into a nice position.

A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

a design tool is like a workspace with pre-squeezed paints ready. bummer is.. many artists have a preference in their paint and ink brands.

soon web browsers will offer the choice, will graphic design tools?

My google avatar.
devrel@google
notecss

use :has() for when an element doesn't have some other element as a child, like a card without a heading 🤓

.card {
  ...
  &:not(:has(h3)) {
    /* .card's without h3's */
  }
}

Codepen

15 postsin2021
My google avatar.
devrel@google
notecss

Billion Laughs Attack
aka: XML bomb 💣

A type of DoS attack aimed at XML parsers that with a few liens of code, aims to consume a ton of memory.

:root {
  --ha1: lol;
  --ha2: var(--ha1) var(--ha1) var(--ha1);
  --ha3: var(--ha2) var(--ha2) var(--ha2);
  --ha4: var(--ha3) var(--ha3) var(--ha3);
  --ha5: var(--ha4) var(--ha4) var(--ha4);
  ...
}

#CSS was a victim of this when custom properties were introduced.

Learn more on Wikipedia or the CSS Variables Spec.

3 postsin2020
12 postsin2019
A cartoon skull with a hotpink hat on.
atom@argyleink
noteosscsshtml

Released Slyd!

<slyds>
  <slyd>
    <h1>Slide 1</h1>
    <h2>subtitle</h2>
  </slyd>
  ...
</slyds>

Scroll snap powered, parallax featured, bi-directional slide framework.

Short gif swiping through slides to show a preview of how it works
5 postsin2018
A cartoon skull with a hotpink hat on.
atom@argyleink
noteossjs

Released roving-ux.js!

import { rovingIndex } from "roving-ux";

rovingIndex({
  element: document.querySelector("#carousel"),
});

User's shouldn't need to tab through each item in a list to see the next list

  1. Providing keyboard list UX should be easy
  2. Maintaining the last focused element should be easy
  3. RTL Support
A short gif showing arrow key support in a list of images
1 postin2017
A cartoon skull with a hotpink hat on.
atom@argyleink
noteosscss

Released ragrid.css!

<section grid="columns" vertically-aligned="bottom">…</section>

Works like auto-layout:

  1. Capable of 12-column layouts, packery, & masonry
  2. Uses recognizable attributes instead of classes
  3. Perfect for components
  4. 528 bytes gzipped

An intrinsic first, minimal set of layout attributes.

Screenshot of the number of contributors on Github
1 postin2014
A cartoon skull with a hotpink hat on.
atom@argyleink
notetalksshows

Spoke at TEDx, Tacoma: Embrace UI.
✅ Slides built with Node and sockets for palm held slide swipeys.

tldr; Embrace UI because it's all around you, and when it's working right it's helping you be more human.

4 postsin2013
1 postin2011
1 postin2008
2 postsin2004

No posts match the current filters