Comcast Extreme 105 Internet

If you haven’t heard, Comcast is offering 105Mbps download speeds in select areas of the US. Lucky for me, Washington, D.C. is one of those areas! Right when I heard about it through Engadget I called and unfortunately I had to wait two weeks before it was actually available to me. This is such an unreal speed that I couldn’t pass up the opportunity to try it out. It’s expensive, but not THAT expensive. I got different price quotes each time I called, but the last person ended up telling me that it would be an extra $20 a month. More than happy to pay that for this unheard of speed.

I called on a Sunday, they upgraded my service over the phone and said it should be working. I couldn’t get the internet speed test any higher than 60mbps even after a one hour tech support call. Comcast sent somebody out on Tuesday and it turned out that my Arris DOCSIS 3.0 modem was the problem. The tech replaced it with a ubee modem which he said are brand new to Comcast (pictured below).

Ubee DOCSIS 3.0 Modem from Comcast

Once we got the modem hooked up we hard wired directly to the modem with a cat5e chord and saw the following:

108.13 Mbps down and 10.23 Mbps up. I’d say that’s pretty extreme! For once a company has correctly marketed the product they are selling! So how does that compare to other results from the speed test website? Look below:

Speed Test Comparison

As you can see, there is just no comparison. Next I wanted to see if I my wireless router would work at this speed. I have the Netgear N600 (wndr3700) which says it can transfer up to 300 mbps. I’m not going to pretend to understand all the technical issues with wireless internet, because frankly, I don’t know that I can. All of my tests maxed out at 60mbps or below over the 5gHz band. That’s a bid disappointing do I called the Netgear tech support. Netgear logged into my router settings remotely and changed a few settings. Still can’t get it over 60mbps. I understand that 60 is really fast, but I would be thrilled if I could get the full 100 or even 90 transfer rate with the router. When I hard wire into the router, the speed test download speed drops about 10mbps to about 90mbps consistently. I’ve looked into the wndr4000, but it seems like I need certain Intel hardware that my MacBook Pro just doesn’t have and I’m not interested in upgrading to achieve full speeds.

So what was I able to do with this new fast internet that I wasn’t able to do before? Nothing. Well, I take that back. I was able to get the internet speed test to go over 5.5mb/s down. That’s it. I did a number of downloads from different sites to see if I could get the download speed to peak, but, it turns out, none of the download servers could give me the files fast enough. The fastest I know of is Adobe’s CDN (which I think is Akamai). I downloaded Creative Suite Web Premium trial and the peak speed of the download (which was consistent the whole time I will say) was about 5.5mb/s. That’s super fast, but just under half what my connection can handle according to Google’s calculation.

Then I thought, maybe a torrent will be faster (educational purposes only–I didn’t not actually use any of these torrents). I found a Harry Potter torrent that had 6,000 seeds, but that unfortunately only downloaded at a max of about 2.5mb/s. I asked a friend of mine and he pointed me to the Adobe Creative Suite Master Collection. That downloaded at about 4.2mb/s. See below:

My last ditch effort was to try a Linux Ubuntu download. That only went up to 1.2mb/s:

Anyone know anything that I can test this speed demon internet on?

The code below extends the JavaScript Number object with a method that will convert an epoch time into a string that represents the days, hours, minutes and seconds of the given epoch number. For example, the method will turn the number “98635″ into the string “1 days, 3 hours, 23 minutes, 55 seconds”.

I made this simple number object method one day for a side project of mine where I needed to profile the amount of time that certain ajax calls were taking to complete. I then average these times together and after multiplied that average by the number of requests that were still left to complete. This provided me with an estimated time of completion for x number of ajax calls. To get the difference of the time, I just created a new date when the ajax call started and another after it finished. Since JavaScript stores these times as seconds since the epoch, it’s easy to subtract one from the other to get the amount of time it took for the ajax call to complete. As soon as I had the number of milliseconds that all the remaining ajax calls would take to complete (according to my average calculation), I used this method to return something readable to a human being. I hope you find it useful.

