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 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 (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).

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…

.functionalityYouWant #myElement{
css3thing: blah;
}

.no-functionalityYouWant #myElement{
oldSchoolWay: blah;
}

So, real world example:

.cssgradients .sideNavTitleBox{
background: -moz-linear-gradient(center bottom, #000 13%, #353535 84%);
background: -webkit-gradient(linear, center bottom, center top, color-stop(0.13, #000), color-stop(0.84, #353535));
}

.no-cssgradients .sideNavTitleBox{
background-color: #000;
background-image: url(/media/images/backgrounds/left_nav_box_header.gif);
background-repeat: repeat-x;
background-position: left top;
}

Again, you don’t have to write any javascript at all, you just include the library on the page and it runs all on it’s own and enables this awesomeness!

EDIT: Oh look, ALA just posted a great article on modernizr.

It takes a flickr panda photo-stream, displays a photo, and uses qurl to make a shortened URL link to the photo.

These are the notes I took while I was doing it.

The project can be found on GitHub at http://github.com/cmcculloh/Flurl

For this exercise I didn’t want to use any JavaScript library. Normally I’d use jQuery (naturally) but I wanted to feel the pain of plain jane JavaScript again since it had been well over a year since I had done any AJAX without a library.

I decided I’d roll my own library that I could use to encapsulate the AJAX and DOM selection framework to keep it seperate from the actual app and to simplify my life in actually writing the app.

Since I wanted my library to feel a little jQuerish I decided as an homage I’d name it cQuery and use the _ instead of the $.

Step 1, the ubiquitous self executing anonymous function:

(function(window, document, undefined){})(this, document);

I’ll break it down. The starting paren “(” and it’s mate are just a “cool guy” coding convention to let people know, “this is weird! This is a library! This ain’t yo mama’s JavaScript!”. It’s the same as this:

function(window, document, undefined){}(this, document);

Which is simply just a function that immediately calls itself. The main reason to do this is to prepare our code for minification. When we minify, it will end up something like this:

(function(A,B,C){})(this, document);

So anywhere in our library where we had “window” or “document” or “undefined” it will not be the much shorter “A”, “B” or “C”, much smaller!

Paul Irish explains this in a *little* more detail in his 10 Things I Learned From the jQuery Source video.

Next we build the core function of our library, add it to the namespace and give it it’s “_” shortcut:

var cQuery = function(elm){
};

window.cQuery = window._ = cQuery;

Note that if we didn’t do that last line ‘cQuery’ would not be available in the rest of our JavaScript since it is hidden away inside of the closure we talked about above.

I really like the way jQuery works, and I want my library to mimic this. So calling:

cQuery("#domElementById").someMethod().anotherMethod();

ought to work.

Functions in JavaScript are just Objects that you can invoke. Functions can have their own methods, properties, etc. So basically cQuery is just an object that can DO something on it’s own so we can say cQuery() instead of cQuery.doThing(). Much more convenient. So basically our var cQuery = function(elm){} code is just setting up my cQuery library object in a way that it can be called and passed the dom element we are working with.

Since I want to be able to “chain” things in my library, I’ll need to add the methods in there that enable my chaining. I do this by ending my cQuery function with a return statement that returns an object containing the methods I wish to be available for chaining, each of these methods in turn returning an instance of the cQuery object (unless the method is specifically supposed to return something else, which makes it a destructive method because it ends my chaining), like in this example:

(function(){
var c = function(){
return{
blah:function(){
alert("blah");
return c();
},
blah2:function(){
alert("blah2");
return c();
}
};
};

c().blah().blah2();

That’s it! Now I’ve got the core of my JavaScript library all set up, chaining enabled, library closed in but available on the namespace, all ready to be made useful! Here’s the code we’ve got so far:

(function(window, document, undefined) {

var cQuery = function(elm){
//DOM selection and storage will go here

return {
//chain-able library methods go here
};
};

//make sure our library is exposed to the global namespace and make a shortcut “_” so we don’t have to type cQuery every time.
window.cQuery = window._ = cQuery;

})(this, document);

There are several different ways to skin this cat, but basically here is what we are going to do:

1. Bind a change event listener to the select box itself
2. When the box is changed, call a function that detects and retrieves the selected value

Here’s the code:

$("#selectBoxId").change(function(){
var selectedValue = $(this).find(":selected").val();
console.log("the value you selected: " + selectedValue);
});

Let’s break it down line by line.

Line 1:
$("#selectBoxId").change(function(){

$("#selectBoxId") grabs the DOM element out of the html and makes a jQuery object.
.change(function(){}); binds a function to the change event of the select box. Any time anyone changes the selection in the select box this function will fire off

Line 2:
var selectedValue = $(this).find(":selected").val();

var selectedValue creates a new variable that the selected value will be stored in.
$(this) creates a jQuery object based on the select box that triggered the function.
.find(":selected") looks a the select box that triggered the function and finds the option that got selected.
.val() gets the “value” of the selected option.

Line 3:
console.log("the value you selected: " + selectedValue);

this just calls the firebug console in firefox and tells it you want to print something out to it. You don’t need this line, but this line shows you that the above code did indeed grab the selected value out of the select box.

Line 4:
});
This just closes the open change function started on line 1.

This code assumes that you have an HTML select box with an id of “selectBoxId”. If you have a series of select boxes that all need the same function bound to them for some reason you can give them all the same class name (say “selectBoxesClass”) and select them like so: $(“.selectBoxesClass”).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Conforming XHTML 1.0 Strict Template</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#selectBoxId").change(function(){
var selectedValue = $(this).find(":selected").val();
console.log("the value you selected: " + selectedValue);
});
});
</script>
</head>

<body>
<select id="selectBoxId">
<option>Foo</option>
<option>Bar</option>
<option selected="selected">Beh</option>
</select>
</body>
</html>

Here is the example

Here are some resources for further reading:
jQuery
jQuery change
jQuery find
jQuery val
jQuery :selected selector
jQuery Element selector
jQuery id selector
jQuery class selector
Firefox
Firebug
Firebug Console

What it does:

Allows you to chat on Freenode IRC through your browser, even if your corporate proxy blocks IRC (IRC is the third biggest security hole for corporate networks).

When you need it:

• When you don’t have an IRC Client installed
• When IRC is blocked

How to use it:

What it does:

Allows you to display custom sized dynamic images on any webpage using nothing but a normal image tag and a special URL.

When you need it:

• Mockups
• Prototypes
• Place Holder Images

How to use it:

The Example:

Let’s try plan B.

Went to Frye’s Electronics and picked up a Sabrent SATA 2.5″/3.5″ Hard Drive to USB 2.0 Docking Station, which comes with a one click backup button. Then I grabed a Hitachi Deskstar 500GB Sata HDD. Total cost: $99.00.

End goal is to have two or three HDD, once a week I’ll click the button and then grab the drive and toss it in my bag and take it to work and put it in my desk and swap it out with the drive in my desk and bring that one home. Rinse, wash, repeat. The other great thing about the dock is that it is scalable and useful. I can back up as many different computers and as much data as I want. I’m only limited by how many drives I want to buy.

So, a little trouble when trying to get the Hitachi drive to be recognized. I had to right click on “My Computer” and select “Manage”. Then I clicked on “Storage” and clicked “Disk Management”; Immediately some dialog thingy popped up asking if I wanted to do such-and-such and I said yes (without snapping a screenshot, oops). This was the end result:

It sees this drive as “drive 5″. Cool. Whatever.

So, now I right click on the drive and select something about “format” or “partition” (idk, couldn’t get a screen-shot, there’s only three options, you’ll figure it out) and a dialog pops up. I captured some screen caps of what I did along the way. My choices were based on almost nothing other than gut instinct. We’ll see how it works out:

(Selected “no” here because I’m planning on this being assigned dynamically because I’ll theoretically be swapping multiple drives out here and I want them all to be seen as the same drive by the computer. So maybe I should have chosen “Z” or something, idk…)

At this point I closed out of the dialog assuming I was done. No Dice. When I went back in I saw it was formatting. After about 15 minutes it was only at 8%:

So, it’s going to take a while. About an hour later it’s done. Apparently bad call on the not assigning a drive letter. It’s ok though, I just right click on the drive partition and select “Change drive letter and path…”

And hey, check it out! There it is!

Now I can easily use the software and one button backup that comes with the sabrent docking station.

This step is going to take a while…

About an hour in…

Went to bed, woke up, and my computer had crashed (it does this at least once a week, another reason Mozy wasn’t working). So I checked the backup drive. Nope. Didn’t get everything. Got about half of everything. Trying again…

What it is:
Subversion is a semi-modern version control system. As I said, Git is quickly replacing it as the “next big thing”. But if you are going to do version control, and you’re not doing Git, you should at least consider Subversion (and I’d stay away from CVS, it’s old and borked). It allows you to “save states” of your program. So, instead of “save as” > “myProject1″, then “save as” > “myProject1working” and then “myProject1tryNewThing” etc, you would just have one copy of your project/file that you “commit” to your version control. Each commit lives as it’s own snapshot so that if you need to go back to another version, you just browse your history and restore that version. You can even “diff” your current version with any other older version to see what you changed if you’re trying to figure out how you broke something.

When you need it:
Anytime you do any software project at all, big or small, I’d say you need version control. But here’s the bullet list:

Working on a software project:

• In a group
• By yourself on one machine
• By yourself across multiple machines
• Working on an open source project to help distribute the source code
• Joining an open source project (if they don’t have version control, they aren’t worth joining, unless you are joining to set them up with version control )

There’s a few options out there, but no clear winner. On Windows, TortoiseSVN seems to be the clear winner, and is a great tool. Nothing stands out this way on Mac. At least nothing free. So here you’ll find a list of several Subversion clients for Mac. My favorite as of this writing is Versions, but it costs $60 (there’s a free 30 day trial). I recommend setting up a subversion server (either on your local machine, or corsair) and using it. Any job worth having is going to require you to use a version control system, so it’s best you become familiar with one now.

Here’s a question on StackOverflow discussing these plugins if you’re interested in learning a little more.

Using Subversion from command line

Martin Ott’s Binaries
Free Subversion Book

Versions

Versions provides a pleasant way to work with Subversion on your Mac. Whether you’re a hardcore Subversion user or new to version control systems, Versions will help streamline your workflow. Versions is here now, so say hello to the fresh new look of your repository and start saying less to that command-line interface. Download the free demo to take it for a spin.

SCPlugin

SCPlugin Download

ZigVersion

ZigVersion is an easy to use interface for Subversion, a popular open source version control system. Instead of simply reproducing the command line concepts as a graphical interface, we looked at the typical workflows of professional programmers and designed an interface around them.

What it does:

Allows you to compile JavaScript down to a compressed form. It reads in your JavaScript, parses it, and re-writes it to be much smaller. This is good for you because it will make your site load faster, much faster in some cases.

When you need it:

• To compress your JavaScript
• To combine multiple JavaScript Files

How to use it:

The Example:

Additional Notes:
Notice in the compile directions there is an @output_file_name parameter. You can change this to something other than “default.js” (you can name it anything you want. Then you can actually access the results by clicking on the link on the right hand pane that says “The code may also be accessed at default.js” (if you rename it it will put the name you put instead of default.js). Here’s the file generated by my example.

What it does:

Allows you to edit a text file collaboratively in real time with others. Each person’s changes are highlighted in a unique color. The file gets saved to their server at a unique URL that you can share and reference. You can view past versions of the file using a “Time Slider”. It’s kind of like Google Wave, but easier to use… There is even a chat feature on the side of the page for off-document conversation that persists from session to session.

When you need it:

• When walking through or collaborating on some code with another developer
• When collaborating on a text document (like a list or something)

How to use it:

In case you blinked at the end, I had Firefox and Chrome both open and was editing the same pad from within the two browsers. It kept the edits in sync live between the two browsers. This would have been more apparent had I actually had them both showing, which I should have done, but didn’t think about it until just now…