As some of you may know, I’ve been having a great time fielding questions on a number of sites — LinkedIn, Quora and Koding, to name a few. Most often, the questions are a lot more involved than the original author intended — they may ask about “Hey, how can I implement infinite scrolling?”, thinking the question is an easy one to handle, but there are a number of variables at play in the simplest of questions.

Enter jQuery Hotshot by Dan Wellman – it takes a number of common projects one might be interested in, breaks them down into more bite-size tasks, then walks the reader through how to implement these tasks with HTML, CSS, javascript and jQuery. Additionally, each full project ends with a “hotshot challenge,” giving some suggestions on where to go next.

From the first chapter, a sliding-piece puzzle, there’s substance. Actual coding is going on, some serious development tools are being used. There are some steps that seem a bit out-of-place (for example, some of the CSS should be in place earlier than you might suspect), but on the whole, the approach is fantastic. Take, for example, the sliding-piece puzzle — I was able to take much of the code from that, add a flickr feed, and allow the user to use any of a huge number of images. His challenges are well-thought, and the code base for each chapter becomes easily extensible.

I’ve recently been getting active with Koding, a great development community and hosting environment and one I’m using for a lot of sandbox-type activities (read “Projects that I’m tinkering with, and want to move quickly”). One of the guys on there was working on a project to host a subset of instagrams on his koding site, and his starting point was a pretty static PHP feed. He was working with a github project that was creating an ajaxified version of it, and there was some questions about it, so I though this might be a “teachable moment.” This is the result of that, hope it’s useful.

Starting point

First, I wanted to simplify as much as possible, so I’m not using the instagram API or a convoluted PHP structure or anything funky. I am doing an API call to Flickr, simply fetching a collection of what it refers to as it’s “Interestingness” feed. And I’m not making a really involved HTML structure, simply shoving out thumbnails of the images as they come in.

So the first version looks like this, and the source is here. I’m not really about teaching you PHP, this isn’t that sort of a post (although, if there is an interest, I can go back and talk about that some, too). The point of this exercise is simply to see what the PHP is doing. Here’s the breakdown: