April Features!

I’m testing a handful of highly-experimental new features on my personal website using multivariate (“A/B”) testing.

Screenshot of the recent "Quickly Solving JigsawExplorer Puzzles" blog post with a new "Dark mode" switch hovering over it.
“Dark Mode” is just one of the new features I’m testing out.

If you visit within the next day or so you’re likely to be randomly-selected to try out one of them. (If you’re not selected, you can manually enable one of the experiments.)

I’d love to hear your feedback on these Very Serious New Features! Let me know which one(s) you see and whether you think they should become permanent fixtures on my site.

Aberystwyth 1984

This article is a repost promoting content originally published elsewhere. See more things Dan's reposted.

Nigel Lowrie

This promotional video for Aberystwyth University has been kindly archived onto YouTube by one of the undergraduate students who features in it. It was produced in 1984; approximately the same time I first visited Aberystwyth, although it would take until fifteen years later in 1999 for me to become a student there myself.

But the thing is… this 1984 video, shot on VHS in 1984, could absolutely be mistaken at-a-glance for a video shot on an early digital video camera a decade and a half later. The pace of change in Aberystwyth was and is glacial; somehow even the fashion and music seen in Pier Pressure in the video could pass for late-90s!

Anyway: I found the entire video amazingly nostalgic in spite of how far it predates my attendance of the University! Amazing.

Better In Our App

What they say: “This site works better in our app.”

What they mean (optimistic): “We couldn’t be bothered to make a good website.”

What they mean (realistic): “We can track and monetise you better if we can coerce you into installing this.”

Quickly Solving JigsawExplorer Puzzles

Background

I was contacted this week by a geocacher called Dominik who, like me, loves geocaching…. but hates it when the coordinates for a cache are hidden behind a virtual jigsaw puzzle.

A popular online jigsaw tool used by lazy geocache owners is Jigidi: I’ve come up with several techniques for bypassing their puzzles or at least making them easier.

Dominik had been looking at a geocache hidden last week in Eastern France and had discovered that it used JigsawExplorer, not Jigidi, to conceal the coordinates. Let’s take a look…

Unsolved approx. 1000 piece jigsaw puzzle.
Not just any puzzle; the geocache used an ~1000 piece puzzle! Ugh!

I experimented with a few ways to work-around the jigsaw, e.g. dramatically increasing the “snap range” so dragging a piece any distance would result in it jumping to a neighbour, and extracting original image URLs from localStorage. All were good, but none were perfect.

For a while, making pieces “snap” at any range seemed to be the best hacky workaround.

Then I realised that – unlike Jigidi, where there can be a congratulatory “completion message” (with e.g. geocache coordinates in) – in JigsawExplorer the prize is seeing the completed jigsaw.

Dialog box reading "This puzzle's box top preview is disabled for added challenge."
You can click a button to see the “box” of a jigsaw, but this can be disabled by the image uploader.

Let’s work on attacking that bit of functionality. After all: if we can bypass the “added challenge” we’ll be able to see the finished jigsaw and, therefore, the geocache coordinates. Like this:

Hackaround

Here’s how it’s done. Or keep reading if you just want to follow the instructions!
  1. Open a jigsaw and try the “box cover” button at the top. If you get the message “This puzzle’s box top preview is disabled for added challenge.”, carry on.
  2. Open your browser’s debug tools (F12) and navigate to the Sources tab.
  3. Find the jigex-prog.js file. Right-click and select Override Content (or Add Script Override).
  4. In the overridden version of the file, search for the string – e&&e.customMystery?tt.msgbox("This puzzle's box top preview is disabled for added challenge."): – this code checks if the puzzle has the “custom mystery” setting switched on and if so shows the message, otherwise (after the :) shows the box cover.
  5. Carefully delete that entire string. It’ll probably appear twice.
  6. Reload the page. Now the “box cover” button will work.

The moral, as always, might be: don’t put functionality into the client-side JavaScript if you don’t want the user to be able to bypass it.

Or maybe the moral is: if you’re going to make a puzzle geocache, put some work in and do something clever, original, and ideally with fieldwork rather than yet another low-effort “upload a picture and choose the highest number of jigsaw pieces to cut it into from the dropdown”.

