WDRL — Edition 292: Alt emotions, holding together in tough times, sticky definitions, and in-page filter

Celý článek

Hey,

thanks for all the feedback that reached me last time, it was awesome to read that so many people support me even when my schedule of writing isn’t regular. Now that I had a thought on how to continue with WDRL I realised that this project won’t be sold, won’t be transferred to someone else or such thing. It’s just too personal to do this. But Malte Riechmann will help me collect and write some links from this edition on — it’s all in the early stages but I’m glad because it will help me and save me time.

In the past two weeks I had the chance to think about a lot of things that are influencing our lives at the moment. It made me realise that it’s upon us how we see our worlds, how we see the problems of our world. It’s our choice how we deal with other people, whether we confront people, cut them short, or whether we’re calm, interested and open minded. I know the latter is not possible all the time, but trying is really worth it. If we understand each other better, we create emotions, we can hold together, we will get stronger and happier. We can support each other in unstable situations, when we’re not sure what to do or what to believe. It’s the community that works for humans, and it’s hate and envy that boosts the bad things in life. We choose our path every day.

To make this easier for myself, I blocked all major news sites via pi-hole DNS for my devices again for an unlimited time. You can also set 1.1.1.2 for families as baseline and fallback.

News

• Safari 15 now has WebExtensions on iOS and iPadOS, supports theme-color meta tag, supports CSS aspect-ratio, new color syntaxes. The web inspector features a CSS Grid helper, ES6 modules are now supported in Workers and ServiceWorkers. Top-level await, Error.cause, private class methods and accessors are supported, too. And more…

Generic

• Pawel Grzybek explains the history of the @. It is always interesting to know where icons and signs come from. We usually cannot remember their original meaning. E. g. think about the disc icon, which often stands for save in user interfaces.
• Web development is only as complex as the belonging requirements. Therefore we should thrive for simpler solutions and fewer options. Jason Fried writes about this in one of his recent blog posts.

UI/UX

• Arco is an intelligent design system with code and design files available. Pretty cool!

Tooling

• We can now go to vscode.dev with our web browsers and a lightweight version of VS Code will start. It is pretty amazing how far web development has come. We can directly begin coding without installing anything. With Chrome and Edge we can even open entire directories into the web application using the File System Access API.

Web Performance

• Johan Isaksson tells us how he improved a Google app’s scroll performance 10x by simply adding an old CSS table property. What does this tell us? That we as developers should always think about whether there are native HTML or CSS solutions out there instead of JavaScript.

HTML & SVG

• Within the last few years, all of us created hamburger menus. And probably all of us made some kind of mistake while doing so. Manuel Matuzović summarizes and explains these mistakes very well. He also shows a valid, semantic, and well-structured hamburger menu.
• Writing and understanding semantically correct HTML is still one of the important basics in web development. Ben Myers brings to us some details on the <dl> HTML element.

Accessibility

• Jake Archibald shares why emotions matter when writing alt text for images.

JavaScript

• I love simple solutions. That’s why I love this simple in-page filter search written in a few lines of plain JavaScript. A few years ago, I’ve built something similar but back then it required a few more lines and wasn’t that neat due to missing JavaScript functions.
• The JavaScript console object can do so much more than console.log(). Marko Denic shows us all the different features so we can improve our JavaScript debugging and become better web developers.
• These unstyled, accessible React components are nice because we just need to style them. No need to reinvent the functionality all the time.

CSS

• This article is a good reminder of how object-fit and background-size work. Ahmad Shadeed goes into detail and explains to us when and when not to use these CSS properties. He also shows us how to fix the padding hack with the CSS property aspect-ratio.
• Stephanie Eckles explains how to style radio buttons the modern way with CSS Grid layout, currentColor, appearance and em units. No images, no weird absolute positioning or similar.
• With plain CSS we can now achieve sticky section indicators in definition lists. Pretty neat and something we had to do for years with comparably complex JavaScript code.
• Do you know @supports can not only check on CSS properties but on CSS selectors, too? In one of his latest articles, Chris Coyier tells us all about this helpful CSS feature.
• We all have used CSS hacks. Especially in the early days, those were sometimes the only solution to problems. Today we rarely see them anymore. But have a look at this interesting CSS hack from the developers at Facebook.

I hope you’re doing fine and have a way to stay positive, find your way to make an impact and help build a better society, better friendships and make our world a little better.
If you want to support my work, you can give back via PayPal or Stripe. Thank you!

Anselm