❌ mobile first ✅ container first

How to set up a design system with CSS relative colors youtu.be/oTdQaaqtGDk

in the audience, scratchin an itch: responsive #CSS scroll animation try it! cdpn.io/pen/debug/wB...

Link to my slides for my talk at @cascadiajs.com nerdy.dev/cascadiajs-2...

Using @starting-style and transition-behavior for enter and exit stage effects ⤷ nerdy.dev/using-starti... How to leverage first render and display: none as transition triggers for any element

Get ready for this: @nerdy.dev is blending his love for music and CSS into a live, in-browser audio-visual performance. CSS keyframes come alive, driven by a K.O. II on stage. Code and sound collide in real time at Bewrln's 2025 edition of #btconf. beyondtellerrand.com/events/berli...

I wrote an article to celebrate scroll-driven animations finally landing in Safari 26, here are some things you probably want to know before using them: cydstumpel.nl/start-using-...

Be punk, crash browsers.

deployed a `scroll-target-group` and `:target-current` #CSS scroll spy upgrade from the scroll driven animation variant that was a little uncanny to my site, now it's always right read about the feature from @una.im una.im/scroll-targe... try it here in Canary nerdy.dev/cascading-se...

make a band singular: Blue Scholar

Rolled my own Twitter API aggregations, so posts can now show engagement from that platform again 🤘🏻💀 nerdy.dev/twitter-inte...

I've been using a "follow-the-leader" pattern with CSS anchor positioning lately so I decided to write about it! You set up a "follower" element and dynamically update the anchor on an event/state. Surprisingly simple and effective. Read more with demos!: 👀➡️ una.im/follow-the-a...

🚀The new CSS sibling-index() and sibling-count() functions let us create staggered animations, dynamic color palettes, and even complex circular layouts with ease. I wrote about my first experiments with these fantastic new CSS additions. So much fun! ♥️ ✨ #CSS utilitybend.com/blog/styling...

Me 🤝 Shopify nerdy.dev/joining-shop...

added: - ::highlight() (thx @veneman.dev!) - ::grammar-error() - ::spelling-error() - ::slotted() - ::part()

added: - :heading - :heading() - :state()

🆕 ep #209 of @whiskey.fm Is Cracker Barrel a JS Framework? JS trends, overused hooks, frameworks chasing sameness, why Cracker Barrel's rebrand felt like a NPM package metaphor, retro console nostalgia, LAN parties, and plenty of other delightful whatnot! 🥃 nerdy.dev/www-ep209

Hi friends! Just moved to our new home at vtbag.dev! Follow The Bag to catch the next cool tricks we’ll pull out!

changed: @if -> if() added: @when @else

I just published a new blog post about two of my absolute favourite CSS tricks. ✨ www.joshwcomeau.com/animation/pa...

Nothing has changed here. Custom properties currently still animate on the main thread. You can see this in codepen.io/bramus/pen/w... after hitting the “Add Jank” button, or by doing a DevTools trace. Please star issues.chromium.org/issues/40890... to signal interest into getting this changed.

Here's a #CSS study list, 100+ features to checkout from the past ~5 years. There're surprises in here for even the most knowledgeable front-end developer! nerdy.dev/cascading-se...

If you find CSS grid confusing or hard to use, what are your pain points? What's throwing you off?

I've joined @whiskey.fm as a permanent show host! I'll be bringing #CSS content and overall more dorky nerdery to the pod. Tune in if you're into (web tech news || whiskey || whatnot) nerdy.dev/www-ep208

If you thought we were done with View Transitions, guess again! A feature Chrome is working on, is “Scoped View Transitions”, which allow you to scope a VT to a subtree of the DOM. This unlocks things like concurrent transitions and prevents layering issues. developer.chrome.com/blog/scoped-...

ooOO github.com/github/spec-...

TIL how to set keyframe offsets in JS WAAPI animations been using them for a long time in CSS, but needed them in my JS today, somehow for the 1st time 🤔 nerdy.dev/keyframe-off...

setcpm(12) $: sound("bd [~ bd]*4, [- sd]*2").bank('TR909').scope() $: sound("[hh]*16").gain(.1).bank('TR909').scope() $: note("e2 b3 b3 g3 f#3 f#3 f#3 [f#3 g3]*1").sound('piano').scope()

oh snap, Warp has a built in code editor now sweet.

Phrygian Locrian Targaryen

dorian? lydian? mixolydian? nickelodeon?

I'm as old as Erlang and Objective-C You?

find myself mostly in Warp and a little bit of Zed these days you?

declarative music‽ youtu.be/HkgV_-nJOuE?...

solved an edge case style override in @astro.build using CSS layers a little while back and got around to writing it up still extremely happy with Astro and its technical choices to lean heavily on web standards. makes stuff like this feel so natural 💜 codetv.dev/blog/astro-c...

stumbled on this pretty one while testing! try it gradient.style#layers=%5B%7...

I'm dressing up as Zeke from Zombies Ate My Neighbors on SNES for PAX, just finished making my shirt!

gradient.style has finally - come out of beta - offers multiple background editing - is open source 🎉 nerdy.dev/gradient.sty...

.yoga { place-self: start stretch; }

display: grod;

place-self: end; place-content: end; the end of the beginning, or the beginning of the end?

Why are there so many different CSS units? @nerdy.dev can tell you more than most! www.youtube.com/watch?v=jF2e... creators.spotify.com/pod/profile/...

The making of a #CSS5 HDR enabled gradient tool a fun peek into the sketching that led to the gradient line UI, the color picker, the overall layout, some math and more! nerdy.dev/the-making-o...

Insights into my developer AND designer tooling endeavors over on @devtools.fm ⤷ nerdy.dev/devtools-fm-...

#CSS ✅ contrast-color() ✅ control-value() ✅ sibling-index() ✅ scroll-state() ✅ mixins/functions ✅ @starting-style We chat these and much more over on the @workingdraft.de show ⤷ nerdy.dev/working-draf...

This speaker lineup is 🔥 Hear from @shrutikapoor08.bsky.social, Bree Hall, @nearestnabors.com, @kentcdodds.com, @webai.bsky.social, @jherr.dev, @nerdy.dev, @devdevcharlie.com, our emcee @jason.energy, and many more! Use the discount code STACKED at checkout and save $50 🎟️ Link ⬇️

blisters on my fingers from playing electric guitar today 🎸🙂 eventually just put on music videos and played along with them, my kids chillin with me hopin this makes a core memory

If you want `:host(:has(…))` to work in Chrome, please star this bug 🙏 issues.chromium.org/issues/40062...

deployed updates to nerdy.dev, lemme know if you find issues or notice what's changed

front-end should wait less for backends to get started make something desirable, reduce state to a packet later