Articles – Dan Q

Dynamic Filters in Pure CSS

While working on something else entirely¹, I had a random thought:

Could the :checked and and :has pseudo-classes and the subsequent-sibling (~) selector be combined to perform interactive filtering without JavaScript?

Turns out, yes. Have a play with the filters on the side of this. You can either use:

“OR” mode, so you can show e.g. “all mammals and carnivores”, or
“AND” mode, so you can show e.g. “all mammals that are carnivores”.

Filter the animals!

(if it doesn’t work right where you are, e.g. in a feed reader, you can view it “standalone”)

The source code is available to download under the Unlicense, but the animal images are CC-BY licensed (with thanks to Aslan Almukhambetov).

How does it work?

There’s nothing particularly complicated here, although a few of the selectors are a little verbose.

First, we set the initial state of each animal. In “OR” mode, they’re hidden, because each selected checkbox is additive. In “AND” mode, they’re shown, because checking a checkbox can only ever remove an animal from the result set:

#filters:has(#filter-or:checked) ~ #animals .animal {
  display: none;
}

#filters:has(#filter-and:checked) ~ #animals .animal {
  display: flex;
}

The magic of the :has pseudo-class is that it doesn’t change the scope, which means that after checking whether “AND” or “OR” is checked within the #filters, the #animals container is still an adjacent element.

Touchscreen interactive restaurant menu with filter categories on the left and dishes for selection in the centre. — Next time you’re implementing a filter interface, like this restaurant menu, perhaps ask whether you actually *need* JavaScript.

Then all we need to do is to use daisy-chain :has to show animals with a particular class if that class is checked in “OR” mode, or to hide animals that don’t have a particular class in “AND” mode. Here’s what that looks like:

#filters:has(#filter-or:checked):has(#aquatic:checked)  ~ #animals .aquatic,
#filters:has(#filter-or:checked):has(#bird:checked)     ~ #animals .bird,
...
#filters:has(#filter-or:checked):has(#reptile:checked)  ~ #animals .reptile {
  display: flex;
}

#filters:has(#filter-and:checked):has(#aquatic:checked) ~ #animals .animal:not(.aquatic),
#filters:has(#filter-and:checked):has(#bird:checked)    ~ #animals .animal:not(.bird),
...
#filters:has(#filter-and:checked):has(#reptile:checked) ~ #animals .animal:not(.reptile) {
  display: none;
}

It could probably enjoy an animation effect to make it clearer when items are added and removed², but that’s a consideration for another day.

Many developers would be tempted to use JavaScript to implement the client-side version of a filter like this. And in some cases, that might be the right option.

But it’s always worth remembering that:

A CSS solution is almost-always more-performant than a JS one.
A JS solution is usually less-resilient than a CSS one: a CDN failure, unsupported API, troublesome content-blocker or syntax error will typically have a much larger impact on JavaScript.
For the absolutely maximum compatibility, consider what you can do in plain HTML, or on the server-side, and treat anything on the client-side as progressive enhancement.

Footnotes

¹ The thing I was actually working on when I got distracted was an OAuth provider implementation for Three Rings, connected with work that took place at this weekend’s hackathon to (eventually) bring single-sign-on “across” Three Rings CIC’s products. Eventually being the operative word.

² Such an animation should, of course, be wrapped in a @media (prefers-reduced-motion: no-preference) media query!

Avanti’s Accessibility Failure

I’m travelling by train in just over a week, and I signed up an account with Avanti West Coast, who proudly show off their Shaw Trust accessibility certificate.

Clearly that certificate only applies to their website, though, and not to e.g. their emails. When you sign up an account with them, you need to verify your email address. They send you a (HTML-only) email with a link to click. Here’s what that link looks like to a sighted person:

So far, so good. But here’s the HTML code they’re using to create that button. Maybe you’ll spot the problem:

<a href="https://www.avantiwestcoast.co.uk/train-tickets/verify-email?prospectId=12345678&customerKey=12345:1234567"
 target="_blank"
  style="font-family:Averta, Arial, Helvetica, sans-serif;">

  <div class="mobile_image"
       style="font-family:Averta, Arial, Helvetica, sans-serif; display:none; border:none; text-align:center;">

    <img width="40%"
           src="https://image.e.avantiwestcoast.co.uk/lib/fe371170756404747d1670/m/1/9069c7a2-b9ed-4188-9809-bf58592ec002.png"
           alt=""
         style="font-family:Averta, Arial, Helvetica, sans-serif;width:143px; height:40px;" />

  </div>
</a>

Despite specifying the font to use three times, they don’t actually have any alt text. So for somebody who can’t see that image, the link is completely unusable¹.

This made me angry enough that I gave up on my transaction and bought my train tickets from LNER instead.

Accessibility matters. And that includes emails. Do better, Avanti.

Footnotes

¹ Incidentally, this also makes the email unusable for privacy-conscious people who, like me, don’t routinely load remote images in emails. But that’s a secondary concern, really.

Variable-aspect adaptive-bitrate video… in vanilla HTML?

The video below is presented in portrait orientation, because your screen is taller than it is wide.

The video below is presented in landscape orientation, because your screen is wider than it is tall.

The video below is presented in square orientation (the Secret Bonus Square Video!), because your screen has approximately the same width as as its height. Cool!

This is possible (with a single <video> element, and without any Javascript!) thanks to some cool HTML features you might not be aware of, which I’ll briefly explain in the video. Or scroll down for the full details.

Variable aspect-ratio videos in pure HTML

I saw a 2023 blog post by Scott Jehl about how he helped Firefox 120 (re)gain support for the <source media="..."> attribute. Chrome added support later that year, and Safari already had it. This means that it’s pretty safe to do something like this:

<video controls>
  <source src="squareish.mp4"
        media="(min-aspect-ratio: 0.95) and (max-aspect-ratio: 1.05)" />
  <source src="portrait.mp4"
        media="(orientation: portrait)" />
  <source src="landscape.mp4" />
</video>

This code creates a video with three sources: squareish.mp4 which is shown to people on “squareish” viewports, failing that portrait.mp4 which is shown to people whose viewports are taller than wide, and failing that landscape.mp4 which is shown to anybody else.

That’s broadly-speaking how the video above is rendered. No JavaScript needed.

Browsers only handle media queries on videos when they initially load, so you can’t just tip your phone over or resize the window: you’ll need to reload the page, too. But it works! Give it a go: take a look at the video in both portrait and landscape modes and let me know what you think¹.

Adding adaptive bitrate streaming with HLS

Here’s another cool technology that you might not have realised you could “just use”: adaptive bitrate streaming with HLS!

You’ve used adaptive bitrate streaming before, though you might not have noticed it. It’s what YouTube, Netflix, etc. are doing when your network connection degrades and you quickly get dropped-down, mid-video, to a lower-resolution version².

Turns out you can do it on your own static hosting, no problem at all. I used this guide (which has a great description of the parameters used) to help me:

ffmpeg -i landscape.mp4 \
       -filter_complex "[0:v]split=3[v1][v2][v3]; [v1]copy[v1out]; [v2]scale=w=1280:h=720[v2out]; [v3]scale=w=640:h=360[v3out]" \
       -map "[v1out]" -c:v:0 libx264 -x264-params "nal-hrd=cbr:force-cfr=1" -b:v:0 5M -maxrate:v:0 5M -minrate:v:0 5M -bufsize:v:0 10M -preset slow -g 48 -sc_threshold 0 -keyint_min 48 \
       -map "[v2out]" -c:v:1 libx264 -x264-params "nal-hrd=cbr:force-cfr=1" -b:v:1 3M -maxrate:v:1 3M -minrate:v:1 3M -bufsize:v:1 3M -preset slow -g 48 -sc_threshold 0 -keyint_min 48 \
       -map "[v3out]" -c:v:2 libx264 -x264-params "nal-hrd=cbr:force-cfr=1" -b:v:2 1M -maxrate:v:2 1M -minrate:v:2 1M -bufsize:v:2 1M -preset slow -g 48 -sc_threshold 0 -keyint_min 48 \
       -map a:0 -c:a:0 aac -b:a:0 96k -ac 2 \
       -map a:0 -c:a:1 aac -b:a:1 96k -ac 2 \
       -map a:0 -c:a:2 aac -b:a:2 48k -ac 2 \
       -f hls -hls_time 2 -hls_playlist_type vod -hls_flags independent_segments -hls_segment_type mpegts \
       -hls_segment_filename landscape_%v/data%02d.ts \
       -master_pl_name landscape.m3u8 \
       -var_stream_map "v:0,a:0 v:1,a:1 v:2,a:2" landscape_%v.m3u8

This command splits the H.264 video landscape.mp4 into three different resolutions: the original “v1” (1920×1080, in my case, with 96kbit audio), “v2” (1280×720, with 96kbit audio), and “v3” (640×360, with 48kbit audio), each with a resolution-appropriate maximum bitrate, and forced keyframes every 48th frame. Then it breaks each of those into HLS segments (.ts files) and references them from a .m3u8 playlist.

The output from this includes:

Master playlist landscape.m3u8, which references the other playlists with reference to their resolution and bandwidth, so that browsers can make smart choices,
Playlists landscape_0.m3u8 (“v1”), landscape_1.m3u8 (“v2”), etc., each of which references the “parts” of that video,
Directories landscape_0/, landscape_1/ etc., each of which contain
data00.ts, data01.ts, etc.: the actual “chunks” that contain the video segments, which can be downloaded independently by the browser as-needed

Bringing it all together

We can bring all of that together, then, to produce a variable-aspect, adaptive bitrate, HLS-streamed video player… in pure HTML and suitable for static hosting:

<video controls>
  <source src="squareish.m3u8"
         type="application/x-mpegURL"
        media="(min-aspect-ratio: 0.95) and (max-aspect-ratio: 1.05)" />

  <source src="portrait.m3u8"
         type="application/x-mpegURL"
        media="(orientation: portrait)" />

  <source src="landscape.m3u8"
         type="application/x-mpegURL" />
</video>

You could, I suppose, add alternate types, poster images, and all kinds of other fancy stuff, but this’ll do for now.

That’ll “just work” in Safari and a handful of mobile browsers… but won’t display anything for most desktop browsers. Boo!

One solution is to also provide the standard .mp4 files as an alternate <source>, and that’s fine I guess, but you lose the benefit of HLS (and you have to store yet more files). But there’s a workaround:

Polyfill full functionality for all browsers

If you’re willing to use a JavaScript polyfill, you can make the code above work on virtually any device. I gave this a go, here, by:

Including the polyfill hls.js, and
Adding some JavaScript code that detects affected `<video>` elements and applying the fix if necessary:

// Find all <video>s which have HLS sources:
for( hlsVideo of document.querySelectorAll('video:has(source[type="application/x-mpegurl"]), video:has(source[type="vnd.apple.mpegurl"])') ) {
  // If the browser has native support, do nothing:
  if( hlsVideo.canPlayType('application/x-mpegurl') || hlsVideo.canPlayType('application/vnd.apple.mpegurl') ) continue;

  // If hls.js can't help fix that, do nothing:
  if ( ! Hls.isSupported() ) continue;

  // Find the best source based on which is the first one to match any applicable CSS media queries
  const bestSource = Array.from(hlsVideo.querySelectorAll('source')).find(source=>window.matchMedia(source.media).matches)

  // Use hls.js to attach the best source:
  const hls = new Hls();
  hls.loadSource(bestSource.src);
  hls.attachMedia(hlsVideo);
}

It makes me feel a little dirty to make a <video> depend on JavaScript, but if that’s the route you want to go down while we wait for HLS support to become more widespread (rather than adding different-typed sources) then that’s fine, I guess.

This was a fun dive into some technologies I’ve not had the chance to try before. A fringe benefit of being a generalist full-stack developer is that when you’re “between jobs” you get to play with all the cool things when you’re brushing up your skills before your next big challenge!

(Incidentally: if you think you might be looking to employ somebody like me, my CV is over there!)

Footnotes

¹ There definitely isn’t a super-secret “square” video on this page, though. No siree. (Shh.)

² You can tell when you get dropped to a lower-resolution version of a video because suddenly everybody looks like they’re a refugee from Legoland.

Deprecate React

I’m keeping an eye out for my next career move (want to hire me?). Off the back of that I’ve been brushing up on the kinds of skills that I might be asked to showcase in any kind of “tech test”.

Not the kind of stuff I can do with one hand tied behind my back¹, but the things for which I’d enjoy feeling a little more-confident². Stuff that’s on my CV that I’ve done and can do, but where I’d like to check before somebody asks me about it in an interview.

React? Sure, I can do that…

LinkedIn, GlassDoor, and bits of the Fediverse are a gold mine for the kinds of things that people are being asked to demonstrate in tech tests these days. Like this post:

On LinkedIn, Avantika Raj shares a coding question asked during their React Developer interview with Volkswagon Software Solutions. It reads: Create a traffic light component with green, yellow, and red lights. On clicking a button, the light should change. Initially, it should show green. After 2 minutes, it should automatically switch to red for 30 seconds, then yellow for 10 seconds, and repeat this cycle continuously. — I’d describe myself as a “stack-agnostic senior/principal full-stack/backend web developer/security engineer”³, and so this question – which feels like it’s a filter for a junior developer with a React specialisation – isn’t really my wheelhouse. Which makes it a perfect excuse for an hour of playing about with React.

My recent React experience has mostly involved Gutenberg blocks and WordPress theme component. This seemed like an excuse to check that I can wrangle a non-WordPress React stack.

Animated GIF showing traffic lights changing through their phases on-demand or on a toggleable timer. — This isn’t particularly sophisticated. I added customisable durations for each light, but otherwise it’s pretty basic.

Half an hour later, I’d proven to myself that yes, I could throw together a fresh application with React DOM and implement some React components, pass state around and whatnot.

Time to move on to the next thing, right? That’s what a normal person would do.

But that’s not the kind of person I am.

Let’s reimplement this as Web Components

What I found myself thinking was… man, this is chunky. React is… not the right tool for this job.

(Or, increasingly, any job. But I’ll get back to that.)

A minified production build of my new component and its dependencies came in at 202kB (62.3kB compressed). That feels pretty massive for something that does so-little. So as an experiment, I re-implemented my new React component as a vanilla JS Web Component using a custom element. Identical functionality, but no third-party library dependencies. Here’s what I got:

This one’s interactive. Press a button or two!

The Web Component version of this control has no dependency chain and uses no JSX, and so it has no transpilation step: the source version is production-ready. You could minify it, but modern HTTP compression makes the impact of that negligible anyway: the whole thing weighs in at 19.5kB (5.2kB compressed) without minification.

And while I appreciate of course that there’s much more to JavaScript complexity and performance than file sizes… and beyond that I appreciate that there’s a lot more to making great components than the resulting bundle size… it’s hard to argue that delivering the same functionality (and less fragility) in a twelfth of the payload isn’t significant.

But there’s a bigger point here:

React is the new jQuery

I’m alarmed by the fact that I’m still seeing job ads for “React developers”, with little more requirement than an ability to “implement things in React”.

From where I’m sitting, React is the new jQuery. It:

Was originally built to work around missing or underdeveloped JavaScript functionality
- e.g. React’s components prior to Web Components
- e.g. jQuery’s manipulation prior to document.querySelectorAll
Continued to be valuable as a polyfill and as a standard middleware while that functionality become commonplace
- e.g. React before Web Components became more standardised around 2018
- e.g. jQuery’s $.ajax until the Fetch API was a reliable replacement to XMLHttpRequest
No longer provides enough value to be worth using in a new project
- And yet somehow gets added “out of habit” for many years

If you’ve got a legacy codebase with lots of React in it, you’re still going to need React for a while. Just like how you’re likely to continue to need jQuery for a while until you can tidy up all those edge-cases where you’re using it.

(You might even be locked-in to using both React and jQuery for some time, if say you’ve got a plugin architecture that demands backwards-compatibility: I’m looking at you, WordPress!)

But just as you’re already (hopefully) working to slowly extricate your codebases from any now-unnecessary jQuery dependencies they have… you should be working on an exit plan for your React code, too. It’s done its time; it’s served its purpose: now it’s just a redundant dependency making your bundles cumbersome and harder to debug.

Everything React gives you on the client-side – components, state/hooks, routing⁴, etc. – is possible (and easy) in modern JavaScript supported in all major browsers. And if you still really want an abstraction layer, there are plenty of options (and they’re all a lot lighter than React!).

The bottom line is, I suppose…

You shouldn’t be hiring “React developers”!

If you’re building a brand new project, you shouldn’t be using React. It should be considered deprecated.

If you’ve got an existing product that depends on React… you should be thinking about how you’ll phase it out over time. And with that in mind, you want to be hiring versatile developers. They’ll benefit from some experience with React, sure, but unless they can also implement for the modern Web of tomorrow, they’ll just code you deeper into your dependency on React.

It’s time you started recruiting “Front-End Developers (React experience a plus)”. Show some long-term thinking! Or else the Web is going to move on without you, and in 5-10 years you’ll struggle to recruit people to maintain your crumbling stack.

You can download all my code and try it for yourself, if you like. The README has lots more information/spicy rants, and the whole thing’s under a public domain license so you can do whatever you like with it.

Footnotes

¹ Exploiting or patching an injection vulnerability, optimising an SQL query, implementing a WordPress plugin, constructing a CircleCI buildchain, expanding test coverage over a Rubygem, performing an accessibility audit of a web application, extending a set of high-performance PHP-backed REST endpoints, etc. are all – I’d hope! – firmly in the “hold my beer” category of tech test skills I’d ace, for example. But no two tech stacks are exactly alike, so it’s possible that I’ll want to brush up on some of the adjacent technologies that are in the “I can do it, but I might need to hit the docs pages” category.

² It’s actually refreshing to be learning and revising! I’ve long held that I should learn a new programming language or framework every year or two to stay fresh and to keep abreast of what’s going on in world. I can’t keep up with every single new front-end JavaScript framework any more (and I’m not sure I’d want to!)! But in the same way as being multilingual helps unlock pathways to more-creative thought and expression even if you’re only working in your native tongue, learning new programming languages gives you a more-objective appreciation of the strengths and weaknesses of what you use day-to-day. tl;dr: if you haven’t written anything in a “new” (to you) programming language for over a year, you probably should.

³ What do job titles even mean, any more? 😂 A problem I increasingly find is that I don’t know how to describe what I do, because with 25+ years of building stuff for the Web, I can use (and have used!) most of the popular stacks, and could probably learn a new one without too much difficulty. Did I mention I’m thinking about my next role? If you think we might “click”, I’d love to hear from you…

⁴ Though if you’re doing routing only on the client-side, I already hate you. Consider for example the SlimJS documentation which becomes completely unusable if a third-party JavaScript CDN fails: that’s pretty fragile!

Halifax Shared My Credit Agreement!

Remember that hilarious letter I got from British Gas a in 2023 where they messed-up my name? This is like that… but much, much worse.

Today, Ruth and JTA received a letter. It told them about an upcoming change to the agreement of their (shared, presumably) Halifax credit card.

Except… they don’t have a shared Halifax credit card. Could it be a scam? Some sort of phishing attempt, maybe, or perhaps somebody taking out a credit card in their names?

I happened to be in earshot and asked to take a look at the letter, and was surprised to discover that all of the other details – the last four digits of the card, the credit limit, etc. – all matched my Halifax credit card.

Carefully-censored letter from Halifax, highlighting the parts that show my correct address, last four digits of my card, and my credit limit... and where it shows a pair of names that are not mine. — Halifax sent a letter to me, about *my credit card*… but addressed it to… *two other people I live with*‽

I spent a little over half an hour on the phone with Halifax, speaking to two different advisors, who couldn’t fathom what had happened or how. My credit card is not (and has never been) a joint credit card, and the only financial connection I have to Ruth and JTA is that I share a mortgage with them. My guess is that some person or computer at Halifax tried to join-the-dots from the mortgage outwards and re-assigned my credit card to them, instead?

Eventually I had to leave to run an errand, so I gave up on the phone call and raised a complaint with Halifax in writing. They’ve promised to respond within… eight weeks. Just brilliant.

Breakups vs Layoffs

I’ve had a few breakups, but I’ve only been made redundant once. There’s a surprising overlap between the two…

