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! πŸ‘‹

When will :has() and @container be ready-to-use? What's behind /.well-known URIs? How can you style the ugly file input button?

All the answers and much more are included in this week's Web Weekly. 😊

Last week started with a real banger: container size queries (@container) landed in Firefox on valentines day. What a nice surprise: we love you, too, Mozilla. β™₯️

Compat table for @container showing that all engines support it!

All three main engines support container queries now. Unfortunately, it might take a while until Samsung Internet catches up because their Chromium updates are always behind. But hey β€” very soon, the new era of CSS components begins!

But what about the other huge platform feature that will change how we build for the web β€” :has()? Well... We don't know when the :has() pseudo-class will be ready. Firefox ships it behind a flag, and they want to work on it in the first half of 2023. 🀞

Compat table for :has() showing that Firefox is missing and that their working on it first half of 2023.

Nevertheless, there's so much in the browser pipeline that keeping track is tough. I looked at other random platform features and shared my findings on Twitter.

If you check MDN, some data still needs to be updated, but Apple really is on a roll! Safari 16.4 comes with countless new additions, and the long-awaited Masonry Grid layout even made it into Tech Preview.

What a time to be a web developer!

Something that made me smile this week

Google Street View showing people wearing pigeon hats.

Neal Agarwal builds all sorts of fun and weird internet stuff. Browse neal.fun if you have a minute. It's worth it!

I spent the last ten minutes playing with his latest project, "Wonders of Street View", and well... these pigeons made me laugh.

Say Hi to the Pigeons

A β™₯️ for interactive docs

A color space visualization showing different color points.

I discovered the color palette generator "Poline". Now, I don't generate color palettes often, but these interactive docs are the next level! πŸ’―

Generate your next color palette

Well-known symbols in JavaScript

A JavaScript class that defines a well-known symbol `toPrimitive`

Many JavaScript functionalities are based on well-known symbols. How is [object MySuperFancyImplementation] implemented when you log an object? There's a symbol for it (toPrimitive). Or do you want to implement a spreadable object? There's a symbol for that (iterator), too!

This post includes many nicely nerdy examples explaining how to reimplement native JS functionality.

Implement native functionality

Handy CSS one liners

Classic holy grail CSS layout explained with CSS.

Oldie but goldie: if you're looking for ways to clean up complicated CSS with its modern counterparts, Una Kravets collected ten one-liners to help you out. πŸ’―

Celebrate modern CSS

Just post!

P.S if you think β€œno one will want to read my posts”, you’re wrong, because I do. If you think β€œX has already written about that, so I can’t”, then also, no, I want to hear your perspective, as do us all!

As you're reading this newsletter right now, you probably have noticed that I love publishing short posts. They're my second brain and often super quick to write. But let me tell you: I love reading short posts, too!

I'm always searching for more digital gardens like those from Zander Martineau or Rach Smith. Opening my RSS reader over a cup of coffee is just a delight. There's no algorithm or social platform in-between: there are only unfiltered thoughts from lovely individuals loving the web.πŸ’™

Andy Bell shared his thoughts on the topic, and the post took him 8:35min to write. And guess what? I loved reading it!

Blog it

The wonderful weird web – Fold'NFly

Instruction on how to fold a very nicely looking paper plane called "The Arrow"

Do you want to impress your spouse, family and friends with solid paper plane skills? Here you go!

Fold it!

What are your favorite internet corners? Shoot them my way, and I'll include them in Web Weekly!

Clip your overflow

CSS: :root:has(.lightbox[open]) {   overflow: clip; }

Kilian Valkhof shared how to build a lightbox component with the dialog element, and the post includes this beautiful snippet to prevent body scrolling.

As mentioned above, :has() isn't ready to use yet, but the snippet also includes overflow: clip. If you haven't seen this one before and want to learn why you need it, Kilian blogged about it, too!

Clip it

Do you implement /.well-known?

A well-known URI is a Uniform Resource Identifier for URL path prefixes that start with /.well-known/. They are implemented in webservers so that requests to the servers for well-known services or information are available at URLs consistent well-known locations across servers.

Suppose you jumped onto the Mastodon train and want to be found on your domain without hosting a Mastodon instance (e.g. stefan@stefanjudis.com); Pawel Grzybek shared how you can set up a webfinger.

A what? There's a spec defining well-known services or domain information located at the /.well-known/ URI. It could be a security.txt, a change-password definition for password managers or the mentioned webfinger holding additional information about accounts and people. Fancy stuff!

Define well-known things!

A beautiful SVG background generator

A wavy SVG background generator.

I'm so close to implementing this beautiful background on my site. I mean, look at it! πŸ’™

Generate beautiful backgrounds

A stunning range input

A range input that looks like a real handle.

As you see, I spent some time browsing CodePen this week, and this input is just wonderful. We should spend more time building beautiful and creative UIs instead of arguing about tech. πŸ˜‰

Be amazed

Random MDN – console.assert

JavaScript code using console.assert.

From the unlimited knowledge archive called MDN...

Did you know that the console object supports assertions? Now you do!

Improve your logs

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap – ::file-selector-button

File upload button with a rainbow background.

I learned that you can style the ugly file input selector button and you can read more about it on the blog. πŸ‘‡

Style native elements

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

Three valuable projects to have a look at

A new Tiny Helper

CSS Scroll shadows interface to choose colors and shadow size.

Disclaimer: this is not a new helper, but my "CSS Scroll Shadows" app received a tiny update this week.

Using background-attachment CSS magic to show shadows inside a scroll container is one of my favorite CSS tricks. Unfortunately, it has been broken in Safari for ages. It turns out, it's now fixed! πŸŽ‰

Implement scroll hints

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

Thought of the week

I've only listened to the beginning of this JavaScript Jabber podcast episode so far, but Dan Shappir shared some all-too-true wisdom about the state of the web.

C++ engineers have done an incredible job of making the web faster, while JavaScript engineers have done the utmost to make the web slower.

A song that makes you stop coding

Wild Horses β€” The Gardener & The Tree

An indie classic just entered my ears while being out for a run. "Wild horses" from The Gardener & The Tree has a piano, simple guitar and powerful chorus. Exactly my thing!

Listen to "Wild horses"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.4k emails. If you enjoy it, consider supporting me on Patreon. β™₯️

Or tell your friends about it:

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

And with that, take care of yourself - mentally, physically, and emotionally. I'll see you next time! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 18 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.