Cool Links

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.

In times where software “needs” to stand out rather than be familiar, we lose our heroes. Rest in peace, square checkboxes!

Customizing <select> elements is something every web developer has had to do, probably. And the thing about that is that… you really can’t customize it. Or couldn’t, until now.

Having to implement a custom look on this field was always, to me, the perfect definition of “reinventing the wheel”. You gotta pick up this element that works reliably, is accessible, natively supported by all browsers, and users have been using for 30+ years, and then… build it from scratch, with JavaScript (which already kills the accessibility for some people).

Now, as of Chromium 135, you can finally customize them as you always expected you could! This will probably take a while to get to Safari and Firefox, but here’s the cool thing: if those browsers don’t support this new thing, the <select> will just look like a normal field and work just as well. A perfect example of progressive enhancement!

Sooo many times I’ve had to debug something in a npm package dependency of a project I’m working on, only to realize I need to change some of the code to make it work.

That’s usually a pain though, since you either have to open a pull request with a fix and wait for it to be merged, or setup your own fork of the package and host it somewhere.

This package aims to avoid that. It applies patches to other packages in your project, so you don’t have to go through the process of setting up a fork.

I’ve written about Container Queries before, but this article by Josh Comeau is great at giving even more examples of its utility. It’s always nice to see what use cases other developers find for it.

A fun exercise about making elements “pop out” of their containers with CSS without altering markup. Might not be useful if you can change the markup (as there are easier ways to do that), but learning this kind of approach is always good for expanding your repertoire.

position: sticky is incredibly useful but I’ve had issues implementing it more than once. This article goes over some of the most common issues we can face with it and how we can fix them.

Cool article explaining a little bit about fonts and choosing them for your website/app. I’m still overwhelmed by the options, but I found the info in there to be interesting.

HTML and CSS are my favorite parts of web development, and this article gives some great examples of why. Learning HTML is one of the best things you can do for your (web development) career, as it’s the most foundational block of a website and by itself can do most of the functionality you need. From HTML, you can progressively enhance the rest.

That article about the faux containers lead me to this one. I knew about naming CSS grid areas, but I had no idea about the [area-start/end] pattern! You can set those explicitly or have them be automatically added by CSS. This is pretty cool!