Lightnews — Scholar-powered news

Ahmad Shadeed

@ishadeed.com

8K followers 160 following 740 posts

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.

Posts Media Videos Starter Packs

Pinned

Ahmad Shadeed @ishadeed.com · May 25

I’m working on a CSS course: The Layout Maestro.

👉 Sign up for updates: layoutmaestro.ishadeed.com

📓 Read the note: ishadeed.com/note/layout-...

The Layout Maestro

An interactive course focused on how to think, build, and test a layout with real-world examples.

layoutmaestro.ishadeed.com

2 14 110

Reposted by Ahmad Shadeed

Ryan Mulligan @ryanmulligan.dev · 2d

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...

5 19 110

Reposted by Ahmad Shadeed

Chris Coyier @chriscoyier.net · 1d

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.

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

2 7 29

Ahmad Shadeed @ishadeed.com · 1d

defensivecss.dev

Defensive CSS

Practical CSS and design tips that helps in building future-proof user interfaces.

defensivecss.dev

Ahmad Shadeed @ishadeed.com · 2d

If enough interest is there, I'll prepare a page on my blog with the details. 😊

Ahmad Shadeed @ishadeed.com · 2d

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

Ahmad speaking about Defensive CSS at Supermetrics headquarters in Helsinki, Finland.

3 5 28

Ahmad Shadeed @ishadeed.com · 3d

Thank you 😊

Ahmad Shadeed @ishadeed.com · 3d

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. 😊

1 17

Ahmad Shadeed @ishadeed.com · 4d

Feedback: I wonder if the item + number can be shown at the top instead in the center of the flex items. Currently, it's hard to read the overlapping text. @jensimmons.bsky.social, @saron.bsky.social 🙏

Ahmad Shadeed @ishadeed.com · 4d

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

A screenshot from Safari shows a navigation highlighted with an arrow pointing to the option “order numbers” in DevTools. Each flex navigation item is overlayed with an “item + number” label.Tools.

2 7 25

Ahmad Shadeed @ishadeed.com · 5d

Love that use case.

Chris Coyier @chriscoyier.net · 5d

rawdogging some shape() to build "round out" tabs.

I'll blog it eventually. modern CSS rules.

Reposted by Ahmad Shadeed

firefoxdevtools.bsky.social @firefoxdevtools.bsky.social · 6d

As an experiment, we (the Firefox team) wanted to try a new way to get feedback on which Interop proposals matter most.

So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.

interop-rank.jakearchibald.com

Interop Feature Ranking

Rank the web platform features you care most about

interop-rank.jakearchibald.com

17 110 220

Reposted by Ahmad Shadeed

CSS by T. Afif @css-only.dev · 5d

💡 CSS Tip!

A simple line of modern CSS to create a conditional Border Radius. The value will adjust based on either the container width or screen width.

css-tip.com/conditional-...

cc @ishadeed.com @una.im

The following CSS code:
.box {
border-radius: calc(sign(100cqi - 100%)*2rem);
}

4 7 38

Ahmad Shadeed @ishadeed.com · 7d

color-mix, round, light-dark, anchor, sibling-index, random, calc-size, if 🌟

I smiled when I mentioned them! What a time to write CSS 😊

Ahmad Shadeed @ishadeed.com · 7d

For me, I picked the function with the greatest practicality, which is clamp(). It’s like giving your responsive design a superpower.

I can’t think of any other CSS function that has as big an impact as clamp().

Bramus @bram.us · 7d

What are your favorite CSS functions?

Ahmad Shadeed @ishadeed.com · 7d

clamp() 👌

2 9

Ahmad Shadeed @ishadeed.com · 10d

Lovely to hear that! Thanks. Yep, having a coffee station is a good investment 😊

Ahmad Shadeed @ishadeed.com · 10d

Thank youuu 🙏😀

Ahmad Shadeed @ishadeed.com · 10d

Morning everyone! 🤩