Stefan's character reading a newspaper.

Hello, hello Friends! 👋

How does Google do site reliability engineering? Is using relative CSS units (rem) to control spaces like margins and paddings a good idea? Are you ready to adopt native and relaxed CSS nesting?

This week's Web Weekly includes all the answers and much more. Enjoy!

I heard having your own font is important for successful tech companies these days. Vercel followed the playbook and released Geist.

Examples of the Geist font

Shortly after, GitHub followed. But the Octocat maintainers didn't release yet another standard coding font, but rather an entire font family — say hello to "Monaspace".

monaspace — An innovative superfamily of fonts for code.

Monaspace is a set of five variable fonts supporting the same font axes. I haven't tried it yet, but theoretically, you could mix and match the fonts, and they'll stay on the same grid. Sweet!

Five GitHub fonts: Neon, Argon, Xenon, Radon, Krypton

And I must say, I'm inclined to try Krypton on the blog because it looks nicely out of space. The fonts also support ligatures if you want to be super fancy.

But monospace fonts usually have some visual problems. The i often is too wide. The m looks squished. It's unfortunate, but that's how it has to be — it's monospace after all, right?

Example of texture healding showing that the "m" character expands whereas the "i" character narrows.

Monaspace comes with a new font feature called texture healing. Texture healing works against putting every character into the same-sized box and expands/narrows characters while keeping the text monospaced. Very funky!

I'll try the fonts in my VS Code setup and see if texture healing is nicer on the eyes.

Something that made me smile this week

A coding kitty

Please disperse; there's nothing to see here. It's just a cat being up for pair programming.

Code with the kitty

useEffect nuances

Code snippet using `useEffect` followed by a pragraph stating that there are 5 bugs in it.

Apparently, the React docs advise using a library to fetch data in your components. Why is that? Isn't it straightforward to call fetch in a useEffect hook? Well... no. And Dominik explains how the quick'n'easy useEffect approach leads to subtle bugs.

Use a library to fetch data

SRE at Google

 Lessons Learned from Twenty Years of Site Reliability Engineering — Or, Eleven things we have learned as Site Reliability Engineers at Google

Even though site reliability engineering isn't in my ballpark, I enjoyed the lessons learned while scaling projects at Google.

Keep things up!

Ways to style disabled form elements

:disabled != [disabled]

Did you know there are other ways to disable a form element than setting the disabled attribute? Šime Vidas explains why the :disabled and [disabled] CSS selectors can match different elements.

Match all disabled elements

My misconceptions about using relative CSS units

Using relative font sizes (rem) instead of pixel-based ones is a good idea because they allow users to control a site's font size via their browser settings. If someone wants to increase the overall font size, our CSS should accept this.

This practice works well on desktop, but the mobile space is less predictable. Manuel Matuzović tested how mobile browsers treat rem units, and well...

Nothing, keep using rem. People will benefit from it. It's just good to know that some (most?) operating systems and browsers do their own thing.

The relative font size handling on mobile is more than messy.

And after discovering that rem units behave inconsistently, Ashlee M Boyer came along to share that using relative units for spacing is a bad idea. I must admit I've never thought about the points she makes, but she's onto something here.

When a user is customizing their viewing experience, they thing that's most important to them and their task at hand is the content. Spacing isn't often vital for a user to perform their task, so it doesn't need to grow or scale at the same rate as the content itself.

The wonderful weird web

I didn't encounter any weird web corners this week. Can you help me out for next week? What are your favorite internet corners? Send them my way, and I'll include them in Web Weekly!

Fancy CSS buttons

A button with an interactive UI showing the layers it consists of.

Jhey Tompkins' Codepen profile is worth visiting because he publishes a ton of impressive CSS demos.

This button example coming with interactive controls blew me away.

Build fancy buttons

YouTube vs AdBlockers

The War of Attrition — Since May, uBO has been in a cat-and-mouse game with YouTube. And they’ve shown incredible resilience, especially when you consider that there are only two people on the uBO team dealing with YouTube.

If you're not paying for YouTube right now, you may have noticed that the service ramped up its efforts to nudge us all to switch to premium or at least turn off adblockers.

Zhenyi Tan describes how adblockers block ads and how YT makes it harder and harder to do so.

Play cat and mouse

Countless browser APIs

Simple Screen Recorder in 20 lines of JavaScript

Okay, this is wild! How many lines of JS do you need to record your screen and save it to a file? 20. That's it. 🤯

Start recording

Random MDN – inset-block and inset-inline

Demo from MDN visualizing `inset-block`

From the unlimited MDN knowledge archive...

You might know that inset is a shorthand for top, right, bottom and left. But did you know that there's also inset-block and inset-inline?

These properties consider the writing mode, whereas inset doesn't. 🤯

Use logical absolutes

TIL recap – reuse package.json values

package.json example that reuses a config field.

You probably want to avoid repetition if you're maintaining complex npm scripts. Reusing package.json properties might be helpful here.

Clean up your scripts

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

New to the platform

Stefan's Tweet announcing that relaxed CSS nesting landed in browsers.

It's time, friends! 🎉 This week's biggest platform news was that relaxed CSS nesting landed in all three main engines.

What's relaxed nesting? When browser vendors started looking into supporting native CSS nesting, the first draft included the limitation that nested selectors must begin with one of these characters: &@:.>~+#[*. You couldn't "just" nest things and had to prepend a & if you wanted to nest element selectors.

Luckily, this syntax limitation was relaxed, so the behavior is now closer to what we're used to from CSS processors. And Chromium was the last engine to implement the change. In a few browser releases, it's finally time to ditch some tooling and rely on native nesting. But how will browsers display nested CSS rules in the developer tools?

DevTools of the three engines showing a working example with relaxed CSS nesting.

As you see, Firefox does a good job by rendering the entire nested CSS rule. Chromium and Webkit, on the other hand, don't make it very clear what we're looking at.

Let's see when and if they will improve their dev tools.

Three valuable projects to have a look at

A new Tiny Helper

Ahref Broken Link checker

I did some blog winter cleaning, and Ahref's broken link checker was incredibly handy to get rid of links going nowhere.

Avoid linking into the void

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

Thought of the week

Did your relationship with work change over the past few years?

We made it through Covid, the climate crisis is unavoidable, the tech world has experienced mass layoffs, and multiple wars are plastering the news — many reflect on their life choices.

Sara Wachter-Boettcher published thoughts on "quiet quitting", motivation (or the lack of it) and life goals, and it included this line that made me sit down and think.

Telling yourself you should want something isn't the same as actually wanting it.

This is all, friends!

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

If 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! 👋