Edition 305 by Anselm Hannemann

Hey,

it’s crazy how much news we get for CSS this year. But along with it, we get tutorials how to use the new things and how to enhance with JavaScript. It’s nice to see how web development evolves, cross-browser support is great for most of the things and we can focus on building great experiences. The result is for example Mastodon, a communication service built on web standard protocols, independent of big tech companies. Or Pixelfed, or PHP, the language that drives most of our server software. Web Components finally get some traction as more and more vendors of widgets build libraries around it. Thanks to all who help the web standards evolving, who help other people by creating open source solutions, to those who write how-to-use articles and to those who share them. Enjoy this week’s edition, and if you like it, you can contribute a custom one-time amount here.

News

• In Safari we can now link to text fragments. And while we can make use of this as developers, all users can add the query to an URL as well. /my/path#:~:text=My%20Heading will bring you to the fragment. This addition to the web platform will improve sharing details of articles or one-pagers so much!
• Affinity just released version 2 of their creative software tools — the photo editor, vector illustration tool and the publishing designer. This is a big step forwards and it has very nice features inside.

Generic

• »When I first fell in love with the web, it was a radically different place. Aside from the many technical improvements that have been made, I feel like the general culture of the web has changed a lot as well.« These are the words Max Böck starts his article but it’s like I wrote them. Max asks us to build free stuff again and to not bring the wall street to the web. It’s a nice read and so true, yet complicated as you can see in his short update at the end of the link.
• Ahmad Shadeed has a step-by-step walkthrough the mindset of a frontend developer by showing a modern hero section.
• Why the IndieWeb is not attracting regular users but mostly people who work in the web industry. Max Böck shares the issues and how we can lower the barrier.

UI/UX

Tooling

JavaScript

CSS

• The agency EvilMartians explains their reasons on why they moved from using RGB and HSL colors to OKLCH. Now what’s this new pattern? You define colors by perceived lightness, chroma, hue, and alphatransparency. The advantage is that it’s understandable by humans and easy to change.
• Manuel Matuzovic shows that we can use math expressions directly in min(), max(), and clamp() and don’t need to nest a calc() into them.
• Paul Hebert shares the math behind nesting rounded corners, an issue most developers know. But with the help of CSS Custom Properties it’s easier than ever.
• We all know these endless lines of CSS selectors before the real CSS rules start in the stylesheet. And while it’s not entirely new anymore, I’ve not seen it much in the wild: The usage of the universal :where() selector.
• I wrote about the usage of the universal :where() selector. Now let’s clear up when to use :where() and when :is().
• Ahmad Shadeed explores a few use-cases for comparison functions, and explain each one in detail. Comparison functions are clamp(), max(), and min().
• Ever wanted to write Media Queries like this: @media (400px <= width <= 1000px) {? Soon you can as except for Safari every browser has already support for the new syntax and it’ll follow soon.

Work & Life

Go beyond…

If you liked it, please contribute any custom amount here. Thank you!

Anselm