Guten Tag! Guten Tag! 👋

Have you heard of the new Git history commands? Are you overwhelmed by Chrome's performance profiler? And do you use the inert attribute in your sites?

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

::: song by="Paul" title="Wet Leg — Tiny Desk Concert" youtube="AzUHNjKMeV4" I recently learned about the band Wet Leg when I saw them perform on NPR's Tiny Desk on YouTube. Their album moisturizer has been on repeat often since then. :::

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

I've been cleaning up some tabs the last couple of days and even though I'm no font person, here are some fonts that might come in handy in the future.

The charts below some controls. One bar chart, a sparkline and a pie chart.

Datatype is a variable font that turns text into charts. 🤯 I've got no idea how this works technically, but it can definitely be useful for inline graphics or sparklines. Disclaimer: be aware of accessibility issues. You should probably go with a role="img" and span combination when using it.

Squiggly lines that look like a paragraph and a heading.

Redacted Script is a font that looks like hand-written placeholder text. I'd love to see a skeleton placeholder with it. 😅

And if that's too fancy, Flow Block does the same but without the handwriting.

Maybe I should sit down one day to understand how all this font magic works...

If you enjoy Web Weekly, share it with your friends and family.

🦋 Bluesky
🐘 Mastodon
💼 LinkedIn

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

Web Weekly Housekeeping

This week's bag of karma points goes to Nadja and Charles!

This week's summer bag of karma points goes to Nadja and Charles, who started to support Web Weekly financially. This brings the supporter count to the amazing number of 56.

After subtracting the cost of sending and hosting, Web Weekly now makes around $160 per month. Thank you all for supporting this newsletter! ❤️

If you enjoy Web Weekly, give back with a small monthly donation on Patreon or GitHub Sponsors. It really makes a difference in these hard times of AI slop and low-effort web creation.

Something that made me smile this week

There's nothing to see here, it's just a browser running in your browser.

<a class="btn btn__small" href="https://developer.puter.com/labs/firefox-wasm/">Spin up Firefox</a>

No code

"The Last Technical Interview" → "Interviewing, it turns out, is a big game of darts. A “do I like you” dating round."
"'Code was never the hard part' is an insult to all programmers'" → "Your role and your responsibilities will be changing. Be willing to invest time and energy into better understanding fields or roles adjacent to yours."
"The Human-in-the-Loop is Tired" → "Yes the code (sorta) writes itself, but the human reviewing, directing, and course-correcting feels worse, not better."

The "No code" section turned out to be rather technical this week. 🫣 If you have good articles outside of the tech bubble, shoot them my way!

The experimental `git history` command

Git ships a new history command that makes it easier to change and fix commits. If you dislike interactive rebasing, you'll really like this one.

<a class="btn btn__small" href="https://lalitm.com/post/git-history/">Change history</a>

Element states in JavaScript and (!) CSS