And with that, I’d better get back to it. Today’s mission is to finish checking-in on my list of “companies I’ve always admired and thought I should work for” and see if any of them are actively looking for somebody like me!

(Incidentally: if you’re into open source, empowering the Web, and making the world a better place, my CV is over here. I’m a senior/principal full-stack engineer with a tonne of experience in some radically diverse fields, and if you think we’d be a good match then I’d love to chat!)

Geocities Live

I used Geocities.live to transform the DanQ.me homepage into “Geocities style” and I’ve got to say… I don’t hate what it came up with

Let’s put aside for the moment that you can already send my website back into “90s mode” and dive into this take on how I could present myself in a particularly old-school way. There’s a few things I particularly love:

It’s actually quite lightweight: ignore all the animated GIFs (which are small anyway) and you’ll see that, compared to my current homepage, there are very few images. I’ve been thinking about going in a direction of less images on the homepage anyway, so it’s interesting to see how it comes together in this unusual context.
The page sections are solidly distinct: they’re a mishmash of different widths, some of which exhibit a horrendous lack of responsivity, but it’s pretty clear where the “recent articles” ends and the “other recent stuff” begins.
The post kinds are very visible: putting the “kind” of a post in its own column makes it really clear whether you’re looking at an article, note, checkin, etc., much more-so than my current blocks do.

90s web design was very-much characterised by:

performance – nobody’s going to wait for your digital photos to download on narrowband connections, so you hide them behind descriptive links or tiny thumbnails, and
pushing the boundaries – the pre-CSS era of the Web had limited tools, but creators worked hard to experiment with the creativity that was possible within those limits.

Those actually… aren’t bad values to have today. Sure, we’ve probably learned that animated backgrounds, tables for layout, and mystery meat navigation were horrible for usability and accessibility, but that doesn’t mean that there isn’t still innovation to be done. What comes next for the usable Web, I wonder?

The only thing I can fault it on is that it assumes that I’d favour Netscape Navigator: in fact, I was a die-hard Opera-head for most of the nineties and much of the early naughties, finally switching my daily driver to Firefox in 2005.

I certainly used plenty of Netscape and IE at various points, though, but I wasn’t a fan of the divisions resulting from the browser wars. Back in the day, I always backed the ideals of the “Viewable With Any Browser” movement.

I guess I still do.

ChatGPT beats GeoGuessr

You’ve probably come across GeoGuessr already: it’s an online game where you (and friends, if you’ve got them) get dropped into Google Street View and have two minutes to try to work out where in the world you are and drop a pin on it.

A great strategy is to “walk around” a little, looking for landmarks, phone numbers, advertisements, linguistic clues, cultural indicators, and so on, narrowing down the region of the world you think you’re looking at before committing to a country or even a city. You’re eventually scored by how close you are to the actual location.

Cheating at GeoGuessr

I decided to see if ChatGPT can do better than me. Using only the free tier of both GeoGuessr and ChatGPT¹, I pasted screenshots of what I was seeing right into ChatGPT:

That’s pretty spooky, right?

The response came back plenty fast enough for me to copy-and-paste the suggested address into Google Maps, get the approximate location, and then drop a pin in the right place in GeoGuessr. It’s probably one of my most-accurate guesses ever.

This isn’t a one-off fluke. I tried again, this time using only a single photo, rather than one pointing in each direction on the street:

This time, it wasn’t quite right: the actual location of the photo was Chittagong, not Dhaka, about 200km away.

But that’s still reasonably spectacular from only a single vantage from a single point.

Obviously my approach here was crude, but it’d be relatively easy to, for example, implement a browser wrapper that cheated on-your-behalf: while playing GeoGuessr, you’d just click a “send to AI” button whenever you fancied and it’d start working in the background, improving precision with each subsequent screenshot (so you could still “walk around” and pass extra details to it).

And similarly, a little prompt manipulation could have the output include estimated GPS coordinates, allowing the code to place the pin for you while outputting its reasoning on the side².

The short of what I’m saying is: if you’re playing GeoGuessr against somebody you don’t trust not to cheat… they might well be cheating. And thanks to the explanatory output, they can even justify their explanations for the places they dropped pins.

What about other photos?

The other thought that comes to my mind is: could this be used to infer approximate geolocations from photos whose EXIF metadata has been stripped. Because if so, that’s the kind of thing that’s certain to get exploited by all kind of people who want to know where you are/were at a particular time. For example… law enforcement, stalkers, and other unsavoury types.

I wrote a prompt for gpt4o and put it to work:

1. Starting out easy

The Logos Hope docked at the Port of Spain cruise ship terminal, Trinidad & Tobago. — I took this photo from the balcony of our first hotel during Ruth and I’s trip to Trinidad & Tobago.

The AI guessed:

Location: Port of Spain, Trinidad and Tobago

Explanation: The photograph shows a large ship docked at a port with a building that displays the text “WELCOME TO PORT OF SPAIN”. This text is in English, indicating an English-speaking country. The mention of “Port of Spain” directly specifies the port’s location in the capital city of Trinidad and Tobago. The design and style of the port facilities, as well as the presence of a ship named “Logos Hope”, which is known to visit many ports globally, further suggests a Caribbean port, aligning with Port of Spain’s known characteristics.

Coordinates: 10.6549, -61.5011

✅ That was pretty easy, to be fair.

2. A little more challenging

A squat neolithic stone circle with many stones (some might say an uncountable number). A dog pulls at her lead to follow one of her humans more-closely around it. — We have an annual tradition of visiting this particular monument.

The AI guessed:

Location: The Rollright Stones, England, United Kingdom

Explanation: The photograph depicts an area with several ancient standing stones arranged in a circle in a rural setting, characteristic of a stone circle. These are typically found in certain parts of the UK. The terrain is typical of the British countryside, with a grassy field and surrounding trees. The specific arrangement and size of the stones, along with the style of fencing and walking paths, are reminiscent of the Rollright Stones, one of Britain’s historic sites known for a circle of Neolithic or Bronze Age standing stones located in Oxfordshire, England.

Coordinates: 51.9743, -1.5731

✅ Again, spot on. If you’d never been to the Rollright Stones, you probably wouldn’t get that one, because while it’s a distinctive-looking stone circle… it’s not that distinctive-looking, right? Let’s be honest: it’s some rocks in a field.

3. Ramping up the difficulty

The AI guessed:

Location: Istanbul, Turkey

Explanation: The photograph prominently features the Galata Tower in the background, a well-known landmark in Istanbul, Turkey. Moreover, the presence of a ferry or similar boat and the architectural style of the surrounding buildings are indicative of Istanbul’s famous skyline. The signage in Turkish, as suggested by the word partially visible on the left, also supports this location as Turkey is a predominantly Turkish-speaking country. These elements combined make it highly likely that the photograph was taken in Istanbul.

Coordinates: 41.0082, 28.9784

✅ The coordinates aren’t exactly right – it’s placed us in the city rather than on a boat, which we clearly are – but it’s not done badly. Spotting the Galata Tower³ was a nice move.

4. Okay, now hard mode:

Dan waves to the camera in front of a pleasure marina and revitalised docklands. — This photo is from 3Camp⁴ last year.

The AI guessed:

Location: Cardiff Bay, Cardiff, Wales, United Kingdom

Explanation: The photograph features a marina with modern residential buildings, which is characteristic of the Cardiff Bay area in Cardiff, Wales. The architecture, clear blue skies, and marina setting are reminiscent of Cardiff’s waterfront development. Additionally, the presence of English signage on the boat (“FINBAR”) supports a location in an English-speaking country. Cardiff Bay is known for its redeveloped waterfront area with modern apartments and leisure facilities surrounding the marina. The style and design of the building are consistent with developments in Cardiff’s revitalized docklands.

Coordinates: 51.4626, -3.1678

❌ Oops! Nope. I can see the thinking of what it’s claiming, there, but this was actually the Ipswich marina. I went for a walk to take a break from the code I’d been writing and took this somewhere in the vicinity of the blue plaque for Edward Ardizzone that I’d just spotted (I was recording a video for my kids, who’ve enjoyed several of his Tim… books).

So I don’t think this is necessarily a game-changer for Internet creeps yet. So long as you’re careful not to post photos in which you’re in front of any national monuments and strip your EXIF metadata as normal, you’re probably not going to give away where you are quite yet.

Footnotes

¹ And in a single-player game only: I didn’t actually want to cheat anybody out of a legitimate victory!

² I’m not going to implement GeoCheatr, as I’d probably name it. Unless somebody feels like paying me to do so: I’m open for freelance work right now, so if you want to try to guarantee the win at the GeoGuessr World Championships (which will involve the much-riskier act of cheating in person, so you’ll want a secret UI – I’m thinking a keyboard shortcut to send data to the AI, and an in-ear headphone so it can “talk” back to you?), look me up? (I’m mostly kidding, of course: just because something’s technically-possible doesn’t mean it’s something I want to do, even for your money!)

³ Having visited the Galata Tower I can confirm that it really is pretty distinctive.

⁴ 3Camp is Three Rings‘ annual volunteer get-together, hackathon, and meetup. People come together for an intensive week of making-things-better for charities the world over.

Change Your Star Sign

My star sign is Aquarius. Aquarians are, according to tradition: deep, imaginative, original, and uncompromising. That sounds like a pretty good description of me, right?

Dan, in a library, smiles as he holds up a certificate that certifies that he is an Aquarius. — You can tell that I’m an Aquarius, because I’ve got a certificate to say so.

Now some of you might be thinking, “Hang on, wasn’t Dan born very close to the start of the year, and wouldn’t that make him a Capricorn, not an Aquarius?” I can understand why you’d think that.

And while it’s true that I was assigned the star sign of Capricorn at my birth, it doesn’t really represent me very well. Capricorns are, we’re told, serious, disciplined, and good with money. Do any of those things remotely sound like me? Not so much.

So many, many years ago I changed my star sign to Aquarius (I can’t remember exactly when, but I’d done it a long while before I wrote the linked blog post, which in turn is over 14 years old…).

Book, held open, showing astrological symbols. — It doesn’t say anything in here to suggest that I *can’t* change my star sign.

I’ve been told that it’s not possible to change one’s star sign.

But really: who has the right to tell you what your place in the zodiac is, really? Just you.

And frankly, people telling you who you can and can’t be is so last millennium. By now, there’s really no excuse for not accepting somebody’s identity, whether it’s for something as trivial as their star sign… or as important as their gender, sexuality, or pronouns.

Screenshot from ChangeYourStarSign.com. — In hindsight, I probably should have launched this website *yesterday* and called it an April Fool. But I completely forgot that I’d planned to until an entire day afterwards, so you get it now.

All of which is to say: I’ve launched a(nother) stupid website, ChangeYourStarSign.com. Give it a go!

It’s lightweight, requires no JS or cookies, does no tracking, and can run completely offline or be installed to your device, and it makes it easier than ever for you to change your star sign. Let’s be honest: it was pretty easy anyway – just decide what your new star sign is – but if you’d rather have a certificate to prove it, this site’s got you covered.

Whether you change your star sign to represent you better, to sidestep an unfortuitous horoscope (or borrow a luckier one), or for some other reason, I’d love to hear what you change it to and how you get on with it. What’s your new star sign?

Delivery Songs

Duration 7:01

Podcast Version

This post is also available as a podcast. Listen here, download for later, or subscribe wherever you consume podcasts.

Here in the UK, ice cream vans will usually play a tune to let you know they’re set up and selling¹. So when you hear Greensleeves (or, occasionally, Waltzing Matilda), you know it’s time to go and order yourself a ninety-nine.

On a verdant manicured lawn under a summer sky, two parents walk barefoot after their young child, who is running towards a traditionally-coloured yellow-and-white British ice cream van with visible branding reading 'fresh dairy ice cream' and '99 flake'. — Bet you want a double-99 with monkey’s blood now, right? If not, maybe hearing the chime will make the difference.

Imagine my delight, then, when I discover this week that ice cream vans aren’t the only services to play such jaunty tunes! I was sat with work colleagues outside İlter’s Bistro on Meşrutiyet Cd. in Istanbul, enjoying a beer, when a van carrying water pulled up and… played a little song!

And then, a few minutes later – as if part of the show for a tourist like me – a flatbed truck filled with portable propane tanks pulled up. Y’know, the kind you might use to heat a static caravan. Or perhaps a gas barbeque if you only wanted to have to buy a refill once every five years. And you know what: it played a happy little jingle, too. Such joy!

A grey-haired man wearing a t-shirt and blue jeans leans casually against the open doors of a white van that's visibly filled floor-to-ceiling with 19-litre 'water cooler style' water bottles, plus a pallet lifter. The van is parked between red-and-white striped cones on an Istanbul street. — In Istanbul, people put out their empty water bottles to be swapped-out for full ones by the water delivery man².

My buddy Cem, who’s reasonably local to the area, told me that this was pretty common practice. The propane man, the water man, etc. would all play a song when they arrived in your neighbourhood so that you’d be reminded that, if you hadn’t already put your empties outside for replacement, now was the time!

And then Raja, another member of my team, observed that in his native India, vegetable delivery trucks also play a song so you know they’re arriving. Apparently the tune they play is as well-standardised as British ice cream vans are. All of the deliveries he’s aware of across his state of Chennai play the same piece of music, so that you know it’s them.

It got me thinking: what other delivery services might benefit from a recognisable tune?

