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.
- Safari Technology Preview Release 162 is now available. It brings CSS Nesting, CSS relative color syntax, the
- 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.
- 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.
- 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.
- 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.
- 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
- 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.
- 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.
- 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
readonlyproperty 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
:emptyis 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
:blankbut 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
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.
- Relative units used in container queries work differently than relative units in media queries. So when you decide to use
emin Container queries, this will be based on the computed value of the container’s font-size.
- Container queries come with their own units:
cqhand 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.
- 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!