One of the most influential and robust protocols on the web is RSS. There, I said it. without RSS, we wouldn’t have known the social timelines, podcasts would cease to exist and we wouldn’t have an extra reason to hate Google for abandoning a great product (Google Reader that is…)

But RSS-feeds have a big flaw: They are impossible to read and understand for a normal human being. RSS is meant to be read by machines and not by us mere mortals. But if you want to get started with RSS, you will visit a link to a feed and be all like “WTF is thís garbled mess of code and letters? I don’t understand, bring me back to my pristine algorithmic timeline! I shant visit such a feed-page again!”

A screenshot displays XML code for an RSS feed with textual descriptions and links related to website content creation.

Anyway…

Time to get this fixed.

Since I have some control over the templates on my blog, I can create a stylesheet to make the RSS-feed more readable for humans, yet keep it machine-readable under water. This is all done by the magic power of XSLT. Yes, another abbreviation, I can’t help this. The technologists need some proper copywriters and productmanagers to make this all a bit more inclusive for…you know…all of us.
XSLT stands for Extensible Stylesheet Language Transformations. It is used to transform machine-readable documents into human-readable documents. With specific rules you can reorder and manipulate the contents of the original document without actually changing this source for the machines. Sounds like something we can use!

I added an XSLT-file to my RSS feed, in which I also explain what RSS is and show the last 25 posts. Just by giving it some styling we fix a major user experience problem for those who are new to RSS and it makes your webfeed feel part of the open web. And it has no impact on those who already use RSS. What a win!

How to style your RSS feed at Micro.blog

These next steps will help you to create a human-readable RSS feed for your micro.blog-based website. The steps are relatively the same for other blogplatforms, as long as you have access to the templating engine.

Step 1: Create a custom theme to work in

Go to the admin-section of Micro.blog > Design and pick Edit Themes button below “Hugo Version” For this post, I use my test site with the default theme from Micro.blog. You need to make a custom theme. Don’t worry, I’ll guide you through it. It’s just a few steps. Click the blue “New Theme” button on top. Give your own theme a name and click Add Theme. You don’t need to clone a github URL.

A webpage form with fields Title filled with My custom theme for the default theme and Clone URL empty, buttons Back and Add Theme. Text above reads Create a new theme to provide custom templates for your blog.

Step 2: Create your first XSLT file

Now click on the name of your new custom theme, in the list of Themes. You’ll get to a page with templates. On top, click the blue button “New Template” Create a new file called “static/css/rss.xsl” (without the quotation marks)

Copy the raw text from this file (tip: click the button “raw” and select all the text you see), paste it in the editor and click “Update template”

Computer screen displaying code for an XML stylesheet surrounded by the software user interface, with a message on the right about previewing a blog theme.

Click “Back”

You will now see the file static/css/rss.xsl under the header “Custom Templates”. Hurrah! You created your first custom template. Celebrate.

Step 3: Connect your XSLT file with your RSS feed

Again click on “New Template”. Name this one “layouts/index.xml”. Get the raw text from this file and paste it in the file. Update template and click “Back” again. You now have two files under Custom Templates: layouts/index.xml and static/css/rss.xsl.

A user interface displays buttons for Back, Delete Theme, Duplicate, and New Template, and editable fields titled My custom theme for th and Update Title above a section labeled Custom Templates with listed files layouts/index.xml and static/css/rss.xsl.

You have effectively created a duplicate of the original template for an RSS feed. Which is exactly what should have happened. Celebrate again.

Step 4: Update your blog with your new template

Go back to Design and select your custom theme. Click “Update blog settings” You might have to rebuild the complete blog for everything to settle in. Go to Account > Logging > View Logs and click “Rebuild your sitename”

Step 5: Check your hard work on the internet

Now go to the RSS-feed page of your site (yoururl.com/feed.xml) and tadaa! Here is your stylized feedpage. Isn’t that wonderful!

Step 6: Some explanation how the feed is shown

Most of the XSLT file is styling of the page. There is a small part that actually takes the machine-readable contents of your RSS feed and displays it in a specific way. I made a choice to show only the title and the published date. I don’t always use titles. When this happens, I want to show the first 30 characters of the blogpost, without any HTML-output like paragraphs, links or images. In the XSL file (see the gist file again) I have the following logic built in

  • When the title of the item is longer than 0 zero characters (so there is a title), show the title
  • If not, get the description and take everything after the first opening paragraph tag. I have this extra check, because I found out I had two posts starting with an img tag. I only want the text of the post.
  • After that, I call the extra template “remove-html” (you can find this at the bottom of the file). This is a sort of function to strip all HTML from the description and give this back. Thanks to Maulik for providing the necessary code!
  • Get the first 30 characters of the returned, cleaned text and use this as a title. End it with three ellipses so the reader understands there is more.

In the custom template for the RSS-feed, I added a link to the XSL-file for styling and I added the information to show your avatar in the styled feed. This should not impact your current readers.

Now go out and make RSS great again!

All the styling is done in the XSLT file. Other authors created their own styling for the RSS feed. A few examples: