Published at
Updated at
Reading time
9min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag! Guten Tag! πŸ‘‹

Do you know that we might be able to transition to height: auto soon? Or what web features are now safe to use with the recent Safari 18 release? Ooooor… do you think the new QUERY HTTP method is a good idea?

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

Dariusz listens to "RAZ DWA TRZY - Trudno nie wierzyć w nic":

There are two unconventional instruments used in the recording. One is an African rainstick, imitating the sound of rain. The second, is an electric guitar with a soundbox, which makes the notes hit just differently. What I love the most is the guitar and all the sounds blending together that make you want to just close your eyes and relax.

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

Open tabs

Reminder: why you should set ids on your labels

Is it strictly necessary for form fields and labels to have for/id association, or is it enough to wrap the "label" around the "input". The answer is β€” Wrapping is enough in theory, but isn’t quite in practice.

There are many ways to provide an accessible name to input elements. One of them is to wrap inputs with a label element. And while this works in theory, you should still set ids. James explains why.

Add ids to your labels

Hot of the press: new CSS functions

New Values and Functions in CSS β€” The CSS Working Group released the first Public Working Draft for the CSS Values and Units Module Level 5. It describes the common values and units that CSS properties accept and the syntax used for them.

The CSS Values and Units Level 5 Spec was released, and oh boy, it comes with some good stuff.

Note that most new CSS features are still future music, but the future is bright! Alvaro summarizes and describes new features like a more powerful attr() function, sibling-count() and random().

Know what's coming to CSS

Chromium-only: Transition to height: auto

CSS code: /* Opt-in the whole page to animating to/from intrinsic sizing keywords */ :root {     interpolate-size: allow-keywords; /* πŸ‘ˆ */ }

Chrome 129 was released, and it includes not one but two solutions to yet another evergreen CSS issue β€” animating element dimensions from and to auto.

Even though you can use CSS grid for this use case today, it's just a clever hack.

Bramus shares how interpolate-size: allow-keywords; and calc-size() work. Let's hope that Mozilla and Apple agree with this new platform addition.

Animate height

Safari 18 dropped!

WebKit Features in Safari 18.0

iOS 18 and macOS Sequoia have been released, and with it, Safari 18 dropped. It's a packed release with many new features, such as style queries, JS-based view transitions and @starting-style.

If you wonder what features are safe to use today, I looked at the most exciting features when the beta was released and evaluated what features are ready for prime time.

But it's not all great...

I'm usually not a fan of all the "Safari is the new IE" chatter because the team behind it has been shipping great stuff for a while. But if you check the web platform tests and look at tests that only follow in a single browser, Safari comes in pretty "strong". :/

Web Platform Tests failing in exactly one engine. Safari leads, followed by Firefox. Chrome comes last.

This number of failing tests is especially concerning because there's still no way to use different browser engines on Safari. Every Safari bug or lacking feature can potentially hinder the web from adopting new features.

If you're curious what bugs were and are show stoppers, Roderick shared a massive summary of the current Safari affairs.

You're halfway through!

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

The wonderful weird web – Do nothing

Ease your mind. Settle into silence. And simply do nothing.

Here's a brief reminder that it's sometimes okay to do nothing.

Breathe

There might be a new HTTP method in town

QUERY /contacts HTTP/1.1 Host: example.org Content-Type: example/query Accept: text/csv  select surname, givenname, email limit 10

What are the main five HTTP methods you use when building web apps?

There's GET, POST, PUT, PATCH and DELETE. And all of them have a clearly defined purpose. There's now a new specification arguing that we need a sixth one. Why?

The spec describes that GET and POST requests should be combined to make querying complex data easier. It's still early days, but I'm super excited about this!

Peek into the future of complex data querying

A lovely blog redesign

Preview of Josh's new blog

Josh Comeau updated and slightly redesigned his blog. It's always interesting to learn about what people use, but it's a must-read because Josh's blog is one of the finest out there.

Plus, the new tiny features and attention to detail are incredible.

Build a great blog

Global DOM elements

Code example showing that elements with an id are available globally.

Short'n'sweet: here's one of my favorite little tricks when writing vanilla JS. id and name HTML attributes make DOM elements accessible on window.

Use ids

Random MDN – Simple requests

Simple requests β€” Some requests don't trigger a CORS preflight. Those are called simple requests from the obsolete CORS spec, though the Fetch spec (which now defines CORS) doesn't use that term.

From the unlimited MDN knowledge archive...

Let's talk about developers' favorite topic: Cross-Origin Resource Sharing (CORS). If your site's architecture relies on cross-origin requests, you're probably used to seeing tons of OPTIONS requests. What if I told you that not every cross-origin request requires a preflight?

It's fine to make "simple" cross-origin requests and if you haven't heard of them, MDN has you covered!

Safe the preflight

TIL recap – Exclude elements from the Google Search Results

An html snippet including multiple elements with `data-nosnippet`

Did you know you can tell GoogleBot not to include and reuse certain DOM elements on the Google Search results page? Now you do!

Tweak the search results

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

New on the platform

content-visibility new availabe in baseline 2024.

Suppose you're dealing with long lists and have to reach for virtualization libraries for performance. With Safari 18, content-visibility made it into the baseline. It's a handy and native property telling the browser that it can delay rendering DOM elements. And the best thing: delayed elements are still searchable via the browser default search. Sebastien shares what you need to know!

Delay render

Classifieds & friends

Fundamentals of Frontend Architecture

Maxi, who runs the wonderful Frontend at Scale Newsletter released a new course on Frontend architecture that's free for all subscribers.

Why should you check out Frontend at Scale? I've been reading the newsletter for a long time, and Maxi does a wonderful job explaining high-level frontend architecture concepts. Often, the newsletter makes me rethink how I tackle common coding problems. Highly recommended!

Three valuable projects to have a look at

A new Tiny Helper

For the folks drawing architecture diagrams...

Hello from Web Weekly

tldraw is a clean app for visualizing things.

"Hello from Web Weekly" (in a more rough style)

And if you prefer a rougher look, many people bet on ExcaliDraw. I prefer clean, but hey... 🀷

Both projects are open source and provide React packages to add them to your site!

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

Thought of the week

Today's coding wisdom also comes from Maxi and Frontend at Scale (if you missed it, check above πŸ‘†).

DRY isn't really about duplication of code, but about the duplication of knowledge.

Did you learn something from this issue?

πŸ’™ If so, join 15 other Web Weekly readers 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! πŸ‘‹

If you enjoyed this article...

Join 5.2k readers and learn something new every week with Web Weekly.

Web Weekly β€” Your friendly Web Dev newsletter
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles