dash.deno.com → console.deno.com
Fresh → Fresh 2

This was a large chunk of work 😅

Please report any regressions.

Ep #238
NextJS is Dead, Long Live NextJS (presented by Warp)

🏭 Dark Factories
🤖 YOLO mode
❌ T shape vs X shape
🦞 OpenClaw
💀 Death of SaaS
🥃 Redwood Empire & whatnot

⤷ whiskey.fm · youtube · spotify · apple

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

Try the latest <color-input> 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.

Page load improvements deployed.

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

My CSS Day 2025 talk is out!

📼 youtube.com/watch?v=vPb7d28RFNE

Slides, demo links, & more here.

Join us tonight at 5pm^PT for a 🍀 St. Patrick's Day 🍀 live collab with the ShopTalk Show folks!

Twitch · YouTube

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

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

Hello personal software:

• A Shopify store (TBA)
• Beer tracker
• Whiskey tracker
• My own guitar songbood
• My own banjo songbook
• Birthday tracker

scroll-driven geometric orbit experiments

• Triangles
• Atomic
• Squares
• Orbits

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

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

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

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

Site Updates

• New persona filtering on desktop
• Deno KV social data caching
• new Codepen 2.0 editor support
• UI fixes
• Notebook update (added Color Picker)
• Server analytics added to Notebook
• Server page views and active users integrated into UI

img:hover {
  scale: 1.2;
  clip-path: inset(10% round 20px);
}

nice, n' simple (codepen)

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

This week I compete in Syntax's March madCSS; me against 16 other badass devs in CSS & UI challenges 😅

Wish me luck 🤞

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

Need to catch up on a tech topic? Try one of the 🆕 WhiskeyFM Collections!

I prompt LLMs with logical properties.

@custom-media working behind a flag in Firefox Nightly!

@custom-media --motionOK (prefers-reduced-motion: no-preference);

@media (--motionOK) {
  transition: transform .3s ease;
}

Lovely syntax. Open Props has ~45 ready to go, peep the spec, or visit MDN for more info.

Ep #228
Santa.exe 🎄💻🥃

Robbie, Chuck and I bring you the holiday edition of Whiskey Web and Whatnot: random whiskeys, Christmas hot takes, and dev debates.

⤷ whiskey.fm · youtube · spotify · apple

Finally… Chrome 145 joins WebKit and Firefox in supporting overscroll effects on nested scrollers. No more bonk UX, get the same soft edge bounce as the main page has always had!

❤️ Ty Robert!

Ep #227
AI and Oath with Will Johnson

Robbie and I talk with Will Johnson, senior developer advocate at Auth0, about web dev, parenting, and internet culture.

⤷ whiskey.fm · youtube · spotify · apple

Ep #226
A very merry descent into holiday madness

Robbie and I talk about holiday travel chaos, parenting stress, and health scares before diving into AI-assisted coding, Linux quirks, IDE trends, burnout in open source, and more.

⤷ whiskey.fm · youtube · spotify · apple

Ep #225
SOC 2 in the Streets, Spaghetti in the Sheets

Robbie and Chuck sip Jack Daniel’s Single Barrel Rye, and discuss why SOC 2 compliance is a painful but necessary sign of company maturity.

⤷ whiskey.fm · youtube · spotify · apple

iOS vs Android in 2025:

• iOS apps get more TLC (might not matter over time)
• iOS scrolling is better (Android needs to fix this)

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

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

Bring the color in at gradient.style

Fit width text in 1 line of CSS:

h1 {
  text-grow: per-line scale;
}

Prototype available in Canary 145+

Codepen · CSSWG · Explainer · Prior Art

Was on The UX Show with Yash Raj and Victor Sanchez 🤓

Watch it on YouTube

MIDI Meets CSS; out now on YouTube!

Is it just me or are superellipsed pill shapes cool?

Check it out on Codepen and I know your next question is caniuse

My talk Midi Meets CSS is done! Had a blast bein a high energy nerd on stage blastin banjo and beats from a K.O. II.