Usage

To use the method, simply create a number type variable (var time = 98635;) and then call the method named ‘timeLeft’ on the variable, like so: “var timeLeft = time.timeLeft();”.

The Code

Minified Code:

Number.prototype.timeLeft=function(){var days=Math.floor(this/86400);var hours=Math.floor((this-(days*86400))/3600);var minutes=Math.floor((this-((hours*3600)+(days*86400)))/60);var seconds=this-((days*86400)+(hours*3600)+(minutes*60));var result=new String();if((days>0)===true){result+=days+' days,';}if((hours>0)===true){result+=' '+hours+' hours, ';}if((minutes>0)===true){result+=' '+minutes+' minutes,';}if((seconds>0)){result+=' '+seconds+' seconds,';}result=result.slice(0,-1);return result;}

Full Code:

Number.prototype.timeLeft = function(){

    var days = Math.floor(this / 86400);

    var hours = Math.floor((this - (days * 86400)) / 3600);

    var minutes = Math.floor((this - ((hours * 3600) + (days * 86400))) / 60);

    var seconds = this - ((days * 86400) + (hours * 3600) + (minutes * 60));

    var result = new String();

    if((days > 0) === true){result += days + ' days,';}
    if((hours > 0) === true){result += ' ' + hours + ' hours, ';}
    if((minutes > 0) === true){result += ' ' + minutes + ' minutes,';}
    if((seconds > 0)){result += ' ' + seconds + ' seconds,';}

    result = result.slice(0, -1);

    return result;

}

I decided to look through my sites and see if anything had changed without my knowledge. I found that the most popular post on this blog had been changed. The title was erased so that only “…” showed up as the title on both the front and back-ends of the site and the content of the post had been changed to where most of it didn’t display correctly. I solved the problem by digging up one of my database backups an copying the post content and title into the post once again (I wish I had taken screen shots for everyone to see).

I haven’t noticed anything else wrong on any of my sites (3 WordPress installs, 1 Expression Engine and 1 custom). If you happen to notice anything peculiar please let me know in the comments.

2. Stop

3. Validate

4. Test

5. Repeat

The other day while working with an intern in our office, I mapped out a workflow that I use almost every day, but didn’t even realize it. The steps in this workflow are above. The purpose of this workflow is to lessen development time and ensure quality in the work you produce. One important thing to note is that this workflow assumes that your project is “shovel ready”, as in all the planning and strategy has already been completed. This model does not cover that part of a project.

Step 1: Build a Little

Some XHTML & PHP

The first step in my workflow is to build. Build a little that is. It’s important not to build your entire project in the first step. If you do this, it will only make validation and testing harder. If I’m building a full layout template for a website, then I will typically build a third of it before I move to step two (say the header, content area or footer). How much you build will largely depend on your experience and skill level. Those new to the field may want to build less while those with a decent amount of experience will be just fine building more. If you are just starting out you will eventually notice a natural inclination to build more before moving to validation. This progression will be the direct results of what you learn in steps three and four.

Step 2: Stop

This step is self explanatory, but probably the most important. As I explained above, my experience has proven that not stopping only makes steps three and four more painful–most of the time. So no matter how tempting it is to keep building, remember to stop at some point to move onto the next step.

Step 3: Validate

Validation isn’t exactly my push for standards driven front-end work–although I believe in it highly. This step is more about learning the language in which you write more clearly and not mention making your life arguably much easier with quirky browsers. It is likely that the project you are building has to support some of the older browsers in the market, however unfortunate that may be. In this instance, you’ll want to have the most valid code that you can possibly have before moving to testing. This is because what you may perceive as a browser quirk, may actually be a fault in your code (say an unclosed p tag), in which case you may spend many wasted hours trying to correct that during the testing phase. I have done this many times and it’s a huge waste of time, not to mention frustrating.

W3C Validator and JSLint