Bin men: I’ve failed to put the bins out in time frequently enough, over the course of my life, that a little jingle to remind me to do so would be welcome⁴! (My bin men often don’t come until after I’m awake anyway, so as long as they don’t turn the music on until after say 7am they’re unlikely to be a huge inconvenience to anybody, right?) If nothing else, it’d cue me in to the fact that they were passing so I’d remember to bring the bins back in again afterwards.
Fish & chip van: I’ve never made use of the mobile fish & chip van that tours my village once a week, but I might be more likely to if it announced its arrival with a recognisable tune.

Milkman: I’ve a bit of a gripe with our milkman. Despite promising to deliver before 07:00 each morning, they routinely turn up much later. It’s particularly troublesome when they come at about 08:40 while I’m on the school run, which breaks my routine sufficiently that it often results in the milk sitting unseen on the porch until I think to check much later in the day. Like the bin men, it’d be a convenience if, on running late, they at least made their presence in my village more-obvious with a happy little ditty!
Emergency services: Sirens are boring. How about if blue light services each had their own song. Perhaps something thematic? Instead of going nee-naw-nee-naw, you’d hear, say, de-do-do-do-de-dah-dah-dah and instantly know that you were hearing The Police.
Evri: Perhaps there’s an appropriate piece of music that says “the courier didn’t bother to ring your doorbell, so now your parcel’s hidden in your recycling box”? Just a thought.

Anyway: the bottom line is that I think there’s an untapped market for jolly little jingles for all kinds of delivery services, and Turkey and India are clearly both way ahead of the UK. Let’s fix that!

Footnotes

¹ It’s not unheard of for ~~cruel~~ clever parents to try to teach their young children that the ice cream van plays music only to let you know it’s sold out of ice cream. A devious plan, although one I wasn’t smart (or evil?) enough to try for myself.

² The official line from the government is that the piped water is safe to drink, but every single Turkish person I spoke to on the subject disagreed and said that I shouldn’t listen to… well, most of what the government says. Having now witnessed first-hand the disparity between the government’s line on the unrest following the arrest of the opposition’s presidential candidate and what’s actually happening on the ground, I’m even more inclined to listen to the people.

³ My gas delivery man should also have his own song, of course. Perhaps an instrumental cover of Burn Baby Burn?

⁴ Perhaps bin men could play Garbage Truck by Sex Bob-Omb/Beck? That seems kinda fitting. Although definitely not what you want to be woken up with if they turn the speakers on too early…

Feed Readers Beat Doomscrolling

The news has, in general, been pretty terrible lately.

Like many folks, I’ve worked to narrow the focus of the things that I’m willing to care deeply about, because caring about many things is just too difficult when, y’know, nazis are trying to destroy them all.

I’ve got friends who’ve stopped consuming news media entirely. I’ve not felt the need to go so far, and I think the reason is that I already have a moderately-disciplined relationship with news. It’s relatively easy for me to regulate how much I’m exposed to all the crap news in the world and stay focussed and forward-looking.

The secret is that I get virtually all of my news… through my feed reader (some of it pre-filtered, e.g. my de-crappified BBC News feeds).

FreshRSS screenshot showing a variety of feeds categorised as Communities, Distractions, Geeky, YouTube, News, Strangers, etc. Posts from yesterday and today are visible. — I use FreshRSS and I love it. But really: *any* feed reader can improve your relationship with the Web.

Without a feed reader, I can see how I might feel the need to “check the news” several times a day. Pick up my phone to check the time… glance at the news while I’m there… you know how to play that game, right?

But with a feed reader, I can treat my different groups of feeds like… periodicals. The news media I subscribe to get collated in my feed reader and I can read them once, maybe twice per day, just like a daily newspaper. If an article remains unread for several days then, unless I say otherwise, it’s configured to be quietly archived.

My current events are less like a firehose (or sewage pipe), and more like a bottle of (filtered) water.

Categorising my feeds means that I can see what my friends are doing almost-immediately, but I don’t have to be disturbed by anything else unless I want to be. Try getting that from a siloed social network!

Maybe sometimes I see a new breaking news story… perhaps 12 hours after you do. Is that such a big deal? In exchange, I get to apply filters of any kind I like to the news I read, and I get to read it as a “bundle”, missing (or not missing) as much or as little as I like.

On a scale from “healthy media consumption” to “endless doomscrolling”, proper use of a feed reader is way towards the healthy end.

If you stopped using feeds when Google tried to kill them, maybe it’s time to think again. The ecosystem’s alive and well, and having a one-stop place where you can enjoy the parts of the Web that are most-important to you, personally, in an ad-free, tracker-free, algorithmic-filtering-free space that you can make your very own… brings a special kind of peace that I can highly recommend.

WebDX: Does More Mean Better?

Enumerating Web features

The W3C‘s WebDX Community Group this week announced that they’ve reached a milestone with their web-features project. The project is an effort to catalogue browser support for Web features, to establish an understanding of the baseline feature set that developers can rely on.

That’s great, and I’m in favour of the initiative. But I wonder about graphs like this one:

The graph shows the increase in time of the number of features available on the Web, broken down by how widespread they are implemented across the browser corpus.

The shape of that graph sort-of implies that… more features is better. And I’m not entirely convinced that’s true.

Does “more” imply “better”?

Don’t get me wrong, there are lots of Web features that are excellent. The kinds of things where it’s hard to remember how I did without them. CSS grids are for many purposes an improvement on flexboxes; flexboxes were massively better than floats; and floats were an enormous leap forwards compared to using tables for layout! The “new” HTML5 input types are wonderful, as are the revolutionary native elements for video, audio, etc. I’ll even sing the praises of some of the new JavaScript APIs (geolocation, web share, and push are particular highlights).

But it’s not some kind of universal truth that “more features means better developer experience”. It’s already the case, for example, that getting started as a Web developer is harder than it once was, and I’d argue harder than it ought to be. There exist complexities nowadays that are barriers to entry. Like the places where the promise of a progressively-enhanced Web has failed (they’re rare, but they exist). Or the sheer plethora of features that come with caveats to their use that simply must be learned (yes, you need a <meta name="viewport">; no, you can’t rely on JS to produce content).

Meanwhile, there are technologies that were standardised, and that we did need, but that never took off. The <keygen> element never got implemented into the then-dominant Internet Explorer (there were other implementation problems too, but this one’s the killer). This made it functionally useless, which meant that its standard never evolved and grew. As a result, its implementation in other browsers stagnated and it was eventually deprecated. Had it been implemented properly and iterated on, we’d could’ve had something like WebAuthn over a decade earlier.

Which I guess goes to show that “more features is better” is only true if they’re the right features. Perhaps there’s some way of tracking the changing landscape of developer experience on the Web that doesn’t simply count enumerate a baseline of widely-available features? I don’t know what it is, though!

A simple web

