Ahmad Shadeed
@ishadeed.com
Building a CSS course: layoutmaestro.ishadeed.com. Design Engineer. Author of debuggingcss.com • Blogging at ishadeed.com. Made defensivecss.dev, rtlstyling.com, and a11ymatters.com. @GoogleDevExpert in Web UI. 📍 Tulkarm, Palestine.
Pinned
Ahmad Shadeed
@ishadeed.com
· May 25
The Layout Maestro
An interactive course focused on how to think, build, and test a layout with real-world examples.
layoutmaestro.ishadeed.com
I’m working on a CSS course: The Layout Maestro.
👉 Sign up for updates: layoutmaestro.ishadeed.com
📓 Read the note: ishadeed.com/note/layout-...
👉 Sign up for updates: layoutmaestro.ishadeed.com
📓 Read the note: ishadeed.com/note/layout-...
On the evening of 9 Nov 2025, a cute little baby boy came to the world. Say hi to Adam! My wife and him are doing great ❤️
November 10, 2025 at 12:21 PM
On the evening of 9 Nov 2025, a cute little baby boy came to the world. Say hi to Adam! My wife and him are doing great ❤️
Friday morning pour ☕️😋
November 7, 2025 at 7:22 AM
Friday morning pour ☕️😋
Adam is killing it! 🤩
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 6:29 AM
Adam is killing it! 🤩
It's coming in Safari 26.2!
November 5, 2025 at 12:58 PM
The new App Store web UI was published with source maps enabled, so someone put all the code on GitHub for us to check.
github.com/rxliuli/apps...
It looks like I have some work to do 👀
github.com/rxliuli/apps...
It looks like I have some work to do 👀
github.com
November 5, 2025 at 11:21 AM
The new App Store web UI was published with source maps enabled, so someone put all the code on GitHub for us to check.
github.com/rxliuli/apps...
It looks like I have some work to do 👀
github.com/rxliuli/apps...
It looks like I have some work to do 👀
I'll send a new email for my layout course newsletter tomorrow with updates on the progress.
If you haven't signed up yet, go ahead :D
layoutmaestro.ishadeed.com
If you haven't signed up yet, go ahead :D
layoutmaestro.ishadeed.com
The Layout Maestro
An interactive course focused on how to think, build, and test a layout with real-world examples.
layoutmaestro.ishadeed.com
November 4, 2025 at 7:57 PM
I'll send a new email for my layout course newsletter tomorrow with updates on the progress.
If you haven't signed up yet, go ahead :D
layoutmaestro.ishadeed.com
If you haven't signed up yet, go ahead :D
layoutmaestro.ishadeed.com
It’s interesting that Figma now has the “Slots” feature, which simply lets you drag and drop a component into another.
I talked about this topic from a CSS context in my Smart Layouts talk. Here is the slide if you're into that:
www.figma.com/deck/NewdIWN...
I talked about this topic from a CSS context in my Smart Layouts talk. Here is the slide if you're into that:
www.figma.com/deck/NewdIWN...
November 2, 2025 at 4:50 PM
It’s interesting that Figma now has the “Slots” feature, which simply lets you drag and drop a component into another.
I talked about this topic from a CSS context in my Smart Layouts talk. Here is the slide if you're into that:
www.figma.com/deck/NewdIWN...
I talked about this topic from a CSS context in my Smart Layouts talk. Here is the slide if you're into that:
www.figma.com/deck/NewdIWN...
Reposted by Ahmad Shadeed
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
November 1, 2025 at 6:27 AM
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
November 1, 2025 at 6:27 AM
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
📘 Debugging CSS book is $19.99. Get your copy and level up your CSS debugging skills, or tell a friend about it.
debuggingcss.com
debuggingcss.com
Master the Skill of Debugging CSS
An ebook with lots of tips and techniques on how to debug CSS the right way with easy and studied methods.
debuggingcss.com
October 31, 2025 at 7:55 AM
📘 Debugging CSS book is $19.99. Get your copy and level up your CSS debugging skills, or tell a friend about it.
debuggingcss.com
debuggingcss.com
Reposted by Ahmad Shadeed
There’s something magical about physics-based animation. When we use springs instead of Bézier curves, we tend to get way smoother motion.
Up until recently, we’ve needed to use JS libraries for this, but a modern feature lets us emulate springs in native CSS. ✨
Just published a new post:
Up until recently, we’ve needed to use JS libraries for this, but a modern feature lets us emulate springs in native CSS. ✨
Just published a new post:
Springs and Bounces in Native CSS • Josh W. Comeau
The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experiment...
www.joshwcomeau.com
October 28, 2025 at 6:08 PM
There’s something magical about physics-based animation. When we use springs instead of Bézier curves, we tend to get way smoother motion.
Up until recently, we’ve needed to use JS libraries for this, but a modern feature lets us emulate springs in native CSS. ✨
Just published a new post:
Up until recently, we’ve needed to use JS libraries for this, but a modern feature lets us emulate springs in native CSS. ✨
Just published a new post:
Reposted by Ahmad Shadeed
solved by modern CSS: section layout
ishadeed.com/article/mode...
love @ishadeed.com's deep dives like this
🙏🖤
ishadeed.com/article/mode...
love @ishadeed.com's deep dives like this
🙏🖤
Solved By Modern CSS: Section Layout
Building a typical section design with modern CSS.
ishadeed.com
October 28, 2025 at 9:44 AM
solved by modern CSS: section layout
ishadeed.com/article/mode...
love @ishadeed.com's deep dives like this
🙏🖤
ishadeed.com/article/mode...
love @ishadeed.com's deep dives like this
🙏🖤
First time having a proper coffee that I can actually taste in two weeks! 😍
My sore throat ended up lasting longer, setting a new record by catching a virus each week from Alma's kindergarten 🤒
My sore throat ended up lasting longer, setting a new record by catching a virus each week from Alma's kindergarten 🤒
October 28, 2025 at 9:14 AM
First time having a proper coffee that I can actually taste in two weeks! 😍
My sore throat ended up lasting longer, setting a new record by catching a virus each week from Alma's kindergarten 🤒
My sore throat ended up lasting longer, setting a new record by catching a virus each week from Alma's kindergarten 🤒
Reposted by Ahmad Shadeed
Online on a weekend? You can grab access to my web components course for $25 today and tomorrow. Big ol’ discount. Use the code OCT25-26.
(And as usual, if you need further accommodation, just use the email form and we’ll work it out.)
scottjehl.com/learn/webcom...
(And as usual, if you need further accommodation, just use the email form and we’ll work it out.)
scottjehl.com/learn/webcom...
Web Components Demystified online course | Scott Jehl, Web Designer/Developer
A comprehensive, premium course about building dynamic, fast, resilient apps with standard web components.
scottjehl.com
October 25, 2025 at 2:59 PM
Online on a weekend? You can grab access to my web components course for $25 today and tomorrow. Big ol’ discount. Use the code OCT25-26.
(And as usual, if you need further accommodation, just use the email form and we’ll work it out.)
scottjehl.com/learn/webcom...
(And as usual, if you need further accommodation, just use the email form and we’ll work it out.)
scottjehl.com/learn/webcom...
In case you missed it, I wrote about building a section layout with modern CSS.
ishadeed.com/article/mode...
ishadeed.com/article/mode...
October 25, 2025 at 5:08 AM
In case you missed it, I wrote about building a section layout with modern CSS.
ishadeed.com/article/mode...
ishadeed.com/article/mode...
✍️ Solved by Modern CSS: Section Layout
A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!
ishadeed.com/article/mode...
A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!
ishadeed.com/article/mode...
Solved By Modern CSS: Section Layout
Building a typical section design with modern CSS.
ishadeed.com
October 23, 2025 at 7:20 PM
✍️ Solved by Modern CSS: Section Layout
A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!
ishadeed.com/article/mode...
A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!
ishadeed.com/article/mode...
Reposted by Ahmad Shadeed
In 2017 I needed to create a grid of logos for Monotype requiring separators between items. I had to use pseudo-elements & "magic numbers" for simple lines 😩
In 2025: CSS finally solves this!
Styling the gap, with CSS
www.alwaystwisted.com/articles/sty...
In 2025: CSS finally solves this!
Styling the gap, with CSS
www.alwaystwisted.com/articles/sty...
Styling The gap with CSS
Make your components context-aware with CSS inherit(): learn how the new inherit() function lets components derive spacing, colour and motion from their container, reduce token bloat, and implement ro...
www.alwaystwisted.com
October 22, 2025 at 12:05 PM
In 2017 I needed to create a grid of logos for Monotype requiring separators between items. I had to use pseudo-elements & "magic numbers" for simple lines 😩
In 2025: CSS finally solves this!
Styling the gap, with CSS
www.alwaystwisted.com/articles/sty...
In 2025: CSS finally solves this!
Styling the gap, with CSS
www.alwaystwisted.com/articles/sty...
Is there a browser plugin that helps with editing Tailwind CSS in the browser?
Context: I have a set of cards with the same classes, and I want to make quick changes to them at once.
It could have been a class name 😅
Context: I have a set of cards with the same classes, and I want to make quick changes to them at once.
It could have been a class name 😅
October 21, 2025 at 7:37 AM
Is there a browser plugin that helps with editing Tailwind CSS in the browser?
Context: I have a set of cards with the same classes, and I want to make quick changes to them at once.
It could have been a class name 😅
Context: I have a set of cards with the same classes, and I want to make quick changes to them at once.
It could have been a class name 😅
I needed a quick way to generate conditional CSS with :has() and quantity queries, and this tool by @css-only.dev is so helpful.
css-tip.com/quantity-que...
css-tip.com/quantity-que...
October 21, 2025 at 5:40 AM
I needed a quick way to generate conditional CSS with :has() and quantity queries, and this tool by @css-only.dev is so helpful.
css-tip.com/quantity-que...
css-tip.com/quantity-que...
There’s no such thing as “enough CSS articles” about a topic. The more perspectives, the better.
I once talked to a dev who’d never heard of display: contents. He was excited to try after I showed him some use-cases.
My article might not click for someone, but yours could be the one that does!
I once talked to a dev who’d never heard of display: contents. He was excited to try after I showed him some use-cases.
My article might not click for someone, but yours could be the one that does!
October 20, 2025 at 12:46 PM
There’s no such thing as “enough CSS articles” about a topic. The more perspectives, the better.
I once talked to a dev who’d never heard of display: contents. He was excited to try after I showed him some use-cases.
My article might not click for someone, but yours could be the one that does!
I once talked to a dev who’d never heard of display: contents. He was excited to try after I showed him some use-cases.
My article might not click for someone, but yours could be the one that does!
Reposted by Ahmad Shadeed
Container queries and CSS make it simple to smoothly transition an element to the other side of its parent container without knowing exact dimensions or distance.
Read more in my latest post: ryanmulligan.dev/blog/transit...
Read more in my latest post: ryanmulligan.dev/blog/transit...
October 13, 2025 at 1:25 PM
Container queries and CSS make it simple to smoothly transition an element to the other side of its parent container without knowing exact dimensions or distance.
Read more in my latest post: ryanmulligan.dev/blog/transit...
Read more in my latest post: ryanmulligan.dev/blog/transit...
Reposted by Ahmad Shadeed
I did get around to blogging this.
frontendmasters.com/blog/modern-...
Hopefully the step-by-step syntax stuff in here makes shape() a little more approachable.
frontendmasters.com/blog/modern-...
Hopefully the step-by-step syntax stuff in here makes shape() a little more approachable.
Modern CSS Round-Out Tabs
We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.
frontendmasters.com
October 14, 2025 at 6:14 PM
I did get around to blogging this.
frontendmasters.com/blog/modern-...
Hopefully the step-by-step syntax stuff in here makes shape() a little more approachable.
frontendmasters.com/blog/modern-...
Hopefully the step-by-step syntax stuff in here makes shape() a little more approachable.
I'm planning a Defensive CSS workshop, focused on practical CSS and design tips that help build future proof user interfaces.
Would your team be interested if it's offered live or as a short recorded course?
More about Defensive CSS: defensivecss.dev
Would your team be interested if it's offered live or as a short recorded course?
More about Defensive CSS: defensivecss.dev
October 13, 2025 at 4:43 PM
I'm planning a Defensive CSS workshop, focused on practical CSS and design tips that help build future proof user interfaces.
Would your team be interested if it's offered live or as a short recorded course?
More about Defensive CSS: defensivecss.dev
Would your team be interested if it's offered live or as a short recorded course?
More about Defensive CSS: defensivecss.dev
I'm welcoming the third sore throat in less than a month. Thanks to my child's kindergarten, I'm glad to be trying every possible virus out there. 😊
October 12, 2025 at 5:54 AM
I'm welcoming the third sore throat in less than a month. Thanks to my child's kindergarten, I'm glad to be trying every possible virus out there. 😊
I discovered a useful feature in Safari DevTools today. We can show the flex items order like (item #1, item #2, etc) and their corresponding order value (if it's changed).
It's called "Order Numbers".
@webkitgtk.org
It's called "Order Numbers".
@webkitgtk.org
October 11, 2025 at 3:02 PM
I discovered a useful feature in Safari DevTools today. We can show the flex items order like (item #1, item #2, etc) and their corresponding order value (if it's changed).
It's called "Order Numbers".
@webkitgtk.org
It's called "Order Numbers".
@webkitgtk.org