Git it now?
Git is amazing. The problem is, it's hard for a lot of people to get git. Specifically the remotes part. If you are used to CVS or SVN (Subversion) you're probably used to the idea that when you "commit" something it just flies out to the server and sits there available to anyone else with access to that server. Git doesn't do this.
Git is a distributed version control system, which means you have the entire project and the entire history of the entire project (or at least the branch you are on) sitting on your machine when you checkout the project(branch) from the server. So, when you "commit" something, you're really just creating a new version (kind of like timestamping a state of code and saving it) on YOUR machine. The remote server knows nothing about it. A lot of people new to git mistakenly think that "add" sort of saves a version of something on your machine and then commit sends it out to the server. Not so.
To help, I've created this image:
add: This takes the "work" off of your "work bench" and puts it on the "loading dock" (index).
commit: This takes everything on the "loading dock" (index) and puts it in a "crate" (commit) and places it on the "truck" (history).
push: This tells the "truck" (history) to drive itself to the "warehouse/hub" (remote) [and drop off copies of everything and come back] .
stash: This takes everything on your "work bench" and places it in a "box" (stash) on the side.
ssh-askpass in Aptana with git project on OS X
I recently downloaded Aptana on OS X Snow Leopard because I know of no other free good IDE. I had a project set up under Git that I was trying to work with and I discovered that if I went to "import" I could select "Git" and pull in a remote repo right into Aptana. Amazing!
Only problem was I hadn't set up my RSA keys so Git was still asking for my password. Aptana requires a little program called ssh-askpass. After a little Googling I found a scary looking script that was specific to mercurial, but works for pretty much anything aparently.
It turned out to be really easy and worked like a charm. Here's what I had to do:
1. Open up a Terminal
2. Enter the following command:
sudo vi /usr/libexec/ssh-askpass
3. Copy and Paste in the following code:
#! /bin/sh
#
# An SSH_ASKPASS command for MacOS X
#
# Author: Joseph Mocker, Sun Microsystems
#
# To use this script:
# setenv SSH_ASKPASS "macos-askpass"
# setenv DISPLAY ":0"
#
TITLE=${MACOS_ASKPASS_TITLE:-"SSH"}
DIALOG="display dialog \"$@\" default answer \"\" with title \"$TITLE\""
DIALOG="$DIALOG with icon caution with hidden answer"
result=`osascript -e 'tell application "Finder"' -e "activate" -e "$DIALOG" -e 'end tell'`
if [ "$result" = "" ]; then
exit 1
else
echo "$result" | sed -e 's/^text returned://' -e 's/, button returned:.*$//'
exit 0
fi
4. Hit "esc"
5. Type ":wq" and hit enter
6. Issue the following command:
sudo chmod +x /usr/libexec/ssh-askpass
Now you should be able to start over on the import and have it work perfectly. A little dialog box will pop up and ask for your password. It's asking for the password that goes to your remote repository (that you normally have to type in the shell/terminal when you interact with your git repository).
jQuery UI Patch Landed!
I'm now an official contributer to the jQuery codebase (well, jQuery UI).
This is my first real code contribution to a major open source project. Kind of exciting.
Granted it was only one line of code (started as around 15 lines, but we got it narrowed down to just the one) but it was a big problem for my website (and several other sites) and it took some detective work to track down what the actual issue was.
POOF – Recursive Directory Listing in Python
I've begun working on a new project, POOF (Project Orphaned Object Finder). It searches through a directory and all sub-directories to detect files that are not referenced by any other files, or not referenced by a file you target or any of that file's targets etc. Basically, looking for unused or orphaned resources in a project of any language (but JS/HTML/CSS to start).
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:
Flurl – Part 5: The Unicorn/Panda Rainbow Connection
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...
CSS 3 Animation? Yes Please!
Ok, I'm so mega busy right now working on Flurl. I need to have it done TONIGHT because I've got other pressing obligations coming up and I just won't have any time to work on it after today.
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":
TOTW: Modernizr
Modernizr is a JavaScript library that you include on your page that executes itself and adds a series of classes to your HTML tag. This allows to implement modern CSS functionality without worrying about writing conditionals in JavaScript or anything complicated like that. You simply write one (or at most two) style definitions around the functionality you want, like this:
.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.
Flurl – Part 1.a: Rolling your own JavaScript library, setting up the core
Flurl is a mashup I did recently as a practice exercise.
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();
}
};
};
window.c = 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);
You Dream You’re A Unicorn!
Sometimes you're just minding your own business writing code, reading specs, maying layouts, watching the yayQuery podcast... and sometimes you're sleeping. Sometimes you're dreaming. Apparently, sometimes, on very rare occasions you're dreaming you're a Unicorn!
The Gource of jQuery from yayQuery on Vimeo.
The visualization is actually quite cool (well, minus all the unicorn stuff). It's the jQuery project programmer source code commits over time.
It's like some developer smoked some crack and decided he was a magical wizard casting spells through his computer and these spells produced things called "programs" or "web pages". This programmer wanted to share his trip with the world and created something called "Gource". This will look at a project's source control history and create a visualization based on that. It's pretty amazing actually.
This video comes to us courtesy of the ever-amazing yayQuery podcast and Jonathan Neal, who is hilarious. Here's the mp3.
Using jQuery to bind a function to a select box change and retrieve the selected value
If you need to bind a function to be called when a user selects an option from a select box using jQuery, you've come to the right place.
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 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
Pages
- Projects
- The History of the World (as relevant to Christopher McCulloh)
- WordPress Themes
- Continuum Refactor
Categories
- autobiographical
- flash games
- hardware
- history
- iPhone App Development
- Java
- Javascript
- math & physics
- movies
- n342
- plugin
- programming concepts
- project management
- prototyping
- screencast
- Software
- Theming
- Tools
- TOTW
- tutorial
- Uncategorized
- Usability
- video games
- web sites
- Wordpress
Blogroll
Archive
- February 2013
- September 2012
- July 2012
- May 2012
- April 2012
- December 2011
- November 2011
- October 2011
- May 2011
- January 2011
- November 2010
- October 2010
- September 2010
- August 2010
- June 2010
- May 2010
- April 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- August 2009
- July 2009
- June 2009
- February 2009
- October 2008
- September 2008
- July 2008
- June 2008
- May 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- June 2007
- November 2006