The 88x31 button spec

So Izzy posted this Bluesky post last night a few days ago

and I know that I need to post my year in review[^1] but I figured I could knock out a quick spec now and get to that kind of self reflection later.

The aim of this spec

To give a way to automate adding a section to a personal website which links to the websites of your friends and allies, and which does so via the medium of 83x11 badges. Ideally you'd have a list of websites in whatever tooling you use to generate your site, and when you push the button it goes off and finds the buttons and downloads them, and then it puts them in a nice little display, each pointing to the canonical url for that site with the proper alt text.

Right now, to do so you'd have visit all your friends sites one-by-one, each time finding the button within each of their idiosyncratic layouts by hand. And while that sounds like a potentially enjoyable task, what's a computer for if not to make things more efficient and less fun?

I'm joking, of course. As we all know, it is possible to have fun on the computer. The way you have fun on the computer is to embark on projects which make things more complicated than necessary, purely for the joy of it. And that's what we're here for today.

Okay, so how does it work?

When a bit of software wants to find the button to use to link for a page, it goes to that page. And it looks in the meta tags for a tag that looks like this:

 <meta property="retro:88x31" content="/button.gif" >

and then to get the alt text, it can look for a tag like this:

<meta property="retro:88x31:alt" content="V's page!" />

(the alt text tag is optional - if you want to render the button and there's no alt text supplied, you should probably put the page title or URL or something in there instead)

A section framed as a Q&A

Are you going to write this up with the proper spec language?
I thought it would be funny to do, but now I come to it I find I can't be bothered.

This looks a lot like the way social preview images work. Like, og:image and all that.
Yes, that's correct.

Is this RFDa? It looks like RDFa. og:image is RDFa.
It does look like that! But no, it's not, there's no retro schema. But you could make one and then I guess it would retroactively be valid RDFa. But also I don't think anyone cares about RDF these day?

Should the responses from this be cached? How often are pages gonna get loaded to find these meta tags?
idk, I guess use the normal HTML caching stuff? Or cache it longer, I guess this stuff doesn't change very often. Maybe you gotta push a button to do a manual fetch? That could be fun!

What URL do the buttons link to?
The one that the software is asked to look up, I guess! I guess ideally you also look at the canonical URL listed in the tags, take note of any redirects, etc. Maybe that gets saved or maybe it's weird to overwrite the one that the user put in. Up to you, implementor of software that reads these tags.

How should these buttons be displayed?
However you like! Design your pages how you like! Be creative! That's the point of this stuff.

I guess actually the basics are: Hyperlinked to the correct site, at native res, and with the right alt text. But beyond that...

Are you concerned about putting the pixel dimensions into the tag name? Doesn't that seem limiting? What happens if they're not actually 83 x 11 pixels in size?
No, no, and idk, show them anyway. Or crop them. Or throw an error. Any of these options seems fine to me?

Should the buttons linked be usable via hotlinking? Or does the software need to download them?
I guess probably best to download them? Otherwise you don't have the nice experience of having a gallery of buttons which go to dead webpages, leaving you to imagine the aesthetic vibes of the sites based purely on 2573[^2] pixels.

Also hotlinks will probably not work half the time. But idk, I don't think this stuff needs to go in the spec.

[^1: no-one is asking for it, but I wanna do it, so. I will. Eventually.]

[^2: more if it's animated]