WDRL — Edition 309: CSS Layer Resets, Backlog refinement, extending ElementInternals, and cancelled fetch requests

Celý článek

Hey,

… And I’m back in town your inbox with quite a few new reading recommendations for you. It’s quite interesting how the web continues to bring new stuff each week, how developers explore these new things. A lot of the CSS features we currently get make using CSS easier, make a property’s purpose clearer and some reduce selector complexity (always a good goal). Other ones enable complete new product ideas, especially in the JavaScript API field, and others disrupt the current status quo of building web apps (Page Transitions API, SPAs and MPAs).

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.

News

• We’re pleased to announce that support for the declarative shadow DOM API has been added and enabled by default in Safari Technology Preview 162. This is such an important thing to note because it allows us to build ShadowDOM in HTML. It is important for Server Side Rendering when using ShadowDOM or when JavaScript is disabled such as in email clients.

Generic

• 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.

UI/UX

• 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.

Privacy

• And yet another feature that gets harder to use because tracking (ad?) companies abused it: As of Safari Technology Preview 160, it is no longer possible to use the W3C’s Web Share API with third-party sites within an iframe without including an allow attribute. You know why we can’t style a :visited selector well, don’t get events for it? Because bad actors broke web standards by abusing the technology to breach the privacy of users.

HTML & SVG

• The rel attribute 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: inputmode, enterkeyhint, and autocomplete. No need to use JavaScript hacks and workarounds and it may even make your form hints obsolete.

Accessibility

• 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.

JavaScript

• Austin Gil with some code examples how to avoid duplicate-requests & race-conditions when creating JavaScript enhanced forms by cancelling previous fetch requests with the AbortController.
• 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.
• Lyra is a fully-featured full-text search engine that runs wherever JavaScript runs, including browsers, servers, React Native, edge networks, and more. Sounds nice, and I’m eager to give it a try.

CSS

• Kilian Valkhof shares the insight that the CSS ::backdrop does not inherit things from anywhere else but instead creates its own cascade instance. So if you’re trying to use Custom Properties set in :root they won’t be used in backdrop.
• Chris Burnell shares a handy little tool for calculating viewport-based clamped values.
• Ryan Mulligan shares his discoveries on how the CSS Grid gap property operates when hiding items in grid-template and grid-auto layouts. They are similar but not the same and while auto also removes a gap space in some occasions, template still applies them even without the elements being shown.
• 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.
• This gives me mixed feelings: I think print styles are super important for so many projects and yet, I forgot about them more than once in my projects as well. But here’s the reminder for all of us: We should not forget to provide useful print styles to our websites. And if you think about printing on paper, please think about "Print as PDF" to save content of a webpage as well.
• In order to understand how !important works 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!

Anselm