Josh W. Comeau

Have you seen what’s going on with npmx? From what I’ve seen, it feels like the good ol days of open source.

Though, the fact that I can only list 1 project like that sorta proves your point 😅. What used to be common is now quite rare.

@wesbos.com I’d be curious what % of people successfully guessed the first 4 Mad CSS matches! I’ve seen a few people say they’re 4 for 4, but I’m guessing that’s actually quite rare?

Adventures in subgrid Recently, I have solved several CSS layout problems using subgrid. I share my examples and refer to some other subgrid solutions in an article by Josh Comeau.

I have used subgrid to solve several layout problems recently in my work. I share lessons that I have learned and examples. I also point to some examples in @joshwcomeau.com's recent article on subgrid.

jeffbridgforth.com/adventures-i...

Wow! That’s impressive. It's so hard to predict who will succeed in this format 😂.

Amazing how we went from not being able to style selects, to doing things like this with them codepen.io/editor/cbols... (and this codepen.io/t_afif/pen/P...)

I do love this structure 😄

Ok this is *fantastic.* I was wondering if the edit would capture just how tense these matches are, and the editors got it exactly right. 💯

The production value is ridiculously good, too. Feels like this should be on Netflix!

The first half of the bracket airs in 10 minutes! 🍿

I'll be hanging out in the chat for the premiere. Come hang out :D

The March Mad CSS website is so cool. They added a feed showing who people are picking in realtime.

Today’s the last day to fill in your bracket!
madcss.com

Ohh, this is super cool! You can play along, and see if you can do better than the competitors. 😄

Episode 1 is the left side of the bracket: @adamwathan.com @bytesofbree.bsky.social, @chriscoyier.net, @jason.energy, @miocene.io, Kyle Cook, @tolin.ski, and @shaundai.com.

I’m on the right side of the bracket, which airs next Friday.

The madness starts tomorrow at 10AM ET on YouTube! I’ll be hanging out in the livestream chat, should be a lot of fun. 😄

If you haven’t already, you can build your own bracket and predict who’ll win. ✨

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

⌛ Sending an email update about The Layout Maestro course in a few hours including release date, pricing, and more.

If you want to be the first to know (and get a discounted price), subscribe to the newsletter: layoutmaestro.ishadeed.com

WebHaptics – Haptic feedback for the mobile web. Haptic feedback for the mobile web.

this is so cool
haptics.lochie.me

Man @nerdy.dev absolutely coming out on top for the MadCSS.com picks.

I'm a little hurt only 5% of you think I'd win

I’m working on the final part of Whimsical Animations, all about Canvas animation. There’s such fun examples in this part, from confetti geysers to fireworks displays. 😄

Here’s one of the smaller exercises leading up to the big stuff. 🚀

A clean looking graphic with sharp lines and crisp colour

The same graphic, but muddy and blocky. The previously sharp lines are blurry.

I think it's often overlooked that AVIF is also really good at flat colour & sharp edges.

Don't go straight for a lossless format just because it's the kind of image that would look bad as a JPEG.

Here's an 11kb image as an AVIF, vs JPEG XL.

const CloseButton = styled.button` position: absolute; top: 0; right: 0; padding: 16px; transform: translateY(-100%); color: var(--color-text); html[data-color-mode='dark'] & { color: white; } @media ${BREAKPOINTS.smAndSmaller} { html[data-color-mode] & { z-index: 2; transform: revert; color: black; } } `;

If you’re wondering what all of those 1-level-deep nested selectors are, it's usually me applying different styles based on the color mode, which I read from the HTML tag.

For example:

Graph showing "Selector nesting depth". I have 547 flat selectors, 80 selectors that are nested 1 level deep, and 1 selector that is nested 2 levels deep.

I learned about Project Wallace (www.projectwallace.com) from @kevinpowell.co’s latest F1 video, and it's fun seeing the analysis for my own site!

I really try to avoid nested styles, and happily it seems like I’ve done a pretty good job at that. 😄

This is such a cool concept! Pitting F1 teams against each other, but based on their websites.

So now there’s the driver’s championship, the constructor’s championship, and the webmaster’s championship. 😄

This is amazing.

www.getyourfuckingmoneyback.com

Yep, there were so many moments where I just forgot how anything works 😂.

So excited for y’all to see me genuinely panic 😂

Also, you can fill in your brackets and potentially win prizes if you’re right!

Thanks for the kind words 😄

@joshwcomeau.com manages to produce the most insightful, enjoyable posts about what the web can truly do.

Appreciate it, Kevin!

The amount of work Josh puts in every blog post is absolutely mind boggling 🤯

@sachagreif.com I'm guessing the fact that the tooltip dismisses on click is unintentional, if it has some "dismiss on click outside" logic?

Screenshot of the graph with a tooltip explaining it

Ah, sorry, totally missed your question!

Interestingly there is a tooltip that explains it on hover, but it looks like it disappears on click, so I wonder if you were clicking before it showed up?

ICYMI, I went over the State of React survey results last week.