Keith J. Grant
@keithjgrant.com
👨🏻💻 Front end dev at Red Hat on Ansible Automation Platform. Author of CSS in Depth. he/him
🌐 https://keithjgrant.com https://notes.keithjgrant.com
📖 https://www.manning.com/books/css-in-depth-second-edition
🐘 https://front-end.social/@keithjgrant
🌐 https://keithjgrant.com https://notes.keithjgrant.com
📖 https://www.manning.com/books/css-in-depth-second-edition
🐘 https://front-end.social/@keithjgrant
Pinned
Keith J. Grant
@keithjgrant.com
· Jun 24
Need some colors for your next web project? I’ve got you covered. If you haven’t seen the Theme Machine, check it out! 🎨 #css #webdev
tools.keithjgrant.com/theme-machine/
tools.keithjgrant.com/theme-machine/
I don’t often watch nfl, but I am today and it’s making me so very grateful that I’m indoors
January 19, 2026 at 2:08 AM
I don’t often watch nfl, but I am today and it’s making me so very grateful that I’m indoors
The holidays may be over, but I’ve worked up a technique for a single-serve egg nog that I’m quite proud of. Using a milk frother wand can really mimic the thick foamy texture of the (non-alcoholic) large batch recipe I grew drinking every Christmas
sidecar.us/drinks/egg-n...
sidecar.us/drinks/egg-n...
Egg Nog
A curated collection of cocktails for the home bartender
sidecar.us
January 6, 2026 at 11:00 PM
The holidays may be over, but I’ve worked up a technique for a single-serve egg nog that I’m quite proud of. Using a milk frother wand can really mimic the thick foamy texture of the (non-alcoholic) large batch recipe I grew drinking every Christmas
sidecar.us/drinks/egg-n...
sidecar.us/drinks/egg-n...
The wettest, soggiest day of skiing I’ve ever had
January 4, 2026 at 9:45 PM
The wettest, soggiest day of skiing I’ve ever had
Wow, the #StrangerThings finale is excellent. Extremely rare to see such an epic story stick the landing so spot on. The final season tied every earlier season together. One of the greatest works of fiction I know.
January 2, 2026 at 10:48 PM
Wow, the #StrangerThings finale is excellent. Extremely rare to see such an epic story stick the landing so spot on. The final season tied every earlier season together. One of the greatest works of fiction I know.
Reposted by Keith J. Grant
The full spiked 60 Minutes CECOT package, clean & subtitled. 1/5
December 23, 2025 at 1:28 AM
The full spiked 60 Minutes CECOT package, clean & subtitled. 1/5
Reposted by Keith J. Grant
CSS folks. What's the best way to do the
header
FILL REST SPACE
with html and css in 2025? Just tossing a min-height 100vh, vertical flex container?
header
FILL REST SPACE
with html and css in 2025? Just tossing a min-height 100vh, vertical flex container?
December 19, 2025 at 6:56 PM
"That doesn't beg the question! It RAISES the question!" - me like every third day
...but I’ve already lost this battle, haven’t I? 😢
...but I’ve already lost this battle, haven’t I? 😢
December 18, 2025 at 5:22 PM
"That doesn't beg the question! It RAISES the question!" - me like every third day
...but I’ve already lost this battle, haven’t I? 😢
...but I’ve already lost this battle, haven’t I? 😢
Reposted by Keith J. Grant
💡 CSS Tip!
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
December 16, 2025 at 11:21 AM
💡 CSS Tip!
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
Silksong is the best game I’ve played in years. I would probably say in decades if it weren't for Outer Wilds, which skews the results. And no, it’s not too difficult. It _is_ difficult, but Team Cherry can’t change that […] https://notes.keithjgrant.com/notes/2025/12/silksong-is-worth-the-hype/
Original post on notes.keithjgrant.com
notes.keithjgrant.com
December 16, 2025 at 6:34 PM
Silksong is the best game I’ve played in years. I would probably say in decades if it weren't for Outer Wilds, which skews the results. And no, it’s not too difficult. It _is_ difficult, but Team Cherry can’t change that […] https://notes.keithjgrant.com/notes/2025/12/silksong-is-worth-the-hype/
Ugh, Apple, why would I ever want my phone's Favorites and Recent Calls screens merged into one?
December 16, 2025 at 12:04 AM
Ugh, Apple, why would I ever want my phone's Favorites and Recent Calls screens merged into one?
Reposted by Keith J. Grant
🌠 I just updated by CSS Reset to include a handy new declaration:
html {
interpolate-size: allow-keywords;
}
This rule allows us to animate height from "0px" to "auto", perfect for accordions and other collapsible UI. ✨
Learn more in my blog post about it:
www.joshwcomeau.com/css/custom-c...
html {
interpolate-size: allow-keywords;
}
This rule allows us to animate height from "0px" to "auto", perfect for accordions and other collapsible UI. ✨
Learn more in my blog post about it:
www.joshwcomeau.com/css/custom-c...
A Modern CSS Reset • Josh W. Comeau
I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!
www.joshwcomeau.com
March 25, 2025 at 3:14 PM
🌠 I just updated by CSS Reset to include a handy new declaration:
html {
interpolate-size: allow-keywords;
}
This rule allows us to animate height from "0px" to "auto", perfect for accordions and other collapsible UI. ✨
Learn more in my blog post about it:
www.joshwcomeau.com/css/custom-c...
html {
interpolate-size: allow-keywords;
}
This rule allows us to animate height from "0px" to "auto", perfect for accordions and other collapsible UI. ✨
Learn more in my blog post about it:
www.joshwcomeau.com/css/custom-c...
I’ve been waiting for this day for literally a decade 🎉🥳🍾
Happy Baseline newly available day for CSS @scope now that it's in Firefox 146!
December 9, 2025 at 9:23 PM
I’ve been waiting for this day for literally a decade 🎉🥳🍾
brb gonna waste a dozen cycles proving the hard way that walking PMs through vibe-coding new features is never going to save anybody any time
December 4, 2025 at 9:14 PM
brb gonna waste a dozen cycles proving the hard way that walking PMs through vibe-coding new features is never going to save anybody any time
Reposted by Keith J. Grant
About to have CSS ANCHOR POSITIONING FULLY CROSS-BROWSER!!
Gecko: Intent to ship: CSS Anchor Positioning
Gecko: Intent to ship: CSS Anchor Positioning
Gecko: Intent to ship: CSS Anchor Positioning
groups.google.com
December 2, 2025 at 11:52 PM
About to have CSS ANCHOR POSITIONING FULLY CROSS-BROWSER!!
The last few Christmases, I've idly daydreamed about setting up a siphon to make it easier to water the tree. This year I finally did it, and I love it.
December 1, 2025 at 6:46 PM
The last few Christmases, I've idly daydreamed about setting up a siphon to make it easier to water the tree. This year I finally did it, and I love it.
Shadow is such a dapper gentleman #HappyThanksgiving
November 27, 2025 at 11:04 PM
Shadow is such a dapper gentleman #HappyThanksgiving
It’s like the sky knows I need to go fire up the smoker here
November 27, 2025 at 5:45 PM
It’s like the sky knows I need to go fire up the smoker here
Reposted by Keith J. Grant
🎈 The Black Friday sale of my two flagship courses has officially begun!
The best deal is on the “Joy for JavaScript Developers” bundle, which is a whopping $500 off during this sale. 😄
I’m also running sales on each course individually, they’re both ~40% off. ✨
More info in-thread. 🧵
The best deal is on the “Joy for JavaScript Developers” bundle, which is a whopping $500 off during this sale. 😄
I’m also running sales on each course individually, they’re both ~40% off. ✨
More info in-thread. 🧵
Joy for JavaScript Developers
Grab both of my flagship courses — CSS for JavaScript Developers and The Joy of React — in one delightful bundle 😄
www.joyforjs.com
November 24, 2025 at 4:30 PM
🎈 The Black Friday sale of my two flagship courses has officially begun!
The best deal is on the “Joy for JavaScript Developers” bundle, which is a whopping $500 off during this sale. 😄
I’m also running sales on each course individually, they’re both ~40% off. ✨
More info in-thread. 🧵
The best deal is on the “Joy for JavaScript Developers” bundle, which is a whopping $500 off during this sale. 😄
I’m also running sales on each course individually, they’re both ~40% off. ✨
More info in-thread. 🧵
Reposted by Keith J. Grant
Being an old-school web dev is always like "Oh wait, I *can* use container queries now"
November 20, 2025 at 3:56 PM
Being an old-school web dev is always like "Oh wait, I *can* use container queries now"
I made a browned-butter-washed bottle of Knob Creek bourbon. And now the bourbony butter goes into some chocolate chip cookies. Now I know what to eat with what I drink.
November 18, 2025 at 4:39 AM
I made a browned-butter-washed bottle of Knob Creek bourbon. And now the bourbony butter goes into some chocolate chip cookies. Now I know what to eat with what I drink.
Reposted by Keith J. Grant
So it looks like masonry style layouts are going to be created with display: grid-lanes.
github.com/w3c/csswg-dr...
There were a lot of names proposed, and after some polling, this one was pretty heavily favoured.
There were a few others I liked more, but I think it's a good choice.
github.com/w3c/csswg-dr...
There were a lot of names proposed, and after some polling, this one was pretty heavily favoured.
There were a few others I liked more, but I think it's a good choice.
November 13, 2025 at 6:27 PM
So it looks like masonry style layouts are going to be created with display: grid-lanes.
github.com/w3c/csswg-dr...
There were a lot of names proposed, and after some polling, this one was pretty heavily favoured.
There were a few others I liked more, but I think it's a good choice.
github.com/w3c/csswg-dr...
There were a lot of names proposed, and after some polling, this one was pretty heavily favoured.
There were a few others I liked more, but I think it's a good choice.
Things are about to get serious 🔥
November 12, 2025 at 12:02 AM
Things are about to get serious 🔥
Reposted by Keith J. Grant
Hello, here's a brain dump of everything I know about animation performance.
Animating layout isn't always bad. Global CSS variables are a performance killer. Hardware accelerated blurs can crash sites.
Surprised? Those and more in this post: motion.dev/blog/web-ani...
Animating layout isn't always bad. Global CSS variables are a performance killer. Hardware accelerated blurs can crash sites.
Surprised? Those and more in this post: motion.dev/blog/web-ani...
The Web Animation Performance Tier List - Motion Blog
Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.
motion.dev
November 7, 2025 at 12:55 PM
Hello, here's a brain dump of everything I know about animation performance.
Animating layout isn't always bad. Global CSS variables are a performance killer. Hardware accelerated blurs can crash sites.
Surprised? Those and more in this post: motion.dev/blog/web-ani...
Animating layout isn't always bad. Global CSS variables are a performance killer. Hardware accelerated blurs can crash sites.
Surprised? Those and more in this post: motion.dev/blog/web-ani...
Reposted by Keith J. Grant
a new #CSS enters the ring
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
November 7, 2025 at 4:37 AM
a new #CSS enters the ring
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...