Mostly, the Web worked fine when it was simpler. And while some of the enhancements we’ve seen over the decades are indisputably an advancement, there are also plenty of places where we’ve let new technologies lead us astray. Third-party cookies appeared as a naive consequence of first-party ones, but came to be used to undermine everybody’s privacy. Dynamic DOM manipulation started out as a clever idea to help with things like form validation and now a significant number of websites can’t even show their images – or sometimes their text – unless their JavaScript code gets downloaded and interpreted successfully.

A blog post, news article, or even an eCommerce site or social networking platform doesn’t need the vast majority of the Web’s “new” features. Those features are important for some Web applications, but most of the time, we don’t need them. But somehow they end up being used anyway.

Whether or not the use of unnecessary new Web features is a net positive to developer experience is debatable. But it’s certainly not often to the benefit of user experience. And that’s what I care about.

This blog post, of course, can be accessed with minimal features: it’s even available over ultra-lightweight Gemini at gemini://danq.me/posts/webdx-does-more-mean-better/, and I’ve also written it as plain text on my plain text blog (did you know about that?).

Work Slippers

Duration 5:28

Podcast Version

This post is also available as a podcast. Listen here, download for later, or subscribe wherever you consume podcasts.

Last month my pest of a dog destroyed my slippers, and it was more-disruptive to my life than I would have anticipated.

A French Bulldog looks-on guiltily at a hand holding the remains of a pair of slippers that have been thoroughly shredded. — Look what you did, you troublemaker.

Sure, they were just a pair of slippers¹, but they’d become part of my routine, and their absence had an impact.

Routines are important, and that’s especially true when you work from home. After I first moved to Oxford and started doing entirely remote work for the first time, I found the transition challenging². To feel more “normal”, I introduced an artificial “commute” into my day: going out of my front door and walking around the block in the morning, and then doing the same thing in reverse in the evening.

It turns out that in the 2020s my slippers had come to serve a similar purpose – “bookending” my day – as my artificial commute had over a decade earlier. I’d slip them on when I was at my desk and working, and slide them off when my workday was done. With my “work” desk being literally the same space as my “not work” desk, the slippers were a psychological reminder of which “mode” I was in. People talk about putting on “hats” as a metaphor for different roles and personas they hold, but for me… the distinction was literal footwear.

And so after a furry little monster (who for various reasons hadn’t had her customary walk yet that day and was probably feeling a little frustrated) destroyed my slippers… it actually tripped me up³. I’d be doing something work-related and my feet would go wandering, of their own accord, to try to find their comfortable slip-ons, and when they failed, my brain would be briefly tricked into glancing down to look for them, momentarily breaking my flow. Or I’d be distracted by something non-work-related and fail to get back into the zone without the warm, toe-hugging reminder of what I should be doing.

It wasn’t a huge impact. But it wasn’t nothing either.

A pair of brown slippers, being worn, in front of a French bulldog asleep in her basket, her tongue sticking out. — The bleppy little beast hasn’t expressed an interest in my *replacement* slippers, yet. Probably because they’re still acquiring the smell of my feet, which I’m guessing is what interested her in the first place.

So I got myself a new pair of slippers. They’re a different design, and I’m not so keen on the lack of an enclosed heel, but they solved the productivity and focus problem I was facing. It’s strange how such a little thing can have such a big impact.

Oh! And d’ya know what? This is my hundredth blog post of the year so far! Coming on only the 73rd day of the year, this is my fastest run at #100DaysToOffload yet (my previous best was last year, when I managed the same on 22 April). 73 is exactly a fifth of 365, so… I guess I’m on track for a mammoth 500 posts this year? Which would be my second-busiest blogging year ever, after 2018. Let’s see how I get on…⁴

Footnotes

¹ They were actually quite a nice pair of slippers. JTA got them for me as a gift a few years back, and they lived either on my feet or under my desk ever since.

² I was working remotely for a company where everybody else was working in-person. That kind of hybrid setup is a lot harder to do “right”, as many companies in this post-Covid-lockdowns age have discovered, and it’s understandable that I found it somewhat isolating. I’m glad to say that the experience of working for my current employer – who are entirely distributed – is much more-supportive.

³ Figuratively, not literally. Although I would probably have literally tripped over had I tried to wear the tattered remains of my shredded slippers!

⁴ Back when I did the Blog Questions Challenge I looked at my trajectory and estimated I wouldn’t hit a hundred this year until a week later than now, so maybe I’m… accelerating?

A Prayer for the Crown-Shy by Becky Chambers

As soon as I finished reading its prequel, I started reading Becky Chambers’ A Prayer for the Crown-Shy (and then, for various work/life reasons, only got around to publishing my micro-review just now).

The book carries on directly from where A Psalm for the Wild-Built left off, to such a degree that at first I wondered whether the pair might have been better published as a single volume. But in hindsight, I appreciate the separation: there’s a thematic shift between the two that benefits from a little (literal) bookending.

Both Wild-Built and Crown-Shy look at the idea of individual purpose and identity, primarily through the vehicle of relatable protagonist Sibling Dex as they very-openly seek their place in the world, and to a lesser extent through the curiosity and inquisitiveness of the robot Mosscap.

But the biggest difference in my mind between the ways in which the two do so is the source of the locus of evaluation: the vast majority of Wild-Built is experienced only by Dex and Mosscap, alone together in the wilderness at the frontier between their disparate worlds. It maintains an internal locus of evaluation, with Dex asking questions of themselves about why they feel unfulfilled and Mosscap acting as a questioning foil and supportive friend. Crown-Shy, by contrast, pivots to a perceived external locus of evaluation: Dex and Mosscap return from the wilderness to civilisation, and both need to adapt to the experience of celebrity, questioning, and – in Mosscap’s case – a world completely-unfamiliar to it.

By looking more-carefully at Dex’s society, the book helps to remind us about the diverse nature of humankind. For example: we’re shown that even in a utopia, individual people will disagree on issues and have different philosophical outlooks… but the underlying message is that we can still be respectful and kind to one another, despite our disagreement. In the fourth chapter, the duo visit a coastland settlement whose residents choose to live a life, for the most part, without the convenience of electricity. By way of deference to their traditions, Dex (with their electric bike) and Mosscap (being an electronic entity) wait outside the village until invited in by one of the residents, and the trio enjoy a considerate discussion about the different value systems of people around the continent while casting fishing lines off a jetty. There’s no blame; no coercion; and while it’s implied that other residents of the village are staying well clear of the visitors, nothing more than this exclusion and being-separate is apparent. There’s sort-of a mutual assumption that people will agree-to-disagree and get along within the scope of their shared vision.

Which leads to the nub of the matter: while it appears that we’re seeing how Dex is viewed by others – by those they disagree with, by those who hold them with some kind of celebrity status, by their family with whom they – like many folks do – share a loving but not uncomplicated relationship – we’re actually still experiencing this internally. The questions on Dex’s mind remain “who am I?”, “what is my purpose?”, and “what do I want?”… questions only they can answer… but now they’re considering them from the context of their relationship with everybody else in their world, instead of their relationship with themself.

