A Likes Feed
Client-side RSS parsing is fun and awesome.
I recently saw a tweet from Dave Rupert about how Feedbin will give you a URL to a public RSS feed made up of articles that you’ve starred through Feedbin. He made a page on his site that parses that feed and shows them as normal links. I then found another post that gives a little more detail as to how to actually set it up.
Naturally, I had to try it for myself. After all, I recently integrated search into the site without any server-side nonsense. RSS parsing in the browser? Yes, please!
Feedbin is awesome. I miss Google Reader but contrary to popular belief, RSS did not die with it. RSS is alive and well. I use Feedbin as a sync service for my curated collection of feeds. I use Reeder to access my feeds most of the time, but the Feedbin web interface is nearly as good. Feedbin isn’t free but I encourage anyone and everyone to try it out as it’s a wonderful service.
Enabling the Starred Feed
In order to do any of this, I had to enable the starred articles feed. This can be done by going to the Feedbin General Settings page and enabling
Starred articles feed. Then the page will show the URL for that feed which we’ll need later.
Bonus: External Saving
Not all the fun articles I read come from my RSS feeds, but there is a way to save external links into Feedbin and there is a way to auto-star them!
- To save an external page into Feedbin, there is a bookmarklet found under the Newsletters & Pages page of the settings. This will save a page into Feedbin under a special “Pages” feed.
- If you have the Feedbin mobile app, you can also use a native share extension.
- Under the Actions page of the settings, I created a new action. I selected the Pages feed and checked both boxes to mark the item as read and to start the item.
After doing both of these, I can use the bookmarklet (or share extension) to save any page into Feedbin. The action then takes over to mark the item as read and star it. This basically imports it directly into the starred feed without me seeing it in my normal unread feed.
The Feed Page
This next part is similar to what I did for the search page on the site.
I called it
feed.ejs thinking that I may want to integrate more RSS feeds into the site using this method. Here’s the entirety of that template:
<main class="container container--postlist" data-feed-url="<%= page.feedUrl %>">
The important part here is the
page.feedUrl being injected into the document. Also the script being loaded up.
Now I needed a page to use that template. I create a file under my
source directory at
likes/index.md. This ensures it exists at the URL of
/likes. Here’s that entire page:
feedUrl property in the front-matter. That’s what connects to the
page.feedUrl in the template. Each page I create using the template can define it’s own feed.
Parsing the RSS Feed
This is the fun part.
let container = document.querySelector('main[data-feed-url]');
What’s happening here? Let’s break it down:
- The first block of variables is just getting the feed URL from the DOM and building the full URL with a simple CORS proxy I have running as an Azure Function.
- The second block is actually fetching and parsing the feed. The magic, though, is the
DOMParser. RSS is just XML. XML can be parsed by the browser natively and then traversed like you traverse the DOM. CSS Tricks has a good guide for this.
- The loop is getting each item from the feed and creating a blob of HTML from it. I’m only grabbing the title, date, and URL for each page, since the description contains HTML and I don’t want to deal with that.
- I left off the
createPostItemHtmlfunction because it’s just a wrapper around a template string.
- I left off the
- Finally, add our new blob of HTML to the page.
Side note: I’m using APIs that are not available in IE. These include
await. I don’t support IE because I don’t want to and it is marvelously freeing. These new APIs are so nice.
This method is simple and works pretty well. I see this as an alternative to Twitter for sharing interesting articles I find. It’s something that uses (mostly) open web technologies to make a pseudo-social network without interference from a big company.
RSS is great and Feedbin is awesome for providing the starred feed.
Update: As of 2020-07, I’m now using Pinboard to power the feed.