Tonight I worked on getting the directories listing recursively.

I’m sure there’s some sort of built-in function or UNIX function I could call or something like that, but half of my goal with this project is learning Python, so, yeah. I wanted to do this one by hand.

General overview of my approach:

I made a function “listDirectories” which you pass three arguments to; directory, tabStops, path.

The directory is the directory you want to go to.
The tabStops is how many tabStops you want to display before the directory listing.
The path is the path you are coming from.

The function calls itself each time it encounters a subdirectory. You start the whole thing off with a hard-coded seed. The next step is to un-hard-code this seed so you can pass the seed values in from the command line, or just call the program from your current directory (which is how you will kick off the whole thing when this project is complete). Something like:

POOF.py -d=directory
or
POOF.py
or
POOF.py -d=directory -t=\t\t -p=C:\Projects\POOF

This will of course need to be ironed out because that third one looks UGLY.

Here’s the current iteration of the code. Keep in mind this is my first real Python program:

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…

I wanted to have movement and sound and I wanted it REALLY CORNY as an homage to the flickr pandas from whom it gets it’s photos.

Here’s a little preview (Webkit only).

That’s just a little taste. It’s going to be much more. It’s going to have music and it’s going to have a photo stream.

Just a little tid-bit though I wanted to explain how I animated it (It’s a grand total of 62 lines from <html> to </html>). I didn’t use any JavaScript at all, it’s all CSS3 (amazing!).

First I designed the animation:

@-webkit-keyframes turnit{
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(-364deg);
}
}

Yeah, really simple I know. I’m just telling it to rotate from 0deg to -364deg. Note that I named the animation “turnit”.

Next I applied the animation to my div.

#turningBG{
-webkit-animation-name: turnit;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
-webkit-animation-timing-function: linear;
}

Line 1: use the animation “turnit” we defined before. NOTE THAT THE ANIMATION DEFINITION MUST COME BEFORE WE TRY AND APPLY IT. If I tried to use it before I defined it in my stylesheet, nothing would happen.
Line 2: Loop forever.
Line 3: Last for 30s.
Line 4: Make it smooth (linear). Could ease-in or out or whatever, but I wanted it to be seamless with no apparent start or stop.

Notes: If you look at the source you will see that I made my turning div 3200px wide and tall and then put it inside of a container that was 100% wide and tall and overflow hidden to keep there from being scrollbars. I then positioned the div so the center of it would be right under the unicorn’s foot.

Here’s some reference for css3 animation stuff. Here’s some more.

Here’s the entire “view source”:

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

I just got this e-mail:

Hello Christopher,
I have processed the refunds and reverted you to a free account.

If you don’t need any more help on these tickets, I will close them for you.

Let me know if you have any questions.

Sincerely,
Bruce McMullen
[e-mail redacted by blog author]
L2 Mozy Support Technician
Mozy Support is available 24/7
My Schedule: Mon – Fri 12:00pm – 8:00pm MST
Mozy, from EMC

Checked my bank account and sure enough, there was the money! Logged into my Mozy account and sure enough it was downgraded. Nicely done Mozy! I’ll keep you in mind next time I’m thinking about trying online backup…

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:

Yesterday I was re-living my saga on thedailywtf.com. I’m Jared L.

Part 1
Part 2
Part 3

Well, immediately after reading all of that I went and made a big ‘ole wtf all on my own. Read on…

Every Wednesday and Friday finishline.com gets updated with new promotional material. Most notable of all of these is the “A1 rotator”. This is the flash rotator prominently displayed on the homepage of the website. Each Tuesday and Thursday Sean in marketing will send me (up to) four new .swf files and one .xml file to drop in to the root directory of the site and the A1 rotator will magically update with these new files. I’ve been doing this bi-weekly for a year and a half and have never personally screwed it up. It’s not hard. I copy the files from one directory into another and zip them up and send them over to the build and release manager, Brandon, who sends them over to Verizon who pushes them out to 71 different instances of our website. It functions like clockwork. Until it doesn’t. This is a story about a massive multi-layered failure of the A1 rotator and it’s 100% my fault.

Thursday afternoon at around 4:30 I received the files from marketing and copied them over into the required directory on my local box. As always, I manually uploaded the files to the QA server (a mirror of production) so marketing could test them. I zipped up the files and e-mailed them Brandon. I didn’t bother to go out to our QA server and test them myself because, “hey, I’ve been doing this a year and a half and have never screwed this step up and I’m really busy and what could possibly be wrong? I just copied some files over, what could I have screwed up?” Oh the fallacy…

At this point, the piece of dung sorry excuse for an e-mail client “Outlook” crashed. I had already sent off the files so I didn’t notice.

An hour later when I’m preparing to go home for the day I go to send and e-mail and see that once again Outlook has crashed. I pop it back open and find that I have an e-mail waiting for me from marketing. Five minutes after I sent the zipped files over to Brandon, marketing e-mailed me to let me know that something was wrong with the A1 spot on the QA server. Crap.

I open up Firefox and hit the QA server only to find myself staring at a big empty white space where the A1 rotator should be. WHAT???

Ok, maybe the xml file is pointing at a non-existant swf file and the whole thing is bombing out… What are the names of the files? Oh, there’s a complicated one, “a1_jordan_02102010.swf” maybe the xml has that name screwed up. Let’s simplify things. I rename the file “a1_jordan.swf” and edit the XML “a1_jordan.swf”. Upload. Check. NOPE!