Unsolved approx. 1000 piece jigsaw puzzle.× Dialog box reading "This puzzle's box top preview is disabled for added challenge."×

Oxford’s Area Code at OGN 57

Ever wondered why Oxford’s area code is 01865? The story is more-complicated than you’d think.

Modern desk telephone with an 01865 number (masked) and a keypad with letters on the buttons, 2=ABC through 9=WXYZ, with superimposed question marks between the two.
As a child, I was told that city STD codes were usually associated to the letters that appear on some telephones… but that wouldn’t make any sense for Oxford’s code!

I’ll share the story on my blog, of course. But before then, I’ll be telling it from the stage of the Jericho Tavern at 21:15 on Wednesday 17 April as my third(?) appearance at Oxford Geek Nights! So if you’re interested in learning about some of the quirks of UK telephone numbering history, I can guarantee that this party’s the only one to be at that Wednesday night!

Not your jam? That’s okay: there’s plenty of more-talented people than I who’ll be speaking, about subjects as diverse as quantum computing with QATboxen, bringing your D&D experience to stakeholder management (!), video games without screens, learnings from the Horizon scandal, and whatever Freyja Domville means by The Unreasonable Effectiveness of the Scientific Method (but I’m seriously excited by that title).

Oxford Geek Night logo

Anyway: I hope you’ll be coming along to Oxford Geek Nights 57 next month, if not to hear me witter on about the fossils in our telecommunications networks then to enjoy a beer and hear from the amazing speakers I’ll be sharing the stage with. The event’s always a blast, and I’m looking forward to seeing you there!

Modern desk telephone with an 01865 number (masked) and a keypad with letters on the buttons, 2=ABC through 9=WXYZ, with superimposed question marks between the two.×

The Road (Segment) Less Travelled

Map showing approximate location of Dan's house, on a set of rural roads that connect to the A40 in two different places, with the segment between the two relevant junctions marked.

There are two junctions at which I can join the A40 trunk road from my house. When I drive East, I use the Easternmost of the two; when I drive West, I use the Westernmost; but I almost never drive the stretch of road between them!

A few years ago I generated heatmaps of my movements based on my long-running personal location log and, indeed, it shows a “cool spot” along this section of road too:

Heatmap showing a "cool spot" on the road (segment) less-travelled.

It’s inevitable I suppose that there should exist a “road (segment) less-travelled” right on my doorstep, but it still feels strange. Like when you live near a tourist attraction that you never get around to visiting. Except instead of a tourist attraction, I live near a major highway I rarely use.

Maybe I’m missing out on something great. Probably the commuters who use that road to get into and out of Oxford don’t think so.

Map showing approximate location of Dan's house, on a set of rural roads that connect to the A40 in two different places, with the segment between the two relevant junctions marked.× Heatmap showing a "cool spot" on the road (segment) less-travelled.×

Dan Q found GC2BHX9 C-130J Hercules

This checkin to GC2BHX9 C-130J Hercules reflects a geocaching.com log entry. See more of Dan's cache logs.

Found by the geohound and I after a brief battle with the first stinging nettles of the season. Owie! She and I came over from Stanton Harcourt this morning – from which we see plenty of Brize Nortons’ Hercules! – because many of our favourite local walks are waterlogged. Things are somewhat drier underfoot here, but after our walk through the fields the pup and I are still rather muddy! TFTC.

Home Page, 50% Off!

In August, I celebrated my blog – with its homepage weighing-in at a total of just 481kbbeing admitted to Kev Quirk‘s 512kb club. 512kb club celebrates websites (often personal sites) whose homepage are neither “ultra minimal” or “link pages” but have a total size, including all assets, of under half a megabyte. It’s about making a commitment to a leaner, more-efficient Web.

My relatively-heavyweight homepage only just slipped in under the line. But, feeling inspired perhaps by some performance enhancements I’ve been planning this week at work, I decided to try to shave a little more off:

Now, at ~234kb, danq.me just beats the excellent gomakethings.com (it’s all those heavyweight fonts, Chris!).

Here’s what I changed:

  1. The “recent article” tiles are dynamically sized based on their number, type, and the visitor’s screen resolution. But apart from the top one they’re almost never very large. Using thumbnail images for the non-first tile shaved off almost 160kb.
