Cool Links

This is the first article that made me actually understand the use cases for CSS subgrid. I’m still not fully convinced I’m gonna use them often, but it’s nice to understand what problems they solve.

This is a really cool trick. Turns out that it’s possible, with pure CSS, to have border-radius be applied conditionally.

The given example is a perfect one: sometimes we have cards with rounded corners that look good on their own, but if you’re on mobile and have less space and want the cards to take up the full page width, the rounded corners look awful. You can technically write breakpoints for that, but with clamp you can make the border-radius disappear if the card is too close to the viewport edges!

In this awesome post, Ahmad walks through all the possibilities modern CSS offers when building a section layout.

I knew about and have used some of those in the past, but that tip about display: contents was amazing! Never thought of using it like that.

This article has been sitting in my “Read Later” queue for almost 2 years 😳

It is an interesting article for sure, speaking about why speed and optimization has become such a rare thing in software development.

The second part of it, though, has kinda aged like milk, sadly. Developers no longer have a lot of leverage on their jobs, and we now live in a world where the thought of having no human developers involved at all in the code I’m running is real and frankly terrifying.

I’m hopeful companies will eventually figure out that AI-generated crap is still crap when the bubble bursts, but until then, there’s a lot of damage to be done.

Great and to-the-point article with practical examples of when to use (or not use) animations properly in UIs.

I love me some whooshy animations, but they can be a pain in the ass when overused or when used in the wrong moment.

The “div vs button” debate was never really a debate because one of the sides is objectively wrong, but this is still a good post to remind you of why it was never a debate in the first place.

Thomas gives a bunch of examples of things you should avoid doing if you want your website to look good on Safari’s new Liquid Glass design. All those don’ts are perfectly illustrated by a website that didn’t take Liquid Glass into account… apple.com.

The new Safari is such an incredible failure.

Yes! Any good developer will tell you that coding is the easiest part of the job. Making software actually go beyond a feature demo is what’s really hard. It’s something I’ve been taught ever since I began working on the field, actually. Learning to code is essential, but learning where to put the code and how to foresee all the hundreds of complexities is my actual job.

Expectations, feature scalability and security are very much human components of the job and can’t be properly done by something that’s not human.

Really cool thoughts on the tradeoffs between control and performance in web development, and how whatever you build will never outperform the browser’s built-in APIs.

A really cool CSS gradient generator that supports all the new CSS color stuff that’s been coming out in the past years (and that I honestly don’t know much about).

Aside from the cool UI and easy-to-understand code it generates, it can generate HDR and SDR gradients; which means that on supported browsers and devices, your gradient might pop out with higher dynamic range (and have the SDR as a fallback). Great if you really want the colors to pop.

This tool looks pretty cool! It’s a two-liner solution for web apps that automatically highlights accessibility issues on whatever you’re working on.

I haven’t tested it myself yet (busy month), but will definitely look into it soon.

I think it’s widely known that the JS dev community relies too much on dependencies, especially through npm packages, and that it’s really hard to avoid this problem (I use as few packages as possible, but each dependency has its own hundreds of dependencies which also have hundreds more…).

But I think I never stopped to think of how easy it is to publish a package there. Which also means, it’s too easy to publish a malicious or compromised package, that gets downloaded and executed on our computers with no proper vetting. Scary.

Neat short article that goes over a bit of the differences between ems and rems in CSS, with nice examples.

I always have trouble understanding SVGs, but thanks to this article, I will have teensy bit less trouble than before. Josh’s articles are always a gem with all the interactivity and this is no exception.

CSS is finally getting functions! And if you’re struggling to think of good use cases for them or thinks they don’t make sense at all Una will change your mind real quick.

Too bad they’re still only supported in Chromium and are probably ways off from being usable in production. But it’s nice to get a glimpse of what the future holds.

Sharing Ahmad Shadeed’s posts here kinda feel like cheating at this point. They’re always a gem!

This one goes extremely in-depth into redesigning the hero layout of Time.com. Ahmad explains his thought process on every step of the way, and dives into a lot of fun, new-ish CSS principles like container and style queries, :has, grid and even text wrapping!

A masterclass, really.

Neat article in which Jim explains why a seemingly harmless CSS transition property (using height) was spiking up CPU usage. It goes through the thought process of identifying the issue, understanding it, and solving it. (spoiler: animating transform is much cheaper!)

I know SVGs are amazing, and I’ve done some cool things with them. But I never really knew what I was doing. This fantastic post by Josh Comeau goes over the basics and focuses on SVGs you can create yourself through code, instead of relying on vector editing softwares like Figma or Illustrator.

I haven’t tried these tips in practice yet, but hopefully I’ll have a neat idea I can use them on soon 👀

This game tests your knowledge on JavaScript’s Date class. It’s funny because it’s sad.

I learned about separation of concerns over a decade ago, when I was still learning how to code. On the web side, it would very often be related to what language you were using; HTML is for markup, CSS for styles, JS for interactivity, whatever-backend-language-you-use for business logic. That made sense back then but now the lines have become much blurrier.

Brad Frost goes a bit into what a more modern version of that separation of concerns might look like. I haven’t tried out his course, so I can’t comment on how good it is. But I’m a big fan of his atomic design principles so I’d say it might be a good one!