Cool Links

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!

Jake gives a really thorough explanation on view transitions, showing some of its shortcomings when animating some specific elements and how to fix them. View transitions are so nice 🤩

The smoothness of a web application is an anti-indicator of its reliability and predictability as a web page.

your team almost certainly doesn’t have what it takes to out-engineer the browser. The browser will continuously improve the experience of plain HTML, at no cost to you, using a rendering engine that is orders of magnitude more efficient than JavaScript.

I remember when I first learned about SPAs and how amazing it seemed like to be able to have smooth transitions between pages. Then, as I started building and using them, it became apparent that those benefits also brought a lot of issues that took a lot of dev work to fix.

Luckily, with View Transitions, lazy loading, and predictive pre-rendering (start loading a page before you click on its link) that a lot of frameworks have now, we can have most of the SPA benefits without having to reinvent the wheel.

Incredible article that not only explains the new-ish text-wrap: balance and text-wrap: pretty CSS properties in-depth, it also goes into the caveats those properties have. It’s well-written, well illustrated, and interactive. What else could you want?

Ahmad once again writing the articles I wish I did. Another well-written and interactive article going in-depth on the also new-ish overflow: clip CSS property. clip has helped me implement designs more than once and it’s so nice to have something that works just like I always expected overflow: hidden to work.

A really well-designed post from the Chrome team showing the coolest new things that were introduced to CSS in 2024. A lot of the things in there are really cool! The sad part is that, unless you’re running an up-to-date Chromium browser, you might not be able to see them in action. I initially saw this blog post on my iPhone (which only has access to Safari) and almost none of them worked.

It’s always fun to see these “State of…” surveys. Noteworthy thing being Astro completely dominating the framework numbers (except for usage, but I can totally see it becoming #1 soon).

Josh has always been one of my favorite bloggers, and this blog post is awesome. You’ve probably seen me talking about Progressive Enhancement before, and this article talks about browser support and figuring out how and where to progressively enhance things.

A neat little web component that displays Baseline status of any web feature, that you can quickly add to any web page you want.

I might use this in future blog posts here!

Great article reflecting on how job descriptions usually suck and how hard it is to find a job working with the things you want to work on, especially if your expertise is in the gap between two different job descriptions. Turns out the easiest way is to try and carve out a way into the work you do best.

This is the best explanation of the new HTML/CSS popover API that I’ve seen. It still looks overly complex, mind you, and I’m not sure I like that API. But if you wanna find out about what it is and possible use cases, this video is a nice start!

Nowadays it seems most packages and developers expect you to use a build system like Vite, Webpack, or anything with NodeJS to build websites.

That shouldn’t be true, but if you’re ever building a simple buildless website and want to use packages, Julia Evans explain how to do that and also a bit of how the different kinds of JS modules work.

Optimizing the resources your website loads is the best way of making sure it loads faster for everyone. I’ve talked before about ways of doing that, but turns out there’s a new, better way of telling browsers what they should load first!

The article has many examples of use cases, but these are my favorites:

• Hero images: “Images inside the viewport typically start at a Low priority. After the layout is complete, Chrome discovers that they’re in the viewport and boosts their priority. This usually adds a significant delay to loading the critical images, like hero images.”
• Image Carousels: “For example, in an image carousel, only the first visible image needs a higher priority, and the others, typically offscreen initially can be set to have lower priority.”

Building on the previous paradox: did you know that HTML was originally meant to be understandable and writable by anyone?

Before us web devs came along and scared people off, HTML was actually seen as a very simple way of structuring and linking data.

And it still is! This course aims to teach HTML to people with no technical knowledge, so they’re able to build their own simple web pages (or just mess around with existing ones, which is really fun).

nvm (Node Version Manager) is one of the best tools in my web dev toolkit. It allows you to keep multiple versions of NodeJS installed, which is usually a must if you swap between different projects all day. I’d even say it’s worth it even if you only have one version, since installing NodeJS via nvm is way easier than the official way.

This is a way of using nvm with a graphical interface, in case you’re not too fond of CLIs (or simply prefer a simple GUI instead).

These “State of” results are always fun, if only for the graphics alone. This one has pretty good data though, as 2024 was one of CSS’s best years, with Container Queries, :has() (which allows for Quantity Queries), native nesting, native page transitions, and more.