Illustration showing how the smaller tiles only need thumbnail images.
You can see the difference, but it’s still acceptable to look at, I think.
  1. Not space-saving, but while I was in there I ensured that the first tile’s image – which almost-certainly comprises part of the Largest Contentful Paint – is never delivered with loading="lazy".
  2. I was providing a shortcut icon in .ico format (<link rel="shortcut icon" href="/_q23t/icons/favicon-16-32-48-64-128.ico" />), which is pretty redundant nowadays because all modern browsers (and even IE11) support .png icons. I was already providing .png and .svg versions, but it turns out that some browsers favour the one with the (harmful?) rel="shortcut icon" over rel="icon" if both are present, and .ico files are – being based on Windows Bitmaps – horrendously inefficient.

By getting under the 250kb threshold, I’ve jumped up a league from Blue Team to Orange Team, so that’s nice too. I can’t see a meaningful path from where I’m at to Green Team (under 100kb) though, so this level might have to suffice.

Last-minute additions:

Illustration showing how the smaller tiles only need thumbnail images.×

My Favourite Video Game Easter Egg

Spoiler: it’s Alorik’s crystal ball in Ultima Underworld II.

This blog post is also available as a vlog: why not watch & listen to me as I demonstrate my favourite video game Easter egg!

Video preview showing Dan overlaid on a screenshot of Ultima Underworld II.

Ultima Underworld II

My favourite video game Easter egg is found in Ultima Underworld II: Labyrinth of Worlds1.

Released early in 1993 after missing a target of Christmas 19922, it undersold despite being almost universally well-received by reviewers3.

Composite of PC Zone's review of Ultima Underworld II, overlaid with their final score: "94%: Just go out now and buy it, okay."
I don’t know how print magazine video game reviews read today, but back in the early 90s they seemed to be frivolous and flippant approximately 100% of the time.

Developed by Looking Glass Technologies, it used an enhanced version of the engine they’d used for the game’s prequel a year earlier4.

The engine is particularly cool for it’s time; it’s sometimes compared to Wolfenstein5, but that’s not entirely fair… on Wolfenstein! The original version of Underworld‘s 3D engine predated Wolfenstein… and yet supported several features that Wolfenstein lacked, like the ability for the player to look up and down and jump over chasms, for example.

Screenshots of the same piles of bones and detritus in Ultima Underworld I, seen from two different angles.
Move around and you’ll see the 3D walls shift to your new perspective, but you’ll always see the same side of the 2D objects on the floor. Turn as you might, you’ll never see the back of that skull!

The team’s expertise and code would eventually be used to produce System Shock in 1994. The team’s producer, Warren Spector, would eventually draw from his experience of the Ultima Underworld games when he went on to make Thief: The Dark Project and Deus Ex.

But the technology of Ultima Underworld II and its prequel aren’t as interesting as its approach to storytelling and gameplay. They’re:

  • real-time
  • first-person
  • non-linear
  • fantasy roleplaying games

This was a highly innovative combination6.

Highlighted part of the Designers Notes, reading: "We feel that one of Underworld’s strongest features is its capacity to generate situations and strategies that we did not script, but that arose from the scenarios we created. For example: Suppose there’s a Despoiler daemon guarding the key to that door. Maybe I should come back when I can take him hand-to-hand … or bring up my picklock skill … or throw this sling stone at him, see if he’ll chase me … or maybe I can sneak past him — how good is a Despoiler’s eyesight? And can he swim …"
Underworld II encourages lateral thinking and provides multiple solutions to many challenges, perhaps best-described by this section in the Designers’ Notes page at the back of the manual.

What’s being described there is what we’d now call emergent gameplay, and while it wasn’t completely new in 19937 it was still uncommon enough to be noteworthy.

The Easter Egg

The Ultima series are riddled with Easter eggs, but my favourite is one that I feel is well-hidden, beautiful… and heavily laden with both fan service and foreshadowing!

Screenshot showing a frozen fountain in an icy realm.
The third of the interdimensional planes the Avatar visits in the game contains a city frozen solid by the Guardian’s magic.

To find the Easter egg, you must first travel to Anodunos. This city was once the capital of a tropical city-state which had become allied to the Guardian, the the principal antagonist of Ultima VII through IX.

