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';

JavaScript Cross Browser Window Size

Wouldn’t it be nice if there was one simple solution to find a simple property, like the size of the browser window? Too bad IE8 and below don’t like to play nice.

1
2
3
4
5
6
7
8
9
10
11
12
13
if (window.innerHeight) {
    // Firefox, Webkit
    iH = window.innerHeight;
    iW = window.innerWidth;
    console.log("Height: " + iH + "px Width: " + iW + "px");
} else {
    // Internet Explorer
    // clientWidth/Height is inner window size
    // (window width minus the scroll bar, menu etc)
    iW = document.documentElement.clientWidth;
    iH = document.documentElement.clientHeight;
    alert("Inner Height: " + iH + "px Inner Width:" + iW);
}

Enquire.js for Responsive JavaScripting

Responsive web design is all the rage lately, and with good cause. With the plethora of devices and screen sizes and aspect ratios, you can’t create a “desktop” site and a “mobile” site anymore. The best approach is to create one site that adapts to fit the device it is being viewed on. CSS media queries make it dead simple to style every element on a page exactly how you want at any screen size.

But what about JavaScript? I have some fancy jQuery animation that happens when a user clicks a button. It looks sweet on a desktop. But it’s kind of awkward on phone. Actually, it just looks bad and is pointless on a mobile device. If only I could add JavaScript to those CSS media queries. Wait. I can.

Enquire.js┬áis a lightweight JavaScript library for handling media queries. It works almost the same way as CSS media queries, you specify the max- or min-width and give it some commands to execute. More good news: it has no dependencies, not even jQuery! It’s pure JavaScript awesomeness.

Enquire gives you the option to execute code when your specified media query is matched or unmatched, meaning it listens for viewport changes and can execute different code as the window changes size. Here’s the basic setup:

1
2
3
4
5
enquire.register("screen and (max-width:1024px)", {
match: function() {
console.log("handler max-width 1024px");
}
}).listen();

 

Simple. And it just works. Need multiple queries? Not a problem:

1
2
3
4
5
6
7
8
9
enquire.register("screen and (max-width:1024px)", {
match: function() {
console.log("handler max-width 1024px");
}
}).register("screen and (max-width:480px)", {
match: function() {
console.log("handler max-width 480px");
}
}).listen();

Read more about it here.

CSS-Tricks also has good write-up about Enquire.js

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.