Preamble

I could’ve gone the server-side route; use PHP to grab the feed from here (well, Feedburner actually), parse it (probably with SimpleXML for simplicity) and display it with my desired HTML. And that’s a perfectly acceptable approach. However, since the feed content is only really an added extra I didn’t want to add the feed content to the HTML page and have that overwhelm the main content on there (the introduction and contact info). Because of that, I decided to take the client-side approach using JavaScript to grab, parse and inject our feed into the page.

The Feedburner feed, as is usual for feeds, comes in XML format and due to the security restrictions of browsers I can’t just go and grab that with JavaScript. Besides, I didn’t want the whole feed anyway: who wants to load in a 38kb feed just to grab some headings? (What I do end up grabbing is around 4kb.)

Introducing YQL

To grab only what I want, and to provide a format that I can actually get at, as well as to satisfy a niggling urge to put it into some practical use, I headed over to Yahooland and made use of the awesome tool that is YQL. YQL provides a SQL-like syntax for getting at the structured data (feeds are structured data!) around the web. It allows me to ask for specific items of data from the web, such as “give me the title and permalink for the last 10 items from Yahoo news” for example. There’s a huge range of data that YQL can get its hands on (stopping just short of the entire web) but that’s beyond the scope of this blog entry. The service also allows me to get responses in XML or JSONP, the latter being important because I can grab this from a remote domain name without the security restrictions coming into play.

Querying for data

So to get at my feed, I can simply issue the query:
Try it yourself

SELECT * FROM feed WHERE url='http://feeds2.feedburner.com/cowburn'

For my little widget, I don’t really need everything brought back by that query. Firstly, I only want the latest 5 items instead of the 10 that Feedburner provides. Secondly, I only really need the title, date, link and excerpt for each blog entry. The Feedburner feed provides extra information like the comments link, tags, and the full HTML content of the entry. Grabbing only what I need shrinks down the size of the data coming down the pipe and results in things getting done faster. I mentioned before that I wanted the results in JSONP format which is a simple enough task: just click the JSON radio button in the YQL console, or add “format=json&callback=cbfunc” (where cbfunc is your callback function name) to the REST query URL. So to grab only what I want, the following YQL query is used: Try it yourself

SELECT title, description, link, pubDate 
FROM feed(0,5) 
WHERE url='http://feeds2.feedburner.com/cowburn'

Aside: the (0,5) limits YQL to the first 5 items in the Feedburner feed.

Right, now we have the data that we want and can get it in JSONP format. How do we go about doing that exactly? JavaScript time!

Retrieving the JSONP with jQuery

I really like using jQuery for adding in extra goodness to sites and I was already using it for a little piece of DOM manipulation on the page (interesting but not to be covered in this post). Plus, jQuery makes grabbing JSONP content very, very simple indeed using its jQuery.getJSON (docs) function. Basically we provide that function with an URL to the JSON document and a callback function to execute once jQuery has grabbed it. See the docs for examples.

Creating a widget

Generally, there’s a logical structure to creating a widget like this one. Steps involve grabbing the required data, parsing it, building the HTML and attaching it to the page. Since this would take an inordinately long time to explain step by step (perhaps some other intrepid blogger has already done it) I’ll just show you with code. Below is the JavaScript—in jQuery plugin form though that isn’t particularly necessary or important (just means it’s all wrapped up neatly and only concerned with itself). There are a number of variables to hold HTML, the YQL URL and a number of functions which parse the JSON object into HTML form and a little bit of effects to fade in the HTML block when it’s all ready. There’s also a function to parse the dates from “Mon, 05 Jan 2009 16:28:34 +0000″ into “5 Jan” form.

Put simply, the widget code just says, “when the page is loaded, ask YQL for the filtered feed, parse the response items into a HTML list and inject it into my page just above the footer.”

The widget code

// Grab food!
(function($){
	jQuery(function(){
 
		var wrapper = $('<div id="widget_blog">'
		            + '<h4>From the <a href="http://cowburn.info" rel="me">blog</a>:</h4>'
		            + '<ul></ul>'
		            + '</div>');
		var list    = wrapper.children('ul:first');
		var style   = $('<style type="text/css">@import url(assets/feed.css);</style>');
		var service = "http://query.yahooapis.com/v1/public/yql?q=select%20title%2C"
		            + "description%2Clink%2CpubDate%20from%20feed(0%2C5)%20where%20url%3D'"
		            + "http%3A%2F%2Ffeeds2.feedburner.com%2Fcowburn'&format=json&callback=?";
 
		var callback = function(data) {
			if ( ! (data && data.query && data.query.results && (items = data.query.results.item))) {
				// Unexpected response from YQL service
				return;
			}
 
			// Inject HTML before the footer
			$('.footer:first').before(wrapper);
			wrapper.before(style).hide();
			$.each(items, display_item);
			wrapper.fadeIn("slow");	
		};
 
		var parse_date = function(str) {
			var d = new Date(str);
			var m = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
			return d.getUTCDate() + ' ' + m[d.getUTCMonth()];
		};
 
		var display_item = function(index, item){
			var tpl = '<li><span>%date: </span><a href="%link" title="%extract">%title</a></li>';
			var html = tpl.replace(/%link/g, item.link)
			              .replace(/%extract/g, item.description)
			              .replace(/%title/g, item.title)
			              .replace(/%date/g, parse_date(item.pubDate));
			list.append(html);
		};
 
		// Actually grab the feed now
		$.getJSON(service, callback);
 
	});
 
})(jQuery);

As well as the HTML to display the feed items, the widget also adds a CSS stylesheet to add a little bit of formatting: link. The widget code itself (which may change in the future) can be found here.

End result

What we’re left with is a neat little list of my last 5 blog entries.

Salathe.co.uk before/after widget

The target of this experiment is my little sidebar which is attached to the right-hand side (at the moment) of every single page. The main point is that I got sick of continually seeing this sidebar beside my main content: it’s distracting.

To put the emphasis back onto the content, I thought of a few things such as changing the colours (to a lighter shade) as well as text size in order to help the sidebar fade into the background. However, nothing really quite cut it. The only thing that really seemed to work was to remove the sidebar completely! The idea seemed silly since there are some useful links and tools in there (it’s surprising how many people want to translate my posts and there’s the neat little search box). Could there be a compromise? Ideally, we want to see the sidebar when there’s something inside we want to make use of but at other times hide it away to keep the page tidy. Hovering over the area where the sidebar is (as you would if you wanted to use something inside it) proved to be the simplest trigger.

But if the sidebar is hidden, how to people know it’s there? I thought of having a little button there which provided a visual cue when the sidebar was hidden, but that went against the idea of hiding it in the first place since there was always something there, being distracting.

Instead I decided to display the sidebar for a couple of seconds when the page is loaded and then to fade it out automatically. This visual change in the page is enough for the eye to recognise the change (in this case the block fading out) in the peripheral vision so that the visitor knows there’s a sidebar but it’s just hiding at the moment. That’s the idea anyway.

Before & after showing sidebar

What are your thoughts?

The main chunk of JavaScript code used in the article is as follows:

function register(){
	$.ajax({
		type: "POST",
		url: "submit_data.php",
		data: 	"username=" + document.getElementById("username").value + 
			"&email=" + document.getElementById("email").value,
		success: function(html){
			$("#response").html(html);
		}
	});		
}

Whilst that works, there are a number of things that I would do differently (that doesn’t make either of the ways right, or wrong, necessarily!). My version of the AJAX call would probably move further in the direction of:

$.post("submit_data.php", $("form:first").serializeArray(), function(data){
	$("#response").html(data);
});

How’s this different? Well first, we make use of the jQuery.post function rather than using the lower level jQuery.ajax with POST specified as an argument. There is an equally useful jQuery.get option if we wanted to use a GET request instead. Note the form:first selector, obviously that would only grab the data for the first form on the page but since there is only one form in the example HTML we’re ok.

The next major change is rather than construct the data string manually as Gareth did in the article (why use document.getElementById rather than jQuery’s dollar functon?) we make use of the jQuery.serializeArray function which serialises the form elements (if any) of an element into an object. The conversion of that object into a usable data string is done within jQuery and we needn’t construct our own. I’d use serializeArray over serialize simply because I often want to include more data items in the request using jQuery.extend.

A few other points to make note of, which I think Gareth will include in a follow-up article, would be that no effort is made to make the article’s sample code unobtrusive (which is all the rage right now) and without JavaScript enabled the newsletter signup simply would not work at all.

Related to this, he relies on the click event of the button to trigger the request. This is something I see time and time again with AJAX form submission, maybe everyone else in the world clicks submit buttons but I generally press the enter key (I’m much more keyboard oriented when browsing, than pointer oriented [mouse, trackpad, etc]). Binding to the form’s submit event (unobtrusively, not within the HTML) would be my recommendation since we really want to hijack the normal submission process and route it through AJAX.

Hmm well, there we are. It’s not a very coherent set of thoughts but they’re out there now.