This was part of my presentation at the Open Hack Day in India and I just got the time to write it up.

Here you’ll learn how to get Flickr photos into your JavaScript solutions without having to resort to using the full API. As this is a hack you will only get the latest 20 photos, if you need more detailed data like restricted to sets or more at once you’ll need to resort to the flickr API.

I mentioned it earlier for some of the Flickr badges shown here and my 24 ways article on how to use Flickr in JavaScript but it is good to have a quick step-by-step to learn how to use Flickr with JavaScript without needing to resort to a full-fledged API call.

Step 1: Locate the photos you want to use on flickr.com

Just surf around the site and find a site that does have an RSS feed. For example, my Flickr stream at http://flickr.com/photos/codepo8 or all the photos of Open Hack Day India at http://flickr.com/photos/tags/hackdayindia/.

Notice that only tags work, not search!

Step2: Click the RSS link or RSS icon (in Firefox) and change the ending of the URL call

This will get you the URL to the RSS feed, for example

http://api.flickr.com/services/feeds/photos_public.gne?tags=hackdayindia&lang=en-us&format=atom

and all you need to do to use this information directly in JavaScript is rename the “atom” at the end to “json”.

Do this and you’ll get a bunch of JavaScript instead of the atom feed:

http://api.flickr.com/services/feeds/photos_public.gne?tags=hackdayindia&lang=en-us&format=json

jsonFlickrFeed({
"title": "Photos from everyone tagged hackdayindia",
"link": "http://www.flickr.com/photos/tags/hackdayindia/",
"description": "",
"modified": "2007-10-12T14:08:47Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "Open Hack Day coverage in Indian newspaper",
"link": "http://www.flickr.com/photos/codepo8/1552753330/",
"media": {m"},
"date_taken": "2007-10-12T15:08:47-08:00",
"description": "
codepo8 posted a photo:
 
 
The Bangalore newspaper Midday put up this article about the Open Hack Day and apparently I am an ethical Hacker surrounded by Brad and David :)
",
"published": "2007-10-12T14:08:47Z",
"author": "nobody@flickr.com (codepo8)",
"author_id": "11414938@N00",
"tags": "india newspaper bangalore fame midday bradleyhorowitz davidfilo hackday christianheilmann joearnold hackdayindia"
},
{
"title": "Break It",
"link": "http://www.flickr.com/photos/code_martial/1536271756/",
"media": {m"},
"date_taken": "2007-10-06T23:18:58-08:00",
"description": "
code_martial posted a photo:
 
 
Joe Arnold does the Break Dance.
",
"published": "2007-10-10T20:43:01Z",
"author": "nobody@flickr.com (code_martial)",
"author_id": "61697474@N00",
"tags": "yahoo dance bangalore taj hackers hacking 50mmf18af hax0rz tajresidency joearnold hackdayindia"
},

// ... and so on ....
]
})

Step 3: Write your display function

As you can see, the Flickr API encloses the dataset inside a function call that executes jsonFlickrFeed, which allows you to define a function with that name:

The data of the JSON object is a tad askew, especially the encoded output inside the description is pretty much useless in JavaScript. However it is really easy to get the image data and display all the images using the media.m property of each item:

I trust you know however that using document.write is the main reason for hair loss and other problems in this world, so use some nice DOM scripting instead. This was just for the sake of this example.

Step4: Choose the size of the photos with different file endings.

The only remaining annoyance is the size of the photos. Once again, hacking the URLs of flickr helps you there. By default, flickr will choose m which is the medium size of the photos. Simply rename the something to the size you need:

• _b is the big size (1024)
• _t is the thumbnail
• _s is the 75×75 pixels square
• _m is the medium size
• removing the _? extenstion means you choose the small size.

You can also get the sizes by clicking around the image detail pages, for example http://www.flickr.com/photo_zoom.gne?id=1536271606&size=s and checking the image properties.

Happy Hacking!

[tags]flickr,hacks,openhackdayindia,JSON,howto,trick,webdevtrick[/tags]

After writing my first blog post for the Yahoo Developer Network blog it’s time to also upgrade this one here. There are 14 hours left at the Open Hack Day in Bangalore for the hackers to come up with something to woo the others and the Jury. So far I’ve been asked a lot about mail authentication APIs and if you can have a transparent XUL Canvas overlay an iframe to be able to paint on a third party web site. I am a bit scared about what people will hack here.

My presentation seems to have been well received and as always, here are the slides called Yahoo for You on Slideshare

I’ve also taken and uploaded a lot of photos and will go on doing so until I go back to the UK next Thursday.

[tags]hackdayindia,hackday,openhackday[/tags]

As some of you might have seen already, I published an article at the Opera developer network about the YUI:

• Progressive Enhancement and the Yahoo! User Interface Library

This will most likely be the first of a series of articles on how to use YUI and what each of the components offer you. Whilst YUI has a very good documentation, it is pretty hard to please all kind of users of a library and these articles are more geared towards the “step by step” learners than the ones that are happy with a pick and choose method backed up by a full JAVADoc style documentation.

So if you want to know something about the ideas of YUI and why it may help you to use it, check out the Opera Developer Network in the next few weeks.

[tags]opera,yahoo,yui,tutorial,beginner,writing[/tags]

After a refreshing and not at all annoying, pointless and anachronistic two and a half hour wait outside the High Commission of India in London I am a proud owner of a 3 month, one entry visa to India to go to Bangalore for Open Hack Day (no I am not bitter).

From the 5th to 6th of October I’ll be telling the India Hacker community about YUI and other Yahoo! offers and then vanish into the depths of our office to bring YUI cheer to the guys there. I will be back in London to get different rain on the 11th and then soon leave for Paris I think.

Anyways, looking forward to go back to India and maybe rekindle past encounters:

[tags]hackday,openhackday,bangalore,india,annoyance,bureaucracy,kafkaesque,wtf[/tags]

Stuart Colville and Ed Eliot finally announced their engagement … in writing a book for Apress about coping with hair lossweb site performance to be released later this year. The URL is http://website-performance.org/ and the first killer app to use there is the CSS sprite generator that allows batch uploading of images inside zips and several levels of customization of the generated CSS and images.

I am proud to work alongside these two guys, especially as I consider them the best kind of developers: good, team-orientated in their workings and not posh about it. Keep your eyes open for the book, it can help you a lot.

[tags]performance,websites,css,sprites,generator,stuart colville,edward eliot[/tags]