Git Commands – A Cheat Sheet

GitHub is a great place to store and share projects that you or your team has been developing. There are a number of clients you can download to interface with GitHub to checkout, pull, merge and everything else you need to do within a brach. But real power comes from using git via the command line. Plus it adds a little geek factor to your repertoire! Here’s a quick cheat sheet of useful commands. 

List your local branches

$ git branch

List remote branches

$ git branch -r

Create a new branch and switch to it in one command

$ git checkout -b new-branch-name

Add modified files to the head to get them ready for a commit, and list the modified files

$ git add -Av

Commit all your changes and add a commit message

$ git commit -am "commit message added here"

Pull changes from the remote tracked branch

$ git pull origin

Push your committed changes to the remote branch

$ git push origin

Push your local branch to the remote repository and enable tracking (-u)

$ git push -u origin <local-branch-name>

When a pull goes wrong, and you get stuck in a merge, reset your branch to the last valid commit

$ git reset --hard HEAD

How to Get an Images real width and height with JavaScript

Finding the width and height of an image with JavaScript can be a little tricky. If the script runs before the image is loaded, img.width will return 0. Different browsers act in different way. Hell, different browser versions act in different ways. The fool proof way to find the dimensions on an image with JavaScript lies in the Image() object. Declare it, set it’s src value to the source of your image and do all the dimensional goodness on the image in the object’s onload function. This is also a good way to get the dimensions of an image that might not be in your HTML mark-up.

1
2
3
4
5
6
var img = new Image();
img.onload = function() {
  imgW = this.width;
  imgH = this.height;
}
img.src = 'http://1.bp.blogspot.com/-APNqWMWibVo/UIJjOcaxMnI/AAAAAAAAExk/0wA50be_--k/s1600/tumblr_m5elk1kyxB1qd769xo1_500.jpg';

jQuery Button Generator

Do you ever hand code the same things over and over? Or keep a text file with that code you use on a daily basis buried somewhere on your hard drive? Of course. But there comes a point when that just won’t do anymore. I hit that point creating buttons for various web site. The buttons are all different and have different options and effects, but the basic underlying code is the same.

So I thought, “I have to do something about this. There has to be better way.” And I found that better way by building out a button generator. You enter in a few key pieces of information, select your style of animation and, bam, you get some well defined, easy to use HTML, CSS and JavaScript that works exactly how you want it to.

Problem Solved.

 

HTML Marquee

Ah, the marquee. That wonderful tag that would scroll your text across the page in a slightly jittery, kinda hard to read way. Well, you know what? Car dealers love them. Just like images in a slideshow, they want to cram as many hot deals, great buys and can’t miss events on a single page as they can possibly get.

Back when Flash was all the rage, we had a nice little marquee component that did the job. Now a days, I hardly touch the old AS2 code. Everything is HTML, CSS and JS. But that HTML marquee tag doesn’t really work as well as it used to. Browsers don’t really like having to scroll text across the page. So are we supposed to abandon that great promotion racing across your homepage? No way! Using a little jQuery, some HTML and a reliable data source (ColdFusion in this case), I brought that marquee tag back to life with a little jQuery plugin I built, called marquee.js. Take a gander at some of the code. It’s hot stuff.

I even threw in some other text effects, ya know, in case the horizontal scroll ever gets old.