Refactoring extinction.fyi
Last weekend, I launched a new side project called extinction.fyi to share news about the climate emergency. The site looked like the screenshot below, because I wanted it to provoke a response in people.
Several things then happened. Some people on the Fediverse, quite rightly, asked for an RSS feed. As I was just hand-coding a simple HTML file using GitHub pages served from a repository, I tried using a service that tried to parse the HTML into a feed. It was sub-optimal, to say the least.
In addition, and as I mentioned in the original post announcing this side project, my wife was not a fan of the skulls and the strapline ‘Documenting the end times’. She mentioned this on several occasions, so I thought it was probably worth doing something about it for the sake of marital harmony.
To cut a long story short, I’ve refactored the site in several ways to create a site that now looks like the image below. The page itself is a styled RSS feed meaning it no longer relies on a third-party service.
This took a much longer time to achieve than I anticipated, mainly because I had no clue what I was doing, had to look up everything, and experiment/fail along the way.
For those interested, here was my thought processes and the tools I used:
- I remembered that Firefox used to style RSS pages nicely, so I searched for how to do something similar. This post gave tantalising clues, but this one was more useful.
- I’ve never created a page in XML before and styled it using XSL, so that was a huge learning curve. In addition, XML is really fussy when it comes to structuring data and using special characters. So that was fun.
- I decided which fields to use in my XML by following the W3C guidelines and seeing what authors of the two blog posts referenced above did. There was a lot of trial-and-error, where the W3C feed validation service was invaluable.
- I’d been just using the GitHub web interface because it’s easier when switching between devices. However, this became annoying when moving and editing many files and folders, so I started using Atom again, which integrates nicely with GitHub workflows (push/pull, etc.)
- The logo is actually courtesy of my daughter, who showed me that on WhatsApp (which I don’t use) you can merge emojis. So I asked my wife to send me the combined emoji for fire and earth, which is displayed as a WebP file, to reduce the filesize.
- In terms of the strapline, I wanted to keep it brief, so I had a bit of a think and a play around with words and came up with “Documenting the climate emergency”.
The only other thing to mention is that I used opengraph.xyz to add previews for various social networks. That works well for the about and faq pages, but I haven’t got it to play nicely with the XML on the index page.
Copy/pasting the existing news from HTML to XML RSS format was tedious, so I’m glad I only had 30 items to convert!
If you’d like to suggest any changes to the site, please check out the code repository and send issues or pull request. You can visit the site itself at extinction.fyi and also subscribe via RSS by simply adding that URL to your feed reader.
This post is Day 95 of my #100DaysToOffload challenge. Want to get involved? Find out more at 100daystooffload.com.
Hi Doug,
Next time you might want to have a play with Jekyll, which plays with Github Pages really nicely and produces an RSS feed from markdown files.
It’ll take a while to set up the first time. But makes it very easy to add new stuff.
Thanks Mark! I have used Jekyll before, but Ruby does my head in. This approach may be a little over-wrought, but there’s something nice about the page also being an RSS feed 😉
I just love that this is a documented evolution but more that the web site IS RSS. That is genius.
And it fits well as an example of what I have been mulling as a draft in my head– that what is missing from much of the places people are putting their time, energy, ideas into the web (social streams, email newsletters, same old look alike template sites) is that it is missing the human touch. Not only building by hand, but just the quirkiness that happens from crafting your own stuff rather than handing it all over to a third party commercial outfit.
Another aspect is that there are many ways to do this. Me? I would bookmark and annotate in pinboard and use it’s RSS feed to push to a site. But there is no one “right way” to do this, only the way that works for you.
Lastly I appreciate the source names after the title/link. I have been aiming to do that in all web link lists. The source matters.
Cheers
Thanks Alan, that’s definitely high praise coming from you! Appreciate it 🙂
I think the web isn’t as weird as it should be, and this project has been a great learning experience so far!
Hi Doug,
I was wondering what was going on, the old feed was behaving strangely in my reader. The new one works really nicely in inoreader.
I do get different behaviour in different browsers. Firefox, where I’ve an RSS extension, shows the RSS; Safari offers to one the feed in NetNewsWire RSS reader; Chrome shows the webpage.
Alan’s comment about pinboard is interesting, I used to have a sort of tumble blog running off the rss from my delicious links.
Hi John, yeah it’s weird because I’ve only just tried out the site in my wife’s MacBook and iPad. She doesn’t have an RSS reader installed on either, so it prompts the user to install one. Seems to be a Safari thing?
Hi Doug,
Looks like, as far as I can search, Safari doesn’t support XSLT for RSS feeds. Disappointing. I follow the site via rss anyway but it is nice to have options.
Finding some great links in the feed thanks.
It is a shame, yes 😬