WDRL — Edition 306: Icon-Quiz, Dynamic viewports, view transitions, and natural input design.

Celý článek

Hey,

Will you recognize what the icons in the following link want to explain? I thought it’s a good quiz to ask my international friends here to find out how well these icons work. Now think about using only icons for an interface again. The idea of building these icons is to reduce friction in the user interface and to clean up endless text options but what is it worth if no one knows what the symbol really means? I myself struggle a lot when apps have text links for everything but the user login / registration or account link is a symbol that’s hard to identify (is it the login, the sign up, the logout icon?).

Better try to clean up interfaces so the text alone works well. If you then add icons in a subtle way to support users reading the text that’s fine. On this topic, Jim Nielsen has rethought about forms and comes up with the idea of parsing natural language text again. What works well in Apple Reminders, in ToDoist and many other apps already is a great idea for the web, too. We could even build bridges and try to parse and if we’re not sure we offer other ways of visually setting details as well.

One more thing: What do you think, would it be useful to have WebWeekly and my newsletter together as one? Are you enjoying the less frequent schedule of mine (about once a month) or is weekly preferred? Let me know by replying here, or on Mastodon.

Enjoy this week’s edition, and if you like it, you can contribute a custom one-time amount here or PayPal me.

News

• Safari Tech Preview 158 bringsfont-size-adjust, font-variant-alternates, as well as they’ve enabled AVIF image decoding for macOS Monterey and macOS Big Sur (legacy support, yay!).

UI/UX

• Some of you already know Hubot Sans, a font by GitHub. Now the folks released Mona Sans, so we now have two variable, open source fonts from GitHub. I think the landing page itself is also nice to look at in regards of how to use mega-sized typo in responsive design.
• This is the article from this week’s introduction: Jim Nielsen on natural language input design and handling. I personally always disliked the Material UI handles for time input, liked the text-input suggestions of Google search, Wunderlist and ToDoist app, and Apple Reminders. Combined with speech-to-text by the OS, this gives users multiple nice choices of how to input their values.

Tooling

• With Showcode we can create beautiful images of code snippets.

Web Performance

• Michelle Barker shares how we can optimize the performance of Vue apps. But what works for Vue, works for many other frameworks as well so be sure to also give this a quick read if you’re working with Svelte, React or others.

HTML & SVG

• What if we could have JSON forms?

Accessibility

• In this article, Cristian Diaz covers how to use HTML and CSS to create an accessible experience for keyboard users.

JavaScript

• JavaScript and CSS allow users to detect the user theme preference with CSS' prefers-color-scheme media query. It's standard these days to use that and here’s David Walsh’s explainer how to detect dynamically with JavaScript using a matchMedia event listener.
• Rose Morley shares how to detect whether the caps lock key is active in JavaScript.
• Intl.Segmenter enables you to split strings into meaningful parts such as words, sentences and graphemes. I always felt like the Intl API in JavaScript is one of the most powerful ones. However, it’s probably the reason why it took a while that all browser support it and still today, sub-features and bugfixes regularly appear in the browsers’ changelogs.

CSS

• When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed interactive tutorial by Josh W. Comeau, we’ll pop the hood on the Flexbox algorithm and learn how to do remarkable things with it.
• Tyler Sticka on an interesting limitation of CSS Custom Properties in which we find out again that even today having calc() and other things available in CSS, it still isn’t the same as JavaScript, and inheritance and scopes are completely different things.
• Jim Nielsen on the dream of having CSS for URL, HTTP and document levels. The examples would be a quite nice to have, though I think the security implications aren’t easy to solve and implementation may require the CSS parser to understand way more things than they do nowadays (e.g. HTTP headers).
• We can use @layer in CSS to group different styles together and therefore organize them well. Once upon a time, Firefox had a 3D-layer model in their dev tools which would visualize this concept quite nicely. Manuel Matuzović shares how you can even nest layers by grouping layers and when this might make sense for a web project.
• Manuel Matuzović again: He compares :has(:not()) and :not(:has()) by taking a common layout card example.
• Yes, this is a great reminder that CSS isn’t always easy and intuitive, yet can be very helpful. Nested HTML elements with different visibility properties (visible / hidden) can be visible even though their parent is hidden, by Stefan Judis.
• Use :has() and :nth-child() to style a parent based on the number of children it has.
• Liam Johnston updates BEM with modern CSS selectors. Because BEM is still wide-spread, not a bad idea, and new technologies allow us to improve it further, make it more universal, easier to read and improve the use of specificity in CSS.
• This summary of the frontendmastery describes what I had in my mind for some years now: A deep dive into the problems with scaling CSS on large projects. Once you have the history, it’s easier to understand the evolution of CSS best practices.

Work & Life

• Jascha Sohl-Dickstein: Too much efficiency makes everything worse: overfitting and the strong version of Goodhart’s law.
• So many people are feeling overwhelmed, scattered, and stressed – so much so that focus and effective work become incredibly difficult. So what can we do to be effective in the midst of this scattered, overwhelmed state?

If you liked it, please contribute any custom amount here. Thank you!

Anselm