I’m surprised that there are programmers, who actually believe adding non-deterministic tools to developer toolchains will improve productivity—unless their definition of productivity excludes quality. Because quality depends on consistency and reliability. Two things non-deterministic tools cannot offer.

The software industry has always struggled to put user experience over developer experience, but at least we’ve put our trust in deterministic tools like compilers, linters and language servers, which provide consistent feedback.

Now some people put their faith in tools, that return different outputs for the same input. How’s that gonna help with reliability and consistency?

Software quality should not depend on luck with the next token prediction.

I have a bad feeling that „You’ve prompted it wrong“ is the new „It works on my machine“.

Just displaying a link for youtube videos in my RSS feeds wasn’t good enough for me. Therefore I also added a fallback image, which tries to get the poster image of the video and displays it inside the link as well.

Let’s see how that looks like:

📺 Youtube video

I’ve noticed that youtube videos in my notes are not displayed in my RSS reader, not even as a link. This is because I didn’t provide a fallback inside the <lite-youtube> web component I’m using to render youtube videos with performance and privacy in mind.

I’ve now added a link inside the web component, that should be rendered in RSS readers as a fallback. Here is a test, that should render a link in RSS readers:

📺 Youtube video

To me the future of technology is a lot closer to Bret Victor’s vision of computational public spaces than private and centralized AI black boxes and middlemans, that try to get as much data about us as possible. It’s the complete antithesis to today’s narratives about technology.

I especially enjoyed comparing the values of urban design and computing. It’s also a bold claim, that we will always give up our privacy when computing is bound to screens, but probably true. And lastly, it’s such a good observation that we managed to build a somewhat democratic and civilized society based on very complex infrastructure systems, but never managed to make these systems transparent and visible to us, so that we can understand and therefore govern them.

Our brains haven’t changed in a hundred thousand years, but we’ve built this very complex society around ourselves, and we’ve decided that we want to collectively govern it.

We can’t do that, if we can’t see or understand how any of this works.

📺 Youtube video

Externalising thinking to an "AI" is convenient, because giving in to stupidity is convenient. Chatbots are a shortcut to incompetence disguised as a shortcut to knowledge.

Great post highlighting the problems of depending on ChatBots to do your programming work:

Because you don’t know what you don’t know. That’s the cruel joke. We’ll fill this industry with people who think they’re good, because their bot passed CI. They'll float through, confident, while the real ones - the hungry ones - get chewed up by a system that doesn’t value understanding anymore. Just output. Just tokens per second.

And what’s worse, we’ll normalize this mediocrity. Cement it in tooling. Turn it into a best practice. We'll enshrine this current bloated, sluggish, over-abstracted hellscape as the pinnacle of software. The idea that building something lean and wild and precise, or even squeezing every last drop of performance out of a system, will sound like folklore.

If that happens? If the last real programmers are drowned in a sea of button-clicking career-chasers - then I pity the smart outsider kids to come after me.

Defer your thinking to the bot, and we all rot.

Ed’s latest (very long) post is putting a lot of what I experienced in my career and what we all experience right now into words. We are living in the era of business idiots.

wheresyoured.at/the-era-of-the-business-idiot

Think of the Business Idiot as a kind of con artist, except the con has become the standard way of doing business for an alarmingly large part of …

Honest cookie banner:

“Our website would like to violate your privacy and sell your personal data.”

Cloudflare now makes it easy and free to add Google analytics behind a proxy, so that it’s harder for ad blockers to prevent Google’s tracking.

This is especially sad, since they could have made it easy and free for privacy-focused alternatives like Plausible and Pirsch instead. They already have documentation on how to do it manually with Cloudflare workers.

Another reason I should migrate away from Cloudflare…

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

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.

📺 Youtube video

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.

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."

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

I love with how little this website managed to mimic displays of old TVs. The scan lines look great and are just a pure CSS background.

hypertext.tv

Daily programming for the handmade web. Airing now.

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.