WDRL — Edition 308: Mostly CSS, MPAs, and seeing Time and Gifts

Celý článek

Hey,

when I wrote the last summary right before the calm time between years, I thought the next edition will not feature a lot of articles. Since then, so many cool new notes and articles have been published that it’s about time to send this to you.

Personally, I’m working on two web projects at the moment with one being built from scratch with modern technologies and the other one being a quite tricky carry-all-components-over job from custom web components back to a theme library due to massive problems with the existing solution. In both projects the code I produce is nearly secondary and it’s more important to think about the issues in an abstract and unconventional ways, to make the right decisions for the software service, and maybe even more importantly, for the team. But on the other hand, I realized again that my CSS skills are the ones that usually make the difference in the teams where most frontend engineers are great at writing JavaScript/TypeScript. Therefore it fits well that this edition shares so many nice little tricks on CSS. Maybe it’s a good idea to read one of the CSS articles each day to get a bit up to date with modern CSS again.

News

• Safari Technology Preview Release 162 is now available. It brings CSS Nesting, CSS relative color syntax, the margin-trim property, and declarative Shadow DOM which enables us a way to use ShadowRoots using HTML syntax without JavaScript.

Generic

• As engineers, it can be really satisfying for us to implement clever, terse solutions to problems, relying on advanced tricks and techniques. As a result, we often write code that is hostile and inaccessible to the junior folks on our team. But now Josh W. Comeau makes the case that we should strive to write simple, accessible code, using the dumb old primitives that everyone knows. This is one of my favorite advices to developers: Build robust and straight-forward code without cleverness. And if you must use clever techniques, ensure it’s documented well.

UI/UX

• Matthew Ström on how interfaces, incentives, emergence, and second-order thinking make platforms a unique design opportunity.
• This write-up of Safari's date-picker is the cause of 1/3 of our customer support issues is quite interesting, especially when you read the discussion following on it. It shows pretty well how hard it is to design certain input helpers and how diverse they are being used. And while Safari’s default UI might not be the best here, it also depends a lot on where it’s used, and in which context. The fun thing is that we only recently had the topic as an intro two editions ago.
• Anthony Hobday shares visual design rules that we can safely follow in every project. They’re pretty solid and important so keep that article in mind or bookmark it.

Tooling

• Macaron is a new compile time CSS-in-JS library with type safety that’s pretty fast.
• FontPie optimizes layout shifts with a CLI-generated piece of CSS.
• OKLCH is a new way to encode colors (like hex, RGBA, or HSL) so it’s nice to have this cool color picker and converter.

Security

• This article is Eric Burel’s attempt at making the implementation of authentication less obscure. You’ll learn about tokens, authorization, CORS, credentials, HTTP headers, and such.

Web Performance

• One of my favorite chapters each year: The Third Parties chapter of the 2022 Web Almanac. It’s covering data of which third parties are most used on the web and a deep dive into preventing them causing negative performance impacts.

HTML & SVG

• Darin Senneff shares an approach of adding a light/dark mode theme switch to the website that works with progressive enhancement. That means, we can switch the theme even when the JavaScript fails to load (yes, that still happens). I think it’s a very good reminder how we can build things in a better, more robust way without additional effort. We often just have to think about it differently.

JavaScript

• Joe Previte shares a tutorial on building a dynamic user avatar component with React and TypeScript from scratch to production using Test Driven Development (TDD). The fourteen lessons course is free, that’s awesome!
• We’re often told not to use document.write(), but… why?!
• Jake Archibald on what happens when you have unhandled rejections in your Promises. Of course, he provides a good solution at the end that we can use to deal with this in a better way.
• Daniel Diaz shares how to create a project with Astro. It’s a web framework that can be used to build multi-page applications. This means it renders static HTML and enhances it with JavaScript where needed while everything is written in Astro-files. Developers can use React, Vue, Svelte, Tailwind, Sass, TypeScript and more tools to feel comfortable.
• Loren Sands-Ramshaw shares the concept of durable execution to solve a wide range of problems in distributed systems, mainly the unavailability of services while we call them.

CSS

• Ahmad Shadeed on CSS is conditional in many ways. It brings up the issue of tools like Figma which try to be as close as possible to the real web experience but still fail in so many ways. As they are still mostly static and only mimic responsiveness, use a Canvas for drawing instead of the DOM, they are not able to mimic a lot of conditions, even unitless line-height is not usable making the designer-developer communication harder than it should be.
• With CSS Subgrid coming to all engines very soon, it’s a great time to discover what this new feature of grid can do.
• You may have already heard of CSS logical properties or RTL adaptations but are still deciding whether to deploy them widely. To help raise your awareness of their possibilities, Nicolas Hoffmann shares his experience of how he and his team at Proton carried out a massive move from CSS logical props to production and how you can consider them from a different perspective in your very own projects.
• "vi" and "vb" are viewport units that consider the inline/block axis of the container block, meaning they adapt to RTL and other writing modes.
• This month, I learned that the readonly property does not apply to e.g. <select> fields and one has to add some tricks to emulate the behavior.
• This month, I also learned that :empty is pretty different from what I had in mind and it’s not applicable on form fields but is meant for checking on a DOM element’s inner content which is null for self-closing tags. There is :blank but it has no browser support currently.
• A little thing happened on the way to publishing the CSS :has() selector to the ol' Almanac. They had originally described :has() as a "forgiving" selector, but it actually isn’t. So be careful of wrapping modern selectors with it and if something breaks, remember to check your syntax.
• Use CSS grid to animate an element's height from 0 to auto, because this one works while the browser teams still work on providing a native technology for all other elements (they are on it).
• We can use the @supports rule to check whether a browser supports a specified font format, e.g. @supports font-format(woff2).
• Relative units used in container queries work differently than relative units in media queries. So when you decide to use em in Container queries, this will be based on the computed value of the container’s font-size.
• Container queries come with their own units: cqw, cqh and a couple more.

Work & Life

• We tend to please all the people as freelancers, as business owners, as responsible employees. But we forget that this mindset is a faulty one as we’re not able to be more than one person. As developer I’d call it a one-to-many relationship and it works one way pretty well but not back-and-forth with the same performance. Here’s a minimalist’s business philosophy: Closed when I have enough.

Go beyond…

• By Leo Babauta: I’ve seen a lot of people with goals about changing how they spend their time, things like: These are wonderful goals. They all involve something that theoretically is pretty simple: simply change how you spend your time. But it’s rarely that simple, is it?

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

Anselm