WDRL — Edition 302: Digital accessibility, learning modern CSS, UI tricks, serving images the right way, and proper waiting in JavaScript.

Publikováno: 31.8.2022

Hey,

Let's build websites for every one of us: »At the end of 2021, approximately 7.8 million severely disabled people were living in Germany. […] The percentage of severely disabled people in the total population in Germany stood at 9.4%.« – Statistisches Bundesamt

When I first stumbled upon these numbers, I could not believe them. It is one more reason to learn about digital accessibility now. We are all individuals with different strengths, weaknesses, backgrounds, needs, and possibilities. I think every human being should be able to interact with the websites we are building. If you only have time for one topic this week, please check out The A11Y Project.

This time Malte wrote the intro.

News

Firefox 103 is out and brings backdrop-filter in CSS, :modal, and scroll-snap-stop.
Finally Docosaurus 2 was released and brings some nice features to build better static-site generated documentations for your projects.
Google Chrome 105 is out and brings support for the CSS :has() selector (means Safari and Chrome now in stable), Container Queries (Chrome and Safari Tech Preview), and the Sanitizer API (yay frontend security!).

Generic

Daniel Sieger has some good tips about how simplicity will help you produce better software.

UI/UX

This article is a great inspiration how to improve your UI designs with a couple of small elements that make a huge difference.
Get some simple tips about web typography from Oliver Schöndorfer and make your website more readable.
Breadcrumbs, radio buttons, and toasts are user interface components and real-world objects. Megan Ng illustrates the story behind these and other naming concepts.
Github built a very nice app that lets us build custom color palettes: Primer Prism.

Web Performance

Addy Osmani says we should use fetchpriority=high to load initial hero images sooner by hinting it to the browser. And while I think not everyone needs to use it, the article also contains comparisons and explanations on how this attribute compares to others and when to use which.

HTML & SVG

This github repository contains all the best practices to serve an image on a website today. While it was as simple as <img src="…" alt="…" width="400" height="300"> when I started web development, we now often need complex <picture> snippets to serve the best size, format with various fallbacks. Definitely a good resource to remember or a snippet you should keep in mind for all your projects.

Accessibility

Scott Vandehey explains how to use macOS’ VoiceOver utility app to test accessibility of an app or website. It also has tips on the most commonly used keyboard shortcuts.

JavaScript

I don’t usually link to YouTube videos but this one is quite important: Jake and Cassie share why we shouldn’t rely on DOMContentLoaded events anymore in JavaScript but instead hint the correct script load in HTML already by using <script src="…" defer>. And if you need the script before your content is finished, use async as attribute instead. I’ve a lot of deferred scripts containing a DOMContentLoaded event, too. This is not necessary and can even cause unwanted side-effects.

CSS

Craig Buckler explains when and what we can use the modern CSS selectors for. And while :is() and :where() mainly make your CSS code more readable (scss, less solved it for you before), :has() now offers a real parent selection and therefore finally allows great styling options we couldn’t solve in CSS alone before.
Miriam Suzanne shares how to use Container Queries in CSS and although not available in most browsers yet, it’s a good idea to already make yourself familiar with the new way of building layouts in CSS. It’s coming soon to browsers and will change how we build layouts for the better.
Chen Hui Jing on how to achieve a gradient background on text using CSS and why it’s still a good idea to not entirely rely on static CSS sizing but wrap HTML around it for when the font or text itself changes.
Temani Afif shares a couple of concepts how to use CSS Grid and Custom Shapes to achieve nice layouts in the first part and second part of the tutorial. I think the demos aren’t the visually most appealing ones with dummy content but they show what’s possible and now it’s up to us to use it and implement this into nice user interfaces.
In today’s browsers, the CSS :empty selector matches  and  but not  . This behaviour is not consistent with the specification, which states that :empty should also match elements that contain only white space but it remains open whether browsers will change this.
Pawel Grzybek proves that you can create simple carousels using only CSS and no line of JavaScript. The only caveat is you don’t get accessibility for it so maybe enhance it with a few lines of JavaScript if it’s not only presentational.

Work & Life

We are all just figuring it out as we go. Andy Brice even writes in his article "No-one knows what they are doing".

Go beyond…

At the core of many difficulties is a lack of trust — especially trust in ourselves but also trusting other people in our lives. All the things Leo describes in this article are common to me and others. We should learn to trust other real people again, at least more than machines, more than anonymous people writing publicly. And we need to trust ourselves more again. It doesn’t mean to be bolder but to relate to ourselves better again, listen to our body, our mind, and to react to these signs carefully and with a rational mind.
I like this handy and short list of things I should consider and do when I’m feeling drained by Leo Babauta. Sometimes it’s perfectly fine to have a low-energy, low-concentration and non-perfect mood day.

If you like this newsletter, you can contribute here. Thank you!

Anselm