Skip to main content

Web Weekly #187

Guten Tag! Guten Tag! šŸ‘‹

Have you heard of focusgroup? Did you try aliases in Node.js imports already? Or do you know that CSS is available in JavaScript?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Mario listens to "Ethel Cain - Waco, Texas" and says:

This is my kind of opera.

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are four more songs left in the queue.

If you enjoy Web Weekly, share it with your friends and family.

A quick "repost" really helps this indie newsletter out. Thank you! ā¤ļø

Web Weekly housekeeping

A big thank you and a huge bag of karma points go to Jonathan this week. Thank you for supporting indie publishing in the times of AI slop by covering a small fraction of the cost it takes to send Web Weekly every week! My little side project is now supported by 40 people. This makes me incredibly happy (and proud). ā¤ļø

You can support Web Weekly on Patreon or GitHub Sponsors.

And also, I messed up a link last week. I clicked all the links before sending the email, but because last week was an "unofficial Temami edition", I didn't recognize that I linked to the wrong post. Here's the correct link to anchor positioning issues. Sorry!

No code

I didn't discover good "No code" articles this week. Did you read something great beyond coding lately? I'd love to read it, too!

color-contrast() beyond black & white

.card { --bg: var(--brand-color, #6c1afb); background: var(--bg); color: color-mix( in oklch, var(--bg) 10%, contrast-color(var(--bg)) ); }

With Chrome 147 (planned for Mar 25), the contrast-color() function will be newly available across all browsers. Theoretically, the function lets you throw a color in and get an accessible contrast color out. It's a great idea, but contrast-color() is limited to returning black or white right now.

Una describes how to work around this limitation.

Mix all the colors

Form-associated custom elements

class MyInput extends HTMLElement { static formAssociated = true; // The "I'm a form control" flag constructor() { super(); // This gives you the keys to the kingdom this._internals = this.attachInternals(); } }

Granted, Rob's article is very long, but the intro paragraphs make it worth reading already.

I've seen the attachInternals() method quite a few times in custom elements materials, but I never really understood what it's about.

Now I do, and it's quite cool if you're dealing with web components. Thanks, Rob!

Attach your inputs

A new focusgroup RFC

<div focusgroup="tablist"> <button>Tab 1</button> <button>Tab 2</button> <button>Tab 3</button> </div>

There's a new HTML feature shipping behind a flag in Chromium: focusgroup. The idea is that the attribute will make it easier to build components that require custom focus handling.

It's also wild that a focusgroup is supposed to set the correct ARIA roles automatically. If this works, maybe that will make the web a bit more accessible? I've heard some skeptical voices already, though.

Browsers are asking for feedback, so now is your chance!

Test it out!

Stop checking for view transition support

if (!document.startViewTransition) { updateTheDOM(); } else { document.startViewTransition(updateTheDOM); }

You've probably written this snippet many times by now. šŸ‘† Even though view transitions have been cross-browser supported for a while, you still have to check every time if they're available with if (document.startViewTransition). What if you didn't have to do that? Bramus released a non-visual polyfill.

Remove some ifs

The wonderful weird web ā€“ JND

0.0042 - Genuinely remarkable. You sailed past the theoretical human limit like it owed you money. I'd accuse you of cheating but I don't actually know you you'd cheat at this.

Today I learned about JND: Just Noticeable Difference. Keith built a fun little game for your lunch break. To what point can you differentiate the colors?

Look closely

Native JSON modules with import attributes

import config from "./config.json" with { type: "json" };

You can load JSON files via import attributes (that's the fancy with syntax) across modern browsers for roughly a year now. But how do import attributes affect caching? And are they really that much better than what bundlers already provided for years? Matt has some answers.

Import your JSON

Even more customizable selects

A deck of cards that unfolds to select a card.

I know that I plugged a great-looking select last week already, but man... I'm very much into these new ways of customizing select elements. Patrick's article comes with many explanations this week.

Select!

Feature detection of at-rules

@supports at-rule(@supports) { /* āœ… The browser supports `@supports at-rule(ā€¦)` */ }

Disclaimer: at-rule() is far from being cross-browser supported and will only hit Chrome in version 148 (we're currently at 146), but it's still cool that we'll be able to check support for at-rules (e.g. @starting-style) in the future.

Detect

Node.js subpath imports

{ "type": "module", "imports": { "#src/*": { "types": "./src/*", "default": "./lib/*" }, "#test/*": { "types": "./test/*", "default": "./test/*" } } }

Do you know that you can set custom import paths in vanilla Node.js? If not, John explains how they work. He's kind of skeptical about the idea, but I'm really digging it!

Shorten your imports

Random MDN ā€“ CSS .to() in JS

// Prints "0.608542cm" console.log(CSS.px("23").to("cm").toString());

From the unlimited MDN knowledge archive...

Here are two fun ones. First, do you know that CSS exists in JavaScript? And second, how cool is it that you can convert one unit into another?

Convert

Disclaimer: .to() doesn't work in all browsers yet but will land in Firefox soon!

TIL recap ā€“ svg elements can be nested

<svg xmlns="http://www.w3.org/2000/svg"> <!-- some SVG content --> <svg> <!-- some inner SVG content --> </svg> <svg>

Here's a quick learning from eight years ago: did you know that you can nest svg elements? Now you do!

Nest all these SVGs

Find more short web development learnings in my "Today I learned" section.

New on the baseline ā€” CSS shape()

#fancy { width: 200px; height: 200px; clip-path: shape( from center left, curve by 200px 0px with 50% -80% from start, smooth to center with 50% 100% from origin, close ); }

With Firefox 148, the CSS shape() function entered the baseline, which means that you can now pair offset-path or clip-path with a function that understands CSS. That's right! No more SVG syntax fiddling!

Shape!

Three valuable projects to have a look at

A new Tiny Helper

BaseWatch. Never miss the moment a CSS feature goes Baseline.

As a WW subscriber, you should be pretty well aware of what's going on with browser features and the baseline. If the newsletter isn't enough, BaseWatch looks great!

Stay up to date

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

Thought of the week

Here are some wise words from one of my favorite bloggers.

Data tells you what people consume, not what you should make. [...] "What is happening?" and "What should happen?" are two completely different questions and should be dealt with as such.

Did you learn something from this issue?

ā¤ļø If so, join 40 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

This is all, friends!

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself ā€” mentally, physically, and emotionally.

I'll see you next week! šŸ‘‹

Join 6.4k+ developers and

Subscribe to Web Weekly