It is important that you validate all the code you’ve written, whether it’s (X)HTML, CSS or JavaScript. All of them need to be validated. The W3C has both an (X)HTML and CSS validator that are quite easy to use. The W3C does not–at the time of this writing–have a JavaScript validator. For JavaScript validation, I use JSLint.

This is not to say that validating will solve all your problems before testing. If that were the case then there wouldn’t be a need the fourth step at all. How far you go with fixing validation errors is your decision. I can certainly understand a need for invalid code in some cases (e.g. YouTube embed code), however, for the most part I prefer 100$ valid (X)HTML, CSS and JavaScript.

Note that at some point in this model, steps three and four will become intermingled and you will definitely need to cycle back and forth between the two before moving on. This is explained in the next step.

Step 4: Test

Testing is the hardest and most time consuming. The good thing is, the more you do it, the less frustrating and time consuming it will be in the future. Testing is all about ensuring that the (X)HTML, CSS and JavaScript that you built in step one displays acceptably in all your supported browsers. As mentioned above, it’s possible and very likely, that 100% valid code will not display/work the way you intended it to in all browsers. This is why testing is so important. There is little use of doing anything in step one if users are not able to actually use what you built.

At some point in testing, you will likely alter the code that you built in step one. In this case, I usually continue until editing the code until my testing is complete. After this, you will have essentially circumvented the validation step. Because of this I recommend that you go back and validate your code. This can be a cyclical process, but in the end, you will hopefully have valid code that displays/works how you intend it to.

Common Browsers to Test With

The tools I use in this step are many. I have two old computers at my desk, each with a Windows XP install. One has IE6 and the other with IE7. I test for IE8 on the windows machine I primarily use. I use profiles and separate installs for Firefox and Safari testing. I have noticed some variation in display across operating systems on the same browser, so I use a coworker’s Apple to test on MACs. You can duplicate this by searching Craigslist for old computers. The computers don’t need impressive specifications because after all, you’ll only be using them to run Internet Explorer, which requires very little resources. The two computers I use were just laying around our office not being used so I got lucky. You may want to search your office for old unused computers like I did. Another option I suggest is purchasing a license of VMWARE, which will let you run a virtual computer inside your computer. This essentially gives you another install of an operating system that you can run asynchronously with your development. I used this method to test before I setup some quality assurance machines, but I found it to be resource intensive and also took up half of my screen real estate. There are several options that replicate older versions of Internet Explorer and other browsers, but I haven’t had the best of luck with those, so for professional development I wouldn’t suggest them.

Step 5: Repeat

What do you think? Is there anything different in your workflow that you want to add? Anything you disagree with? Let us know in the comments.

Tutorial: How to Use the Flickr API, JavaScript, jQuery, Ajax and JSON to Build a Photo Wall

Introduction

In this tutorial, I’ll show you, line by line, how to build a photo wall by pulling your pictures from Flickr using the Flickr API, jQuery, Ajax and JSON. The script I wrote places the following information over the image to which it relates: title, author, comment count, tag listing, location with a link to a map of those coordinates and the description. If any of this information doesn’t exist for a given photo, the script will just not include it. If you haven’t used the Flickr API before, you should read my post on How to Use the Flickr API first. I won’t provide much explanation here on the Flickr API. This is more a tutorial of interacting with Flickr using JavaScript, jQuery, Ajax, and JSON. You do not need an advanced or intermediate understanding of JavaScript or jQuery because I’ll explain almost everything. Let’s get started.

Getting Started: the HTML/CSS

Because the HTML and CSS to achieve this layout is fairly simple and because this isn’t an HTML/CSS tutorial, comments on this section will be short. Whenever you are using JavaScript to manipulate the DOM, you have to take into account accessibility. Since we’ll be adding our Flickr photo to the document after it is loaded, we’ll need to provide an alternative way to get to the content (your Flickr photos) for visitors without JavaScript enabled. This needs to be handwritten in the HTML. Take note of the element with an ID of a-link. I’ve written this into the HTML so that anyone without JavaScript enabled can still get to my photos, however, later on I’ll use JavaScript to remove it immediately so that visitors with JavaScript won’t see it. That aside, you have to place a container for your images and make sure you give it a unique ID so that later jQuery can quickly find it in the document. Next, create some markup for each of your images. This is completely dependent on how you want your Photo Wall to look. Mine looks like this:

