Open Thinkering

Menu

Tag: news

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.

Old version of extinction.link complete with skulls and strapline "Documenting the end times"

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.

New version of extinction.link with new logo (earth on fire) and strapline "Documenting the climate emergency"

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.)
  5. 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.
  6. 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

css.php