Box art showing a hero dressed in leather armour wielding a staff with a glowing tip in a frozen cave.
The original box art for Underworld II, painted by Denis Loubet (who’ll draw your RPG character for you if you like!) showed the Avatar in the ice cavern, wielding an important late-game artefact.

After the city’s major, Beatrice, attempted to put an end to the red titan’s growing demands, the Guardian cursed the city fountain to radiate out a magical cold that eventually froze the entire settlement under a cave of ice.

Screenshot of the conversation interface as Dan talks to a ghost called Beatrice.
Mayor Beatrice lives on here, as a ghost. While she’s a great source of information about the ice caverns as a whole and has information highly useful to the primary quest, that’s not the thing we’re interested in right now.

On the Eastern bank of the city’s river we find the remnants of the workshop of the magician Alorik, and in it – if we look in the right place8 – a secret door. We can’t open it though: unusually for a secret door in this game, it’s locked.

Looking at a blank patch of wall in a frozen room, the player is told "You see a secret door."
In the original, unpatched release of the game, you couldn’t even cast the “open” spell on it to unlock it: the only way through was to use a powerful late-game spell like “portal” to teleport to the other side.

I didn’t even find this chamber on my first playthrough of the game. It was only on my second, while using the Map Area spell to help me to draw accurate maps of the entire game world, that I found the room… and even then I spent some time hunting for a switch on the “outside” before eventually giving up and teleporting into the secret room.

An open secret door (the one from before, but viewed from the other side), and a thrown switch.
Once you’re on the other side, there’s a switch. I guess it’s a Alorik’s panic room?

There’s valuable treasure here including a sceptre of mana restoration, a “grav” runestone (probably still easier to get than the one at the Scintillus Academy), but what’s most interesting is the crystal ball, which the player can look into to see a vision of another place and, in the case of this orb, another time.

The first time you look into it, you’re told:

You see yourself striving against the forces of Mondain and Minax in the lands of ancient Sosaria.9

Mondain and Minax are the antagonists in Ultima I and Ultima II. We’re seeing the earliest parts of the player character’s adventures.

In the game: looking into the crystal ball.
It’s long been argued that the “Stranger” – the protagonist of Ultima I through Ultima III – is a different person to the Avatar of Ultima IV but I feel like this vision is canonical proof that they’re supposed to be interpreted as being the same person…

If we look into the crystal ball a second time:

You see yourself climbing to the peak of Olympus Mons on the planet Mars.

This is a reference to the plot of Ultima: Worlds of Adventure 2: Martian Dreams… which is a… weird choice of game to reference.

In my mind, a more logical leap forward in time might have been to jump to Ultima IV10, in which the protagonist first becomes the Avatar of the Eight Virtues and the Hero of Britannia. Martian Dreams is… a sequel to a spinoff of Ultima VI. So why pick that?

Screenshot from Martian Dreams showing Dr. Spector.
Little-known and oft-forgotten, Martian Dreams is apparently nonetheless a source of pride for the real Spector.

Martian Dreams starts with a friend of the Avatar’s from Earth facilitating the Avatar and their companions to set out on an adventure to the planet Mars. That friend is called Dr. Spector, obviously named for Warren Spector, who helped develop Ultima VI and, of course, this game. This usual choice of vision of the past is a cryptic nod to the producer of Underworld II.

Let’s look again:

You see yourself in the Deep Forest, speaking with the peace-loving simian race of Emps.

This one’s a reference to Ultima VII, the game whose story immediately precedes this one. The Deep Forest seems an strange part of the adventure to choose, though. The Avatar goes to the Deep Forest where, via some emps and then a wisp are eventually lead to the Time Lord11. The Time Lord provides a whole heap of exposition and clues that the Avatar needs to eventually close the Black Gate and win the game.

Ultima VII: the Avatar converses with the Time Lord in the Shrine of Spirituality. He says "Thou must free me and we must work together in battling the Guardian. The fate of thy people depends upon it. Dost thou accept?"
Tardis noises intensify.

Do these references serve to hint that this crystal ball, too, is a source of exposition and guidance? Let’s see what it says next.

You see yourself peering into a crystal ball.