Everything I just wrote reads as very-pretentious, for which I apologise. The book’s much better-written than my review! Let me share a favourite passage, from a part of the book where Dex is introducing Mosscap to ‘pebs’, a sort-of currency used by their people, by way of explanation as to why people whom Mosscap had helped had given it pieces of paper with numbers written on (Mosscap not yet owning a computer capable of tracking its balance). I particularly love Mosscap’s excitement at the possibility that it might own things, an experience it previous had no need for:

…

Mosscap smoothed the crease in the paper, as though it were touching something rare and precious. “I know I’m going to get a computer, but can I keep this as well?”

“Yeah,” Dex said with a smile. “Of course you can.”

“A map, a note, and a pocket computer,” Mosscap said reverently. “That’s three belongings.” It laughed. “I’ll need my own wagon, at this rate.”

“Okay, please don’t get that much stuff,” Dex said. “But we can get you a satchel or something, if you want, so you don’t have things rattling around inside you.”

Mosscap stopped laughing, and looked at Dex with the utmost seriousness. “Could I really?” it said quietly. “Could I have a satchel?”

…

That’s just a heartwarming and childlike response to being told that you’re allowed to own property of your very own. And that’s the kind of comforting joy that, like its prequel, the entire book exudes.

A Prayer for the Crown-Shy is not quite so wondrous as A Psalm for the Wild-Built. How could it be, when we’re no longer quite so-surprised by the enthralling world in which it’s set. But it’s still absolutely magnificent, and I can wholeheartedly recommend the pair.

AI vs The Expert

Duration 8:44

Podcast Version

This post is also available as a podcast. Listen here, download for later, or subscribe wherever you consume podcasts.

The Expert

Eleven years ago, comedy sketch The Expert had software engineers (and other misunderstood specialists) laughing to tears at the relatability of Anderson’s (Orion Lee) situation: asked to do the literally-impossible by people who don’t understand why their requests can’t be fulfilled.

Decades ago, a client wanted their Web application to automatically print to the user’s printer, without prompting. I explained that it was impossible because “if a website could print to your printer without at least asking you first, everybody would be printing ads as you browsed the web”. The client’s response: “I don’t need you to let everybody print. Just my users.”¹

So yeah, I was among those that sympathised with Anderson.

In the sketch, the client requires him to “draw seven red lines, all of them strictly perpendicular; some with green ink and some with transparent”. He (reasonably) states that this is impossible².

Versus AI

Following one of the many fever dreams when I was ill, recently, I woke up wondering… how might an AI programmer tackle this task? I had an inkling of the answer, so I had to try it:

When I asked gpt-4o to assist me, it initially completely ignored the perpendicularity requirement.

White square containing 7 equally-spaced parallel vertical lines: red, green, orange, red, green, orange, red. — Drawing all of the lines strictly parallel to one another was… well, the exact opposite of what was asked for, although it was at least *possible*.

Let’s see if it can do better, with a bit of a nudge:

gpt-4o claimed that the task was absolutely achievable, even clarifying that the lines would all be “strictly perpendicular to each other”… before proceeding to instead make each consecutively-drawn line be perpendicular only to its predecessor:

The same diagram, but with the 7 lines joined together into a zig-zagging snake weaving its way right, then down, then left, then down, and so on across the canvas. — This is not what I asked for. But more importantly, it’s not what I *wanted*. (But it is pretty much what I expected.)

You might argue that this test is unfair, and it is. But there’s a point that I’ll get to.

But first, let me show you how a different model responded. I tried the same question with the newly-released Claude 3.7 Sonnet model, and got what I’d consider to be a much better answer:

In my mind: an ideal answer acknowledges the impossibility of the question, or at least addresses the supposed-impossibility of it. Claude 3.7 Sonnet did well here, although I can’t confirm whether it did so because it had been trained on data that recognised the existence of “The Expert” or not (it’s clearly aware of the sketch, given its answer).

Two red lines are perpendicular to one another, followed by horizontal lines in green, semitransparent red, red, green, and semitransparent green. Each are labelled with their axis in a 7-dimensional space, and with a clarifying tooltip. — The complete page that Claude 3.7 Sonnet produced also included an explanation of the task, clarifying that it’s impossible, and a link to the video of the original sketch.

What’s the point, Dan?

I remain committed to not using AI to do anything I couldn’t do myself (and can therefore check).⁴ And the answer I got from gpt-4o to this question goes a long way to demonstrating why.

Suppose I didn’t know that it was impossible to make seven lines perpendicular to one another in anything less than seven-dimensional space. If that were the case, it’d be tempting to accept an AI-provided answer as correct, and ship it. And while that example is trivial (and at least a little bit silly), it’s the kind of thing that, I have no doubt, actually happens in other areas.

Chatbots eagerness to provide a helpful answer, even if no answer is possible, is a huge liability. The other week, I experimentally asked Claude 3.5 for assistance with a PHPUnit mocking challenge and it provided a whole series of answers… that were completely invalid! It later turned out that what I was trying to achieve was impossible⁵.

Given that its answers clearly didn’t-work there was no risk I’d have shipped it anyway, but I’m certain that there exist developers who’ve asked a chatbot for help in a domain they didn’t understood and accepted its answer while still not understanding it, which feels to me like a quick route to introducing into your code a bug that happy-path testing won’t reveal. (Y’know, something like a security vulnerability, or an accessibility failure, or whatever.)

Code assisting AI remains really interesting and occasionally useful… but it’s also a real minefield and I see a lot of naiveté about its limitations.

Footnotes

¹ My client eventually took that particular requirement out of scope and I thought the matter was settled, but I heard that they later contracted a different developer to implement just that bit of functionality into the application that we delivered. I never checked, but I think that what they delivered exploited ActiveX/Java applet vulnerabilities to achieve the goal.

² Nerds gotta nerd, and so there’s been endless debate on the Internet about whether the task is truly impossible. For example, when I first saw the video I was struck by the observation that perpendicularity within a set of lines is limited linearly by the number of dimensions you’re working in, so it’s absolutely possible to model seven lines all perpendicular to one another… if you’re working in seven dimensions. But let’s put that all aside for a moment and assume the task is truly impossible within some framework unspecified-but-implied within the universe of the sketch, ‘k?

³ Two-dimensionality feels like a fair assumed constraint, given that in the sketch Anderson tries to demonstrate the challenges of the task by using a flip-chart.

⁴ I also don’t use AI to produce anything creative that I then pass off as my own, because, y’know, many of these models don’t seem to respect copyright. You won’t find any AI-written content on my blog, for example, except specifically to demonstrate AI’s capabilities (or lack thereof) when discussing AI, and this is always be clearly labelled. But that’s another question.

⁵ In fact, I was going about the problem itself in entirely the wrong way: some minor refactoring later and I had some solid unit tests that fit the bill, and I didn’t need to do the impossible. But the AI never clocked that, and I suspect it never would have.