Chris Coyier
@chriscoyier.net
The main thing = @codepen.io Personal site = https://chriscoyier.net Podcast = https://shoptalkshow.com Bend, Oregon
you ever get to your mid fourties and have your eyesight drop off a friggin cliff
I still think this is a very cool demo. codepen.io/editor/chris... random()-ly positioned "stars" split into three groups via :nth-child() fanciness. Each group moves a different amount by just a single @keyframes mapped to a scroll-driven animation timeline. Not hard!
Email from Apple: We’re reaching out to let you know that the iPhone Upgrade Program is coming to an end. Thank you for being a loyal member. Awwww. Sad trombone. I’ve been on this program for as long as I can remember. Every year you just send back your old phone and get the new model, and keep...
CodePen 2.0 Noting perhaps my largest personal career accomplishment, which is launching CodePen 2.0. Far more work, believe it or not, than the entire creation of the original CodePen. This isn't the... https://chriscoyier.net/2026/07/30/codepen-2-0/
CodePen 2.0
Noting perhaps my largest personal career accomplishment, which is launching CodePen 2.0. Far more work, believe it or not, than the entire creation of the original CodePen. This isn't the place to describe every detail of what we did and why we did it. If you're interested, perhaps our Why 2.0? podcast or the What's...
chriscoyier.net
The fact that even _this_ is a no-JS situation in CSS is wild to me. master.dev/blog/masonry... That's how the original Masonry.js library animated to new positions. (Based on an idea I saw from @bram.us)
I think it's hilarious and awesome they have an `<mj-carousel>` element that works¹ in emails. codepen.io/editor/chris... ¹ ... in some email clients, and tries to do good fallbacks
CodePen@codepen.io · last wk.You know how we write the HTML emails we're using for our launch email campaign? In MJML! mjml.io It's such a nice language for crafting HTML emails that work across all email clients. You know where we do it? On CodePen (because we support .mjml now). 💪
You're telling me an odd runs this sea? Yr telling me The Od runs this yssey? [save as draft] dammi
Data dump from @deque.com's latest survey. www.deque.com/blog/new-rep... Feels like an awfully high number of people saying they actively prompt for accessible output.
> A whole new product with a new file-system, versioned deployments, and customizable build chain smooshed in… yet the UI still feels familiar. 🏄♀️
Dave Rupert@davatron5000.bsky.social · last wk.📝 What I like about the new @codepen.io v2 experience daverupert.com/2026/07/code...
I got into the idea that conic-gradient() is pretty cool for drawing triangles. master.dev/blog/when-yo...
Wile E. Coyote, despaired, takes a bucket of paint and a brush and paints a beautiful two-bedroom house on a mountainside. He paints a beautiful coyote wife in the window, and two adorable coyote kids running around in the yard. He tries to enter this new coyote life, but it is inaccessible to him
I didn't realize that if, say, you have a `box-shadow`, then a @keyframes animation applied to the same element and also applied a `box-shadow`, you can get them to stack on top of each other with `animation-composition`. master.dev/blog/using-a...
Using `animation-composition` in CSS to Avoid Redeclaring Other Values
Here's an example. You can list multiple comma-separated box-shadows, but if you apply a *new* box-shadow, it overrides anything set before. Not true here.
master.dev
background: conic-gradient( from 0 at 0 0, white, red ); kinda weirdly perfectly chill 3D look. codepen.io/editor/chris...
This show, thanks to Dan, will take you from zero to understanding AT Proto. Including how it’s pronounced like the @
@shoptalkshow.com · 2w ago724: Ask Dan Abramov Anything About AT Proto If you're like Chris and understand a bit of the tech behind AT Proto but want to understand it at a deeper level, this episode is for you. How does it differ from straight up RSS and Mastodon, where is my identity being stored, how do I create a…
A bonus reason to have `alt` text is so when your images fail, it's funnier.
I’ve been thinking of this graphic by @chriscoyier.net every time I’ve got ice out of my shitty ice cube tray for going on 12 years now
Replaced a `.on("scroll", function() { }` from a 2014 jQuery demo with fun new stuff like scroll-state queries, modern elements, anchor positioning, and more.
Nilesh Prajapati@nileshprajapati.com · 3w agoLessons Learned Rewriting a Sticky Detector by @chriscoyier.net #css
www.nytimes.com/2026/07/15/b... Go Stripe go. I'd love to consolidate to one payment API very muchly plz.
PayPal Receives $53 Billion Takeover Offer Involving Stripe
PayPal, which owns Venmo, is the target of what one group of analysts described as a “lowball” offer from Stripe, another payment processor, and Advent, a private equity firm.
nytimes.com
A thing we do with CSS @layer at CodePen is rather than thinking of it as a vertical stack, it's a two-layer thing with lots of components (thus "horizontal"). Layer the Custom Properties, don't layer the rest. It makes those custom properties very easy to override later. master.dev/blog/thinkin...
Thinking Horizontally in CSS @layer
If you put your custom properties (tokens) for every component in an @layer, then overriding them is never a fight.
master.dev
Choosing Movies Almost surely, if you totaled up the number of hours of movie watching I’ve done and the hours of TV show watching I’ve done, TV dwarves movies. It's not a... https://chriscoyier.net/2026/07/13/choosing-movies/
Choosing Movies
Almost surely, if you totaled up the number of hours of movie watching I’ve done and the hours of TV show watching I’ve done, TV dwarves movies. It's not a conscious choice; just how it shook out for me. Via the internet, I “know” a couple of people who are consciously movie-only. Khoi Vinh does...
chriscoyier.net
Nothing other than anecdotal evidence but I feel like Apple’s media servers are just _slow_. No matter where I am there is frustrating “buffering” with no UI to help. Just infinite pausing.
Vouri t-shirts are the absolute best. But there is precious little to tell you which way to put it on (tiny Vouri flag slightly on front side at bottom of shirt). So I color a little dot on the inside neck like I’m a toddler.
I made a website that lets you cut out old magazines from the internet archive (or any PDFs you own) and make collage art out of them: ✂️ clipart.studio
Maps to the Official Chart I made (checks notes) a long time ago. chriscoyier.net/2010/01/23/p...
Pizza Hut / Dominos Quality Timeline
Oh yes we did.
chriscoyier.net
Daring Fireball bot@dfbot.eurosky.social · 2mo agoDomino’s Admitted Their Pizza Tasted Like Cardboard