WDRL — Edition 313: Native URL parse check, HTML popovers, and native loading states in JavaScript.

Celý článek

Hey,

David Cain has a lot of very good thoughts out there on his blog. When I read the current article »don’t forget to swim now and then«, I wholeheartedly agreed to many aspects in it. We people strive for activities our bodies and brains adapted to over eons, while we struggle a lot with modern and/or activities we are not a adapted to: Politics (too abstract, unpredictable), telecommunication (unreal, missing sensoric information), and others. What I think is interesting about it is that it explains why we relax when going for a swim or run, hiking, sitting in nature around a fireplace, go camping (despite it is uncomfortable compare to our home). And it’s why we are stressed when being in meetings, watching TV, news all day. Leo Babauta has some helpful ideas on how to let go of sacred cows and start new habits.

Here’s my current list of interesting web-related articles I found worth reading. It’s wonderful to see how much we can do with CSS now, that we’re getting native browser stuff like popovers, loading states and more. And I realized how weird it will be to read all my editions in a decade from now on. Most of the stuff will be outdated, even when I think it’s evergreen and highlight it. The web continues to evolve quite fast and compared to building websites only five years ago, the real challenge is to keep up to date and change our habits and old code patterns to new ones.

News

• What’s new in Safari 17 coming in autumn? WebApps for macOS Sonoma, Spatial Web, support for the 3D visualizing HTML <model> element, JPEG XL and HEIC image format support. Finally, a proper CSS image-set() implementation for responsive images in CSS! Also: popover attribute support (see article below), <hr> is now allowed in <select> elements, list counter styles, new text-transform values, Media Queries 4, the URL API in JavaScript, and so much more. Wow for that upcoming release!

Generic

• Ideas don’t stand on their own. When a good idea turns into a good thing, it’s because structure and systems. The discipline of design is the commitment to structuring and systematizing good ideas. I’ve seen just too many ideas failing because of a lack of structure and commitment.

UI/UX

• Working with Figma? Here are some great tips that your developers will love you for while your design will look more awesome. Remember that you can use Figma like a static px-based tool that’s not much better than Photoshop or like a web-tool that’s really useful for developers.

Web Performance

• One company found that too much JavaScript costs them USD 700,000 per year, per kilobyte. Here's what Alex Russell says needs to change.

HTML & SVG

• Learn how to build tooltips, menus, and more with the new popover API, available in Chrome and coming to others soon. Exciting times ahead!
• Thanks to the Open UI working community group, there’s a new element on the horizon, <selectmenu>, that will make styling this type of form control a whole lot better. Let’s walk through an early implementation of this new experimental element by creating a pattern that you would never have thought possible with CSS alone — a radial selection menu.
• Here’s a job interview question for you: When you click a button and call the showModal() method to open a modal <dialog>, where does the focus go by default, and how can you move it elsewhere? Can you imagine a job interviewer caring about accessibility and HTML? Me neither, but the question is interesting and here’s how to do that.

JavaScript

• Zander Martineau shares how to use the native browser loading state within JavaScript. Pretty nice!
• The URL.canParse() static method of the URL interface returns a boolean indicating whether or not an absolute or relative URL combined with a base URL, are parsable and valid. Only in Firefox for now but so useful!
• Stefan Judis wrote a nice View Transitions example with only a few lines of code.

CSS

• How to combine CSS :has, :nth-last-child, and style queries to create dynamic components.
• Harold Cooper shares how to create spinning diagrams with CSS. This is amazing!
• Ire Aderinokun explains when :focus-visible is visible to users.
• How do you know using a new CSS features is "safe" to use? Jen Simmons on how to find information on new features, test for support, determine when to use a feature, and manage support with fallbacks and build tools.
• Stephanie Eckles shares a modern CSS project architecture with all the cool new things the language is offering. In this moment, I just wonder what we will think about this one in ten years.
• Kilian Valkhof shares the gotchas of CSS nesting so be aware of them when introducing nesting into your codebase or team. Be especially careful if you’re in a larger team or project where many people work on the codebase and coach them accordingly.
• Ahmad Shadeed has another great explainer document, this time about the new Viewport Units (dvh).

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

Anselm