I remember the moment I first saw this happen in the game: serious chills! You’ve just found a long-lost, centuries-buried secret chamber, in which there’s a crystal ball. You peer into it and observe a series of moments from throughout your life. You continue to watch, and eventually you see yourself, staring into the crystal ball: you’re seeing the present. So what’s next?

Frame from 1984's The NeverEnding Story, showing Atreyu seeing the prophetic painting that shows the beast he's about to meet.
Alorik’s crystal ball from Ultima Underworld II and the mural of G’mork from The NeverEnding Story totally have the same energy.

If you look again, you’re asking to see… the unwritten future:

You see yourself winding a great war horn in the throne room of Castle British.

To save Britannia in Ultima Underworld II, the Avatar needs to exploit symmetries implicit in The Guardian’s spellcasting to travel to eight different parallel worlds, find a place from which His power stems, dispel it, encase themselves in a shell of basilisk oil-infused magic mud, immerse themselves in lava to bake it on, find a magic sigil, consume a djinn… it’s a whole thing. But ultimately it all leads to a climactic end scene in which the Avatar raises a horn retrieved from the Tomb of Praecor Loth and blows it to shatter a dome of blackrock.

Under a starry sky, a blackrock dome grows green cracks and shatters.
Blackrock’s really heavy, right? I’m not sure that shattering it above the building you’re inside is wise.

If you happen to find this clue on your first playthrough, it’s helpful exposition.

But that’s the end of this game, right? How can we possibly peer into the orb again?

You see yourself sailing through majestic pillars cropping up out of the sea, on a voyage of discovery.

What’s being described there is the opening scene from the next game in the series, the as-yet-unreleased Ultima VII Part 2: Serpent Isle!

Ultima VII Part 2 introduction, showing a boat sailing through an icy sea corridor towards two serpent pillars.
Serpent Isle begins with the Avatar and their companions sailing out to some special pillars in pursuit of a bad guy.

This vision is a teaser of what’s to come. That’s just… magical, for both the character and the player.

The character uses fortune-telling magic to see their future, but the player is also seeing their future: if they’re playing Ultima Underworld II at or close to its release date, or they’re playing through the games in chronological order, they’re in a literal sense being shown what comes next in their life. That’s really cool.12

Let’s look again:

You see the obscure form of an old and dear friend, as he sacrifices his life for the good of all.

Some time after the party arrives on Serpent Isle, the Avatar’s companions are possessed by the Banes of Chaos and go on a murderous rampage. Later, there’s a ritual that will save the world, but at the cost of the death of one of the heroes. The Avatar is willing to make the ultimate sacrifice, but in the end Sir Dupre takes his place, unwilling to live within himself after seeing the carnage he has wrought.

Sir Dupre says "I cannot live with the shame of the deaths I have caused... If I can redeem myself by becoming the required martyr, so be it!"
The death of Sir Dupre, who first appeared way back in Ultima II, is somewhat undercut by his resurrection in Ultima IX. But perhaps you’ll let me pretend for a paragraph longer that Ultima IX doesn’t exist, okay?

At the end of Serpent Isle, the Avatar is plucked out of space and time and deposited into Pagan, The Guardian’s home base. The plot of Ultima VIII and Ultima IX revolve around the Avatar working to return to a radically-changed Britannia, attempting to fight The Guardian and bring to an end the Age of Armageddon, and ultimately merging and become one with Him before vanishing completely from the world.

An ankh symbol picked out in the constellations.
I don’t disagree with how Ultima IX got to where it was going, but I don’t like the route it took to get there. Or the hilariously-terrible bugs.

Which is why it’s perhaps quite fitting that if the Avatar in Underworld II looks into the orb one final time, they’re told…

You see nothing.

That’s it. That’s the end.

The end of the vision, certainly, but also: a vision of the end.

Depending on how you count the Ultima games13, this is the 13th of 17 in the series. We’re approaching the final chapter, and this Easter egg foreshadows that finale.

I feel hugely privileged that I got to experience it “organically”, by accident, as its authors presumably intended, back in 1993. But it also makes me happy to be able to share the story of it with you14.

If you haven’t seen it yet, you might enjoy watching the vlog version of this post, through which my enthusiasm for the topic might be more-palpable.

Footnotes

1 I’ve doubtless mentioned Ultima Underworld II before: for example both it and Ultima VII, as well as NetHack (mentioned elsewhere in this post) made it into my 2007 list of top 10 computer games that stole my life.

