Chris Coyier
@chriscoyier.net
š¤ 18692
š„ 940
š 922
I do
@codepen.io
reposted by
Chris Coyier
Kevin Powell
6 days ago
More and more people I deeply respect and have learned a lot from over the years feel like they are speaking into a void, to the point where they are losing motivation to continue making content, which got me to write my first post on my site in over a year...
www.kevinpowell.co/article/tell...
30
295
96
reposted by
Chris Coyier
David Bushell šŖæ
10 days ago
blogged: Web whetstones
dbushell.com/2026/05/18/w...
how to stay sharp as a web developer?
loading . . .
Web whetstones
The one where I go back to basics
https://dbushell.com/2026/05/18/web-whetstone/
4
21
2
Did your editor font go default serif on WordPressĀ 7.0? Mine did. Like this: so meta. I guess WordPress 7.0 assumes you are using a theme.json file these days. I'm not doing that yet on any of the sites I work on. If you want to embrace that future, you could add a theme.json file to the root ofā¦
loading . . .
Did your editor font go default serif on WordPressĀ 7.0?
Mine did. Like this: so meta. I guess WordPress 7.0 assumes you are using a theme.json file these days. I'm not doing that yet on any of the sites I work on. If you want to embrace that future, you could add a theme.json file to the root of your theme, and put some typography basics only in there: { "$schema": " "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "720px" }, "typography": { "fontFamilies": [ { "fontFamily": "system-ui, sans-serif", "name": "System Font", "slug": "system-font" } ] } }, "styles": { "typography": { "fontFamily": "var(--wp--preset--font-family--system-font)", "lineHeight": "1.75" } } } …
https://chriscoyier.net/2026/05/27/did-your-editor-font-go-default-serif-on-wordpress-7-0/
about 9 hours ago
2
6
2
ooooooo `line-clamp: auto;` with a max-height
add a skeleton here at some point
1 day ago
0
15
2
Last call for the DEEP early access discount on the AI & Design Systems course. $500 instead of $995. Plus, SHOPTALKSHOWISAWESOME takes another 15% off that. Here's Brad & Ian on the show hanging out to talk about all this:
shoptalkshow.com/713/
add a skeleton here at some point
1 day ago
1
1
0
reposted by
Chris Coyier
Brecht De Ruyte
7 days ago
š New article on gap decorations (coming soon) in CSS. I have a small obsession with clean layout lines, and this is the first time it feels easy to draw them without polluting the markup. Goes through the new properties, a playground, and some experiments... š¾
utilitybend.com/blog/css-is-...
loading . . .
CSS is filling the gaps with rules. A way to style gaps in grid and flex. | utilitybend
A practical walkthrough of CSS gap decorations: column-rule, row-rule, rule-break, rule-inset, rule-visibility-items, repeat(), and animation.
https://utilitybend.com/blog/css-is-filling-the-gaps-with-rules-a-way-to-style-gaps-in-grid-and-flex
3
55
12
If anything, AI has taught people how to use Shift-Enter.
5 days ago
3
96
3
reposted by
Chris Coyier
Mat āWiltoā Marquis
6 days ago
About time.
add a skeleton here at some point
3
55
7
reposted by
Chris Coyier
Vale
7 days ago
Testing in Safari can be an expensive ordeal thanks to Apple only supporting the browser on their platforms. Over on
@frontendmasters.com
, I wrote about testing in Safari without spending a small fortune.
frontendmasters.com/blog/testing...
#Safari
#FrontEndDev
#WebDev
loading . . .
Testing Safari on a Budget
Good luck on non-Apple devices! You may want to try remote hardware or an online service. Or go refurbished and try to keep the cost down.
https://frontendmasters.com/blog/testing-safari-on-a-budget/
4
28
4
"Like if shadcn and Open Props had a baby."
open-props-ui.netlify.app/html/
loading . . .
Open Props UI
https://open-props-ui.netlify.app/html/
8 days ago
3
31
7
My next ten thousand dollar idea is Chris ānā Daves Website Salvage Yard. You give us old websites you canāt keep up anymore, we slather them in ads, but promise to keep them online in perpetuity.
add a skeleton here at some point
9 days ago
1
32
2
I canāt explain it but Fred Armison is The Decemberists of comedy.
11 days ago
6
26
2
I can say the server reacted to my component ya know
12 days ago
0
9
0
My unpopular opinion is that Markdown is 75% just because writing <p> tags sucks and 25% for lists and thatās it, nothing else is better or annoying enough to want a whole processing language for.
13 days ago
33
165
13
My ten thousand dollar idea is hitting the road and doing a documentary on the joy of middle school talent shows.
14 days ago
1
31
0
Still got Private Pens and they work the same way, but now there is š password protected Pens and šļø invite-only Pens.
add a skeleton here at some point
16 days ago
1
22
7
A browser plugin that just div:hover, div:hover * { transform: none; } to get all these claude sites to calm the hell down.
loading . . .
20 days ago
4
47
3
Turns out if you move focus in a `startViewTransition` you can move the :focus-visible look around. But cleaner to use a `:focus-visible > span`.
add a skeleton here at some point
20 days ago
0
9
1
All week Iāve woken up like āFeels like a Nancy Sinatra kinda morningā
20 days ago
0
4
0
It's the best.
add a skeleton here at some point
22 days ago
0
24
5
reposted by
Chris Coyier
maxvoltar
22 days ago
My favorite (underrated) font right now: At Umami. I've designed keycaps with it, used it for branding, heck it's currently the font I use on my ereader since it's so pleasant to look at.
arillatype.studio/font/at-umami
loading . . .
At Umami ā Font ā Arillatype.StudioĀ®
At Umami is a savoury rounded sans-serif font that adds depth and dimension to your designs.
https://arillatype.studio/font/at-umami
5
74
4
I did up a new talk! I'm calling it In-N-Out Animations, and covers animating elements in and out of view/existence. It's FREE to see tomorrow at
@smashingconf.com
's Meet Style Sheets event.
smashingconf.com/meets-style-...
See ya there or, be `display: none;` or... uh, a funny version of that.
22 days ago
2
48
10
`zoom` in CSS was so known to be unreliable for so long I don't think I ever really learned what it was supposed to do. But I think that's all fixed now and
@stefanjudis.com
's demo makes it super clear. Scales stuff while keeping the element in flow.
www.stefanjudis.com/today-i-lear...
loading . . .
23 days ago
3
74
13
reposted by
Chris Coyier
Timothy
27 days ago
Bring back the ancient knowledge
57
16641
7562
reposted by
Chris Coyier
SmashingConf
26 days ago
šØ Level up your CSS game! Smashing meets Style Sheets is a FREE online event on May 6th. Featuring: āļø Anchor Positioning š® CSS Gaming š ļø Practical tips from
@chriscoyier.net
, Juan Diego Rodriguez and
@rebane2001.bsky.social
Grab your free spot here:
smashingconf.com/meets-style-...
loading . . .
Smashing Meets ā Friendly, inclusive, practical event for web designers and developers. ā Meets Style Sheets ā May 6, 2026
Wednesday, May 6, 2026, 8ā11am PDT / 5ā8pm CET, we are hosting a new edition of our online community event Smashing Meets. In this Meets we're talking about CSS, and how awesome it is. We'll have thre...
https://smashingconf.com/meets-style-sheets
0
7
5
reposted by
Chris Coyier
Christian Alder
about 1 month ago
Y'all
@chriskirknielsen.com
cracked it and was even so kind to pop it on a codepen š„³
front-end.social/@chriskirkni...
direct to Codepen:
codepen.io/chriskirknie...
What a legend š
loading . . .
Christopher Kirk-Nielsen (@
[email protected]
)
Attached: 1 image @hejchristian Happy to help! I juuuust updated the Codepen and the floating lines in non-square grids is no longer an issue.
https://front-end.social/@chriskirknielsen/116477730288628658
2
7
2
When Sites Need to WalkĀ Away The Internet Archive has a new book: VANISHING CULTURE. (Digital copy is free.) According to a Pew Research Center report, 26% of pages from 2013-2023 are no longer accessible. But thatās not the whole story. In a new study published in Internet Archive's book,ā¦
loading . . .
When Sites Need to WalkĀ Away
The Internet Archive has a new book: VANISHING CULTURE. (Digital copy is free.) According to a Pew Research Center report, 26% of pages from 2013-2023 are no longer accessible. But thatās not the whole story. In a new study published in Internet Archive's book, VANISHING CULTURE, data scientists working with the Wayback Machine have found: 16% have been restored through the Wayback Machine.
https://chriscoyier.net/2026/04/28/when-sites-need-to-walk-away/
29 days ago
0
14
1
Browserslist works across Babel, PostCSS (preset-env), and Lightning CSS (on CodePen). I like it. One place to store browser support information, multiple tools use it.
loading . . .
about 1 month ago
0
17
2
reposted by
Chris Coyier
Dave Rupert
about 1 month ago
Weird to not be on
@shoptalkshow.com
today, but for good reason! We had a cheer competition in Tampa and turned it into a mini-vacation. I locked my computers in a safe for the week and it feels pretty good. Thanks to
@chriscoyier.net
and
@scottjehl.com
for holding it down.
shoptalkshow.com/712/
loading . . .
712: Lazy Loading the Web with Scott Jehl
Chris Coyier and Scott Jehl discuss the recent advancements in lazy loading on the web, the process of standardization, browser support, and the future of web performance optimization.
https://shoptalkshow.com/712/
2
28
1
Got this sweet DTF St. Louis commemorative cup from Target.
loading . . .
about 1 month ago
1
1
0
Not selling many tickets to my āSituational Awareness for Eight Year Oldsā seminar
about 1 month ago
0
21
0
Bette Midler sings WoodieĀ Guthrie 80 years old and killing it.
loading . . .
Bette Midler sings WoodieĀ Guthrie
80 years old and killing it.
https://chriscoyier.net/2026/04/26/bette-midler-sings-woodie-guthrie/
about 1 month ago
0
2
0
reposted by
Chris Coyier
CodePen
about 1 month ago
š¶ If you think of an idea you just have to do Just remember pen dot new slash two! š¶
1
8
1
finally secured some footage of my ancestors
loading . . .
about 1 month ago
1
8
0
AI & Alignment Raw coding speed isn't the bottleneck. Alignment is the bottleneck. That seems to be a zeitgeist-y theme lately. If you're using AI to code, maybe you're feeling it. You can code more and faster. And clearly a boatload of other developers are doing that too. But software doesn'tā¦
loading . . .
AI & Alignment
Raw coding speed isn't the bottleneck. Alignment is the bottleneck. That seems to be a zeitgeist-y theme lately. If you're using AI to code, maybe you're feeling it. You can code more and faster. And clearly a boatload of other developers are doing that too. But software doesn't seem to be exploding in quantity or quality broadly. Maybe it's…
https://chriscoyier.net/2026/04/25/ai-alignment/
about 1 month ago
4
51
18
reposted by
Chris Coyier
Rudolph Fraser.
about 1 month ago
One of our most exciting releases since the founding of Blacksky. Multi-community support.
acorn.blacksky.community
add a skeleton here at some point
10
322
104
Itās an assumed truth that Safari is better for battery life ā without data to supportĀ it. This pseudo-truth just bugs me. I hear it all the the time. People saying they choose Safari as a browser because it's better for their battery. But there isn't any data (that I know of) that proves thatā¦
loading . . .
Itās an assumed truth that Safari is better for battery life ā without data to supportĀ it.
This pseudo-truth just bugs me. I hear it all the the time. People saying they choose Safari as a browser because it's better for their battery. But there isn't any data (that I know of) that proves that Safari is more efficient at battery usage than any other browser. I applaud Matt Birchler who did real testing on this (2024). He scripted a 20 minute loop that watched YouTube videos, scrolled Mastodon, scrolled websites, and typed in Google Docs.
https://chriscoyier.net/2026/04/24/its-an-assumed-truth-that-safari-is-better-for-battery-life-without-data-to-support-it/
about 1 month ago
5
28
4
Dig the story and the new footer design on
@rands.bsky.social
randsinrepose.com/archives/sho...
about 1 month ago
1
1
0
Ruby (8) is home from school today for professional development days. She really wants to make a web game, and there is a lot to explore there, but as I'm at work, I set her up to just vibe code it out to start, using
@anthropic.com
's Claude.
about 1 month ago
1
8
1
This HTML-in-Canvas stuff is pretty wild. Never would I ever have guessed we'd get this on the web.
@amitsheen.bsky.social
shows off how it works and many different possibilities.
frontendmasters.com/blog/the-web...
loading . . .
The Web Is Fun Again: First Experiments with HTML in Canvas
An experimental API let's us put HTML within those opening and closing canvas tags and render it to the canvas, while remaining interactive. Lots of possibility here!
https://frontendmasters.com/blog/the-web-is-fun-again-first-experiments-with-html-in-canvas/
about 1 month ago
5
72
10
reposted by
Chris Coyier
Robby Russell
about 1 month ago
Fun conversation with
@chriscoyier.net
and
@davatron5000.bsky.social
. Worth a listen if youāve ever installed Oh My Zsh and never questioned it since. š
shoptalkshow.com/711/
loading . . .
711: Where did Oh My Zsh Come From? And Using Rails in 2026
Weāve got Robby Russell, maintainer of Oh My Zsh, on the show to talk about why Chris has it installed, what makes a good Zsh plugin, Oh My Zsh plugins Robby recommends, what itās like ā¦
https://shoptalkshow.com/711/
1
11
2
Stories from Alaska Folk FestĀ 2026 is not an intellectual experience, itās an emotional experience. Bob Banghart Visiting Alaska gives me the feeling that people are chasing after when they travel: a little taste of what itās like to be a part of another world. To live another version of life. Notā¦
loading . . .
Stories from Alaska Folk FestĀ 2026
is not an intellectual experience, itās an emotional experience. Bob Banghart Visiting Alaska gives me the feeling that people are chasing after when they travel: a little taste of what itās like to be a part of another world. To live another version of life. Not just looking at it or fantasizing about it (which are fun too), but getting to live it for a little while.
https://chriscoyier.net/2026/04/20/stories-from-alaska-folk-fest-2026/
about 1 month ago
3
7
1
_Illusions_, Michael.
add a skeleton here at some point
about 1 month ago
0
25
0
Is the Tailscale loader a Conway's Game of Life "Glider" going by?
loading . . .
about 2 months ago
2
23
1
reposted by
Chris Coyier
Nathan Pickard
about 2 months 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
5
2
A totally unnecessary retrospective, by moi.
add a skeleton here at some point
about 2 months ago
4
37
2
reposted by
Chris Coyier
about 2 months 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 . . .
1
68
13
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
about 2 months ago
1
15
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
about 2 months ago
1
19
1
reposted by
Chris Coyier
Anthony Frehner
about 2 months 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
Load more
feeds!
log in