How to Make Your Own RSS Reader App with JavaScript
Have you ever wondered how websites and apps keep you updated with the latest news and content? One way they do this is through RSS, which stands for Really Simple Syndication. It’s a standard format that online publishers use to share their content with other platforms. An RSS document, also known as a feed, is an XML document that carries the content a publisher wants to distribute.
Almost all online news websites and blogs have RSS feeds available for their readers. These feeds allow you to stay up-to-date with the latest articles and stories without having to constantly check the website. But RSS feeds aren’t limited to just text-based websites. Even platforms like YouTube have RSS feeds for their channels, allowing you to be notified whenever a new video is uploaded.
In the world of the internet, there are tons of information floating around. A lot of websites have what’s called an RSS feed, which is like a stream of content that you can access. But how do you actually read and display the contents of an RSS feed? Well, that’s where RSS readers come in.
RSS readers are special programs that can access these feeds and present their contents in a nice, readable format. And guess what? You can create your very own RSS reader program using JavaScript!
So, in this tutorial, I’m going to show you how to build a simple RSS reader from scratch. Don’t worry, it’s not as complex as it sounds. I promise!
How an RSS feed is structured
An RSS feed begins with a special tag called the root element, which is similar to the tag used in HTML documents. Within this tag, there is another element, similar to HTML, that contains various sub-elements. These sub-elements hold the content that is distributed across the website.
The feed typically includes some basic information, such as the website’s title, URL, and description, as well as the individual updates, articles, or other content from that website. You can find these details in the title, link, and description elements, respectively.
When these tags are directly present inside <channel>, they hold the title, URL, and description of the website. When they’re present inside <item> that holds the information about the updated posts, they represent the same information as before but that of the individual contents that each represent.
There are also some optional elements that may be present in an RSS feed, providing supplementary information such as images or copyrights on the distributed content. You can learn about them in this RSS 2.0 specification at cyber.harvard.edu.
Here’s a sample of how the RSS feed of a website might look like:
I will begin by rewriting the introductory text, and then move on to rephrasing the HTML markup.
—
Welcome to usamerica! Here you’ll find all sorts of design tips, tutorials, and inspirations. Whether you want to know how many CSS rules are in a stylesheet or you’re interested in the latest smart devices powered by Alexa, we’ve got you covered.
To get started, let’s take a look at two recent blog posts:
1. Visualize Any CSS Stylesheet with CSS Stats – Have you ever wondered how many CSS rules are in a stylesheet? With CSS Stats, you can easily visualize and analyze your stylesheets. Check out our blog post to learn more: [Read More](https://www.usamerica.com/blog/css-stylesheet-with-css-stats/)
2. Amazon Echo Show – The Latest Alexa-powered Smart Device – Amazon is no stranger to smart home systems with embedded digital assistants. Their latest device, the Amazon Echo Show, takes things to the next level. Find out more about this innovative gadget in our blog post: [Read More](https://www.usamerica.com/blog/alexa-device-amazon-echo-show/)
To stay up to date with our latest content, be sure to subscribe to our feed. Now, let’s dive into the details!
—
And here is the rewritten HTML markup, preserving the tags and structure:
usamerica
https://www.usamerica.com/
Design Tips, Tutorial and Inspirations
en-us
Visualize Any CSS Stylesheet with CSS Stats
Ever wondered how many CSS rules are in a stylesheet? Or have you ever wanted to see…
18/05/2017
https://www.usamerica.com/blog/css-stylesheet-with-css-stats/
Amazon Echo Show – The Latest Alexa-powered Smart Device
Amazon isn’t stranger to the concept of smart home systems with an embedded digital assistant. After all, the…
17/05/2017
https://www.usamerica.com/blog/alexa-device-amazon-echo-show/
Getting the feed
When we want to read the latest updates from a website, we use our special application called an RSS reader. This application is like a newspaper delivered straight to our device, but instead of paper, it uses a special format called RSS. To get the RSS feed from a website, we need to know the URL where it’s located. Thankfully, we can usually find this URL inside a special tag on the website itself. This tag has a type attribute set to “application/rss+xml”.
Let me show you how you can find the feed URL of a website using JavaScript. Just follow the steps below:
fetch(websiteUrl)
.then((res) => res.text())
.then((htmlTxt) => {
var domParser = new DOMParser();
let doc = domParser.parseFromString(htmlTxt, ‘text/html’);
var feedUrl = doc.querySelector(‘link[type=”application/rss+xml”]’).href;
})
.catch(() => console.error(‘Error in fetching the website’));
The fetch() method is a handy tool that helps me fetch information from the internet. It works asynchronously, meaning it carries out tasks in the background while I can continue with my other work. To use fetch(), I simply need to provide the URL of the website I want to fetch.
When fetch() successfully fetches the website, it gives me a Promise object. This is like a promise to do something in the future. The first function inside the then() statement is where I handle the fetched response. In the code above, that response is stored in a variable called “res”.
Once I have the fetched response, I can read it as a text string using the text() method. This method takes the response and fully converts it into a readable string of HTML text. Just like fetch(), text() also returns a Promise object. When it successfully creates the response text from the stream of information, the then() statement will handle that text. In the code above, that text is stored in a variable called “htmlText”.
In summary, fetch() helps me fetch a resource from the internet, and then the text() method converts that resource into a readable text string. It’s a great way to interact with the web and get the information I need!
Once I have the HTML text for the website, I can use the DOMParser API to transform it into a DOM document. The DOMParser is a clever tool that takes an XML or HTML text and turns it into a structured document that can be manipulated.
I’ll use the parseFromString() method, which requires two arguments. The first argument is the text that needs to be parsed, and the second argument is the content type.
Now, with the DOM document created, I can find the href value of the relevant tag by using the querySelector() method. This will give me the URL of the feed that I’m looking for.
But what happens next? Well, once I have the feed URL, I need to fetch and read the RSS document located at that URL. This is an important step in parsing and displaying the feed.
It’s fascinating to see how technology allows us to gather information from websites and make use of it in various ways. With the DOMParser API and some clever code, we can navigate through the HTML, find the desired information, and use it to create engaging and dynamic websites. The possibilities are endless!
So, next time you’re browsing the web and wondering how all the magic happens, remember that behind the scenes, tools like the DOMParser API are at work, parsing and extracting data from websites. It’s truly remarkable!
I’m going to show you how to get and parse an XML feed into a DOM document, just like we did with the website. It’s pretty simple, really. First, we need to set the content type to ‘text/xml’ in the parseFromString() method. This tells the program that we’re dealing with XML.
Once we’ve got the XML parsed into a document, we can start selecting elements. We use the querySelectorAll method to grab all the elements we want. Then, we loop through each one to do whatever we need to do with them.
That’s all there is to it! Now you can fetch and parse XML feeds like a pro.
When we look inside each element, we have access to tags like <title>, <description>, and <link> that carry the feed content. So now our simple RSS reader app is complete, and you can customize the appearance of the fetched feeds to your liking.
Take a look at our Github demo
If you want to see a more detailed version of the code used in this post, head over to our Github repository. The enhanced version fetches three different feeds (Mozilla Hacks, usamerica, and the Webkit blog) by utilizing a JSON file. We also added some CSS styles to spruce up the appearance of the RSS reader.
