Obviously, I highly recommend all those these books, as they’ve had a pretty large impact on me as a designer & a developer. The best part about them is that they’re all pretty easy reads, they’re not the kind of books you have to spend a week or 2 reading.

Does anyone else have books like this? Or do we all just read blogs now?

I was building an RSS reader for a project last week and it turned out to be a cool little app. So I thought I’d share some of the code.

View demo

Download demo files

Let’s start off with the HTML we need to get some user interaction with the form. It’s a pretty basic, just some of checkboxes.

HTML

<form action="" method="post" id="selection">
  <h2>Choose your news sources</h2>
 <!--
  Setting all the checkbox names to "source[] helps us build the array on submit"
  We're also adding the RSS feed url to the checkbox value so we can save it in the array values
  -->
  <ul>
  <li><input type="checkbox" id="csskarma" name="source[]" value="http://www.csskarma.com/blog/feed/"/><label for="csskarma">CSSKarma</label></li>
  <li><input type="checkbox" id="cnn" name="source[]" value="http://rss.cnn.com/rss/cnn_topstories.rss"/><label for="cnn">CNN</label></li>
  <li><input type="checkbox" id="espn" name="source[]" value="http://sports-ak.espn.go.com/espn/rss/news"/><label for="espn">ESPN</label></li>
  <li><input type="checkbox" id="vitamin" name="source[]" value="http://feeds.feedburner.com/vitaminmasterfeed"/><label for="vitamin">Think Vitamin</label></li>
  </ul>

  <!-- Setting the submit name to "btn" -->
  <input type="submit" value="submit" name="btn" id="btn-submit"/>
  </form>
  </div><!--/#selectnews-->

The only real thing worth noting in the form code are the names of the checkboxes. We use all the same name to group them together and the [ ] helps create the array on submit. I just chose to use source[] because it made sense to me, but you can use anything as long as the names are consistent and the brackets are there. Just adjust your PHP accordingly.

SimplePie PHP

<?php
/* Get the SimplePie library */
require_once ('inc/simplepie.inc');

/* Create a new instance of SimplePie */
$feed = new SimplePie();

/* Get array */
// If the form has been submitted and the user selected news sources
if (isset ($_POST['btn']) && isset($_POST['source'])) {

    // Save the array of news sources to a variable $checked
    $checked = $_POST['source'];

    // Pass the array of news sources through the SimplePie set_feed_url() function
    $feed->set_feed_url($checked);

    // Also, save this data to a cookie called "feedurls" that will expire when the browser closes
    setcookie('feedurls', serialize($checked));

// If the form wasn't submitted look for the "feedurls" cookie
} else if (isset ($_COOKIE['feedurls'])) {

	// If the cookie was found, pass the data through set_feed_urls()
	$feed->set_feed_url(unserialize($_COOKIE['feedurls']));
}

/* Set item limit */
$feed->set_item_limit(3);

/* Enable caching */
$feed->enable_cache(true);

/* Provide the caching folder */
$feed->set_cache_location('cache');

/* Set the amount of seconds you want to cache the feed */
$feed->set_cache_duration(1800);

/* I don't know what "init" means */
$feed->init();

/* Handle the content type (atom, RSS...) */
$feed->handle_content_type();
?>

This is nothing that can’t be read in the comments, but the guts of the PHP comes in right under the “Get Array” comment. We’re checking to see if the form was submitted and the user selected news sources; if so, dump the values into SimplePie and save them to a cookie we can refer to later. The initial idea was for this to live at a pretty open place (a computer lab or something), that’s why the cookie expires on browser close.

I limited the per-feed output to 3 to keep it a little clean, but you can set that to whatever you want. It’d be pretty easy to let the user choose this as well with a select menu:

<select name="displayNumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

And replace $feed->set_item_limit(3); with $feed->set_item_limit($_POST['displayNumber']);. There may be some extra tweaking beyond that, but the general idea is to pass the submitted value into SimplePie.

jQuery

