Chomper Stomping jQuery/JavaScript/CSS 3/HTML 5, Java/PHP/Python/ActionScript, Git, Chrome/Firefox Extensions, Wordpress/Game/iPhone App Development and other random techie tidbits I've collected

Wait, where's parts 2 through 4? Not done yet, but I'm done with the project and I may never get around to posting those other parts and wanted to post the finished product.

Again, Flurl is a little practice exercise I did. A mashup of Flickr and Qurl and no external JS libraries used (so I wrote my own).

I'm taking this photo stream (Be careful, since the photos are completely random "popular" flickr photos, even though they purport to be "safe" there are definitely some NSFW photos now and then) and sending the URLs to Qurl for shortening (using their API). This is the end result (best experienced in Chrome): The Unicorn/Panda Rainbow Connection UPDATE: LOST FOREVER (maybe... When my site got hacked I deleted a whole bunch of stuff trying to flush out the bad code. Apparently this got whacked in the process. I *might* have a copy somewhere, but, can't find it right now).

Some thoughts: Qurl sucks as far as response time. I had to limit my photos to five because Qurl was so darn slow responding to my requests and there is no way to do a batch request. BAD. What would I do to fix this? How about dump Qurl entirely. Flickr has their own shortening algorithm that doesn't even require an API call. If I had to keep using Qurl? I'd go ahead and load the photos to the page for the user with the long links, then I'd make a button on the photo (or link or something) that allowed them to request a shortened URL from Qurl. They click the button/link and an AJAX request fires off grabbing the URL and giving it to them.

I couldn't get the Flickr API to return only a certain number of Photos. I did everything I could find that it said I should do to get it to only return five or ten photos, but alas, it didn't work. So I had to make a loop that just used the first five/ten photos and ignore the rest. If it weren't for Qurl, which takes over 30 seconds most times to shorten 5 urls, I wouldn't care how many Flickr sent back. Still weird and wasteful and if I had more time I'd look into it until I got it working.

When I removed Qurl from the loop, the photos returned in less than five seconds flat (awesome!). However, with Qurl the response time ranges from 30s to 90s. So AS SOON AS I get the response back I fire off another request. If the response only took 5s total, I'd put a timeout or interval or something that queried only once a minute or so. Or, better yet, I'd make it fire off the request 10 seconds before my photo scroll ended and just put the new photos above my current scroll and make the scroll seem endless (like the pandas).

I spent far too much time on the library. I had big plans and it turned out I wrote way more code than I ended up needing because I was doing VERY LITTLE DOM manipulation. Of course if I worked on this for another forty hours or so the library really would have paid off because it would have saved me time as my interactions got more and more complex. If I had come up with the full design before I started writing the code I would have known I wasn't going to need much DOM interaction, but as it stands I didn't have any idea what the page was going to look like until I was almost completely finished with the cQuery JS library.

Queue. Something interesting I came up with was a way of handling mutliple simultaneous AJAX requests and multiple simultaneous animations. A queue.

For the AJAX requests I had an AJAX queue that just held all of my requests (didn't end up needing this, but it is there if I decide to do the Qurl thing separate from the photo retrieval). I hope to go into the AJAX queue in more detail in another post, but the reason I needed it was the callback function. I needed somewhere to put it until the request completed.

For the animation queue, I didn't want to set up a whole bunch of different "set intervals" or "set timeouts" so instead I made an "animations" array and then made ONE setInterval that called a function that looped through the animation array. Each spot in the array held an "animation" Object, which had an "animate()" function. The animate function would get called on the object and be allowed to run in the proper context (with "this" functioning as expected). This ended up saving me a lot of code and headaches and made my JS run way faster than it otherwise would have. Of course I ended up only having one animation run at a time and I have no standard way of removing from the queue, but I could add that to the library and there is definitely room for more animations.

One last thing, the song is from Jonathan Neal (who is hilarious). I converted it to .ogg format because Firefox didn't allow anything else, however it appears that Safari doesn't accept .ogg format, so if I had more time I'd make something to detect with browser I'm in and respond with the .mp3 format instead...