OK, marketing has obviously screwed this all up. Everyone from marketing has gone home at this point so I send an e-mail off requesting corrected files from marketing and prepare to call it a day. But I can’t just leave it at that because that would be irresponsible.

I quickly scan the root directory looking to make sure all the swf files are there. Yes. Is the XML file there? Yes. Ok, so banner_rotator.swf should be pulling them in but it’s crash… OOOOH NOOOOOO (said in a Tim “the Tool Man” Taylor voice). Suddenly I’m flashing back to the previous Thursday when I’m performing this exact same task. I recall that at that time I was feeling a little “cleany” and I decided that I should go through and remove all the old swf files from promos-gone-by. Sean happened to walk into my cube at exactly that moment and together we review the fifty or so swf files that don’t need to be there anymore. Clicking them one by one was going to take too long, so I selected ALL of the swf files and then we went through and de-selected the four required for the next day’s A1 rotator. Once I was sure I wasn’t going to delete the rotator files, I went ahead and deleted the rest of the swf files. Including the banner_rotator.swf master file that pulls in the xml and the four content swfs. SHOOT!

So I recover the banner_rotator.swf, add it to the root, and send it all back over to Brandon. I follow up with an e-mail absolving marketing and I call it a day. Everything’s fine and I even let my boss know what happened assuring him that everything is taken care of. Little do I know…

The next morning as I’m preparing to leave for work I happen to check my work e-mail. The A1 rotator is missing from the site. Apparently the promo push still hasn’t run, and the CDN we use has dropped the banner_rotator.swf file since it no longer exists in our build (because I deleted it last Thursday so it was dropped out of the following Thursday’s production deploy, which was yesterday). Great. The promo push is about to start though and then everything will be ok. I call a few people and send some e-mails to let everyone know what’s going on and leave for work.

When I get into the office I pull up the website and check only to discover that the first spot in the rotation is completely blank. I have several e-mails informing me of this as well. Flash back time… Remember when I renamed the jordan file as part of my debug process? Yeah, me too. Apparently I never put the name back correct but the xml did get switched back. So now I really am missing a swf. I guess the only thing that happens if a swf is missing is that the spot for it in the rotation is just blank. Good thing the only spot that’s blank is the very first spot, which is only seen by 100% of our visitors and only clicked on more than anything else in the entire site!

I call Brandon and sheepishly request that he manually go through all 71 instances of our site and rename the file in every one so that we don’t have to do an emergency push and incur a fine. Which he does and the whole thing is fixed.

At this point I get up and start looking for my coffee mug. It’s missing. I finally stumble across it right next to the coffee machine. Curiously it has a little pile of cream and sugar in it all ready for a cup of jo. It is then that I realize what the root of the whole problem was. I never had my coffee the day before. Why? Because someone took the last of the coffee and didn’t start a new pot brewing; when I went to get my coffee the pot was empty. I had started a new pot brewing, got my mug ready, walked away and never came back; resulting in me doing the entire promo push without any caffeine in me. Apparently I just suck without caffeine. And that boys and girls is why you should always start a new pot if you drink the last of the current one. That is also my lame attempt to shift the blame away from myself, lol. No, this was 100% my fault…

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:

First I tried to backup all files:

It kept failing, presumably because I was using the computer during the backup. So, i finally just backed up only the 50+ GB of images (which was my major focus) successfully, WIN! Then I went back to the task of backing up the entire C: drive. I noticed that you could just do “Newer”, which I decided would allow my backup to continue from where it failed.

So, next I tried:

Still didn’t work, but at least it didn’t re-backup files already backed up. After deleting several files that were causing it to fail (had to go to the command line for these, because windows could not delete/recognize/open them) I again tried the backup. This time it failed on UsrClass.dat (see the actual error below):

Create date/time : 2/5/2010--8:06:21 AM
Error Report of Backup from [C:] to [Z:\Backup_Drive_C]

C:\Documents and Settings\Christopher\Local Settings\Application Data\Microsoft\Windows\UsrClass.dat
The process cannot access the file because it is being used by another process.

I thought, hrm… Maybe I’ll just run it again. Nope. Still failed. Ran again, still failed. Ok, so I’m going to have to actually do something about the file.

I *almost* tried switching to another product, again, but then I realized this would be my fourth product switch and maybe I should at least give Sabrent tech support a try. So I submitted the following help request through their website:

1. Purchased Sabrent SATA 3.5″/2.5″ Hard Drive to USB 2.0 Docking Station.
2. Installed one click backup software
3. Placed newly formatted/partitioned empty drive in dock
4. Began backup of C: drive to drive in dock (Z:)

Expected Result:
Full Backup of C: Drive to Z: drive

Actual Result:
Failed after ~20,000 files with the following error:
Create date/time : 2/5/2010–8:06:21 AM
Error Report of Backup from [C:] to [Z:\Backup_Drive_C]

C:\Documents and Settings\Christopher\Local Settings\Application Data\Microsoft\Windows\UsrClass.dat
The process cannot access the file because it is being used by another process.

http://screencast.com/t/N2E3YjdkYz

We’ll see how they respond. If I can’t get this to work, the next thing I’m going to try is some sort of Open Source drive duplication or backup solution that will let me copy from one drive to another. If that still doesn’t work, I’ll start looking at commercial, local backup options.