DEMO: Use the Flickr API, JavaScript (jQuery), AJAX and JSON to Build a Photo Wall by Kyle Rush

Click Here to See My Flickr Photos

                View Tutorial >>
                How to Use the Flickr API >>
                kylerush.net >>

The CSS is fairly self explanatory. I floated the ‘image-container’ class to the left since I want all the photos to display in rows of three. I’m letting the browser wrap them within the container. Next, I just applied some styling to suit my taste:

body, html {background: #000; font-size: 12px;}
#container {width: 810px; margin: 0 auto 0 auto;}
#notice {color: #fff; font-weight: bold; font-size: 15px; font-style: italic;}
h1 {font-size: 38px; line-height: 45px;}
h1 span {font-size: 16px; color: #ff0084;}
h1 a:hover span {color: #fff;}
#tut-info {width: 810px; margin: 0 0 20px 0;}
#tut-info a {float: left; display: block; background: #fff; font-size: 20px; padding: 20px 20px; font-weight: bold; margin: 0 15px 0 0;}
#tut-info a:hover {background: #ff0084;}
#loader {margin: 20px 0 40px 350px;}
.image-container {height: 180px; width: 240px; position: relative; float: left; margin: 0 20px 20px 0; background-color: #666; border: 5px solid #fff; overflow: hidden;}
.image-info {display: none;}
.image-info-active {height: 180px; width: 240px; background: rgba(255,255,255,.85);}
a {cursor: pointer; text-decoration: none; color: #0063dc;}
a:hover {color: #fff; background: #0063dc;}
a.title {color: #ff0084;}
a.title:hover {color: #fff; background: #ff0084;}
.bottom {padding: 5px;}
.bottom p {margin: 0 0 5px 0; }
p.top {background: #fff; width: 240px; padding: 0 0 5px 0; margin: 0;}
a.title {font-size: 20px; font-weight: bold; display: block; line-height: 20px;}
span.author {font-size: 10px;}
.infoTitle {font-weight: bold;}
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block;}
.clearfix {display:block;}

Starting the jQuery and the Initial Ajax Request

In the code below, line 1 starts the doc ready function of jQuery. This is the same as using document.ready. Immediately after, I remove the accessibility link (#a-link). Then, I append a ‘loading’ image into the #image-container element so that if the user has a slow connection or Flickr is taking a while to respond, he/she will know that the JavaScript is actually running. Ajaxload is a very easy to use online app that will generate an animated loading gif images. On line seven, I set my Flickr API key equal to the variable apiKey. Since I’ll be using my API key in several parts of this script, it’s easier to have it stored in one place in case I need to change it. Line 11 starts the Ajax request to Flickr. To send the request, I’ve used jQuery’s getJSON method. This method allows for cross-domain Ajax calls, meaning that you can request data from a different domain than that of which the script is running. Ajax is not inherently cross-domain and takes some hacking to do so, but jQuery makes it easy for us.

Notice the URL for the Ajax request. Instead of providing my API key, I have just referenced the variable that holds my API key that I created earlier. I do this by using the + operator to concatenate the variable into the string. So the ‘ (apostrophe) character at the beginning of the URL starts the string and it then ends after &apiKey=. The plus sign concatenates the variable into the string and then we add another string after the apiKey variable. After JavaScript processes that statement, it will look like http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=[YOUR API KEY]&user_id=29096781@N02&per_page=12&page=4&format=json&jsoncallback=? where [YOUR API KEY] is the value of the apiKey variable/your Flickr API key.

$(function(){
    jQuery('#a-link').remove();   

    jQuery('').attr('id', 'loader').attr('src', 'ajax-loader.gif').appendTo('#image-container');

    //assign your api key equal to a variable
    var apiKey = '[YOUR API KEY]';

    //the initial json request to flickr
    //to get your latest public photos, use this request: http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=29096781@N02&per_page=15&page=2&format=json&jsoncallback=?
	$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=72157619415192530&format=json&jsoncallback=?',

Understanding JSON

Flickr responses in JSON format are not very readable in order to save space. So a typical response of the flickr.people.getPublicPhotos method is: jsonFlickrApi({“photos”:{“page”:4, “pages”:52, “perpage”:3, “total”:”154″, “photo”:[{"id":"3606437738", "owner":"29096781@N02", "secret":"7a02f95b14", "server":"2480", "farm":3, "title":"Water Fountain Closeup", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"3605617857", "owner":"29096781@N02", "secret":"2f9da1d270", "server":"3385", "farm":4, "title":"Water Fountain Closeup", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"3605617773", "owner":"29096781@N02", "secret":"bf1c89212e", "server":"2463", "farm":3, "title":"Water Fountain Closeup", "ispublic":1, "isfriend":0, "isfamily":0}]}, “stat”:”ok”}). I have limited this request to three photos for brevity using the &per_page=3 argument. For something more readable, I copied that code and pasted it into the online JavaScript Beautifier. The result is below.

jsonFlickrApi({
    "photos": {
        "page": 4,
        "pages": 52,
        "perpage": 3,
        "total": "154",
        "photo": [{
            "id": "3606437738",
            "owner": "29096781@N02",
            "secret": "7a02f95b14",
            "server": "2480",
            "farm": 3,
            "title": "Water Fountain Closeup",
            "ispublic": 1,
            "isfriend": 0,
            "isfamily": 0
        },
        {
            "id": "3605617857",
            "owner": "29096781@N02",
            "secret": "2f9da1d270",
            "server": "3385",
            "farm": 4,
            "title": "Water Fountain Closeup",
            "ispublic": 1,
            "isfriend": 0,
            "isfamily": 0
        },
        {
            "id": "3605617773",
            "owner": "29096781@N02",
            "secret": "bf1c89212e",
            "server": "2463",
            "farm": 3,
            "title": "Water Fountain Closeup",
            "ispublic": 1,
            "isfriend": 0,
            "isfamily": 0
        }]
    },
    "stat": "ok"
})

To access data in the array, we just follow the simple structure. If you imagine that the entire array is called, say ‘data’, then data.photos.pages would return the value 52. In this tutorial, we’re not interested in how many pages of images are available, so data.photos.photo.title[0] (JavaScript starts its numbers at 0 instead of 1) would return “Water Fountain Closeup” for the first image. Since we know we’ll have more than one image, but we don’t necessarily know how many, we can create a loop that will pull the data we need for each photo that exists. That will be covered next.

Getting Basic Information and the Geo Location of Each Photo

Line 1 continues the jQuery JSON request and instructs jQuery to run the code within the function when the data is received. Line 4 in the following code starts jQuery’s .each() method, which is arguably an easier way to write a for loop. This loop will carry out a function through each of the items (photos) that Flickr sent. On line 7 I created a string variable that contains a URL for the image on which the loop is currently on (information on how the URL is build can be found here or on the Flickr API URL info page). Notice how and where I place the data from Flickr’s JSON response. I will later use this variable as the value of the href parameter of the anchor linking back to the image. After that, on line 10, I turn the photo’s ID into a variable as I will be using this several times.

We have pretty much all the basic information on the photo from our first Ajax request, but if you look carefully you can see that the geo location is not provided. To get this, we start another Ajax request on line 13 using the Flickr API’s flickr.photos.geo.getLocation method. We already have required arguments, so look carefully how I placed them into the URL. On line 14 I tell jQuery to run a function as soon as the data is received. On line 13 I use a conditional statement to see if my request was a failure. I do this because not all photos on Flickr have a geo location and if they don’t, Flickr will respond with failed request details. Here is the response Flickr will give if one of the pictures I request has no geo location: jsonFlickrApi({“stat”:”fail”, “code”:2, “message”:”Photo has no location information.”}). If data.stat is ever in the response then the request has failed. So, the conditional statement on line 17 tells JavaScript that if data.stat does not exist, continue with the following code. In the following code on line 18, I create a variable called pLocation (the keyword location is reserved in JavaScript) that contains a string of HTML combined with the latitude and longitude from the request. In the HTML of this, I have included a link to the Flickr map where the image was taken because we have latitude/longitude data. You may have noticed that earlier I use the var keyword to declare the apiKey variable while this time I did not. In JavaScript, variables declared with the var keyword are local variables that live inside the function in which they were created. Variables declared without var are global and can be accessed outside the function in which they were created. I decided to make pLocation a global variable because I will need to access it outside of the function I created it later on in the code. When possible, you should always use local variables as global variables can interfere with each other and cause you some headaches. At the end of first the loop I will delete this global variable so that it doesn’t cause problems when the loop moves to the next image.

Each Image Will Link to It's Latitude and Longitude on the Flickr Map

function(data){

    //loop through the results with the following function
    $.each(data.photoset.photo, function(i,item){

        //build the url of the photo in order to link to it
        var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg'

        //turn the photo id into a variable
        var photoID = item.id;

        //use another ajax request to get the geo location data for the image
        $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.geo.getLocation&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
        function(data){

            //if the image has a location, build an html snippet containing the data
            if(data.stat != 'fail') {
                pLocation = '' + data.photo.location.locality._content + ', ' + data.photo.location.region._content + ' (Click for Map)';
            }
        });

Getting the Flickr Tags of the Images

Line 2 in the following code starts another Ajax request similar to the one that I used to get the geo location. The only difference is the URL. When the request is complete, I used a conditional statement on line 6 that searches the response data to see if there are any tags. In JavaScript, this is known != as an is not operator. It is the opposite of ==. So, if data.photo.tags.tag is not empty (specified by empty apostrophes: ”), then run the following code.

I chose to hold each tag in an Array. To do this, I set the variable tagsArr equal to a new array. On line 12 I start a new for each loop to loop through each tag since they are grouped separately. The only thing different on this loop is that I use j instead of i so as to not have any confusion with the geo code loop which uses the variable i. Next, on line 15, I add some HTML that contains the tag data to the tagsArr array using JavaScript’s .push() method. When that loop is finished going through the tags, I use the .join() method on line 20 to combine all the tags in the array into a string that will be easier to use later. I created a new variable tags and set it to a value of the tags.

//use another ajax request to get the tags of the image
$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
    function(data){

        //if the image has tags
        if(data.photo.tags.tag != '') {

        //create an empty array to contain all the tags
        var tagsArr = new Array();

        //for each tag, run this function
        $.each(data.photo.tags.tag, function(j, item){

            //push each tag into the empty 'tagsArr' created above
            tagsArr.push('' + item.raw + '');

            });

            //turn the tags array into a string variable
            var tags = tagsArr.join(', ');
        }

Preparing the Variable to Append to the Document

Now that we have prepared all of our data in nice little variables that we can use, we need to combine it all into one variable that we can easily insert into the DOM. On line 2 I create this variable and give it a value of some HTML interlaced with some of the data from the request received. On line 5, I use a conditional statement to see if the tags variable exists. It will only exist if there were tags in our data because if there weren’t, our previous conditional statement wouldn’t have run the code that created the variable in the first place. Returning the typeof of a variable will tell you what kind of variable it is. If the typeof is undefined, then the variable doesn’t exist. On line 8, I use the += operator to concatenate a string onto the previously created imgCont variable.

On line 12, I do the exact same thing with the geo location data as I did with the tags on line 5. I add the description of the image to the imgCont variable on line 19. Now that the imgCont variable contains all the data I want it to, I use jQuery’s appendTo() method to insert the picture and all its data into the #image-container div in the HTML. Directly after that I delete the global variable pLocation so that it doesn’t repeat in the next loop because that will be a different image.

//create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string
var imgCont = '



' + data.photo.title._content + ' by ' + data.photo.owner.username + '


Comments: ' + data.photo.comments._content + '

';

//if there are tags associated with the image
if (typeof(tags) != 'undefined') {

    //combine the tags with an html snippet and add them to the end of the 'imgCont' variable
    imgCont += '

Tags: ' + tags + '

';
}

//if the image has geo location information associate with it
if(typeof(pLocation) != 'undefined'){

    //combine the geo location data into an html snippet and at that to the end fo the 'imgCont' variable
    imgCont += '

Location: ' + pLocation + '

';
}

//add the description & html snippet to the end of the 'imgCont' variable
imgCont += '

Decription: ' + data.photo.description._content + '


';

//append the 'imgCont' variable to the document
$(imgCont).appendTo('#image-container');

//delete the pLocation global variable so that it does not repeat
delete pLocation;
});

});
});

Adding the Rollover Effect and Removing the Loading Image

An Image which Reveals Information on Mouseover

In the following code, I use jQuery’s .live() method to apply a function when our images are either rolled over or rolled off of. In this situation I have to use .live() instead of .hover() because I need the rollover to apply to elements inserted into the DOM after the DOM was loaded. .live() is an awesome method that will apply a function to all elements that match the selector no matter when they are added to the DOM. To create the rollover, I just change the class of the image container to a class that’s display property is not none. Line 5 just reverses this previous function when the mouse hovers off the image. The last thing is to remove the loader image since everything is done. Although all images may not have been loaded, everything has been added to the document. We could create a function that checks to see if the last image was loaded and then to remove the loader image, but this tutorial is already quite long.

//assign hover actions to each image
$('.image-container').live('mouseover', function(){
    $(this).children('div').attr('class', 'image-info-active');
});
$('.image-container').live('mouseout', function(){
    $(this).children('div').attr('class', 'image-info');
});

jQuery('#loader').remove();

});

Conclusion

Congratulations on building a dynamic Flickr photo wall. I know it was a long tutorial, but I wanted to provide as much information as possible. Was the tutorial helpful for you? See anything that should be changed? Want to see more tutorials like this? Let me know in the comments!

Photo by Kyle Rush

The Flickr API is a powerful way to interact with Flickr accounts. With the API, you can read almost all the data associated with pictures and sets. You can also upload pictures through the API and change/add picture information. Luckily this all pretty easy. In this post, I’ll broadly explain how to use the Flickr API so you can get started in any programming language. Tutorials and examples of how to use the API with JavaScript will come in later posts.

Getting a Flickr API Key

The first thing you need is an API key. The API key is a way for Yahoo! to track the activity associated with each API key. It is essentially your user-name for the Flickr API. You can get an API key fairly easily depending on the type of project you are doing. If you’re producing a commercial product, then Yahoo! will want to know about it. You’ll need a special API key for that type of project and Yahoo! will have to approve your product. However, if you’re just experimenting and producing a non-commercial product, you can get an API key instantly. Login or create an account and then go to the Flickr API key request. Note: API keys are necessary for most methods of the Flickr API.

Flickr API Key Application Application

How It Works

The first step to working with the Flickr API is having a broad understanding of how it works. There are essentially three steps to working with the API. First, you need to send Flickr a request of the information you would like. This is done by building a special URL (more on this later). Second, once Flickr understands your correctly built URL, it will send the information that you requested. The last step is to do something with the data with which Flickr responded. Whatever you’re doing with the Flickr API, your interaction will follow these three steps.

Using the API Methods

To send a request to Flickr, use the API methods to build a URL telling Flickr exactly what it is you want. All of the URLs start off with:

http://api.flickr.com/services/rest/?

They then continue based on what data you are requesting. Open the Flickr API Documentation in a separate tab. In the right column of the documentation you’ll see the API Methods column. You can only use one method per request, so for example, let’s say you want to pull data on the latest 200 photos from your Flickr account. To do this you’ll use the ‘people’ method, specifically ‘flickr.people.getPublicPhotos’. Now you have another piece of your URL. So, it should now look something like this:

http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos

Go ahead and click on that method to get information on what arguments to include. You’ll see that there are two required arguments: api_key & user_id. Next, add the api_key argument the same way you did the method: http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=[your api key here]. The last required argument for this method is user_id. You can easily access your user id as well as lots of other useful information if you are on the flickr.people.GetPublicPhotos API page (or any other method’s page). Scroll to the bottom of the page and click API Explorer: flickr.people.getPublicPhotos. This page will allow you to easily submit a test call to Flickr using that method. In the column on the right you should find your user id. Go ahead and attach this to the end of the URL that you’ve build so far and give it a try:

http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=[your api key here]&user_id=[your user id here]

Example Flickr API Response

Going a Little Further

Now that you have the basics down, let’s look at how to go a little further with requests. After looking at the first complete request, you may have noticed that Flickr sent the data in XML format. This is because you didn’t specify an output format and XML is the default. On the Flickr API Documentation homepage, there is a section that reads ‘Response Formats’. Let’s adjust your request so that Flickr responds with the data in JSON format.

Retrieving Data in the JSON Format

To receive data in JSON, all you need to do is add the ‘format’ argument to the URL and give it a value of ‘json’:

http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=[your api key here]&user_id=[your user id here]&format=json

Specifying the Number of Results

Back on the flickr.people.getPublicPhotos method page you may have noticed an argument named per_page. You can use this argument to tell Flickr how many results you would like per request. Flickr notes that the default is 100 and the maximum is 500. As with the other arguments, just add it to the URL with the value you want:

http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=[your api key here]&user_id=[your user id here]&format=json&per_page=500

Working With the Data

Now that you have a bunch of data from Flickr, you’ll probably want to do something with it. Let’s use it to find the URL to one of the photos in the XML response. To do this, you first need to figure out the URL structure for photos in Flickr. I did a search on Flickr and found this photo: http://www.flickr.com/photos/cobalt/157623061/. Notice the URL structure. The first segment (www.flickr.com) is the domain you are accessing, the second (photos) is what you are accessing, the third (cobalt) is presumably a user-name of the owner of the photo (although you may not know this if you’ve never worked with Flickr) and finally, the fourth (157623061) appears to be an ID number. Based on that URL, you may be able to guess that only two of those segments change depending on the picture (the third segment–the owner and the fourth–the ID number). Well guess what? You have both of those in each <photo> element in your response from Flickr. They are stored as parameters of the <photo> element (e.g. id=”3606438858″ and owner=”29096781@N02″). Here is data on one of the photos Flickr responded with:

<photo id=”3606436456″ owner=”29096781@N02″ secret=”3409b568ff” server=”3601″ farm=”4″ title=”IMG_0547″ ispublic=”1″ isfriend=”0″ isfamily=”0″/>

Go ahead and replace the ‘photo id’ and ‘owner’ values in the URL of the sunflower picture above. You should have something like this:

http://www.flickr.com/photos/29096781@N02/3606436456/

If you click that, you will be taken to a photo that I took. However, if you put in the ‘photo id’ and ‘owner’ values of one of the photo elements in the data you requested from Flickr, then you will most likely be taken to a different photo.

Conclusion

Congratulations! You now understand the basics of using the Flickr API. To recap, you first send a request to Flickr by building a URL. If your request is valid, Flickr will then send data back. The final step is actually doing something with the data. In this tutorial, we extracted the values of the ‘photo id’ and ‘owner’, built a new URL, and sent it to Flickr. If you did everything correct, then you got a pretty picture back.

In the next tutorial, I’ll show you how to automate the use of the Flickr API with JavaScript, jQuery and JSON so that you can really get into the API.