Flickr Lithe - Flickr Instant Search with Whimsy

[Link to FlickrLithe]

I've got to be honest, when YoutubeInstant creator Ferros A. got offered a job by Youtube CEO Chad Hurley himself, I instantly wanted to milk the proverbial employment cow of web-apps. I have realized that I can juggle post-grad and actual work, and these projects are good for flexing the practicing programmer muscle + entice jobs.


The moment I saw TagGalaxy some months ago was the moment that I fell in love with web APIs. And the moment I saw YoutubeInstant is the moment I wanted to make one myself. So it got me to some thinking and finally a "Hey I'd like to make an instant flickr but without the flash but still have the drama" epiphany. Thus, FlickrLithe.

Tag Galaxy. Such a wonderful concept

In a nutshell, FlickrLithe is just a simple Flickr skimmer with an image effect inspired by the Google Image Search which I mimicked and made a js bundle of. Three main points roamed around my head while conceptualizing the site: One, it has to have the instant sensibilities; Two, it has to be efficient; Lastly, it has to be whimsical, fun, and give the user a sense of discovery.

For the last point, I really wanted people to discover things and not point out what to do, so FlickrLithe has no texts what so ever to instruct the user. This I think is a risk that I took because according to Drawar on their article "Why I hate your webapp", a user has got to have a clear sense of what your site doing. But I really wanted to put the feeling of whimsy and discovery, make the user feel a kid again, that I did away with the instructions. Furthermore, for it to be fun, it should be easy to use, hopefully I have achieved it (once they've figured out what to do). I got inspired to create a bundle for the side tools I used, so perhaps after sometime release one.

Tell me that ain't whimsical and I will do a somersault

The instant feel was inspired by Feross A.'s YoutubeInstant. But while reading the JS source codes, I realized that there was no timeouts upon typing. I could not apply it on my app because even though flickr response fast, the idea of grabbing and loading 100 images per request is just too risky to process every type so I had to put a timeout.

what was I lookin for?

For the efficiency part, I had to use two images from Flickr, the square thumbnail and small version of the photo. The former is for faster load, the latter version is for the mouse over. A challenge becomes apparent when it mid-loading of images, the user decides that it wants to through another keyword, the new images load with the same time as the old keyword's images. Good thing I found a snippet at StackOverflow that can cancel the images:


//stop all image downloads
if(window.stop !== undefined) { window.stop(); }
else if(document.execCommand !== undefined) { document.execCommand("Stop", false); }


It's a really cool code but it also stops the background-image from loading upon search, so I opted to create a loader, which I later realized gave the sense of a flash application. Ehehe. I'm inspired to post a bundle on it as well.

loading

So that's about it. Oh and I was supposed to do it in three hours, but the images used for the background took me three days. It made me feel like a kid again, drawing the BGs. :) Hopefully, users will like the site, and hopefully I get a job out of it. Ehehe.

Here's the git btw, feel free to check it out. [link]

Share  Tweet