Web Weekly #133 | Stefan Judis Web Development

Web Weekly is still coming from Italy! 🍝

When should you use aria-label? Should you self-host your custom web fonts? And when will CSS @property enter the baseline and be cross-browser supported?

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

Attila listens to “Shelter Boy – MOVING BACKWARDS” and says:

This song, despite the upbeat melody, is my go-to song to handle frustrations calmly. And wearing glasses, the chorus always makes me smile with “vision so bad, saw the good in you”.

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

Keeping up with web development trends has always been tough.

When I started dabbling with the web, new frameworks shipped every week. You couldn’t know what you should learn and what would be around tomorrow. It was a pure gamble…

Today, many JS solutions are replaced with browser features — and we’re talking about well-defined solutions that won’t disappear tomorrow.

With all these new features, the question is, how many people use the new and shiny?

Chris asks the same question and well… cross-browser support and the baseline don’t mean new features are being used.

Only six percent of sites use container queries today. Is that good or bad? I don’t know.

But it seems low for one of the most requested CSS features of all time, doesn’t it? Maybe we’re too hesitant because “newly available in baseline” isn’t good enough as a ready-to-use indicator?

When I share new browser features on social media, many folks point me toward the caniuse.com usage statistics in the top right corner.

Caniuse support table highlighting 90% support usage support.

@container works for 90% of people on the planet. This statistic is based on data from global statcounter. Is this the best number, though? I’m currently working on projects with an almost pure German target audience. Should I rely on global stats, or should I fish stats out of Google Analytics to see the real deal?

By the way, Caniuse supports your analytics data, too.

And the more I think about feature adoption, the more I believe that low adoption isn’t caused by a lack of browser support or caniuse stats around 90%.

It’s because we learned to do things a certain way. As Max Böck phrases it, we’re old dogs, and old dogs don’t learn new tricks quickly. Habits are hard to break and learning new things takes time.

One step at a time — Permalink to “One step at a time” #  When learning new things, it’s important not to get overwhelmed. Pick an achieveable goal and don’t try to refactor an entire codebase all at once.

But if you bet on progressive enhancement, resist the urge to throw away everything and find a way to transform your old tricks into newer ones, you’ll be good.

What’s your take? Are you on the new’n’fancy already?

Upcoming innerHTML alternatives

The “safe” methods will not generate any markup that executes script. That is, they should be safe from XSS.

When using innerHTML, you must be careful not to expose your sites to XSS attacks. It will still take a while, but luckily, this problem is being discussed and tackled on the platform level.

Be safe

Recent Netlify primitives

1) Image CDN — A content delivery network for images. It can handle format transformation and size optimization via URL query strings. 2. Caching — Basic primitives for their server runtime that help manage the caching directives for browser, server, and CDN runtimes smoothly. 3. Blobs — A key/value (KV) storage option is automatically available to your project through their SDK.

Most of my things run on Netlify, and if yours do, too, you should check out the recent platform features: Image CDN, blobs and stale-while-revalidate are all very welcome additions to my mainly static stack.

Enrich your sites

The Gap — An exploration of the pain points that CSS gap solves.

I try to make it a habit not to define component margins anymore. Why? Components and UI elements shouldn’t affect their surroundings. Spacings should be defined in layout components to keep things reusable.

Ahmad perfectly explains the margin problem and what to use instead.

Build reusable components

You’re halfway through!

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

The wonderful weird web – Cry once a week

cry once a week. click to feel something.

No, you’re crying… 😭

Feel something

Feature: Auto Sizes for Lazy Loaded Images with Srcset

Almost to the day, a year ago, I investigated how and if responsive images would work in a world based on container queries. The problem is that responsive images are loaded and picked via the sizes attribute, which is based on viewport dimensions.

How could you make it work with containers? Of course, this problem is complicated. But people came up with a solution that will massively ease image handling. sizes=auto lets you ditch all these hard-coded size definitions for all lazy-loaded images.

But where are we with this new web dev gem? Chromium leads the way with a developer trial in 126, and Safari and Firefox are at least open to the idea. 🎉

If you want to learn more about the feature, Eric also published an excellent post on sizes=auto and possible gotchas.

Table labeled "Could I use aria-label".

Are you confused about ARIA and wonder when to safely (and correctly) use it? Bookmark this post because it includes a massive table highlighting when it’s correct to use aria-label

Use ARIA correctly

APIs shouldn’t redirect to HTTPS

TL;DR: Instead of redirecting API calls from HTTP to HTTPS, make the failure visible.

From the bucket of things I’ve never thought of, APIs that redirect to HTTPS are a security issue.

Be safe

What's new in Node.js 20?

It’s funny that we’re slowly moving away from micro modules to complete all-in-one tools. When I started, the JavaScript ecosystem’s strength was that Sindre Sorhus had written a tiny module for almost anything. But Node has become more powerful these days!

If you haven’t heard of Node’s test runner, watch mode or env file parsing, this post is for you.

Ditch some modules

Side note: I keep reading about Biome. Have you tried it? I’m that close 🤏 to trying it on my projects.

Random MDN – naturalHeight & naturalWidth

const output = document.querySelector("pre"); const image = document.querySelector("img");  image.addEventListener("load", (event) => {   const { naturalWidth, naturalHeight, width, height } = image;   output.textContent = ` .   Natural size: ${naturalWidth} x ${naturalHeight} pixels Displayed size: ${width} x ${height} pixels `; });

From the unlimited MDN knowledge archive…

I ran into an application bug a few weeks ago. It was caused by an image loader using height / width instead of naturalHeight / naturalWidth. What’s the difference? Find out more on MDN.

Calculate the aspect ratio correctly

TIL recap – case-insensitive attribute selectors

/**  * matches:  * class="foo" * class="Foo" * class="fOo" * ...  */ [class=foo i] {   color: red; }

Did you know that the CSS attribute selector supports an i flag?

Use all the attributes

New on the platform — @property

 [css-properties-values-api] Let css-properties-values-api ride the trains — resolved fixed

I successfully ignored CSS @property for quite a while because it didn’t look like it was coming anywhere near baseline support. But there’s news — Firefox 128 will ship the feature and it’s finally time to read all these tutorials on “type safe” custom properties.

Three valuable projects to have a look at

  • dlvhdr/gh-dash – A beautiful CLI dashboard for GitHub.
  • janhq/jan – An open source alternative to ChatGPT that runs 100% offline on your computer.
  • immich-app/immich – A high performance self-hosted photo and video management solution.
Input box labeled "What do you want to do with FFmpeg today?"

The FFmpeg project is THE powerhouse for optimizing, altering, and transforming video files. However, its command-line interface is anything but intuitive, so I use the same snippets all the time.

If you want to automate video tasks, ffmpeg.app might help.

Automate video tasks

As sad as it is, I agree with Cory; with AI content plastering the new web and “search giants” telling folks to eat rocks, drink urine and put glue on their pizza, you can’t trust anything anymore.

We’re going to shift from typing into an address bar to search back to typing in an actual address because we can’t trust the results of our query.

Did you learn something from this issue?

💙 Web Weekly is on its way to 5k subscribers. If you want to help me reach this milestone, share the web version with your friends. Thank you!

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

If you think there’s something that needs to be improved or something that you enjoyed, 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! 👋