2 The release was delayed owing to testing revealing just too-many bugs, the penultimate of which was squashed on 18 December leaving just one more that the team couldn’t reproduce until the New Year

3 It suffered perhaps for the time of year it was released, but perhaps also for the fact that 1993 was a big year for video games and it was competing with The 7th Guest, Star Wars: Rebel Assault, Return to Zork , Myst, Disney’s Aladdin and, of course – later in the year – Doom.

4 Director/designer Paul Neurath apparently sang the praises of his team for improving texture mapping and viewport size constraints, and he’s right: they’re a huge improvement on Underworld I‘s. Neurath would later go on create the crowdfunded “spiritual successor” Underworld Ascendant, which was critically panned, which just goes to show that sometimes it’s better to get a tight team together and make it “until it’s done” than to put your half-baked idea on Kickstarter and hope you can work it out what you’re making before the money runs out.

5 Like Wolfenstein, the engine uses a mixture of software-rendered 3D (for walls and furniture) overlaid with traditionally-produced sprites (for characters and items).

6 All executed over a year before the release of the very first Elder Scrolls game. Just sayin’.

7 That king of emergent gameplay NetHack was showcasing emergent gameplay in a fantasy roleplaying game way back in the 1980s!

8 An interesting quirk of the game was that if you turned the graphics settings down to their lowest, secret doors would become just as visible as regular doors. If you’re sure there is one but you can’t quite find it, tweaking your graphics settings is much easier than casting a spell!

9 Do you like the “in the style of Underworld II” scrolls I’ve used in this post? I’ve made available the source code you need if you want to use them yourself.

10 Ultima IV is my personal favourite Ultima game, but I see the argument of people who claim that Ultima VII is the best of the series.

11 The Time Lord turns up throughout the game series. Way back in Ultima III, he appears in the Dungeon of Time where he provides a clue essential to defeating Exodus, and he appears or is referenced in most games from Ultima VII onwards. He doesn’t seem to appear in Ultima IV through Ultima VI, except… in Ultima IX, which wouldn’t be released until six years after Underworld II, it’s revealed that the Time Lord is the true identity of the seer Hawkwind… who provided the same kind of exposition and guidance in Ultima IV!

12 How did the Underworld II team know with such certainty what was being planned for Serpent Isle? At some point in 1992 project director Jeff George left Origin Studios and was replaced by lead designer Bill Armintrout, and the role of producer was assigned to… Warren Spector again! For some time, Spector was involved with both projects, providing an easy conduit for inter-team leaks.

13 How you count Ultima games and what specifically should be counted is a source of controversy in fan circles.

14 I’m sure many people reading this will have heard me talk about this particular Easter egg in-person before, over the last couple of decades. Some of you might even have heard me threaten to write a blog post about it, someday. Well: now I have. Tada! It only took me thirty years after experiencing it to write about it here, which is still faster than some things I’ve blogged about!

Composite of PC Zone's review of Ultima Underworld II, overlaid with their final score: "94%: Just go out now and buy it, okay."× Screenshots of the same piles of bones and detritus in Ultima Underworld I, seen from two different angles.× Highlighted part of the Designers Notes, reading: "We feel that one of Underworld’s strongest features is its capacity to generate situations and strategies that we did not script, but that arose from the scenarios we created. For example: Suppose there’s a Despoiler daemon guarding the key to that door. Maybe I should come back when I can take him hand-to-hand … or bring up my picklock skill … or throw this sling stone at him, see if he’ll chase me … or maybe I can sneak past him — how good is a Despoiler’s eyesight? And can he swim …"× Screenshot showing a frozen fountain in an icy realm.× Box art showing a hero dressed in leather armour wielding a staff with a glowing tip in a frozen cave.× Screenshot of the conversation interface as Dan talks to a ghost called Beatrice.× Looking at a blank patch of wall in a frozen room, the player is told "You see a secret door."× An open secret door (the one from before, but viewed from the other side), and a thrown switch.× In the game: looking into the crystal ball.× Screenshot from Martian Dreams showing Dr. Spector.× Ultima VII: the Avatar converses with the Time Lord in the Shrine of Spirituality. He says "Thou must free me and we must work together in battling the Guardian. The fate of thy people depends upon it. Dost thou accept?"× Frame from 1984's The NeverEnding Story, showing Atreyu seeing the prophetic painting that shows the beast he's about to meet.× Under a starry sky, a blackrock dome grows green cracks and shatters.× Ultima VII Part 2 introduction, showing a boat sailing through an icy sea corridor towards two serpent pillars.× Sir Dupre says "I cannot live with the shame of the deaths I have caused... If I can redeem myself by becoming the required martyr, so be it!"× An ankh symbol picked out in the constellations.×

