Super Simple CSS3 Only Bookmark Ribbons

Here are some extremely easy basic CSS 3 only triangular-bottomed bookmark split-ribbon things.
This is accomplished through some creative use of the "border" attribute on divs in CSS. It takes a main div (where the body of the ribbon is) and then two smaller divs that create the actual split ribbon effect.
You can change their color, or even assign a background image for some truly ribbon like effects.
You could probably even throw some nice shadows on it and make it look even better, but, this is just a very simple basic version.
You may have to scroll down past the share bar to see the embedded jsfiddle...
I whipped these up today for something I was working on and realized it was worth sharing with the world.
Thanks to CSS-Tricks.com for the basis of this effect (css triangles).
Sublime Text 2 Grunt Build
Kick off a grunt build from within Sublime Text 2:
{
"cmd": ["grunt"],
"working_dir": "/Users/[your username]/[your project path]",
"shell": true
}
It took me a bit to figure out how to actually make a grunt build run from within SublimeText 2, so I wanted to capture it here for anyone else trying to figure it out. Google really didn't help me at all...
The key is the working directory thing. You can't use "~/", you have to actually use the full path to your directory that you normally kick your grunt builds off from. I found one place on stackoverflow where it recommended adding this after "grunt":
, "--no-color"
but it didn't change the output for me at all.
You put this code in a file you create by clicking "tools" > "build system" > "new build system". Then whatever you name the file when you save it will be the name of the "build system". You can hit "cmd B" to build it or select "tools" > "build system" > "whatever you named it"
Using two different identity files with ssh for rsa remote authentication keys

I have two different servers I need to connect to, each requiring two different types of remote authentication keys. One requires rsa, the other dss. So I had to make and use two different remote authentication keys, but was unsure as to how to tell my machine to serve them both up. It was, by default, just serving up the rsa key.
What I had to do was create a file called "config" (NO file extension) in the ~/.ssh directory on my machine. I then put two lines in this file:
IdentityFile ~/.ssh/id_rsa
IdentityFile ~/.ssh/id_dss
It works like a charm.
For the curious, I'm on windows using the git bash that comes built in with git (NOT cygwin). My ~/.ssh directory looks like this:

I generated these RSA keys with a command similar to this:
ssh-keygen -t dss -f ~/.ssh/id_dss
And copied and pasted the contents of the id_rsa.pub (and id_dss.pub) files into the appropriate place (something like ~/.ssh/authorized_keys) on the remote servers.
Making Git show post-receive e-mails as an HTML color formatted diff

