Skip to content
A picture of the site author Vincent Pickering

Vincent Pickering is a Service Designer & UI/UX Consultant from the UK based in Wellington, New Zealand

Contact me or Follow me

Github Pinboard Twitter


A feed of my life

Last night I managed to successfully implement another IndieWeb feature a Media endpoint to the blog.

A Media endpoint allows you to upload data to your website, usually in practice it is used for photo posts but you could use it to upload files if you wished. This will now give me the option to post images here on the blog instead of Instagram, which I would like to quit using.

In practice it wasn’t as complicated as I thought it might be to implement. This is how it works.

  1. The endpoint needs to authenticate with IndieAuth.
  2. Once authenticated it accepts an image URL encoded, as per spec.
  3. The image is stored in memory.
  4. The code then responds to the file sender with a location for where the image will be located.
  5. The image is then base 64 encoded and POST’ed in to the Github API with a unique filename.
  6. The endpoint returns complete.

The Sender acquires the file location for the photo and runs through it sequentially for multiple photos. It then sends the location string(s) along with the other JSON data.

I extended my note formatter to accommodate photos and output the photo location and alternate text for each image in to the Frontmatter for the post.

The new @wolfclubband album is really great. The perfect remedy to cold winter nights. #synthwave #wolfclubband

Wolfclub Album Art.

Prefixes when using Microformats

I had always wondered what the p- and u- prefixes meant when using Microformats. Thanks to the Indieweb slack channel I got the answer while querying about u-category and p-category today.

Semantically nothing is different. The prefix is a parser directive. u- (URL) tells it to take the value for category from a href attribute, src attribute, etc. While p- (plain text) tells it to take the value from the element’s inner-text, or sometimes title attribute (e.g. for abbr elements).

Making a note of this here in case I forget.