Chris Coyier
@chriscoyier.net
📤 18565
📥 875
📝 871
I do
@codepen.io
Is the Tailscale loader a Conway's Game of Life "Glider" going by?
loading . . .
about 3 hours ago
1
8
1
reposted by
Chris Coyier
Nathan Pickard
about 4 hours ago
Great blog post on
@frontendmasters.com
from
@chriscoyier.net
- What to Know in JavaScript (2026 Edition) Covers everything from the latest in ECMAScript to Meta Frameworks. Definitely worth checking out to stay up to date on the
#JavaScript
ecosystem in 2026!
frontendmasters.com/blog/what-to...
loading . . .
What To Know in JavaScript (2026 Edition)
An overview of what's new in language features, frameworks, runtimes, build tools, testing, and more.
https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/
0
2
2
A totally unnecessary retrospective, by moi.
add a skeleton here at some point
about 3 hours ago
1
13
2
reposted by
Chris Coyier
2 days ago
I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to
@lea.verou.me
for bringing it to CSS. Enable the `enable-experimental-web-platform-features` flag in Chrome Canary
codepen.io/yisi/pen/NPR...
loading . . .
0
37
8
Mr.
@davatron5000.bsky.social
and I on
@whiskey.fm
for St. Pats day.
whiskey.fm/flogging-mar...
I DRINK, and I KNOW HOW TO ROUND RECTANGLES. [in my best Tyrion Lannister voice]
loading . . .
https://whiskey.fm/flogging-margins-with-the-dropcap-murphys
1 day ago
1
13
4
You can `glob` a folder full of Markdown+Front Matter files in CodePen 2.0 and build a site out of it. Use the Vue + Vite block and do the glob in the Vite config. Use the define method to pass it to the client. Here's how:
www.youtube.com/shorts/Pn-2B...
Example Pen:
codepen.io/editor/chris...
loading . . .
Glob Markdown Files with Vue + Vite in CodePen 2.0
YouTube video by CodePen
https://www.youtube.com/shorts/Pn-2BPSlgn8
2 days ago
1
18
1
reposted by
Chris Coyier
Anthony Frehner
3 days ago
Good news: support for this feature will be out in FF149 and Chrome 148! I did the implementation in both FF and Safari because
@nerdy.dev
and I wanted it so badly haha. And chrome has had it behind a flag for a bit. See
github.com/mdn/browser-...
loading . . .
FF149 @container query is optional by hamishwillee · Pull Request #29300 · mdn/browser-compat-data
FF149 adds support for @container selections where the <container-query> part is optiona in https://bugzilla.mozilla.org/show_bug.cgi?id=2016474 This allows you to just select a container bas...
https://github.com/mdn/browser-compat-data/pull/29300/
2
14
2
ok hear me out. If we put a unique `container-name` on the root of all of our components... that's... perfect scoping, via: @container unique-name { button {} .whatever {} } That's platform-level CSS modules. That's the scoping we need!
frontendmasters.com/blog/name-on...
loading . . .
Name-Only Containers: The Scoping We Needed
If we give a `container-name` to the root of all our unique components, we can scope styles to them with a simple @container query.
https://frontendmasters.com/blog/name-only-containers-the-scoping-we-needed/
3 days ago
9
108
17
Nicely done post! And lovin' them 2.0 embeds.
add a skeleton here at some point
4 days ago
1
13
0
Apex Domains work with CodePen Deployed Pens. This Pen:
codepen.io/editor/chris...
Points to this domain:
bendtreehouses.com
Because I'm using Cloudflare for the DNS, which supports CNAME records "at the root" that point to domains. Two minutes explains all:
www.youtube.com/shorts/7Qja1...
loading . . .
Depending on size and details, around one week.
https://bendtreehouses.com/
4 days ago
2
19
5
reposted by
Chris Coyier
Arby
4 days ago
codepen.io/collection/g...
I'm working on a new frontend toolkit, and I've been using Pen 2.0 for the examples. Honestly, I'm really impressed by the experience. Great work to everyone on the
@codepen.io
team. I know how hard it is to make big changes to a platform people already love.
loading . . .
Web Expressive | Examples - a Collection by Arby on CodePen
Examples from Web Expressive, a standard-first frontend toolkit based on the intent of the Material 3 Expressive design language.
https://codepen.io/collection/gPxbxr
0
3
1
You've heard it over and over. But it's really astonishing(ly bad) what we're doing these days. 277 MB for the *text transcript* of a podcast. My browser nearly freezes.
4 days ago
8
90
12
Maciej Mionskowski has good points about the downsides of using third-party embeds for code previews & the srcdoc solution is clever
mionskowski.pl/posts/iframe...
CodePen does have a solution for keeping the code on your site only
blog.codepen.io/docs/embeds/...
But it still requires our script
4 days ago
0
7
0
We used to have different URLs for views of the same Pen on
@codepen.io
/pen/ = editor /full/ = full page preview /details/ = ocus on comments /collab/ = real time /pres/ = presentation mode etc. Not anymore — It's the same canonical URL with query param control.
www.youtube.com/watch?v=J4Bd...
loading . . .
"Copy Link with Layout"
YouTube video by CodePen
https://www.youtube.com/watch?v=J4BdGVVyHhk
4 days ago
1
17
1
reposted by
Chris Coyier
CSS-Tricks*
5 days ago
A couple new column-wrapping features shipped in Chrome 145, like `column-wrap` and `column-height`. Truly big upgrades for multi-column layouts — here's how you *might* use them... as well as when you might *not* use them.
css-tricks.com/css-multi-co...
1
41
8
Help Me Understand How To Get Jetpack Search to Search a Custom Post Type I've got a Custom Post Type in WordPress. It's called docs because it's for documentation pages. register_post_type("docs", [ "labels" => [ "name" => __("Docs"), "singular_name" => __("Docs Page"), "add_new" => __("Add Docs…
loading . . .
Help Me Understand How To Get Jetpack Search to Search a Custom Post Type
I've got a Custom Post Type in WordPress. It's called docs because it's for documentation pages. register_post_type("docs", [ "labels" => [ "name" => __("Docs"), "singular_name" => __("Docs Page"), "add_new" => __("Add Docs Page"), "add_new_item" => __("Add New Docs Page"), "edit_item" => __("Edit Docs Page"), ], "public" => true, "publicly_queryable" => true, 'exclude_from_search' => false, "has_archive" => true, "rewrite" => ["slug" => "docs"], "show_in_rest" => true, "hierarchical" => true, "supports" => [ "title", "editor", "thumbnail", "excerpt", "page-attributes", "revisions", ], ]);
https://chriscoyier.net/2026/04/05/help-me-understand-how-to-get-jetpack-search-to-search-a-custom-post-type/
5 days ago
3
2
0
Finals on now!
add a skeleton here at some point
9 days ago
1
12
1
Plus, it gives your CSS a tasty sear.
add a skeleton here at some point
9 days ago
0
13
3
reposted by
Chris Coyier
Philip Schiller
10 days ago
Happy 🎂 🍎
www.apple.com
loading . . .
Apple
Commemorate Apple's 50th anniversary.
https://www.apple.com
0
66
5
Ughck I missed one
add a skeleton here at some point
10 days ago
0
8
0
Just add a `screenshot.jpg` (or whatever format)
add a skeleton here at some point
10 days ago
0
12
0
reposted by
Chris Coyier
CSS-Tricks*
10 days ago
Rounding up recent things that are worth having on your radar: 💥 SVG favicons and color scheme (
@pawelgrzybek.com
) 💥 Help shape @mixin (
@lea.verou.me
) 💥 Anchor-interpolated morphing (
@chriscoyier.net
) 💥 corner-shape UI elements (
@utilitybend.com
) ...and more:
css-tricks.com/whats-import...
loading . . .
What’s !important #8: Light/Dark Favicons, @mixin, object-view-box, and More | CSS-Tricks
Short n’ sweet but ever so neat, this issue covers light/dark favicons, @mixin, anchor-interpolated morphing, object-view-box, new web features, and more.
https://css-tricks.com/whats-important-8/
0
21
4
reposted by
Chris Coyier
Zach Leatherman
10 days ago
It needs to be known that
@cloudfour.com
are some of the best folks in the business and now is your chance to learn first-hand:
cloudfour.com/thinks/more-...
loading . . .
More Projects Please
We’re actively seeking new UX design, UI design or hybrid creative/development challenges to solve.
https://cloudfour.com/thinks/more-projects-please/
1
4
4
Just as a reminder — all these cool fonts are available to use on
@codepen.io
as well.
add a skeleton here at some point
12 days ago
0
42
5
Ghostty has `background-opacity` why don't YooOOOuUUUuu have `background-opacity` CSS?
13 days ago
2
26
0
Hawai’i I'm just back from the United States 50th state, a staggering 2,500 miles from the mainland. For the next week or two, I'll pronounce it Ha-Vie-ee, like how it's pronounced in the native Hawaiian language. A language, by the way, that only a few thousand people speak natively, no doubt due…
loading . . .
Hawai’i
I'm just back from the United States 50th state, a staggering 2,500 miles from the mainland. For the next week or two, I'll pronounce it Ha-Vie-ee, like how it's pronounced in the native Hawaiian language. A language, by the way, that only a few thousand people speak natively, no doubt due to the 91 years (1896-1987) where there was "strict physical punishment"
https://chriscoyier.net/2026/03/27/hawaii/
14 days ago
0
13
0
There is "Real" Tailwind (v4) processing in the 2.0 editor. No more faking it. You can straight up look at the output and see what it's doing.
loading . . .
14 days ago
0
32
6
Thread and video in case you've feeling the "Oh no! CodePen is going to be different!" feels. 2.0 can be almost identical to Classic, only dipping into new features when you're ready.
add a skeleton here at some point
15 days ago
0
22
7
I liked the part where Ryan Gosling was like “Go long!!!” and the alien caught the ball at the back of the end zone and the coach was like phewfff that was one heck of a project and winked at the camera
17 days ago
2
15
0
reposted by
Chris Coyier
Ben Evans
22 days ago
To celebrate something-or-other, I created a retro CRT using only vanilla CSS! 📺
codepen.io/ivorjetski/p...
No images. No JavaScript. No SASS. Fully turn-off-and-on-able! Also a documentary about the making of it:
www.youtube.com/watch?v=wdNH...
@CodePen
#css
#cssart
#cssonly
#frontend
loading . . .
CodePen TV 📺 100% Pure CSS
📺📺📺📺📺📺📺📺📺📺📺📺📺📺 🚫 - 100% No Images ☕ - Definitely no JavaScript 🤖 - Absolutely no AI 😇 - Only the purest HTML and completely vanilla fresh CSS!! 📺...
https://codepen.io/ivorjetski/pen/qEaRjBw
9
79
31
You can take any 2.0 Pen:
codepen.io/editor/team/...
And deploy it:
tight-hill-cattle.codepen.app
Then map it to a subdomain*:
subscribe.shoptalkshow.com
Three-minute video on how here:
www.youtube.com/watch?v=nzeW...
And docs:
blog.codepen.io/docs/pens/de...
*apex domains coming soon.
loading . . .
Deploy a Pen to a Custom Subdomain
YouTube video by Chris Coyier
https://www.youtube.com/watch?v=nzeWgVJkp6k
23 days ago
7
69
15
You can just pluck one-off Web Awesome components to use as you please. See how easy:
loading . . .
23 days ago
1
59
19
Meets Style Sheets I've accepted an invitation to speak at Smashing's (Online) Conference Meets Style Sheets. It's free on Wednesday, May 6th. I named my talk In-N-Out Styling. Long time CSS evangelist Chris Coyier will talk about how you can style things on their way into view on a webpage, and…
loading . . .
Meets Style Sheets
I've accepted an invitation to speak at Smashing's (Online) Conference Meets Style Sheets. It's free on Wednesday, May 6th. I named my talk In-N-Out Styling. Long time CSS evangelist Chris Coyier will talk about how you can style things on their way into view on a webpage, and on their way out. Of course, with Chris being Chris, there will be plenty of things which are food for discussion, as well as plenty of practical take-aways as well.
https://chriscoyier.net/2026/03/18/meets-style-sheets/
23 days ago
2
21
7
reposted by
Chris Coyier
kottke.org
about 1 month ago
New web game that takes 2 min to play (and perhaps a lifetime to master?): Outsmart. “Five rounds, first to 3 wins. In each round, the higher bet wins. You have 100 total points, so bet wisely. Can you outsmart the machine?”
[labs.davidbauer.ch]
loading . . .
Outsmart – a game of strategy and deception
A strategic betting game where you try to outsmart the computer, maybe for the last time ever.
https://labs.davidbauer.ch/outsmart/
0
18
4
reposted by
Chris Coyier
Ross Wintle
26 days ago
I can’t remember which newsletter it was in but my whole family are now simultaneously playing this stupid thing and it’s simple and joyous!
100jumps.org/play/
loading . . .
100 Jumps
Hold to charge, release to jump. Land on 100 platforms to win — but one miss and it's over. How many attempts will it take you?
https://100jumps.org/play/
10
188
60
Couple of reasons to put a width (and height!) on images.
loading . . .
27 days ago
2
94
18
reposted by
Chris Coyier
Adam Chalmers
27 days ago
Yeah i love OpenClaw... Opening a Whiteclaw and drinking it!!!!!!!!
3
219
28
Kermit Roosevelt I was at a school function the other day where the 2nd graders performed a bunch of Aesop's Fabels and it was great. It was a double-header with 3rd graders who then read prepared reports on famous people. It was cross-disciplinary thing as the kids brought props from design…
loading . . .
Kermit Roosevelt
I was at a school function the other day where the 2nd graders performed a bunch of Aesop's Fabels and it was great. It was a double-header with 3rd graders who then read prepared reports on famous people. It was cross-disciplinary thing as the kids brought props from design class, costumes from performing arts, and did the speech both in Spanish and English.
https://chriscoyier.net/2026/03/14/kermit-roosevelt/
27 days ago
0
1
0
AI is my CMS I mean... it's not really, of course. I just thought such a thing would start to trickle out to people's minds as agentic workflows start to take hold. AI agents are already up in your codebase fingerbanging whole batches of files on command. What's the difference between a CMS taking…
loading . . .
AI is my CMS
I mean... it's not really, of course. I just thought such a thing would start to trickle out to people's minds as agentic workflows start to take hold. AI agents are already up in your codebase fingerbanging whole batches of files on command. What's the difference between a CMS taking some content and smashing it into some templates and an AI doing that same job instead?
https://chriscoyier.net/2026/03/13/ai-is-my-cms/
28 days ago
4
10
0
Fellow olds, I’m like 90% sure “cooking” is good and “cooked” is bad.
29 days ago
18
99
2
reposted by
Chris Coyier
Shaw
29 days ago
The
@codepen.io
Compiler is the real key to making 2.0 so awesome. Because of how smart it is, using Tailwind is as simple as `@import "tailwindcss"`, and using most JS Libraries is as simple as `import gsap from "gsap"`! No additional work required on your part.
codepen.io/editor/shsha...
add a skeleton here at some point
1
11
3
The CodePen 2.0 editor has a whole new brain: The CodePen Compiler. It looks at all your code, figures out what needs to be done, makes a plan, and executes it. It does a lot very quickly. (Go, naturally). Here's a page that goes into some of it:
codepen.io/beta/compiler
loading . . .
The CodePen Compiler
The CodePen Compiler powers 2.0 editor: process and build your code with configurable blocks.
https://codepen.io/beta/compiler
29 days ago
5
62
16
reposted by
Chris Coyier
Patrick Brosset
about 1 month ago
Curious about custom <select>? I wrote about some of my recent demos over at
@css-tricks.com
! Take a look ✨
css-tricks.com/abusing-cust...
0
80
22
Enjoyed Bugonia. Little bit like a high budget Safety Not Guaranteed.
about 1 month ago
3
9
0
The way our
@codepen.io
2.0 editor deals with npm packages is pretty cool. 1. Detect package usage 2. Create/edit `package.json` file to reflect needed packages 3. Inject an `<script type="importmap">` into any HTML produced by compiler Here's using React in 53 seconds.
loading . . .
about 1 month ago
1
46
6
Lol I JUST finally bailed on Ghostty because of lack of search when they drop the feature.
ghostty.org/docs/install...
about 1 month ago
2
16
1
I’d like to see an explicitly social-forward RSS reader. Like it’s encouraged to highlight passages and leave short comments. Your buds see yours, you see your buds.
about 1 month ago
13
104
8
reposted by
Chris Coyier
Nic Chan
about 1 month ago
Yes, person at Cursor did it, and Sanity rebutted it
leerob.com/agents
www.sanity.io/blog/you-sho...
loading . . .
Coding Agents & Complexity Budgets
$260 in tokens and hundreds of coding agents later.
https://leerob.com/agents
3
23
3
Has someone written "AI is my CMS" yet? Feels inevitable. Like why run a build tool when you can just prompt another page?
about 1 month ago
7
14
0
One day you're like "we should send a weekly newsletter about the cool stuff on
@codepen.io
and around". Then 500 weeks go by. 🎉
codepen.io/spark/500
about 1 month ago
3
58
7
Load more
feeds!
log in