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.
This feature in @developer.chrome.com's DevTools is so helpful. Every time I get stuck on a calc() or other CSS functions, I solve the bug much quicker with it.
Thanks to everyone who worked on this! 👌
Thanks to everyone who worked on this! 👌
January 9, 2026 at 9:21 AM
This feature in @developer.chrome.com's DevTools is so helpful. Every time I get stuck on a calc() or other CSS functions, I solve the bug much quicker with it.
Thanks to everyone who worked on this! 👌
Thanks to everyone who worked on this! 👌
Morning everyone! I’ve been away from the blog and social media, but the good news is that my CSS layout course is shaping up! I’ll send an update within this month.
If you are not subscribed to the course newsletter yet, you definitely should (Or send it to a friend) 😄
layoutmaestro.ishadeed.com
If you are not subscribed to the course newsletter yet, you definitely should (Or send it to a friend) 😄
layoutmaestro.ishadeed.com
January 6, 2026 at 7:43 AM
Morning everyone! I’ve been away from the blog and social media, but the good news is that my CSS layout course is shaping up! I’ll send an update within this month.
If you are not subscribed to the course newsletter yet, you definitely should (Or send it to a friend) 😄
layoutmaestro.ishadeed.com
If you are not subscribed to the course newsletter yet, you definitely should (Or send it to a friend) 😄
layoutmaestro.ishadeed.com
Me writing git commits for my CSS layout course 😆
December 17, 2025 at 6:21 PM
Me writing git commits for my CSS layout course 😆
Hot chocolate, cookies.. can get it more chocolately than that?
Winter vibes ☕
Winter vibes ☕
December 14, 2025 at 7:11 PM
Hot chocolate, cookies.. can get it more chocolately than that?
Winter vibes ☕
Winter vibes ☕
My morning coffee! Good day 😊
November 28, 2025 at 7:02 AM
My morning coffee! Good day 😊
I played with Framer to build a grid with minmax(), but didn't find any hints about that. All I could find is "Advanced Layout" which sounds like an over-exaggerated way.
Width: 100, min -> This resulted in minmax() in the CSS, but this is not obvious. There is a big potential to enhance the UX. 😄
Width: 100, min -> This resulted in minmax() in the CSS, but this is not obvious. There is a big potential to enhance the UX. 😄
November 25, 2025 at 7:12 PM
I played with Framer to build a grid with minmax(), but didn't find any hints about that. All I could find is "Advanced Layout" which sounds like an over-exaggerated way.
Width: 100, min -> This resulted in minmax() in the CSS, but this is not obvious. There is a big potential to enhance the UX. 😄
Width: 100, min -> This resulted in minmax() in the CSS, but this is not obvious. There is a big potential to enhance the UX. 😄
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 ☕️😋
✍️ 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...
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 🤒
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...
Given that the layout itself as an h1, I took a11y into consideration to avoid having duplicates. (Yes, I might be able to do it with one title, but I've some bad experiences where <span>s will join each other without spaces, like "SolvedbyModernCSS..")
October 24, 2025 at 2:46 PM
Given that the layout itself as an h1, I took a11y into consideration to avoid having duplicates. (Yes, I might be able to do it with one title, but I've some bad experiences where <span>s will join each other without spaces, like "SolvedbyModernCSS..")
Nested grids, clamp, oklch.. to mention a few 🤩
October 24, 2025 at 2:44 PM
Nested grids, clamp, oklch.. to mention a few 🤩
The article header was so fun to work on. I used some cutting edge stuff like the random() to place a circle randomly in one of the boxes (Safari TP only).
October 24, 2025 at 2:41 PM
The article header was so fun to work on. I used some cutting edge stuff like the random() to place a circle randomly in one of the boxes (Safari TP only).
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...
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 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
Did a makeover for my coffee corner today! It’s my first time installing a wood-grain countertop sticker, and it turned out great 🥳
October 2, 2025 at 7:15 PM
Did a makeover for my coffee corner today! It’s my first time installing a wood-grain countertop sticker, and it turned out great 🥳
I got confused on why CSS grid areas are looking off in Devtools.
Turned out, it's a bug in displaying grid-area names when the layout is flipped (LTR vs RTL).
Left: Firefox. Right: Chrome.
I filed a bug: issues.chromium.org/issues/44815...
Turned out, it's a bug in displaying grid-area names when the layout is flipped (LTR vs RTL).
Left: Firefox. Right: Chrome.
I filed a bug: issues.chromium.org/issues/44815...
September 30, 2025 at 6:59 AM
I got confused on why CSS grid areas are looking off in Devtools.
Turned out, it's a bug in displaying grid-area names when the layout is flipped (LTR vs RTL).
Left: Firefox. Right: Chrome.
I filed a bug: issues.chromium.org/issues/44815...
Turned out, it's a bug in displaying grid-area names when the layout is flipped (LTR vs RTL).
Left: Firefox. Right: Chrome.
I filed a bug: issues.chromium.org/issues/44815...
Baked a batch of cookies this morning. It’s been a while 😅
September 6, 2025 at 6:51 AM
Baked a batch of cookies this morning. It’s been a while 😅
This demo helped me visualize how `position-try` works in CSS Anchor Positioning. It was so much fun to design & build! 😄
Learn more in the article: ishadeed.com/article/anch...
Learn more in the article: ishadeed.com/article/anch...
September 2, 2025 at 7:44 AM
This demo helped me visualize how `position-try` works in CSS Anchor Positioning. It was so much fun to design & build! 😄
Learn more in the article: ishadeed.com/article/anch...
Learn more in the article: ishadeed.com/article/anch...
In case you missed it, I wrote about the basics CSS Anchor Positioning.
🔗 ishadeed.com/article/anch...
🔗 ishadeed.com/article/anch...
August 29, 2025 at 1:48 PM
In case you missed it, I wrote about the basics CSS Anchor Positioning.
🔗 ishadeed.com/article/anch...
🔗 ishadeed.com/article/anch...