WDRL — Edition 305: Free, Independent and hand-made. That’s the Internet we like.

Celý článek

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

• Lucide is a beautiful & consistent icon toolkit made by the community and available for almost all libs, frameworks or other use cases.
• Vitaly Friedman shares how to design the perfect mobile navigation and how it depends on what your content, data and target audience is.

Tooling

• Rector is a CLI tool that automatically upgrades old PHP code and handles automated code refactoring.
• Generate font combinations with deep learning with FontJoy.
• Markwhen is a Markdown based timeline editor with visual preview. Super nice tool for planning.

JavaScript

• There's a common myth that using a functional style with JavaScript is always slow. While this is truly a misconception, it has some basis in truth. There are a lot of traps we can fall into while writing functional JavaScript. So what are they? And how do we avoid them? James Sinclair goes into the details.
• Lit is probably the best choice for a base of web components, is well implemented and it’s already used by many big companies.
• This React plugin is a great, accessible and multi-functional drag and drop library by Adobe. It’s customizable, and brings all the standard use-cases for drag and drop actions.

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

• Steven Janaway and Ben Linders elaborate on teams being slow, and how to implement health checks, alignment, happiness and team charters to optimize teams.
• Alignment for autonomy works for individuals, teams and even organizations, in fact, the bigger the organization, the more important alignment for autonomy gets — to distribute decisions in order unleash innovation close to customers, and, to close the gap between strategy and implementing the strategy.

Go beyond…

• Three years ago, Sara Molinatti decided to leave aside the classic Christmas gifts and try to create with her own hands gifts for relatives and friends. With Black Friday and Cyber Monday coming up, this is a nice story to read before the big shopping run starts.

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

Anselm