WDRL — Edition 299: Parent selectors, JS concepts, Custom Elements, debugging page reloads and too smart SPAs

Celý článek

Hey,

this week’s links are quite interesting: A couple of web standard (proposals) that would make CSS easier again like CSS Toggles, easy progressive enhancement for form data using the web platform. But also things like a huge list of JavaScript concepts to enhance your knowledge, or simple multi-select fields without a UI library. And then, self-hosted apps seem to become more popular again as rally or planby, two open source planning/meeting/schedule tools show us. It’s always fun to collect the links for my newsletter and shows how diverse web development is. And finally, the tips from Kevin Kelly on how to see and live life are a great inspiration to become a calmer, nicer and more focused person valued in a community.

Generic

• Taylor Hunt says I’m not smart enough for a SPA and brings up great points on when an SPA isn’t well suited or too complex, too slow, too insecure and when to still consider it for a project. I really like the article because it’s honest and well documented but at the same time open for options, individual choice and not too subjective or suggestive.

UI/UX

• Elizabeth Alli shares how to think in a conditional logic when planning, designing and coding UI components to improve the user experience. It’s applicable to every blog but even more important once you try to collect user data for your website.
• Mega menus are quite common and improved navigation for users a lot on many bigger websites. But Vitaly Friedman now comes up with a new approach with better guidance: Navigation queries.
• Google presents its new Material Symbols, a nice icon set. Weirdly, it seems only available as webfont.

Tooling

• Regex-Vis is a super nice visual editor and tester for your regular expressions.

JavaScript

• Planby is a React based component for a quick implementation of EPG, schedules, and event timelines that works interactively and very smooth.
• Bramus Van Damme shares how to code better form validations and interactions in JavaScript using the native FormData method which progressively enhances the form automatically and with little effort. A great example how great native browser/platform features are often overlooked by developers.
• This is an interesting collection of JavaScript features all engineers who work with the language should at least be aware of or know. So it’s a great reminder or learning go to to improve your JS-skills: 33 JavaScript concepts you should know.
• The folks from Google Chrome labs published an open source custom element that allows you to easily put a Dark Mode ???? toggle or switch on your site. It initially adheres the users' preferences according to prefers-color-scheme, but allows them override their system setting.
• With more and more interactive and JS-driven web apps out there this piece of code made me cheer: performance.navigation.type === 1 can be used to find out when a user reloaded your website in the browser. This may be a hint that something broke and the user had to »turn it off and on again«. Of course it’s just one metric but an important and helpful step to debug while easy to implement.
• Rallly is a free group meeting scheduling tool built with Next.js, Prisma & TailwindCSS. Great self-hosted alternative to the not very cheap services out there.

CSS

• Ahmad Shadeed shares insights into when and how to use the new :has() parent selector in CSS. It’s a great blink into the future of CSS coding but right now only Safari ships it (and Chrome behind flag).
• Oof, what happens lately in CSS is crazy: There’s a proposal for CSS Toggles which would become incredibly useful with modern platform features such as dark/light mode or reduced motion and more toggle settings. While we currently have media queries for this, it can get quite complex and annoying to write. Toggles try to solve this in an elegant way.
• Adrian Roselli shares how to easily create an accessible, flexible, collapsible multiselect field with simple HTML and CSS only.

Go beyond…

• Today is my birthday. I turn 70. I’ve learned a few things so far that might be helpful to others. For the past few years, I’ve jotted down bits of unsolicited advice each year and much to my surprise I have more to add this year. So here is my birthday gift to you all: 103 bits of wisdom I wish I had known when I was young. — Kevin Kelly

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

Anselm