Web Weekly #41

Happy Sunday, party people! ๐Ÿ‘‹

This week I spent some time reading about Vite. Vite is one of these new build tools that bets on EcmaScript modules and uses go-based Esbuild under the hood. It looks super fancy, and I'll give it a try in my next play-around project.

Other than that, I tweaked my Chrome browser not to show me all these "valuable" URL bar suggestions. It's so much better now!

This week's Web Weekly includes:

  • New CSS features
  • A new spec that helps with ARIA
  • The leaky autofill browser feature

... and, as always, GitHub repositories, a new Tiny Helper and some music.

Something that made me smile

A tree built with DOM elements.

Christmas is approaching (I don't think it is, but the supermarket Christmas season started ๐Ÿคฆโ€โ™‚๏ธ). So I thought it might be a good time to get out the good old DOM tree.

Celebrate the DOM

Quick links

Links on links

Always style links with a pseudo-class.

I learned a bunch of facts about links and anchor elements from Martin Underhill. Did you know that links without an href are not focusable or that the :link pseudo-class helps detect invalid anchor elements? I didn't!

Use the link pseudo-class Learn more about links

The danger of autofill

List: 1. Autofill is a browser feature that allows people to save information (on the browser or the OS) and use it on web forms. 2. Autocomplete is an HTML attribute that provides guidelines to the browser on how to (or not to) autofill in fields in a web form.

The browsers' autofill functionality can "leak" your private information. That's right; when you're autofilling a form that only includes a visible email field, it could be that there are hidden address and phone number fields that'll be filled, too. ๐Ÿ˜ฒ

Alvaro Montoro tested Safari, Firefox and Chromium browsers and shares how they treat this scenario.

Autofill carefully

Forever confusing โ€“ CORS

The CORS playground.

Jake Archibald summarised everything you need to know about cross-origin resources, CORS, preflights and "unusual" requests. It's an excellent explainer of the topic.

I learned that newer browser functionalities, such as module scripts, require an Access-Control-Allow-Origin header today. ๐Ÿ˜ฒ

Understand CORS

Beautiful animations

Website showing a book and some text.

I found press.stripe.com and love the included book animations. Even though the site makes my computer fly, I love browsing this bookshelf.

Browse some animated books

"Aria in HTML"

Source code: Avoid doing this -> 'fieldset role="group"' or this -> 'main role="Main"'

Are you confused by ARIA and always wonder what roles and attributes are allowed, recommended or forbidden? Me too! Luckily, there's a new spec available that gives guidance on using and not using ARIA!

Read the ARIA in HTML spec

Language always matters

And, for the most part, people who utter these phrases arenโ€™t intending to hurt anyone โ€“ more commonly, they donโ€™t have any idea theyโ€™re engaging in anything hurtful at all.

The language and words we use matter. Sara Noviฤ‡ discusses ableist language and provides resources to speak more inclusively.

Avoid ableist language

Customize your Mac menubar

Put anything in your macOS menu bar

I found the xbar project, which allows you to put custom functionality into your mac menubar. You can define scripts, and there are many plugins and examples available.

Put anything into your menubar

Container-width-dependent border-radius from the future

CSS snippet included Container queries, when/else and ranges.

I wrote a follow-up to Ahmad Shadeed's post Conditional Border Radius In CSS and had a look at future CSS features that could help styling elements depending on viewport and element width.

Look into the CSS future

In progress CSS proposals

List of future proposals: Cascade Layers, Scoped Styles and Container queries.

Speaking of upcoming CSS features, Miriam Suzanne gave a short and on-point presentation covering the upcoming Cascade Layers, Scoped Styles and Container Queries.

Learn about new proposals

TIL recap: SVG paint order is configurable

SVG code with a configure paint-order.

I always found styling SVG stroke-width challenging. Changing the stroke width usually meant that the SVG started to look funny because the stroke was painted over the fill. Two years ago, I learned that SVG paint order is configurable.

Reconfigure paint order

Three valuable projects to have a look at

A new Tiny Helper

Screenshot of redact.photo

If you want to remove sensitive information from screenshots or photos, redact.photo is a handy little web app that does exactly that. Drop a photo, blur particular areas, and download it. And the coolest thing, there's no server involved!

Censor sensitive information

Find more single-purpose online tools on tiny-helpers.dev.

A quote to think about

In the spirit of me complaining about Sign in/Sign up UIs, this week's quote is from Ashley Walls.

Better words make better products.

A song that makes you stop coding

Dark sky with stars.

Berlin's slowly coming back to normal, and as I was out dancing yesterday, this week's song is a nicely rolling electro track from Jon Hopkins.

Listen to "Luminous Spaces"

Thank you for reading!

And that's a wrap for the forty-first Web Weekly! If you enjoy my newsletter, I'd love you to tell others about it. โ™ฅ๏ธ

If you're not a subscriber, you can change that! ๐Ÿ˜‰

Stay safe, and I'll talk to you next week! ๐ŸŽ‰ ๐Ÿ‘‹

PS. I heard the cool kids use RSS. You can find multiple feeds on my site.