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]

Update: wait, use this other thing

Evie responds!

Evie On-line

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

ewie

and points me towards the .well-known/button.json spec:

well-known-button

The specification for `/.well-known/button.json`

Codeberg.orgLunarEclipse

which does the same thing – except, in my opinion, with slightly more fuss and less flexibility. But, and this really is the thing which outweighs everything else, it is actually being used by real people already, rather than being an almost completely abstract design exercise.

(wait okay, why do I think it's worse?

• you have one button for a whole site, whereas with the meta tags you can designate different sections to have different buttons
• I find the whole .well-known thing aesthetically unpleasing. A lot of jumbled up files of varying importance and usage. Like meta tags. Hm, trying to think if I can justify the distinction. idk if I can. Okay, ignore this one.
• ok ok the thing about marking whether it's animated or not, and the contrast stuff could actually be useful. and having a variety of buttons which you can pick through on that basis, yes. fine. that's nice.
• and the spec has a lot of references to the JSON schema, which... actually, you know what, I mentioned RDF, I don't have a leg to stand on here. tho they do say you should validate your JSON to make sure it's in conformance, and when I hear that I start to wonder if I can be bothered.
• ok ok, I guess we're getting to the nub of it here: mainly that it's not the design I came up with? yes fine that's probably why.
• wait, also: they say they dealt with the whole thing about not being able to upload arbitrary files on certain web hosts. I don't entirely follow what their solution is, but that part is fine for my spec as long as you can edit the HTML. and normally even if you're on a WYSIWYG editor you can dump some tags into <head>
• anyway, none of this matters, again, people are actually using it, that beats all)

Well, this has been a fun exercise in speculative specification design. I feel like we really captured the whole experience from start to finish.