2018 Oxford Indie Web Camp

The Indie Web movement is a movement all about content ownership, in the current times of Facebook, Twitter, Instagram and so on. It has been something I’ve been interested in ever since hearing Jeremy Keith talk about it at a conference last year. So I was super excited to hear that the wonderful Garrett was organising an Indie Web Camp in Oxford! Here’s a summary of what I did over the two days:

Day One

Day one was spent at the wonderful White October offices, with snacks provided by Haybrook.

Level 1

I got Level 1 set up! This involves setting up indie web sign-in, which allows you to use your own website to log in to things. It’s where you create a two-way link between your own personal site and other sites like GitHub/Twitter etc. To do this, make sure that your site has a link to your profiles on this sites with rel="me" in the mark-up, and that there is a link back to your personal site on those other sites. Once you've pushed it live, you can check the links at: IndieWebify.me

Level 2

Level 2 is about formatting your content for other sites, and letting other people know you’ve referenced their content with webmentions. Formatting your content for other sites involves micro formats. Microformats are semantic classes that you can add onto your HTML that allow for data to be picked up by other things. You add them to blog posts and it helps things pick out the data in a meaningful way. Webmentions are where you link to other people’s content and notify them that you’ve done this. I have to say, I struggled to get my head around how this actually worked, but Garrett was very patient, and helped me map out a little diagram to get my head around the system. Because my site is a static site on GitHub pages, I couldn’t figure out any ways of doing this with any kind of tooling, but Dan Q helped me out with the command line curling you need to do instead. That was pretty cool!

Things Implemented

I went off piste a little bit after this, because I got super carried away with webmentions. I set up webmentions.io and brid.gy for collecting them, and then got to work writing some JavaScript to collect my webmentions and display them on my Geese Games blog post. By the end of day one, I managed to get a face wall of people who’d liked my Tweet about my Geese Games blog post at the bottom of the blog post, which was pretty cool! It wasn’t particularly ordered or filtered though, so I decided to try and tackle that the next day. Another thing on my to do list for day two was Jekyll.

Day Two

On day two, because of rain, we decided to all work from home - I unfortunately didn’t get the message until turning up at the office because I didn't think to check beforehand, but it worked out alright because I then went for a coffee with Marcus and worked from various food places on Cowley road for a bit which was lovely!

Working with APIs

Yesterday, I started pulling in data from webmentions.io, and today I formatted it nicely. At the start of the day, the my fetch was an inline script that was pulling in the first 20 twitter likes. By the middle of the day, I had it all formatted out so that the fetch request pulled in the past 100 mentions, and filtered them into different sections on the page against ‘Twitter like’, ‘Twitter retweet’, ‘Repost’ and ‘Twitter reply’. I moved this script out into it’s own file, refactored it and made it reusable. One thing I learnt was how to chain parameters in an API call - you need to put & in between each different parameter! That tripped me up for a bit, but now I know!

Webmention curling

I’d referenced Henry on my blog post and so I wanted to send him a web mention. It took a while to get it to work, and we were a bit stuck for a little while, but in the end Garrett realised it was because it was missing a trailing / at the end of one of the URLs - then it worked! Yay!

DOM Manipulation

Once I’d figured out how to filter out the different types of web mention, I decided that I wanted my JavaScript to create the social media sections. This way, I could reply on the script to generate the relevant sections, and would also know if that if the user hadn’t enabled JS, redundant headers wouldn’t be appearing on the screen. Getting the relevant HTML generated wasn’t too hard, but getting the sections to render in a set option proved to be a bit trickier. In the for loop, the sections were being generated in order of what appeared in the array first, so I couldn’t rely on a fixed order that way. In the end, I did this with a separate for loop for each section, and arranged these in the order I wanted the sections to appear, at the top of the fetch. There is probably a more elegant way of doing this, but it works for now!

It’s been a super fun few days, and I’m pretty pleased with what I’ve achieved! If you check out the Social Media section of my Geese Games blog post, you can see what I did over the two days. I didn’t get to putting my blog on Jekyll, but I’ll carry on with that another time. In case you’re interested in having a go yourself, I've included some links below.

Useful links:

• Wiki for the indi webmovement: https://indieweb.org/
• Webmention tool for static websites: https://webmention.io/
• Webmention tool for Twitter for static sites: https://brid.gy/
• Talk by Adactio on the Indie Web: https://youtu.be/VvYK-K0jWng
• Garrett's blog post about Day 1