The Stupidest CSS

Yesterday, I wrote the stupidest bit of CSS of my entire career.

Screenshot of the WooCommerce Extensions Marketplace, with two sponsored products annotated to show (a) a pretty stripe at the top, (b) adding the word "Sponsored", and (c) a strange green blob alongside each.
Two new visual elements and one textual one will make it clear where a product’s placement in the marketplace is sponsored.

Owners of online shops powered by WooCommerce can optionally “connect” their stores back to Woo.com. This enables them to manage their subscriptions to any extensions they use to enhance their store1. They can also browse a marketplace of additional extensions they might like to consider, which is somewhat-tailored to them based on e.g. their geographical location2

In the future, we’ll be adding sponsored products to the marketplace listing, but we want to be transparent about it so yesterday I was working on some code that would determine from the appropriate API whether an extension was sponsored and then style it differently to make this clear. I took a look at the proposal from the designer attached to the project, which called for

  1. the word “Sponsored” to appear alongside the name of the extension’s developer,
  2. a stripe at the top in the brand colour of the extension, and
  3. a strange green blob alongside it

That third thing seemed like an odd choice, but I figured that probably I just didn’t have the design or marketing expertise to understand it, and I diligently wrote some appropriate code.3

I even attached to my PR a video demonstrating how my code reviewers could test it without spoofing actual sponsored extensions.

After some minor tweaks, my change was approved. The designer even swung by and gave it a thumbs-up. All I needed to do was wait for the automated end-to-end tests to complete, and I’d be able to add it to WooCommerce ready to be included in the next-but-one release. Nice.

In the meantime, I got started on my next bit of work. This one also included some design work by the same designer, and wouldn’t you know it… this one also had a little green blob on it?

A design for a completely different part of the WooCommerce Extensions Management tool, again with a little green blob. Dan's floating head looks thoughtful above it, with a thought-bubble reading "wow, we're really going all-in on these little blobs, aren't we?"
I’m almost embarrassed to admit that my first thought was that this must be part of some wider design strategy to put little green blobs everywhere.

Then it hit me. The blobs weren’t part of the design at all, but the designer’s way of saying “look at this bit, it’s important!”. Whoops!

So I got to rush over to my (already-approved, somehow!) changeset and rip out the offending CSS: the stupidest bit of CSS of my entire career. Not bad code per se, but reasonable code resulting from a damn-stupid misinterpretation of a designer’s wishes. Brilliant.

Footnotes

1 WooCommerce extensions serve loads of different purposes, like handling bookings and reservations and integrating with parcel tracking services.

2 There’s no point us suggesting an extension that helps you calculate Royal Mail shipping rates if you’re not shipping from the UK, for example!

3 A fun side-effect of working on open-source software is that my silly mistake gets immortalised somewhere where you can go and see it any time you like!

Screenshot of the WooCommerce Extensions Marketplace, with two sponsored products annotated to show (a) a pretty stripe at the top, (b) adding the word "Sponsored", and (c) a strange green blob alongside each.× A design for a completely different part of the WooCommerce Extensions Management tool, again with a little green blob. Dan's floating head looks thoughtful above it, with a thought-bubble reading "wow, we're really going all-in on these little blobs, aren't we?"×

Everyday Magic

Having lost the (stupid, proprietary) charging cable for my smartwatch, and not been able to find it for several days, I’ve undertaken the magical ritual that’s most-certain to make it reappear: ordering a replacement one.

Sarson’s

Do you think the 80s/90s advertisement campaign for Sarson’s vinegar – “Don’t say vinegar, say Sarson’s” – ever worked?

Like: have you ever heard anybody ask you to “pass the Sarson’s”?