Edition 308 by Anselm Hannemann

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

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

Tooling

Security

Web Performance

HTML & SVG

JavaScript

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