I wanted git to send me an e-mail with a color formatted HTML diff view of pushes/commits whenever the remote server received a push. After some digging I found that I could accomplish this using the post-receive email hooks in combination with Pygment's command line tools (using Python).
Prerequisites:
I will assume for this post that you have Git, Python and Pygments installed. It's been months since I installed Pygments, and I honestly can't remember *anything* about installing it, which means it was probably pretty straightforward and easy. You probably can just do this from your shell:
sudo easy_install Pygments
Making your Git repo send colored diff e-mails:
1. Setting up the post-receive hook
a. post-receive
The first thing you will need to do is configure your post-receive hook:
/git/your-repo.git/hooks/post-receive
In the hooks directory (cd /git/your-repo.git/hooks/) there will probably already be a "post-receive.example" file. Just copy it and rename it post-receive.
This file is basically a shell script. It is run after your repo gets a push and is updated. It is passed in 3 arguments: old revision hash, new revision hash, refname
All you really need to put in this file is the following line:
. ~/git-core/contrib/hooks/post-receive-email
What this does is calls another shell script "post-receive-email" and passes along the arguments (I think).
I'm pretty sure you could specify other shell scripts in the same way at this point if you wanted to.
b. post-receive-email
Now make the file you referenced from the post-receive file:
Move to your global hooks directory (the other one you were just in was specific to just that one repository, this one is the global hooks dir):
cd ~/git-core/contrib/hooks/
Create a file called post-receive-email. This is a shell script, but DON'T put ".sh" on the end.
Now, place the following code in that file (or, better yet, here's the file):
I'll try and point out some of the relevant portions of this script:
generate_email_header() (line 198):
This is the header of the e-mail, including the subject as well as the first few lines of the e-mail.
You may notice some variables here. ${emailprefix}, $projectdesc, etc. I'll talk a little about these later on.
Basically, what you need to know here is that if you want to change the e-mail subject or the beginning content of the e-mail, you do that here. You *could* hard code the recipients here, but don't. We'll talk more about recipients later.
generate_email_footer() (line 219):
This is the footer of the e-mail.
Notice that I placed a line here that tells you which files are causing these e-mails to be sent. I highly recommend keeping this line so that whenever you want to change anything about the e-mail, the e-mail itself tells you everything you need to know about doing so.
show_new_revisions() (line 605):
This is triggered if someone pushes up new revisions that have not ever been pushed up before. This way each code change will only be shown in one e-mail ever. This is the part that generates the actual diff itself and this is probably the single more important part oft his blog post. Lines 635 through 638:
git show -C --pretty=format:"committer: %cn%ncomments: %N%n%s%n%b" $onerev > gitlog.txt
export PYTHONPATH='/usr/local/lib/python2.4/site-packages'
pygmentize -O noclasses=True -f html -l diff gitlog.txt
pygmentize -O noclasses=True -f html -l diff -o gitlogemail.html gitlog.txt
Let's break it down line by line:
1. This is the actual git diff. If you just plop this down in your command line right now (minus the > gitlog.txt part) and replace $onerev with a sha1 hash from your log, you'll see a "preview" of how your e-mail will theoretically look. Here's some code for you to try to see what I'm talking about, do the following in your shell:
git log
Copy one of the sha1 hashes shown the log, then...
git show -C --pretty=format:"committer: %cn%ncomments: %N%n%s%n%b"
(so, for example, and don't try using this exact line because you won't have my sha1 hash in your repo so it won't work):
git show -C --pretty=format:"committer: %cn%ncomments: %N%n%s%n%b" 583038808efbde6fef4eb2e92dd2a920ba714eed
(hit "q" to get out of the diff view this throws you into)
If you don't like anything about this diff view, you can change it by editing the format:"...." part. See the git-show page in the git manual for details.
LOGBEGIN (line 656):
This is a constant (it's counterpart is LOGEND on the next line). The contents here will be used in the script in various places. It's content is placed before the diff to help separate the diff from the rest of the e-mail.
recipients (line 676):
You *could* hard-code e-mail recipients here, but DON'T, we'll once again talk about this in just a few moments...
emailprefix (line679):
emailprefix=$(git config hooks.emailprefix || echo '[SCM] ')
This specifies the text you want showing up right before the subject of the e-mail. It pulls in a setting from your gitconfig (again, we'll talk about this in a moment) but it also specifies a default in case you don't have one set. I make all my e-mails subject lines prepend with [GIT] so I know it's an automated git e-mail at a glance.
custom_showrev (line 680):
This line currently doesn't do what it looks like it does. At first line it appears that you can set your diff settings here, but this is actually unused at the moment. I was trying to make it so you could set your git-show settings in the git config, but I was having trouble getting it to work and gave up because I had bigger better fish to fry... So, don't be fooled into thinking you can change this line and have your e-mails be effected.
2. Setting your git config options
In the post-receive-email file, there were several variables that I kept saying I would talk about later. Now's the time!
We are going to set the variables in your git-config. I'm not 100% sure, but I suspect that this will allow you to have different settings per repository.
The way you do this is:
Move to your repository's home directory:
cd /git/your-repo.git/hooks/
At this point, you can dive right in and make new config settings, or you can list current settings. List current settings like this:
git config --list
To add new config settings:
git config --add blah.blah true
or
git config --add blah.blah "that is soo true dude"
or, better yet, just pop open the .git/config file in a text editor (git config -e) and add lines like this:
[blah]
blah = that is soo true dude
hooks.mailinglist
Whatever you put here will go in the "To:" field. (This is who the e-mail will be sent to).
git config --add hooks.mailinglist "ralphie@gmail.com, frank@gmail.com, steve@gmail.com"
Don't be fooled by the similarly named "hooks.announcelist" which, as far as I can tell, does nothing (theres a few lines of code that may use this if it isn't empty, but I haven't looked into this very far. Don't set it and it won't negatively effect anything. If you do set it, you may get unexpected results).
hooks.emailprefix
This is the text that will be inserted before the subject line. I like to set mine to [GIT] so I know it's an auto generated git e-mail by just glancing at the subject. If you don't set it, it defaults to [SCM].
git config --add hooks.emailprefix=[GIT]
Testing
Ok, at this point, you should be all good to go. Make a code changes, commit, push to your remote and sit back and wait on the e-mail.
Problems? I probably won't be able to help, but I'll try. Better to try asking on StackOverflow.com.
Good luck!
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).
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...
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);






