Gavin's Stuff

A collection of thoughts exceeding 140 characters

Posted on by Gavin


Javascript is nice, and so is RSS. These days, you don’t have to write for a platform to create a working application – just program for the web browser, and expect it to work everywhere. The prevalence of RSS allows for apps to read loads of interesting content from this standard protocol with ease. jQuery, a framework built on top of javascript, makes it easy to leverage common operations in a way that keeps your code semantic and compatible across all browsers.

As a demo of this collision of technologies, I built an RSS reader in jQuery using only a few lines of code. It will load any RSS feed you like, just plug in the URL and hit ‘Load’. By default, it will load the feed from Mark Coddington’s insightful media musings series. Click the screenshot to view the example:

Mezer_11-01_15-43-13

Since this is only a demo, don’t expect it to actually be useful! Instead, admire the brevity and logical syntax of the script that generates it. After setting up some basic styles, then loading the jQuery and Google AJAX Feed libraries, the entire app can be written with only a few lines of code:

$('#btnLoad').click(function() {
  var oFeed = new google.feeds.Feed($('#inpURL').val());
  oFeed.setNumEntries(15);
  oFeed.load(function(result) {
    $('.cRSSList').empty();
    if (!result.error) {
      $(result.feed.entries).each(function() {
        var oFeed = this;
        $('<a href="#"><span class="cHeadline">' + oFeed.title + '</span><br /><span class="cByline">' + oFeed.contentSnippet + '</span></a>')
          .click(function() {
            $(this).parents('.cRSSReader').find('.cSelectedRSSItem').removeClass('cSelectedRSSItem');
            $(this).addClass('cSelectedRSSItem');
            $(this).parents('.cRSSReader').find('.cRSSContent').html(oFeed.content + '<br /><a target="_blank" href="' + oFeed.link + '">View Original</a>');
          })
          .appendTo($('.cRSSList'));
      });
      // load the first one...
      $('.cRSSList a:first').click();
    }
  });
}).click();

Posted on by Gavin | Posted in Code


Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>