WDRL — Edition 307: Test Selectors in CSS, image() functions, readable typo, and speeding up JavaScript libraries.

Celý článek

Hey,

in my last newsletter this year, the 13th, I want to say thank you to all of you: Thanks for being my audience, for reading my emails, and articles, sharing them, and giving me feedback. I really appreciate every single email you write to me. Happy holidays and happy new year!

The web is still evolving fast. The one thing I learned pretty early as a frontend-developer is that we need to constantly learn new things, explore and stay curious. At this point a shoutout to Marc: Thanks for everything you do, you and your curated content are such a great inspiration for so many people. This week I learned a lot about Angular, TypeScript, gRPC, and type-safety. On the other hand, I could help others by finding creative solutions for them that aren’t built-in into a framework. I’m glad about how the web needs many different people working on it and how together we can create nice solutions. But it’s not only on the web, I can apply the same principles to Gardening as well.

News

• The CSS Working Group is continuing a debate over the best way to define nesting in CSS, and we can participate and share our ideas with the team.
• PHP 8.2 is a major update of the PHP language. Readonly classes, null, false, and true as stand-alone types, deprecated dynamic properties, performance improvements, and more are in this release.
• In Safari 16.2 we get impressive interoperability numbers, CSS font-variant-alternates, and CSS Alignment.

UI/UX

• Hilary Palmen wrote an in-depth and visually perfectly explained article on how type influences readability.

Privacy

• Building a web analytics service without cookies poses a tricky problem: How do you distinguish unique visitors?

Web Performance

• Vadim Makeev shares the reinvented idea of not loading styles for Desktop when you’re on mobile. I think it’s a valid point that is worth exploring again.
• Marvin Hagemeister shares how most popular JavaScript libraries can be sped up by avoiding unnecessary type conversions or by avoiding creating functions inside functions. And that’s what he did with impressive performance gains.
• Matt Zeunert summarizes how web performance tools have changed this year. There are new web standards, better support for existing standards, new tools, and a new metric.

HTML & SVG

• Jim Nielsen on the issues of using <select> for website navigation.
• Jake Archibald wanted to embed a screencast in a web page, and wanted it to be as efficient as possible. The result is this interesting post on getting the correct HTML codecs parameter for an AV1 video.

Accessibility

• When you're designing and developing for accessibility, performing manual testing using a screen reader is important to catch and fix accessibility issues that cannot be caught by automated accessibility testing tools. Sara Soueidan shares how to set up a proper testing environment for accessibility.

JavaScript

• The View Transitions API is a native API for animated page and element transitions for multi page applications (also known as normal websites) and here’s how to use this new technology.

CSS

• Austin Gil shares how the CSS :has() pseudo-class can improve HTML forms through validation hints, conditional content, fancier designs, and more.
• Dan Christofi shares examples of a few times Container Size Queries would have helped me out.
• The working draft for image() proposes new features to enhance the capabilities of background-image declarations. Pretty nice things to come here!
• We cannot only check support for a CSS property with @supports() but also support for a CSS selector, like :has() with @supports not selector(:has(a)) {.
• Just realised that I can use :has() to lock page scrolling under modals and menus without toggling classes with JS.
• We can now use the standalone rotate, scale and translate CSS properties in all browsers.
• Geoff Graham tries to make sense of Container Style Queries and explores some cases. I find it interesting to follow because it shows some questions about when it may be useful and when to better avoid it.
• Wes Bos shares a short video in which he explains how to easily set a list of icons into the right aspect-ratio and sizing with modern CSS like aspect-ratio, object-fit: contain, and blend-mode.

Go beyond…

• A lot of people don’t do minimalism because it doesn’t seem realistic for their lives. But what they often mean is that they don’t want others to think they’re weird. Don't end up living the life you don't want.

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

Anselm