… And I’m back in
For a short time, I’ll be changing my usual monthly publishing routine. The current issue started with over seventy links that are worth including. So I’ll start with a smaller list and you will likely get the next edition next week already. When I’m catching up again with the list, I’ll switch back and publish less again. Thank you and as always, write me an email if you have thoughts on this.
- We interviewed 10+ design systems teams to understand how they track success and here's what we found. It’s interesting to see because just that you have a design system doesn’t solve many problems. You also need to have a concept for change and future product improvements.
- Atlas Icons is an open source, free icon library, available in variable stroke SVG format, web font, Figma, React, Vue and Flutter ready to use packages. Always nice to get ready-to-use icons no matter which technology you’re using.
- Visual hierarchy makes or breaks your design. Oliver Schöndorfer explains how to guide the eye by intentionally using contrast and spacing in typography.
HTML & SVG
relattribute has the potential to take the Internet to the next level… and yet, we usually forget about it. Read on what it can do and how it solves a lot of common issues we face in web development.
- An evergreen advice: Improve your input fields by setting simple HTML attributes:
- If you want to build or implement a carousel on a website, this article addresses step-by-step design considerations as well as semantic requirements for carousels to be accessible. It is intended to create an in-depth understanding of the implementation and its impact on users.
- Safari TP 162 brings support for ElementInternals and the form-associated custom elements by default. What’s so special about it? ElementInternals means we can easily extend default HTML elements instead of writing custom elements from scratch. Great benefits for usability, accessibility and maintenance.
- This is an interesting and thought-provoking but yet convincing principle: The default attitude towards return types should be 'don't use them', unless one of three things are true: You’re writing a function with multiple branches / You’re building a library / You have a specific TS performance concern and you’re banging your head against the wall. I’m giving you that to think about it, with no personal opinion on it other than don’t set types only to set types.
- Kilian Valkhof shares the insight that the CSS
::backdropdoes not inherit things from anywhere else but instead creates its own cascade instance. So if you’re trying to use Custom Properties set in
:rootthey won’t be used in backdrop.
- Chris Burnell shares a handy little tool for calculating viewport-based clamped values.
- Elad Shechter shares his approach of a CSS Reset using CSS
@layers. Using this method, a radical reset makes more sense again to me but even for normalize.css or similar approaches you can follow the approach and get your code organized better and the cascade benefits as well.
- In order to understand how
!importantworks in cascade layers, you have to understand how !important works generally. Ouch, we have quite a pitfall here!
- Here’s a generator and tutorial by Temani Afif on how to create CSS gradient box shadows.
Work & Life
- This is Hans Christian Reinl sharing his view on the importance and benefits of backlog grooming, and get tips for breaking down and defining product backlog items for a more efficient development process. If more people would invest more thoughts and time into this, I bet a lot of teams would be happier and more efficient.
If you liked it, please contribute any custom amount here. Thank you!