I love RSS. However, by using a third-party plugin to automatically generate the feed, I didn’t pay attention to how it could be improved. An occasional discussion on Mastodon prompted me to a change.

A few days ago, while reading my Mastodon timeline, I stumbled on an article by Wouter Groeneveld, titled Cool Things People Do With Their Blogs. Two things caught my eye:

• styled OPML blogrolls that can be imported into an RSS reader, by Ruben Schade;


• styled RSS feeds to better explain what a web feed is, by Matt Webb.

I’d forgotten about XSLT and its potential applications and what I saw in the above examples were inspiring to me. Also, I kind of ignored how OPML, which I’ve been using as a format to backup and export/import my RSS feeds, can be styled and used as a human-readable experience on the web.

After a few more clicks, I landed on the OPML blogroll on Maya’s site. As I stated on Mastodon, probably the best and most useful blogroll I’ve ever seen. Not only they explain why each link might be interesting to anyone visiting, it’s also beautifully formatted and capable of being imported in my RSS reader.

This prompted me to apply styles to my RSS feed and give a human readable format to it. It was surprisingly easy, and I wonder why didn’t I do it sooner. I’ve been using the widespread feed plugin for Jekyll, though since my main motivation for leaving WordPress was to take full control over my code, I should have managed the feed myself rather than relying on a third party.

Using Jekyll functionality

Since I wanted to have both blog posts and projects — a Jekyll collection — I created a loop that would exploit the layout type rather than the content type, iterating 20 times (my configuration value for posts_limit) through the resulting variable:

{% assign projects = site.documents | where:"layout", "project" %}
{% assign blog = site.documents | where:"layout", "post" %}
{% assign posts = projects | concat: blog | sort: 'date' | reverse %}
  {% for post in posts limit:site.posts_limit %}
    <item>
      [code here]
    </item>

Finally, I created an XSL file to style the feed page into a human readable format, following the aforementioned example by Matt Webb. Since I rewrote the RSS feed from scratch, I also decided to add new features to the .xsl file:

• an introduction to who I am at the top of the main feed;


• useful author information directly in each post, for easy contact information;


• a “reply via email” link at the end of each post, visible on any RSS reader.

The CSS file attached to the XSL presentation is so small that I didn’t bother to minify it. The sum of 3 files are less than 5 KB.

Before & after

Here’s a link to my new human-readable RSS feed. Below, a visual comparison of the before and after.

Source code

• 📄 RSS XML feed on Github ↗︎


• 📄 XSL file on GitHub ↗︎