An RSS feed with a custom reading view

A while ago, I decided to refactor my RSS feed code to using the newer Atom standard. An RSS feed is a good addition to having an email newsletter for getting your updates out. As I looked up the new code format, I also discovered a lesser-known browser feature for outputting RSS feeds in a human-readable format.

Atom RSS standard

Let’s start with looking at the Atom code. This is the header and meta info:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="feed.xslt" type="text/xsl"?>
<feed xml:lang="en-US" xmlns="http://www.w3.org/2005/Atom">
  <id>distinctivequality.com:blog</id>
  <link rel="alternate" type="text/html" href="https://distinctivequality.com/blog/"/>
  <link rel="self" type="application/atom+xml" href="https://distinctivequality.com/blog/feed/"/>
  <title>Distinctive Quality blog</title>
  <updated>2023-09-24T03:29:39Z</updated>
...
</feed>

The id element should be unique. To keep things simple, it can just be the URL to your articles' homepage. But in case that URL changes, you may want to use a different id format.

Here's an example entry for an article:

<entry>
  <id>distinctivequality.com:blog/rip-flash</id>
  <published>2017-08-28T00:00:00Z</published>
  <updated>2017-08-28T00:00:00Z</updated>
  <link rel="alternate" type="text/html" href="https://distinctivequality.com/blog/rip-flash"/>
  <title>RIP Flash</title>
  <content type="html"><p>Recently, <a href="https://blogs.adobe.com/conversations/2017/07/adobe-flash-update.html" target="_blank">Adobe officially announced</a> it is discontinuing support for its Flash browser plugin by 2020. You know, that thing you get bugged about updating. Or, perhaps you’ve already decided to stop installing it altogether.</p>
  <p>Flash has been dying a slow painful death ever since Steve Jobs wrote his infamous <a href="https://www.apple.com/hotnews/thoughts-on-flash/" target="_blank">“Thoughts on Flash” letter</a> in 2010 about why Apple decided not to include support for it on the iPhone and iPad. <<a href="https://www.theverge.com/2011/11/9/2549178/adobe-officially-kills-flash-player-for-mobile-says-html5-is-the-best/in/2313237" target="_blank">Android soon followed suit</a>. It’s too bad Adobe never figured out how to make it work.</p>
  <p>Flash has been around since the early days of the web. And since the web back then was pretty primitive, it’s capabilities really stood out and it quickly became something every website was using. During that time, I did <a href="http://distinctivequality.com/projects/balzare-website/" target="_blank">quite</a> <a href="http://distinctivequality.com/projects/secure-medical-website/" target="_blank">a bit</a> of <a href="http://distinctivequality.com/projects/charmed-dvd-minisite/" target="_blank">client</a> <a href="http://distinctivequality.com/projects/bridget-jones-dvd-minisite/" target="_blank">work</a> in Flash. Even the <a href="http://gottoseeit.com" target="_blank">website for my first business</a> (over fifteen years old!) was made in Flash.</p>
  <p>But throughout the years, web technologies have evolved with better ways to do the things Flash used to only be able to do, like play video. And Flash began to lag behind. We also evolved in how we used the web and the flashiness of Flash’s animations and sound effects became tacky. We began using animation more purposely to enhance functionality and we decided sound effects were essentially unnecessary. The only thing Flash may still be good for is casual browser games. But even those are being replaced by casual mobile games as apps.</p>
  <p>For any interactive animation, it’s now typically coded using web standards HTML, CSS and Javascript or made with a tool like <a href="http://tumult.com/hype/" target="_blank">Hype</a> which exports the code for you.</p>
  <p>It is the end of a web era. It’s a shame to lose so many great Flash creations of the past. Hopefully <a href="https://archive.org" target="_blank">The Internet Archive</a> can find a way to still view them after the plugin is gone from our computers.</p>
  <author>
    <name>Ovi Demetrian Jr</name>
    <email>ovi@distinctivequality.com</email>
  </author>
</entry>

The published element is actually not required, but the updated element is which can be used instead of published as well as for when any significant changes are made to an article. For the author element, you can optionally include a uri or an email element, or both.

And an entry example that is a link to an outside article:

<entry>
  <id>distinctivequality.com:blog/introducing-blocks-edit</id>
  <published>2017-10-02T00:00:00Z</published>
  <updated>2017-10-02T00:00:00Z</updated>
  <link rel="alternate" type="text/html" href="https://blocksedit.com/content-code/introducing-blocks-edit/"/>
  <title>Introducing Blocks Edit, content management for email</title>
  <summary>Blocks Edit is now live and ready for you to improve how you send out marketing campaigns.</summary>
  <author>
    <name>Ovi Demetrian Jr</name>
    <email>ovi@distinctivequality.com</email>
  </author>
</entry>

Instead of the content element, there's a summary instead since there is no content provided for the entry.

For more details on each element along with additional optional elements you can include, take a look at the official W3C Atom doc

Custom RSS preview

By default, when clicking on an RSS feed link in a browser, it's either shown in it's raw XML code, or the browser will show an error prompt that it does not recognize the file format. However, there is an option to format the preview of an RSS feed using XSLT, which is a stylesheet for XML.

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:atom="http://www.w3.org/2005/Atom">
  <xsl:output method="html" version="1.0" encoding="UTF-8" doctype-system="about:legacy-compat" indent="yes" />
  <xsl:template match="/">
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title><xsl:value-of select="/atom:feed/atom:title" /> RSS feed</title>
      <link rel="stylesheet" href="style.css" />
    </head>
    <body>
      <section>
        <h1><xsl:value-of select="/atom:feed/atom:title" /> RSS feed</h1>
        <p>Copy this URL into your preferred RSS reader:<br/>
          <code>https://distinctivequality.com/blog/feed/</code>
        </p>
      </section>
      <section>
        <xsl:for-each select="/atom:feed/atom:entry">
        <article>
          <h2><a><xsl:attribute name="href"><xsl:value-of select="atom:link/@href"/></xsl:attribute><xsl:value-of select="atom:title" /></a></h2>
          <p><time>Published <xsl:value-of select="substring(atom:published, 0, 11)" /></time></p>
<xsl:value-of select="atom:content" disable-output-escaping="yes" />
<xsl:value-of select="atom:summary" />
        </article>
        </xsl:for-each>
      </section>
    </html>
  </xsl:template>
</xsl:stylesheet>

The header area defines the code as an RSS feed stylesheet and template. It then turns into what seems like standard HTML. The main difference is that closing an element that's self-contained requires using />. You can even add custom content and use <style> and CSS.

You'll also notice template tags are used to output content from the RSS feed. For a list of all the tags and what they do, you can use this reference.

I ran into an issue with having example code in my posts. Outputting some example HTML code it didn't like, the XSLT template would just stop and cut off the rest of the feed items.

For an example of a styled feed, here's the Distinctive Quality feed.

---