I have some downtime at the moment so I wanted to get back to coding a little bit. One of the things I’ve been wanting to mess around with for some time is the Flickr API, mainly because I upload a boatload of pics to the service. Chris Heilmann posted a really great tutorial on pulling back pics using JSON and plain ole JavaScript. I have to admit that it was insanely easy and Chris, as always, did a great job of breaking it down. I made a few tweaks since, as he mentioned, document.write isn’t the best choice for outputting and the code was trivial:
function jsonFlickrFeed(o){
var i = 0, mainDiv = "", foo = "";
mainDiv = document.getElementById( "main" );
while(o.items[i]) {
foo = document.createElement( "img" );
foo.setAttribute( "src", o.items[i].media.m );
main.appendChild( foo );
i++
}
}
So I wanted to do this in jQuery just to see what it would look and had a “woah” moment:
function jsonFlickrFeed(o){
var mainDiv = $( "#main" );
$.each( o.items, function( index, node ) {
$( "<img />" ).attr( "src", node.media.m ).appendTo( mainDiv );
} );
}
It was a silly little snippet of code but it took me back to the feeling I had when I first jumped into jQuery way back in 2006 where the brevity, power & simplicity just amazed me. And the feeling truly hits home after I had read the following from Chris just yesterday:
Use libraries
And for that, use libraries like Dojo, jQuery, YUI, mootools or whatever to work around the browser problems so that you can concentrate on what you want to build rather than how it fails.
Libraries fix browsers
Our main enemy to build cool products are browsers. The technologies and standards that drive the web are dead easy – we just don’t have time using them as we spend most of our time testing and wondering why browsers don’t implement them in a predictable manner. This is where libraries come in and my plea here is to use them. Using libraries you can write predictable applications built on a base that can be altered for all the browsers to come – if you build towards the browsers in use today you build for the past. We’ve done that before and paid dearly for it.
I wholeheartedly agree with this. Yes, it’s very important to understand plain ole JS, which is why I wanted to do this exercise using it but just seeing the minimal effort required to do the same in jQuery just reinforces my belief that libraries are an extremely important arsenal in your toolkit if anything solely for the cross-browser handling that they provide. In my case, jQuery is my tool and I love it. What’s your library of choice?
I wish the technologies and standards were dead easy, alas! :-)
Absolutely agree Mike. My time with Mozilla really opened my eyes to the painstaking process browser teams have to go through to 1) get a consistent message about what standards are and 2) implement them in a concise way. You and the Firefox team truly have an unenviable task but totally kick ass doing it.
I use jQuery quite a bit, but a simpler POJS version would be a better comparison, and arguably clearer and faster than the jQuery version ;)
function jsonFlickrFeed(o){
var i = -1, mainDiv = document.getElementById( “main” );
while(o.items[++i]) {
mainDiv.innerHTML+=”;
}
}
@Matt: That’s really nice! Looks like this part was cutoff from the comment:
mainDiv.innerHTML+=”<img src=” + o.items[i].media.m + “>”;
Is that correct?
ah yes, you’re right, thanks.
It’s a slightly different way to achieve the same goal, at least.
Love your comments on jQuery Rey. Here’s how I’d do it.
function jsonFlickrFeed(o) {
var str = ‘<div>’, i = 0;
while (o.items[++i]) {
str += ‘<img src='” + o.items[i].media.m + ‘”>’;
}
str += ‘</div>’;
$(‘#main’).append(str);
}