Remove third-party cookies from browsers? Yes, please!

https://w3ctag.github.io/web-without-3p-cookies/

With Safari not supporting the typed attr() function, I thought Apple users would have to wait for an update to see the improved view transitions on my website. But it turns out this is not the case!

Thanks to a toot by Bramus, I learned that Safari supports view-transition-name: auto. When the transition name is set to auto, Safari takes the good old id attribute of an HTML element to uniquely identify it during a view transition. Unfortunately Safari is currently the only browser that supports it.

But since attr() doesn’t care about which attribute it references, I simply altered the CSS I found on David Bushell’s website, which works on Chrome, changed attr() to reference id instead of data-id, and added view-transition-name: auto as a fallback for Safari.

Now view transitions work in both browsers and as a little bonus I can simply use id instead of data-id. Progressive enhancement for the win!

div[id] {
  @media not (prefers-reduced-motion: reduce) {
    view-transition-name: auto;
    view-transition-name: attr(id type(<custom-ident>), none);
    view-transition-class: your-element-type;
  }
}

<div id="unique-identifier">
  I’m my own element in Chromium and Webkit during a view transition!
</div>

I noticed that the view transitions on my website stopped working in Safari. The reason was that I moved and nested the lines for activating them inside :root. Chrome still applies them if the declaration is nested, but Safari doesn‘t.

/* nesting breaks view transitions in Webkit */
:root {
  @view-transition {
    navigation: auto;
  }
}

/* works in Webkit and Chromium */
@view-transition {
  navigation: auto;
}

I’ve just spent a long time improving the little view transition of tags on my bookmarks page. Before my fixes the text was being stretched and the transition looked out of place. So I took the time to dive into how to make view transitions look like they are supposed to and I learned quite a few things.

By far the best resource for learning about this topic is Jake Archibald’s post about handling aspect ratio changes. He also has a great video on how to debug view transitions with dev tools.

To add view transitions to specific elements on my website, I’ve copied the code I found on David Bushell’s website:

@media not (prefers-reduced-motion: reduce) {
  view-transition-name: attr(data-id type(<custom-ident>), none);
  view-transition-class: heading;
}

With this CSS you just need to add a unique data-id="id-{some_identifier}" attribute to your elements (replace {some_identifier} with a unique id) and they’ll each transition as a single object.

I’ve now added view transitions to my blog headlines, my notes and the little tag cloud on my bookmarks page.

I’ve just stumbled upon the UA+ reset with lots of interesting additions.

This lead me to finally separate my own reset.css into a second base.css, which does more than just resetting default browser styles.

The goal is that reset.css can be copied into any project to act as a baseline across projects. base.css is then setting the basic styles for the given project on top of the reset, like colors, fonts etc.

TIL: You can only add this single twitter meta tag for enabling large meta images in link previews. At least when I tested it on Discord this single tag was enough to show a bigger image. I didn’t add any other twitter meta tags.

It’s sad that websites need to add proprietary meta tags to improve link previews in other apps.

<meta name="twitter:card" content="summary_large_image" />

Apparently the web now has a JavaScript vibration API? Totally missed that.

https://vibrator.dev/ios-18 🫨

There is no free speech on plattforms owned by billionaires.

Increasing shareholder value is not a problem. It’s a desire—possibly a fetish.

📺 Youtube video

AI “Co-Pilots” successfully automated creating technical debt. Code is the easy part. Humans deeply understanding computer systems, is the hard part.

I prefer connecting with people, who grow their humane intelligence rather than artificial intelligence.

Well, I’m rebuilding my website for a third time. First I built it with Svelte, then with Astro and now I’m rebuilding it again in Kirby.

Despite having way more experience in JS than PHP, I landed on Kirby, because I finally realized that I need and want a proper CMS. And Kirby is the most enjoyable CMS for me.

My goal is to publish more on my own website, so writing and publishing there should be as easy and as enjoyable as possible. As Germans use to say: „Aller guten Dinge sind drei“