Now that we have the form fully functional we can layer some JavaScript on top of it to make it a little more nifty. This is using the jQuery Form Plugin. It’s the first time I’ve really used this plugin, but it’s actually pretty nice and easy to use. I had some little quirks with it, but nothing too major.

$(function() {

/* If JavaScript is active create a link to slide the form out */
$('#getform a').click(function(){
	$('#selection').slideToggle('slow');
	return false;
});//

/* make it look like something happened */
$('#selection, #reader').hide(); //
$('#reader').fadeIn('slow'); //

 /* bind form using 'ajaxForm' */
$('#selection').ajaxForm(options); 

/* Submit form via Ajax */
var options = {
    target:       '#rssloader',
}; //

});// End jQuery

View demo

Download demo files

Anyway, that’s all I have for today. It’s a pretty unpolished demo so let me know what you think, where I screwed up and if you can build on it and make it better. I’ll try to write some more soon.

Ingredient list

• SimplePie
• Starter files from CSS-Tricks
• jQuery
• jQuery Form Plugin
• Hill’s Brain
• Coffee

• The core of the application runs on 2 files
  • main.js
  • main.xml
• There are also some image and CSS options readily available, but the guts of it really run on JavaScript and XML
• Overall, it’s very straightforward, a little playing around with the sample gadgets will give you a good idea of what you can do (endless possibilites)

The file structure of some of the sample gadgets leaves a lot of room for improvement. Some seem to be built to handle very large, modular applications, but in most cases, they’re a little too modular (in my opinion).

Some of the more useful samples you can go through are:

• Animations
• ComboBox
• Countdown
• DragDrop
• HelloWorld
• HTMLDetailsView
• QueryAPI
• RSS
• XMLDetailsView
• XMLHttpRequest

There are others too, but these are the one’s I found most useful. So, lookin at those options, a being an RSS freak, I chose to customize the RSS gadget for CSSKarma

CSSKarma RSS Gadget

Download CSSKarma RSS Gadget

The first thing to do is to make a copy of the RSS sample given with the Google Gadget samples. I did that (as a CSS person), I opened up the theme folder “default” and looked for “details.css”. I assumed this file would edit all the presentation for the gadget. It doesn’t. I only edits the flyout menu (after you click on a link in the RSS gadget). OK, that’s fine. So I enter this CSS:

body {
  color:#323F4C;
  background:#fff url(http://www.csskarma.com/images/bg_branding.jpg) no-repeat 0 bottom;
  font: 0.8em/1.5 Verdana, Arial, Sans-serif;
}

That will add my CSSKarma logo to the flyout and add some basic CSS. The other files in the theme folder to deal with are “entry_item.xml”, “theme_config.xml” and “title.xml”. After you look at “theme_config.xml” and “title.xml”, you’ll see why I think this is a little too modular. I left those two file alone. But I did edit “entry_item.xml”, view entry_item.xml. I edited some style information in there (one more thing I’m not thrilled about – embedding style info into the XML).

The next folder to tackle is “editme”. It contains 2 files (config_constants.js and entry_item_impl.js). In “entry_item_impl.js” you can edit the RSS nodes, if you want. I chose not to. In “config_constants.js” you need to edit the URL of the RSS feed you want to use.

The last thing I wanted to do was to remove the default background image from “main.xml”. When I did this, the background was transparent, by default. So in “main.xml” I added a background attribute of #FFFFFF to top level div (container). I also edited the height and width attributes of the “view” element for when the gadget is undocked from Google Desktop.

The outcome of this was the CSSKarma RSS Gadget (You’ll probably need Google Desktop installed to use this). A very basic RSS gadget made by making simple modifications to the sample files. Feel free to download, play around with it, and let me know about any errors you find.

Aptana Jaxter

Aptana Jaxter recently released “The worlds first Ajax server” (I have no date to back up the claim that it was recent). I’ve seen some web apps using this in integrating the Google API, looks promising but there’s very limited server space right now. I’d like to see how these can be integrated into the Mobile web. I don’t have too much information on it right now (and I keep losing the damn link).

That’s all I have for now.

With ease
Tim