Cool Links

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.”

Great analysis of how most uses of generative AIs (or at least what companies are trying to sell as use cases) are primarily selfish.

If you can’t bother to do something yourself and instead ask a computer to do it, why should you expect someone to bother reading/watching it?

The corporate use cases for this are somewhat understandable - most content on the web is written for robots, not for people, for example (I know, sad). But Apple has been recently trying to sell it as a way to have a complete emotional detachment from your family as well. We truly live in the worst timeline.

The best part about Mastodon is the lack of a “For You” algorithm. That means nobody controls what you see (except for Time, I guess, since it’s chronological).

That is also the worst part of it. Sometimes I just can’t keep up with all the posts in there.

Sill is a neat little service that checks your timeline daily and sends you an email with the most shared links in your timeline. It works really well and it’s a neat way to make sure you didn’t miss a really cool project or article from your timeline even if you have skipped social media for a day (which you should really try). And, at least for now, it’s free!

Oh, it also works with BlueSky, though I haven’t tried it with that.

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!

Just a cute, fun and short blog post. What’s not to love?

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).

I don’t know if you’ve heard, but The Browser Company, the company behind the Arc Browser (which I’ve been using for a couple years as my main browser) has announced that they’ve pretty much given up on monetizing it and will just keep it working as-is in the future, with no new development.

This article reflects a bit on how it seems that tech companies seem to be running out of problems to solve, which results in great products that can’t find their footing (outside of small niches) due to not really changing much about their user’s lives.

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.

I’ve been growing increasingly unhappy with JavaScript frameworks as of late, but I still have a soft spot for Svelte. Svelte is what my blog is built with, and it’s always been a pleasure to use. Version 5 significantly changes some of its core features, apparently for the better. I’m excited to upgrade eventually (and really glad that they kept backwards compatibility).

The web is, at its core, just links to HTML files with some CSS and JS on top. That’s how it was years ago and how it technically still is.

Over the years, things became more complex and many layers of abstraction were introduced. A lot of web developers have never had any real contact with the core of the web.

So we ended up on a place where it’s much easier to find and use an overly-complex, bloated solution for websites than just having the bare minimum (that usually works better).

Isn’t that wild? In the author’s words:

“the web doesn’t belong just to software engineers. The more we make the web complex, the more we push normal users into the enclosures that we like to call social networks.”

I’ve been a web developer for over 10 years now and I can afford the luxury of building my own website - a static, simple, lean one. People with less or no coding knowledge can’t have that. They need to use tooling that ships so much code and complexity if they want to have their own. Or, even worse - they’ll stick to social media platforms instead. 😱

There’s really nothing else I can add to this argument that Cory hasn’t already said. But really, RSS is the best way to follow a publication or a person there can be. It’s the best way for you to actually have control of what you read and decide when to do so.

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).

I’ve complained about Safari multiple times in my posts and social media, and I’m not alone. This document pretty much aggregates all the issues Safari has been causing for years and how users (and devs) often have no choice of browser to run to when Safari decides it doesn’t want something to work.

I am 100% in favor of browser engine diversity, and definitely don’t want Chromium to be the only option out there. But Safari (and WebKit, its “heart”) is not a fair competitor because the majority of its users (on iOS and iPadOS) don’t have the option of using something else. And when Safari has time and time again had issues with the implementation of new APIs and, even worse, had issues with having old APIs working in a completely different way from other browsers, we have a problem.

And to make it all worse, Apple clearly has financial incentives to make Safari lag behind. A limited web experience means the only way to provide your service to users on iOS is by releasing an app… on Apple’s App Store. They can’t monetize web browsing, so why make it work well?

This article dives into how the author built a logo strip (i.e. a grid of company logos with varying widths and heights) and the techniques they used to make their weight nicely distributed, way beyond what most people have done in the past (including me). I’ll definitely be using that next time!

This one is absolutely brilliant and nothing I can say about it will make it justice. Open it on desktop for the full effect.

I don’t know about you, but I’ve argued with a lot of people in the past over if a specific color was blue or green. This quick test makes you categorize some colors into blue or green, and then how “green” you are compared to the rest of population. I’m not sure if there’s any scientific data to back any of that up, but it’s still a fun test to take.

For the record, my boundary is at hue 171, which makes me greener than 75% of the population.

I feel like more and more web developers are becoming “Framework Developers”, which means they only really develop with one specific (or maybe two) JS frameworks. This is a problem because these frameworks often change how you interact with web technology. In the end, everything gets compiled to HTML, CSS and JS, but when your dev environment is so different from that, it’s hard to understand exactly what you’re building.

If you already know HTML, CSS and JS, then you can make that association while you’re learning the framework, and things happen naturally. When the opposite happens, though, the path is more difficult.

A HTML, CSS and JS developer can learn any framework (and jump between them) with relative ease, while a React developer might have a hard time working with Vanilla JS or Svelte, for example, because they only learned the React way of thinking instead of how browsers interpret the code.

I do use a JavaScript framework (Svelte) on my website and personal projects, but I’m glad I learned the underlying technologies before diving into any framework. Having that foundation has allowed me to work professionally with a lot of different stacks (Vanilla, React, Vue, Angular, Svelte) while still keeping my foundational skills intact.

This CodePen uses pure CSS and its new-ish features to create a really neat card stacking effect! It uses Scroll Snapping (widely available) and Scroll-based animation (Chromium only for now) to both style the card stack and make sure they behave correctly.

A semi-serious, semi-satire, but fully incredible short video that talks about ReactJS and how and why it became the most popular web framework. Definitely worth the watch, especially if you don’t like React. Make sure to read the transcript for some added Director’s notes.

If you’ve ever worked with CSS variables on a project, you know one of the main challenges is getting color contrast to work correctly. When the background color changes, the text color (which should have high contrast) might not work as well. Often we handle this by having a --color-contrast variable, but this added complexity builds up quickly.

This article goes into an alternative way that uses CSS and SVG filters to let the browser apply the contrast automatically. The CSS-only alternative has a problem with fringing, but the SVG one seems straightforward enough and gets rid of that issue. That’s pretty clever!

I assume the main drawback of that approach is that you don’t have full control over the text color, so if having an exact color is crucial to you, then you’re still stuck with hardcoding color variables.