WDRL — Edition 303: Container query lab, default exports, disabled browser features and Openring.

Celý článek

Hey,

It’s not been long since the last mail I sent out but I already got so many articles in the queue that it makes sense to send this now. The monthly schedule is a handy reminder for myself but I’m not dogmatic on this. As you know this is a personal, hand-crafted newsletter, so I think it’s okay to alter schedules as it comes.
What’s interesting to me is that this edition splits up a bit into new shiny features that we aimed for for years (CSS Container Queries) and basic progressive enhancement, fundamental markup, a RSS based article recommendation, or basic JavaScript things we can do to make our websites more resilient.

This edition goes out right before I go to surgery next week. It shouldn’t be a big thing and they say I’ll be fully recovered two weeks after. As a creator and self-employed person I have a lot of ideas in my mind; My goal is to use the time off to calm down and rest a bit. I’m going to listen to nature sounds (see below), to binaural beats (just search in your favourite music app) and try to find a bit of calm.

News

• Safari 16 is coming soon and with it, a few new features will arrive: CSS Container Queries, CSS Subgrid, a Flexbox inspector in DevTools, Overscroll behavior, Shared Workers, <form>.requestSubmit(), showPicker().

Generic

• Torchlight is an API for syntax highlighting that makes your code look nice and without JS on the user side. Cool project and free for non-commercial use cases.
• Openring is a tool for generating an article recommendation widget from RSS feeds for your own site.

UI/UX

• Ahmad Shadeed on why it’s a good idea to set a min-width for buttons that can be labelled individually and/or are multi-language content to avoid the button being way to small for a visual action.
• Akson Phomhome shares all the details of designing for iOS 16 in this writeup with example material.

Tooling

• The JSONcrack editor is a nice way to visualize complex JSON files.
• LightningCSS is an extremely fast CSS parser, transformer, bundler, and minifier built with Rust.

Security

• Signing your commits in git is a good idea to improve security. Without it, anyone can pretend to be someone else. So far, GPG was the go-to solution for signing but now there’s a new, easy solution for 1Password users to sign your commits.

Web Performance

• Gerardo Rodriguez shares how we can remove the layout shift from a progressively enhanced burger menu.

HTML & SVG

• Austin Gil on the capture attribute for file input fields which let us take photos just with HTML. A simple solution for user avatars or similar use cases.
• Dave Rupert explores the modern alternatives to BEM (remember that hot naming convention a few years ago?). I feel like this game is finally coming to an end due to the new CSS capabilities we get in browsers.

Accessibility

• Manuel Matuzović describes how to build an accessible main navigation of a website. You learn about semantic HTML, accessibility, and how using ARIA attributes can sometimes do more harm than good.

JavaScript

• A common issue when filling out forms is that if there’s an error it’s hard to find out which field is wrong. That’s why focusing the first field with an error is a good idea. This could even be enhanced with a mini-control that lets users go to the next error and a capture of the tab key to direct the user to the next error.
• How do you export JavaScript modules? Lloyd Atkinson explains why it’s so useful to use named module exports.
• Ouch. When setting loading="lazy" as a HTML attribute on images, this gets disabled once you turn off JavaScript in your browser to avoid this being abused to fingerprint users.
• Ollie Williams shares new features for forms we can use in JavaScript to make them a better experience for users. requestSubmit() will land in Safari 16 as the final browser to support it, too, formdata also reached crossbrowser support, the showPicker() function lets us programmatically trigger a date or time picker.
• What happens if a user blocks all the cookies (which is an easy option to set in browsers)? Thomas Steiner has some answers and reveals how fragile most of the SPAs built today are.

CSS

• Michelle Barker explains the possibilities of creative list styling in CSS and in a side-note hints to the issue that Safari does not announce as list if list-style: none is set.
• Yes, Ahmad has a lot of great resources and this one is a demo/playground for CSS Container Queries.
• We all know the layout-shift due to scrollbars automatically (dis)appearing on a page. But there’s scrollbar-gutter as a preserved space for it as well as scrollbar-width to gain more control over this behaviour.
• Jared White on the three laws of utility classes, and how to convert Tailwind CSS to Semantic CSS and therefore combine a great prototyping tool with the common modular CSS class output.

Go beyond…

• Listen to nature sounds and fall in love with the earth.

If you see benefit in my newsletter, you can help me out by supporting me. Thank you!

Anselm