Cool Links

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!

I’ve been subscribed to this newsletter for over a year and it never occurred to me to recommend it here. Stefan Judis does a weekly roundup of web dev-related things and puts them out in a nice, easy-to-read, lighthearted newsletter. It’s been one of my favorites for a while and if you’re reading this, chances are you’ll enjoy his content too!

Programming is an activity, but it’s also a feeling. For those of us who actually enjoy programming, there is a deep satisfaction that comes from solving problems through well-written code, a kind of ineffable joy found in the elegant expression of a system through our favorite syntax. It is akin to the same satisfaction a craftsperson might find at the end of the day after toiling away on well-made piece of furniture, the culmination of small dopamine hits that come from sweating the details on something and getting them just right. Maybe nobody will notice those details, but it doesn’t matter. We care, we notice, we get joy from the aesthetics of the craft.

This site collects all kinds of designs for 404 pages found in the wild. Pretty cool source for inspiration or to admire other people’s creativity!

Amazing step-by-step explanation on building Card components, with a special focus on accessibility. I love this kind of articles that explain the thinking behind every step and every line of code!

Card elements are everywhere and we all do them a bit differently. I’ll pay much more attention to the things mentioned here to ensure they’re as accessible as possible.

It’s like image lazy loading, but for page elements! I’ve got to try this out sometime and measure the effectiveness of this technique. Depending on the results, this might end up as its own blog post ;)

Ahmad’s blog has been featured here a few times already, and here’s another gem! A fully interactive, well-written and just a plain joy to read article explaining different strategies to handle colors in CSS, focusing on all those little color variations we need to handle when building something.