element.addEventListener("focus", (event) => { if (event.target.matches(":focus-visible")) { /

I really liked this one. Daniel put CSS states (:focus-visible, :popover-open, :fullscreen etc) next to possible JavaScript implementations. He also went into the fairly new event-trigger CSS props and that's some fancy stuff!

<a class="btn btn__small" href="https://css-tricks.com/css-states-and-javascript-events/">Tailor to state</a>

New in Edge: network efficiency guardrails

Document-Policy: network-efficiency-guardrails; report-to=neg-endpoint Reporting-Endpoints: neg-endpoint="/neg-reporting/"

I dig this a lot! Edge now ships an experimental feature that warns you about and monitors network activity that isn't optimized, like uncompressed assets or large images.

Understand the performance profile

If you're intimidated by the Chrome DevTools performance tool, you'll dig this one. Joan put together a nice explainer about all the details you need to know!

The wonderful creepy weird web – cookie-less fingerprinting

For years, everyone online has known the deal: websites can fingerprint you. Identify you. Follow you around. So we decline the cookie banners. We hunt for the reject all button. We feel a little safer. Modern browsers don't really need the cookie anymore.

I'd say I was pretty aware of all the possibilities and information my browser shares about me, but it's still wild to see all this data in black and white.

<a class="btn btn__small" href="https://kuber.studio/cookie/">Know your fingerprint</a>

On overflowing images

A container with a red border showing that image can overflow.

Here's Temani yet again doing Temani things explaining how to tweak and adjust the overflow of individual images using object-fit and object-position.

The <img> element (the HTML element) is the “container”, and the image resource (the actual image) is loaded inside that “container” and becomes the “content”. We have our container-content relation so we can talk about overflow.

It's a great read to understand img fundamentals.

<a class="btn btn__small" href="https://master.dev/blog/something-nobody-told-you-about-the-image-element-it-can-overflow/">Understand images</a>

View transitions block interactions

:root { view-transition-name: none; } ::view-transition { pointer-events: none; }

Have you ever noticed that "things become unclickable" when a view transition is running? If you're running long animations, Chris shared what you can do about it.

<a class="btn btn__small" href="https://master.dev/blog/view-transitions-careful-not-to-make-stuff-unclickable/">Keep things interactive</a>

Gap decorations are rolling out — some links

.decorated { grid-template: repeat(auto-fill,minmax(30px,1fr))/ repeat(auto-fill,minmax(30px,1fr)); gap: 5px; rule: solid; rule-color: red, red, blue; rule-width: 1px, 1px, 3px; }

Since releasing the Web Weekly redesign, I've been waiting for CSS gap decorations to ship across browsers, because the design includes plenty of borders, and styling everything across viewports caused a mild headache.

CSS gap decorations are shipping in Chromium already. If you want to dive deeper, here are some links.

Gap Decorations Are Now Available, Here’s What’s New (to get started)
Let’s Play With Gap Decorations! (to get very fancy)

Visual design rules

I'm pretty sure I read this post years ago (seems to have been extended since) and I'm still following some of the rules. These easy-to-remember rules will help you out if you don't have an eye for design.

<a class="btn btn__small" href="https://anthonyhobday.com/sideprojects/saferules/">Prettify things</a>

Random MDN – `inert`

div inert label for=button2Button 2/label button id=button2I am inert/button /div

From the unlimited MDN knowledge archive...

If you're dealing with elements that shouldn't be accessible or reachable at all, the HTML inert attribute helps out!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert">Make elements inert</a>

TIL recap – `@keyframe` animations in the CSS cascade

The cascade determines what properties to apply to an element: 1. user-agent (browser) 2. user 3. author (developer) 4. CSS keyframe animations 5. author (developer) !important 6. user !important 7. user-agent (browser) !important 8. CSS transitions

Did you know that keyframe animations have a special place in the CSS cascade? No? Then this post is for you!

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/keyframe-animations-have-a-special-role-in-the-css-cascade/">Animate</a>

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

New on the baseline

Three new baseline widely available features: Array.fromAsync, avif images and :has()

There doesn't seem to be a new feature that recently went on the baseline, so let me share three things that just went baseline widely available! 🎉

I might be getting old, but it still feels like these features landed yesterday.

Three valuable projects to have a look at

overflowy/make-look-scanned – Makes PDFs look scanned.
nubjs/nub – The fast all-in-one Node.js toolkit.
terminal-image – Display images in the terminal.

A new Tiny Helper

A graph showing the comparison of testing frameworks.

The folks behind the TanStack software factory released another tool to compare npm download stats. It's not the first site that does this, but it has some more config options if you want to dive deeper.

<a class="btn btn__small" href="https://tanstack.com/stats/npm">Compare</a>

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

Thought of the week

As I'm turning 41 this week, I feel every word of this post. Keeping friendships alive often becomes hard work and "friends for life" can quickly become "people I used to know" if you're not careful.

::: highlight quote

Adult friendship became one of the most emotionally significant and least discussed losses of modern life. :::

Did you learn something from this issue?

❤️ If so, join 56 other Web Weekly supporters 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! 👋

Web Weekly #198