Published at
Updated at
Reading time
8min
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 how the LCP metric is calculated? Or when to use display: contents? Or do you wonder when we'll finally be able to style native select elements?

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

Dirk listens to "Black Coffee @ Salle Wagram in Paris, France for Cercle"

Black Coffee at this beautiful Salle Wagram in Paris. I like the smile on his face when he notices people getting into the flow.

Share your favorite song with the Web Weekly community! Right now there are no more songs left in the queue; hit reply, share your favorite tunes and keep the Web Weekly juke box going.

Let's open this week's Web Weekly with some "pretty wild hacks"...

First, here's a font that includes syntax highlighting.

Syntax-highlighted code.

How does it work? As I understand, the font includes all characters in multiple colors and then performs pattern matching to choose the correctly highlighted character. Wild!

Next off, you might know that you can't overwrite !important styles coming from the user-agent stylesheet. But what if you really want to?

Since we want to prevent these !important styles from being applied, we can essentially do this by transitioning to those styles over a very long time. Like infinity long.

Noah figured out that you could set transitions with CSS infinity. 🀯

And lastly, Bramus released a new library to detect CSS property changes.

@bramus/styleobserver

But how can he detect when a CSS property changes? He used a creative combination of CSS transitions and the fairly new transition-behavior: allow-discrete;. Wow!

Something that made me smile this week

Meme showing a character touching their screen to figure out if the macos update progress moved.

I'm no meme person, but this one made me chuckle...

And yes, I do touch my screen when I'm stuck on the macOS update dialog. πŸ˜…

The meme is from a surprisingly good post describing how to create good progress indicators.

Make progress

Open tabs

What makes good forms?

Good forms β€” I dogpiled some of my own thoughts and experiences on it. Here’s a compilation of those ideas. I’m sure this is incomplete and would love to see your list.

Dave collected thirty points describing what makes a good form.

The point mentioning navigator.onLine is interesting. Do you check if the browser's online before submitting data?

Create good forms

CSS and accessibility

Sara on stage.

Sara gave a talk about CSS and accessibility, and she does what she does best: delivering a presentation packed with valuable insights! Highly recommended.

Level up your a11y game

I summarized what I learned about accessible name computation on the blog.

What a fancy button

A fancy glowing button.

Now, this is a great-lookin' button, isn't it? Ryan used backgrounds and @property animation magic to build it. And now that @property is cross-browser supported, I'll keep this post around for my next blog redesign.

Create beautiful buttons

How is LCP evaluated?

The reason why β€œcontentful” has very different meaning in the context of LCP vs FCP is because while the two metrics sound very similar, they’re actually built on two different underlying specifications.

Oldie but goldie: now that we're all optimizing for Google's Core Web Vitals (LCP, INP and CLS), did you ever question how the largest contentful paint metric is calculated? For example, do you know there's a bits per pixel threshold an image has to pass to count as an LCP element? Tim shared very nerdy details on how the LCP metric works.

Understand the numbers

And speaking of core web vitals, Chrome officially discontinued the first input delay metric.

You're halfway through!

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

The wonderful weird web – stripe.dev

Welcome to Stripe Dot β€” Learn how to build web and mobile applications to accept payments, send payouts, and manage your business online with Stripe.

The WWW (wonderful weird web) section usually includes odd internet discoveries, but this time, it's tech-related. The fine people at Stripe released a new developer portal, and oh boy...

This page is supposed to provide links to additional resources and yet comes with a built-in terminal, music, animations... It's beautifully weird!

Discover all the easter eggs

Make sure to check the subgrid usage and play with the embedded console.

A guide on display: contents

Example showing how "display: contents" can help with column alignment.

Do you use display: contents? I haven't used it, mainly because of its bad press. It's known to include plenty of accessibility issues.

But what if you set it on generic wrapper elements? Ahmad explained how the display property helps to shuffle columns around.

Shuffle your layouts

If you're curious about the current affairs of display: contents and if it is safe to use in terms of accessibility, here's Adrian with a reaction:

Do not use display: contents on anything that can take focus or is interactive. Probably avoid it on things with richer semantics (such as tables and lists and headings and so on).

Summary: for wrapper divs it should be fine. πŸ’ͺ

CSS Triggers

CSS Triggers

Years ago, there was this one post showing what actions browsers will perform (layout, paint, composit) when you update a CSS property.

There's now a new community-led collection listing all the properties and Andrico is looking for help getting all the data up to date.

Know what to change

What's a paragraph?

The solution is to realize that a paragraph, in HTML terms, is not a logical concept, but a structural one.

What's an HTML paragraph? Easy question, right? Here's what the spec says:

The term paragraph [...] is used for more than just the definition of the p element.

Are lists are also considered paragraphs? Yep. Does this also apply to div or span elements? Double yep.

If you're now like, "WHAT!?", yes β€” I felt the same...

Understand paragraphs

Reminder: align-content: center works on block elements

Graphic showing that `align-content` works on a div to center an Emoji.

Centering elements in CSS is a solved problem. And now, with align-content working on block elements, it even got a bit easier.

"Can I use" says there's 80% global support for block-level align-content. So, if your support level is modern browsers, you could start using it.🀞

And if you're running into issues of inline elements not being perfectly centered, Temani helps out.

Random MDN – VisualViewport

Visual Viewport API

From the unlimited MDN knowledge archive...

Do you know there's a VisualViewport API that's supported in all browsers? Now you do!

Consider the visual

TIL recap – toJSON()

Result of running "node tojson.js" showing the applied "toJSON" method.

Fun fact: JSON.stringify checks for a toJSON method before serializing an object. The built-in functionality can be helpful when serializing complex objects.

Clean up your objects

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

New on the platform

Demo of an HTML/CSS-only styleable select.

I've still a long list of things that entered the web recently, but this week, the Chrome team shared that there's news on the "HTML/CSS-only styleable select" front.

The following only works in Chrome Canary, but the other browsers are interested in implementing this proposal.

See the "select future"

Classifieds & friends

Get your daily dose of tech & science news, must-read articles, interesting GitHub repositories, and big Tech failures - all packed into a 15-minute read πŸ‘‰ Join 0xCAFE!

Three valuable projects to have a look at

A new Tiny Helper

Mock API β€” Free and open source fake API for testing and prototyping.

If you're waiting for an API endpoint to implement, this API mocking helper is golden. Define your responses, call it and get rollin'!

Mock APIs

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

Thought of the week

Alex Russel is again not holding back about the current state of web affairs.

Unacceptable performance is the consequence of a chain of failures to put the user first.

Did you learn something from this issue?

πŸ’™ If so, join 14 other Web Weekly readers and support Web Weekly with a small 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