Marc, BTconf; you rock. Day 1 of the talks have been so inspiring. Stoked for day 2.

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

Ep #216
Live at All Things Open w/ Shruti Kapoor

Robbie and guest co-host Jason Lengstorf chat with Shruti Kapoor about her leap from Slack and PayPal to YouTube, the joys and pitfalls of open source, and eternal web dev debates.

⤷ whiskey.fm · youtube · spotify · apple

Stoked for my upcoming talk at Beyond Tellerrand in Berlin next month:

🎶 Midi Meets CSS 🎶

Most folks use WebGL to visualize their audio (and it's awesome) but that's not me, CSS is. I've taken a different approach…

Be there or be aspect-ratio: 1

Ep #215
Rust Is Overrated w/ guest Naman Goel

Robbie and I talk with Naman Goel about the origins and evolution of StyleX, how it integrates with React and other frameworks, the pros and cons of different programming languages like Rust, TypeScript, and Swift, and whatnot.

⤷ whiskey.fm · youtube · spotify · apple

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

You can now watch my talk from CascadiaJS 2025 3 weeks ago 🤘🏻💀

Watch on YouTube

Ep #213
Is CSS A programming language?

Robbie and I chat with Kevin Powell about the quirks and complexities of CSS, Tailwind and Flexbox, AI’s failure to write decent styles, anchor dingles, trim styles, and more.

⤷ whiskey.fm · youtube · spotify · apple

On Bluesky? Here's a CSS Feed I made 🤓

Still a fan of Warp, it's good stuff y'all.

Checkout this episode of PodRocket with Kevin Powell, Paige and I; we chat about… you guessed it, CSS!

Watch or Listen

Ep #212
TalkShop Show w/ Macho Man Randy Standards

Robbie and I chat with Dave Rupert about whiskey, web culture, the quirks of building side projects, the shifting landscape of the web, AI-driven development, spec-driven workflows, RSS’s decline, and more.

⤷ whiskey.fm · youtube · spotify · apple

Bramus with a rad snippet:

@function --light-dark(--l, --d) {
  result: if (color-scheme(dark): var(--d); else: var(--l));
}

In 3 lines, a --light-dark() CSS function that works anywhere 🤩

I joined the good folks on Front-End Fire to share how front-end interviewing is like in 2025, in the age of AI and short attention spans.

⤷ website · youtube · spotify · apple

Sticky staggered offsets + gradients = neat transition

• Simple version (linear)
• Trig version (curves)

Squircles with clip-path: shape(), while we wait for corner-shape: squircle.

Vote for corner-shape in Interop 2026 or give this little GUI a peep from Zoran.

Try on Codepen

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

Nobody wants to see your ugly config,
Just Vite It.

Scroll To Bloom

• animation-timeline: view()
• :nth-of-type(An + B)
• @keyframes

SO fun.

Wow Lerosh, these are rad pics from CascadiaJS 🤩

My talk is in just a couple hours here in Seattle at CascadiaJS 🤘🏻💀

cascadiajs-2025.netlify.app

Ep #210
DevRel, Linux, and the Shrinking Path for Junior Developers w/ Ali Diamond

Robbie and Chuck talk with Ali Diamond about her journey through tech, cybersecurity, and community building. They sip tequila, swap hot takes on programming languages and developer culture, and dig into the realities of junior engineering paths.

⤷ whiskey.fm · youtube · spotify · apple

I'm stoked to share my next role:

Design Engineer at Shopify;
alongside Jason Miller to hack on next-gen admin UI/UX and a new Polaris.

I'm also workin to rejoin the CSSWG via Shopify too 🙂

Thanks for all y'all's support! 💀🤘🏻

Twitter comments, likes and reposts are now integrated.

Ep #209
Is Cracker Barrel a JS Framework?

Robbie and I talk about JavaScript trends, from the overuse of hooks to frameworks chasing sameness, and why Cracker Barrel’s rebrand feels like a frontend metaphor.

⤷ whiskey.fm · youtube · spotify · apple

Ep #208
I've joined Whiskey Web and Whatnot as a permanent show host 🎉

In this episode, Robbie and I talk about CascadiaJS, my new role at Shopify 👀, and why tech interviews are so broken.

⤷ whiskey.fm · youtube · spotify · apple

I'm happy to share that gradient.style is out of beta and:

• has been Open Sourced
• finally supports multiple background layers

Open to feedback and comments 🙂

Ep #151
DevTools FM

Join Andrew, Justin and I for a chat about some of the developer tools I've worked on.

Listen · Watch · Subscribe

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.

Ep #672
The Working Draft

With Schepp, Vanessa and me 🙂 Join us for a tour of of what’s new and what’s next in CSS.

Listen · Watch · Subscribe

A small sample of UI, code, tools, and design from my 20 professional years of webdev.

Happy Father's Day to other parentNodes

It's an honor to speak at CSS Day, the biggest CSS conference every year.

Hope y'all enjoyed nerding out about making beautiful scroll experiences.

It's not a challenge to design for reduced transparency, it's an opportunity.

• A card with a caption
• Adaptive frosted glass

Speaking in just a couple hours 🤘🏻💀

The Slides · Codepen Collection

Off to CSS Day; see ya there‽

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.

Beautiful <details> are possible.

Try this one! Lots of fun micro interactions.

CSS Zen Garden Leave…

Taking time, breathing slow, clearing my head, tending to a brutalist garden on Codepen.

Seems appropriate.

Cloudinary removed sitewide.

All processing now done at build time with custom scripts.

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

Watch · Listen · Read

Recording is live!

Watch CSS Can We Do That on YouTube via Smashing Meets CSS online event.

Get ready! The <select> element can now be customized with CSS, check out the post on the Chrome Blog!

• Finally render custom HTML inside an <option>
• Works without JS
• Easy to progressively enhance

We just announced how CSS can make carousels on the Chrome Blog!

• Incredible accessibility
• Works without JS
• Builds upon regular scrollers

CSS Carousel Configurator:
I made this so you can directly see the relationship of a feature you want and the related CSS.

CSS Carousel Gallery:
Showcases meaningful use cases and exemplifies how to orchestrate many capabilities together.

Add a rainbow shadow effect with hue longer interpolation and a little bit of blur().

Try it in this Codepen

Gettin' rrready for Google IO!

Join me, Julia, Miriam and Geoff April 1st for the virtual event Smashing Meets CSS.

To give View Transitions a perspective, either:

::view-transition-image-pair(--foo) {
  perspective: 500px;
}
/* or */
::view-transition-new(--foo) {
  transform: perspective(500px);
}

Hope this finds someone well.

Need a rad way to learn CSS anchor?

Look no further than anchoreum.com!

39 today, wheeee…

For chill time I'm adding to this scroll driven animations notebook.

Some pretty wild stuff in there already, gettin wierder each bedtime routine.

New <footer>,
Went big.

New 404 page:

• glitchtastic
• VisBug loaded so you can
  edit or destroy the page

Ep #14
🎙️ Bad At CSS Podcast

Backend dev Lane Wagner, of boot.dev and host of Backend Banter FM, guests this week sharing what do backend dev think of CSS.

⤷ badatcss.com · youtube · spotify

Advanced attr() in Chrome 133. Opening new ways to integrate with CSS from your HTML:

<li scroll-snap="start"></li>
<li scroll-snap="center"></li>

[scroll-snap] {
  scroll-snap-align: attr(scroll-snap type(start | center | end));
}

Try it & learn more from Bramus @ Chrome Developers

My @container scroll-state() article is live!
developer.chrome.com/blog/css-scroll-state-queries

Stuck state:
  Triggered when an element is stuck.
Snapped state:
  Triggered when an element is snapped.
Scrollable state:
  Triggered when an element is overflowing.

Pure CSS Scroll Spy Table of Contents

Kevin Pow()ell and I go over the CSS Wrapped 2024 site and break down the <details> scroll spy component to uncover the CSS scroll driven animation powering it.

My text-box article is live!
https://developer.chrome.com/blog/css-text-box-trim

Did you miss my text-box prediction?

Don't miss this interactive notebook, helpful for feeling out the effects and edge cases.

"Nerding out about CSS": Watch or Listen

General Musings with Kevin Powell

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

Animated gradient text is like the poster child of AI right now. Gotta have that animated gradient text sparkle button thingy to be cool.

So here! Steal the recipe.

Earlier this year, I wrote 5 CSS snippets every front-end developer should know in 2024 on web.dev. I think it holds up!

Checkout the 6 snippet 2023 edition

Today marks 28 years of CSS!

"CSS1" created in 1996.

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.

Test your eye, trust yer guts; be compared.

kerntype, a letter spacing game - by Mark MacKay

Can you kern?

7 years at Google 🙂

Small update for gradient.style, the provided CSS for your creation is now custom properties and not classes.

Check it out‽

UI Workshop

Sprinkle scroll driven animations, view transitions, popovers and container queries onto an ecommerce home page with me!

Video · Code

I've got an author page over on developer.chrome.com!

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

.card {
  aspect-ratio: 4/3;
  
  @media (orientation: portrait) {
    aspect-ratio: 3/4;
  }
}

Just as @scope brought selector donut scoping to CSS (thanks Nicole!), so does interactivity: inert; bring donut inertness.

Try it on Codepen 🤘🏻💀
use Canary with web experiments enabled

David and I join Robbie and Chuck on Whiskey.fm!

🎙️ Front-end Adventures with Bad at CSS

Muahahahahahaha!

Today is a great day.

🎃💀🦇

Species in Pieces
30 endangered animals, 30 pieces

2015 CSS throw back to the super rad clip-path project from Bryan James, which includes a making of post on Smashing Magazine!

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.

See ya in Nantes, France for DevFest! Watch out for my talk on Amazing CSS in 2024.

🩸🩸🩸 Slides 🩸🩸🩸

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

Bramus investigates and reports on CSS custom property performances. What are the performance inpacts of registered and unregistered custom properties?

web.dev/blog/at-property-performance

That time of year to watch Over The Garden Wall (trailer)

Ep #90
Scroll-Driven Animation

Una, rad special guest Bramus, and I break down scroll-driven animation!

For more learning and information, checkout Bramus' YouTube Series and his awesome tool scroll-driven-animations.style.

Watch · Listen

Bring some color and intrigue to a <dialog> or [popover] with an animated radial gradient box shadow.

Def jump in and try customizing the colors 🤘🏻💀

A memorable video from 2019:
Video: "Why Is CSS So Weird?".

Miriam Suzanne explains how CSS is solving a weird problem, yet is guided by meaningful principles; shaping it into the powerful and complex tool it has become.

There's also a blog post.

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.

Ep #89
View Transitions

Una, rad special guest Bramus, and I explain view transitions!

Watch · Listen

Bring a rad clip-path transition to your light/dark toggle switch with a progressively enhanced view transition.

Try it · View Source

Artem Pendiurin, aka ErSketch, took SmashingConf visual notes in Freiburg.

They turned out rad, here's the one from my talk!

Ep #88
State Queries

Una and I explain State Queries, specifically the scroll queries using @container scroll-state().

Share any state queries you'd like to see with the CSSWG here or here!

Watch · Listen · Show Notes

Ep #13
🎙️ Bad At CSS Podcast

Matthias Ott is the guest this week! Their keynote talk Web Design Engineering With the New CSS was so rad at CSS Day 2024, we had to chat.

⤷ badatcss.com · youtube · spotify

My "Tik Talk" at Smashing Conf went great! Will share the video when it's available.

Until then, here's everyone's favorite picture from the event. They're calling it The CSS Renaissance 🤣

Arrived in the beautiful, green, city of Freiburg for Smashing Conf.

It's a mystery why I'm here 🕵️

Combo light-dark() with Temani's great border-image techniques.

.card > figcaption {
  color: light-dark(#000, #fff);
  border-image: fill 0 conic-gradient(light-dark(#fff8, #0008) 0 0);
}

Try it on Codepen

Ep #5
The Over-Easy Machine

• UI layering with anchor()
• no more complex position: absolute
• keyword alignment
• intrinsically sized based on content
• pairs radically with popover elements

Try the machine:
Basic · Author Cards · Animated Popover

The latest Mini Web Machine on Chrome Developers
Tiny bits of code that power great UX.

Ep #12
🎙️ Bad At CSS Podcast

Estelle Weyl and Eric Meyer join to discuss their book CSS The Definitive Guide 5th Edition, and of course chat about what CSS they're bad at.

⤷ badatcss.com · youtube · spotify

This line of code is about to be in every single stylesheet.

h1, p, button {
  text-box: trim-both cap alphabetic;
}

Centering in CSS is about to get even finer grained.

Try it demo 1 • demo 2 • demo 3

Una and I chat with Wes Bos and Scott Tolinkski of SyntaxFM about the CSS4 and CSS5 RFC plus we dig in to some experiments in Chrome Canary (text-box-trim and scroll-state() queries).

Subscribe, listen or watch
Youtube · Spotify

Ep #87
Anchor Positioning

Una and I explain anchor() and all it's glory!

Watch · Listen

Excellent post on the CloseWatcher API by Abdelrahman Awad.

Get yours.

Frostapalooza rocked! So many musicians, all coming together JIT, and… takin. down. the. house!!

Get yer own "Kiss My CSS" shirt here 🤘🏻💀🤘🏻

Take the survey!

Scroll Snap + Scroll Driven Animation carousel

💡 in the mobile size it looks a lot like the iOS app switcher eh?

try it!?

Scroll to 3D space travel through CSS4 and CSS5.

try it!?

Learn all about the new scrollSnapChange and scrollSnapChanging JS events.

Or try this nifty Snap Event Visualizer 🤘🏻

Ep #11
14 CSS talks in 1 hour

• Overview of CSS Day 2024
• CSS Day 2024 YouTube Playlist

⤷ badatcss.com · youtube · spotify

Lane Wagner and I chat CSS

• CSS is the hardest programming language
• Backend CSS (back-of-the-front)
• Front-end has multiple bosses that… may make people cry

⤷ Backend Banter · youtube · spotify

Join me in Beijing‽

I'm giving a workshop that'll use CSS to add some rad upgrades to a store page.

Ep #85
linear() easing

Una and I cover the linear() easing function, breaking down the API, tools for generating them, and libraries that can make adoption nice and easy.

Watch · Listen

Ep #4
Pop n' Lock

• <dialog> basics
• top-layer, transition-behavior and overlay explained
• how to transition a <dialog>

The latest Mini Web Machine on Chrome Developers · Tiny bits of code that power great UX.

being on top of everything has never been so easy

<dialog>

Ep #84
Text Wrap

Una and I cover the text-wrap shorthand.

Watch · Listen

Jason and I "install it" 🤣

Watch on YouTube

Lakitu is an OG cloud nerd.

Ep #83
:has() tips and tricks

Una and I expand on episode 61 about :has() by focusing specifically on use cases, tips and tricks. Get inspired and discover new ways to make reactive UI from CSS.

Watch · Listen

Videos from CSS Day 2024 are releasing weekly! Rachel Andrew's on Layout and Reading Order just dropped today!

& don't miss this one by Matthias Ott called Web Design Engineering With The New CSS.

:whispers: CSS motion blur

Ep #82
What's new in color functions

Una and I catch you up with the latest changes to color functions.

Watch · Listen

Preview two new JS events:
scrollSnapChange & scrollSnapChanging

Watch me as I explain what's happening in this scroll snap event visualizer.

Try it in Canary by turning on #enable-experimental-web-platform-features

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

Ep #10
🎙️ Bad At CSS Podcast

David East and I dive into a list of things we think are time wasters disguised as time savers.

⤷ badatcss.com · youtube · spotify

Calendar prototype with sticky headers:

• scroll snap
• sticky
• grid
• z-index: 1

⤷ try it on Codepen

or checkout an SSR fork from tbeseda on Mastodon that can render many years 🤘🏻💀

At the rad CascadiaJS conf today in Seattle.

It's beautiful outside, cool cats inside; stoked for 2 days of learnin and chin waggin.

Ep #80
Animating to and from top-layer

Una and I went over popover and dialog last week, and this week we're helping you animate and transition them! Learn about @starting-style, overlay, :top-layer, ::backdrop, transition-behavior, :popover-open and much more.

Watch · Listen

Ep #79
Popover and Dialog

Una and I are back in Season 5 of the CSS Podcast! We discuss popover and dialog, how they're different, and how to animate them.

Popover and dialog are both Baseline now 👀

Watch · Listen

So excited to be back in Amsterdam for CSS Day! Find me at a booth, ask me about CSS carousel, typography, devtools, or whatever! See you there!

Find the videos here if you can't make it, they're super worth it.

Ep #9
🎙️ Bad At CSS Podcast

David East and I discuss (and show on YouTube) how rad single keyframes can be.

⤷ badatcss.com · youtube · spotify

Physics in CSS!

I transferred a JS physics function into CSS thanks to sqrt(), exp(), sin(), cos() and @property.

:root {
  --mass: 1;
  --stiffness: 100;
  --damping: 5;
  --start-velocity: 0; 
}

Check it out on Codepen. Change the properties and see a different animation.

There's a whole next level of CSS centering that's about to land on y'all and blow yer mind.

I warned you.

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

Prefer the light or the dark mode? Try it on Codepen.

Ep #8
🎙️ Bad At CSS Podcast

David East and I discuss container queries and try to tell you everything you'll need to know.

⤷ badatcss.com · youtube · spotify

Microsoft Build, that was fun!

Chuck and the Whiskey Web and Whatnot show, that was SUPER fun.

August 17th - @Mr. Smalls Theater

Frostapalooza!

I'll be playin guitar 🎸 in 2 ✌️ songs at a benefit concert extravaganza called Frostapalooza; for Brad Frost's birthday!

You should come! Snag a ticket

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

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

Ep #2
The Pile

• element layering layout machine
• replaces many use cases for position: absolute
• offers group or individual keyword alignment
• can be intrinsically sized based on content

Watch episode 2: The Pile

The latest Mini Web Machine on Chrome Developers · Tiny bits of code that power great UX.

The rad Kevin Powell and I share our favorite CSS features that aren't new but are seldom used.

How many of the 23 did you know‽

Watch on YouTube · Checkout Demos

Here's a fun use case for CSS paint-order

Codepen · MDN · CanIuse?

Introducing the GUI Challenges series successor:

Mini Web Machines!
Tiny bits of code that power great UX.

• shorter episodes
• copy and paste free code
• narrower focus
• meaningful use cases

Watch episode 1: The Looper

I had the pleasure of speaking at Epic Web Conf in Park City, Utah!

My talk was titled:
Lightning in a Bottle with CSS Custom Properties

Took a workshop on Remix and Shopify, watched to great talks about the web, OneWheeled, and hungout with Kent, Una, Chan, Annie, Ryan, Theo and many more 🤓

Lovely event, people, & location.

Watch · Slides · Demo

Screen shakes are so cool in video games…

Web buttons can do that!

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 */
  ;
}

Gallery layout rotation and interaction animation with View Transitions.

Try it on Codepen

Ep #7
Dave Rupert is bad at CSS

• Macho Man Randy Standards cameo
• Styling inputs and makin knobs
• field-sizing
• :user-invalid
• content-visibility
• Relative color syntax (RCS)

⤷ badatcss.com · youtube · spotify

Bluesky mentions are now collected and shown on notes and blog posts on this site, just like Mastodon.

Ep #6
New Year, New Resolutions:
A look at me and David's CSS goals for 2024

• Finish Open Props v2
• Build with CSS Anchor
• New uses for Container Queries
• Multiple backgrounds on gradient.style
• Get weirder with Scroll-Driven Animations
• Help DevTools evolve with modern CSS

⤷ badatcss.com

Beautifully shot 8m interview with Jason Lengstorf about:

• how people love shredding nice things
• is there a "dream job"?
• how to know when you're successful?
• a secret for faster career growth?

Watch on YouTube

Hung out with the super fun Kelvin Omereshone and chatted about, you guessed it, CSS!

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…

A practical introduction to Scroll Driven Animations with CSS scroll() and view()

My first Codrops article 🤓

Radio groups are so powerful! Combine them with :has(), animated grid-template-columns and linear() easing and you've got yourself a neat little single picker UX.

Try it on Codepen

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.

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

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

Happy New Year!

Thinking on ways to make a Comparison component

In this GUI Challenge, I use grid, masks and an <input type="range"> to stack and compare 2 elements and their contents.

watch · demo · source

✅ 2 lines of CSS
✅ a courtesy media query
✅ a keyframe

Check it out on Codepen

Una, Bramus and I put together a 2023 Wrapped for CSS 🤓

Thought this focus / interaction effect turned out nice; maybe you'll like it and make use of it too.

https://codepen.io/argyleink/pen/XWOOydB

--atom: 0.15957s;

via Open Props

I learned you can use % for chroma!

.percentage-chroma {
  color: lch(50% 50% 200);
  color: oklch(50% 50% 200);
}

Added 2 examples to my CSS Color Syntax Mega List.

Thinking on ways to solve Picklists

In this GUI Challenge, I show how to use leverage the power of checkbox and radio groups for beautiful and accessible picking UX.

demo · source

Ep #5 🎙️ Bad At CSS Podcast

Jason Lengstorf, David East and I chaotically discuss CSS, container queries, and that pesky clamp() function 🖕.

Subscribe, listen or watch
Spotify · Apple · YouTube

Steal this minimal code setup for a nice comparison component.

View source

I wrote about CSS prefers-reduced-transparency on developer.chrome.com 🤓

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!

How do I center this div?

Una and I discuss CSS centering, and all the different ways CSS has your back.

Turns out, there's A LOT of ways to center.

Watch · Listen

NEW

5 bounce easings added to Open Props!

.box {
  animation: drop 1s var(--ease-bounce-2);
}

try it out!

Thinking on ways to make spoopy Halloween Projections

In this GUI Challenge, I emulate a Halloween projector effect I saw on a wall.

demo · source

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.

I've got a new post over on developer.chrome.com!

Everything you need to know about
CSS Relative Color Syntax 🤓

@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 🤓

Thinking on ways to solve relative color

In this GUI Challenge, I show you how to use CSS RCS (relative color syntax) for lightening, desaturating, opacity, grayscale and more.

oklch(from hotpink calc(l - 20) c h)
hsl(from hotpink h calc(s / 2) l)
hsl(from hotpink h s l / 50%)
hsl(from hotpink h none l)

demo · source

There might be one or two RCS features you didn't know 🤓

Bramus explains @scope on developer.chrome.com and his personal blog with this quick introduction.

@scope (.Card) {
  > header,
  > footer {
    background: hsl(none none none / 20%);
  }
}

@scope is new in Chrome 118

Ep #4
🎙️ Bad At CSS Podcast

David East and I discuss TypeScript; David defends it, and I attack it. I'll probably get mega roasted for this.

tldr;
I love TypeScript, for you.

Subscribe, listen or watch
Spotify · Apple · YouTube

View Source

CSS relative color syntax

NEW
🎙️ Bad At CSS Podcast

David East and I have a special guest:
Chris Coyier 🎉

Subscribe and listen
Spotify · Apple · YouTube