Day 9: Previewing Mastodon instances as h-feed #100DaysOfIndieWeb

1 min read

I was watching Christopher try to decide which mastodon instance to join. This made me realise that we need a way to preview instances’ local and federated streams. So I made one: Here's and here's

How this works is that from mastodon 1.1.1 the public timeline json api no longer needs authentication, so I can read it by default. I do this, then use a tempate to render it as an h-feed compliant view.

I also added a list of known instances from, though I wasn't able to  fetch the list dynamically.

I hope you find a mastodon insatcne community that you like. #indieweb


Day 8: A specification for rel=canonical, by request #100DaysOfIndieWeb

1 min read

Domenic pointed out that rel=canonical was not well specified in the HTML spec. We had a stub page on the microformats wiki, so I expanded it into a more detailed discussion.

I tried to follow my mantra that 'standards should be documentation, not legislation' by explaining and linking rather than just writing a list of imperatives without much explanation. 

Do let me know what you think

#microformats #indieweb

Day 7: To AMP or not to AMP? #100DaysOfIndieWeb

1 min read

Alan made a bookmarklet to go from the AMP version of an article to the canonical one. This is useful for sharing, but as Aaron pointed out, going the other way is handy for removing ad cruft, which can be a 14GB/day download.

So, here's the 'to amp' version:

javascript:var url = false;var links = document.getElementsByTagName('link');Object.keys(links).forEach(function(key){if(links[key].rel !== 'amphtml'){return;};url = links[key].href;});if(!url){ alert('No AMP URL'); };if(url){document.location = url;};

I'd suggest installing both, so you can toggle back and forth. A related one just turns the url bar into the canonical version for copying (this is handy for removing the utm_ cruft that may be there):

javascript:var c = document.querySelector("link[rel=canonical]"); if(c){ history.replaceState({},document.title, c.href); }

Using bookmarklets on mobile browsers is a bit annoying; but as Chrome syncs them across devices, you can type the name you give the bookmarklet in the address bar and then click it:

Day 6: updating the French version of (thanks to Ricardo Mendes‏ @rMdes_) #100DaysOfIndieWeb

1 min read

I noticed Ricardo was trying out Noterlive, and that it had confused him, so I updated the French translation of the site and made the js code shared between them rather than copied.

Now I have good bandwidth again, I am restarting #100DaysOfIndieWeb 

Day 5: Improving before the microservices summit #100DaysOfIndieWeb

1 min read

While I've been using my live-noting (well, OK, live-tweeting mostly) site fairly regularly to post live notes to my website, I haven't pushed out a new release for many months.

I'm off to the microservices summit tomorrow, so I thought I'd tidy up the feature requests and bug reports beforehand.

Several of these were helpfully added by Chris Aldrich, including the newly-linked Instructions page and the suggestion to clear the logs and cached speaker list separately.

I also made the site handle blank twitter names better, which means it can now be used as a tweetstorming tool more easily.

I also added a 'New Thread' button that starts a new thread of comments on twitter before the next tweet, which should be useful to break up live tweeting of multiple sessions

Do try it out, and send me any further issues


Day 4: Broke my Known site #100daysOfIndieWeb

1 min read

What I was trying to do today was monkeypatch my Known site so that it used an updated version of fragmention rather than the old one on However, I typo'd the script include line so that it reads:

<script src="></script

This manages to put the rest of the page inside a script tag and so became blank. Because known includes this header prefix in the editing pages too, I can't undo this mistake.

It also apparently breaks micropub posting, and certainly micropub auth and login.

You can however still read the site as AMP or RSS. Which has a certain irony.

I think I extended the meaning of Tantek's js;dr tonight anyway.


Update: thanks to Peter Molnar in irc for suggesting how to fix this with browser html hacking.


Day 3: better hovercards on my live-noted posts #100DaysOfIndieWeb

1 min read

On my live-noted posts (created with noterlive) I have hovercards for the cited users. However these are not great - they attempt to parse out an h-card from the users's URL, but if they fail they show a shrunken version of the website instead.

I only made 2 small tweaks today:

  • I cleaned up the layout of the hovercards (on so that images in posts can't displace the rest of the card.
  • I made the hovercard appear under the linked name which is less jarring

I still need to revisit these again, but that will take more time than is left in today.


Day 2 Saving webmentioned URLs to #100DaysOfIndieWeb

1 min read

With many pages vanishing from the web this week, we've been thinking about archiving in #indieweb

One thing that several people have started to do is to send their posts and the pages they link to to the internet archive

I was already doing this for all SVG's posted to, my vector image sharing site (though I fixed some bugs in that today too).

But what could I do for my other posts? Well, I previously made mention-tech to send webmentions, which is handy for my static posts on, so I made it ping the archive for both source and target URLs in the webmention sent. Do try it yourself.


Day 1: improving Indiecard #100DaysOfIndieWeb

1 min read

A while back I made which displays a preview card for indieweb pages, such as Tantek's page. I added explciit support for h-recipe when working out how to rescue the BBC recipes website, eg Yorkshire Pudding

I tried it on Aaron's recipes, like these cookies and it was originally failing as aaron didn't have an h-card in his p-author,  just a URL. I made it cope with that, then made it show something for all the top-level  items on the page, rather than just the first.

That shows Aaron's full h-card from the footer, and also looks nice with pages like his photos and as bonus will show the full thread on a post like this one

Do try it on your own URLs and let me know how it looks.


Starting #100daysOfIndieweb

1 min read

Inspired by Aaron's "100 Days of Indieweb", I'm aiming for 100 days of visible improvements to my IndieWeb projects. The challenge is to ship something visible and post about it for 100 days. Some of the improvements may be super tiny, some of them might be big. 

It needs to be an improvement to something I use myself, and it must also have a publicly visible result. So improving a closed source tool that only I use doesn't count, but if it's an improvement to something like unmung, which others can use, then that counts.

The other part of the challenge is to post about each improvement under  #100DaysOfIndieWeb tag on my website.

If you're interested in joining the challenge, read more on the IndieWeb wiki, and add yourself there!