You can follow my Notes using any RSS reader — my personal favorite is Reeder.

Max ·

Stop paying to use a service. Start paying to host your service.
Max ·

I really enjoyed this talk by Carson Gross, the creator of htmx, about how he marketed his open source project. His insights on handling online criticism are broadly applicable.
Max ·

I’ve been using the browser console and querySelector to inspect and find certain elements on a page. Today I learned that one can also use XPath in the search field inside the elements tab. It has a different syntax than querySelector, but it can do things that CSS selectors cannot.

For example you can search for all elements with aria attributes with this XPath query:

//[@[starts-with(name(),"aria-")]]

You can find more examples and use cases for XPath in this blog post by Adrian Roselli:

adrianroselli.com/2021/04/xpath-for-in-browser-testing.html

Both Chrome and Firefox support XPath searches when in the DOM view of their dev tools.
Max ·

Even the end of Daft Punk is a symbol for integrity, vision and humanity. Thomas Bangaltar explains their decision to stop Daft Punk:

"My concerns about the rise of artificial intelligence go beyond its use in music creation," he says, suddenly serious.

"2001: A Space Odyssey is maybe my favourite film and the way [Stanley] Kubrick presented it is so relevant today - because he is asking exactly the question that we have to ask ourselves about technology and the obsolescence of man."

That's always been his position, he stresses. It's just that people sometimes misinterpreted Daft Punk's aesthetic as an unquestioning embrace of digital culture.

"I almost consider the character of the robots like a Marina Abramović performance art installation that lasted for 20 years," he says.

"We tried to use these machines to express something extremely moving that a machine cannot feel, but a human can. We were always on the side of humanity and not on the side of technology."

That's why 2021 was the right time to pull the plug on the project.

"As much as I love this character, the last thing I would want to be, in the world we live in, in 2023, is a robot."
Max ·

This is how you can use any emoji as a favicon. I stumbled upon this code in one of my side projects, which is probably copied from somewhere else. I just wanted to post this here again, so that I don’t forget about it.

<link
  rel="icon"
  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🙂</text></svg>"
/>
Max ·
Max ·
Max ·

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>
Max ·

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;
}
Max ·

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.
Max ·

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.

CSS
Max ·

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" />
Max ·
Max ·

There is no free speech on plattforms owned by billionaires.
Max ·

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

Mike Monteiro
Max ·

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

AI
Max ·

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

AI
Max ·

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“