Bitly Provides two urls   http://bit.ly/1RmnUT or http://j.mp/1RmnUT  You can check the below class written in php to shorten url using api keys

<?php
class bitly {
	private $apiDomain = 'j.mp';
	private $apiUsername = '';
	private $apiKey = '';
	/**
	 * Set api username and api key
	 * @param string $apiUsername  // you can get it from bit.ly site
	 * @param string $apiKey
	 */
	function __construct($apiUsername, $apiKey) {
		$this->apiKey = $apiKey;
		$this->apiUsername = $apiUsername;
	}
	/**
	 * Return shortened url or null if the passed url is invalid or api keys are invalid
	 * @param string $url
	 * @return string
	 */
	function bitly_shorten($url) {
		$query = array("version" => "2.0.1", "longUrl" => $url,
				"login" => $this->apiUsername, "apiKey" => $this->apiKey);

		$query = http_build_query($query);

		$ch = curl_init();
		curl_setopt($ch, CURLOPT_URL,
				"http://api." . $this->apiDomain . "/shorten?" . $query);
		curl_setopt($ch, CURLOPT_HEADER, 0);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

		$response = curl_exec($ch);
		curl_close($ch);

		$response = json_decode($response);

		if ($response->errorCode == 0 && $response->statusCode == "OK") {
			return $response->results->{$url}->shortUrl;
		} else {
			return null;
		}
	}
}

$bitly = new bitly('your api login', 'api key'); // add your api username and apiKey
echo $bitly->bitly_shorten("http://google.com");
?>

1. Erik Johannson’s Impossible Photography

2. Lisa Harouni’s A Primer on 3D Printing

3. Thomas Suarez, A 12 Year-old App Developer

4. James Cameron’s Before Avatar: A Curious Boy

5. Evan Williams’ On Listening to Twitter Users

6. Chip Kidd’s Designing Books is No Laughing Matter. OK, Yes It Is.

7. Jer Thorp’s Make Data More Human

8. Kelli Anderson’s Design to Challenge Reality

9. Stefan Sagmeister’s 7 Rules for Making More Happiness

10. Rogier van der Heide’s Why Light Needs Darkness

11. Seth Godin’s This is Broken

12. David McCandless’ The Beauty of Data Visualization

13. Rory Sutherland’s Sweat the Small Stuff

14. Milton Glaser’s On Using Design to Make Ideas New

15. David Carson’s On Design + Discovery

16. Jay Walker’s Library of Human Imagination

17. Eva Zeisel’s On The Playful Search for Beauty

18. Tim Brown On Creativity and Play

19. Paola Antonelli Treats Design as Art

20. Philippe Starck Thinks Deep on Design

Start by making changes to the feature branch you’re doing work on. Let’s assume that these changes span a few commits and I want to consolidate them into one commit. The first step involves making sure the master branch is up to date with the destination repo’s master branch:

# switch to master branch
git checkout master

# ensure our master is up to date
git pull remoteRepoName master

With the master branch up to date, we’ll use git rebase to consolidate:

git rebase -i master

That command will show a list of each commit, as such:

pick fb554f5 This is commit 1
pick 2bd1903 This is commit 2
pick d987ebf This is commit 3

# Rebase 9cbc329..d987ebf onto 9cbc329
#
# Commands:
#  p, pick = use commit
#  r, reword = use commit, but edit the commit message
#  e, edit = use commit, but stop for amending
#  s, squash = use commit, but meld into previous commit
#  f, fixup = like "squash", but discard this commit's log message
#  x, exec = run command (the rest of the line) using shell
#
# If you remove a line here THAT COMMIT WILL BE LOST.
# However, if you remove everything, the rebase will be aborted.
#

Edit the summary shown to you by the rebase command, leaving the commit you want to be the main commit as “pick” and changing all subsequent “pick” commands as “squash”:

pick fb554f5 This is commit 1
squash 2bd1903 This is commit 2
squash d987ebf This is commit 3

# Rebase 9cbc329..d987ebf onto 9cbc329
#
# Commands:
#  p, pick = use commit
#  r, reword = use commit, but edit the commit message
#  e, edit = use commit, but stop for amending
#  s, squash = use commit, but meld into previous commit
#  f, fixup = like "squash", but discard this commit's log message
#  x, exec = run command (the rest of the line) using shell
#
# If you remove a line here THAT COMMIT WILL BE LOST.
# However, if you remove everything, the rebase will be aborted.
#

Write/quit past the editor twice (the second screen would allow you to change the commit message, though I like to keep it the same). At this point, your commits are squashed into one. Run the following command to force a push of the new, consolidated commit:

git push -f

This forced push updates the source repository and our commits have become one. If you had already submitted a pull request at GitHub, the pull request would now show only one commit! With one consolidated commit, code review becomes much, much easier!

Squash Commits with Git is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Step 1:  Create the Dividers

# Left side
defaults write com.apple.dock persistent-apps -array-add '{tile-data={}; tile-type="spacer-tile";}'

# Right Side
defaults write com.apple.dock persistent-others -array-add '{tile-data={}; tile-type="spacer-tile";}'

Step 2:  Reset the Dock

# Reset the dock
killall Dock

It’s Not All About Designing Websites

Your Education Affects Your Happiness

The CSS

The syntax for creating these animations and transitions is the same between media queries as it is between element states; the only difference is actually enacting them between the media queries:

/* base state */
#layout { 
	position: relative; 
	width: 900px; 
	border: 1px solid #ccc; 
	height: 200px; 
	
	/* animate width over a given duration */
	-webkit-transition: width 2s;
	-moz-transition: width 2s;
	-ms-transition: width 2s;
}
.child {
	top: 0; 
	bottom: 0;
	width: 290px;
	position: absolute;
	opacity: 1;
	font-size: 20px;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	
	/* animate opacity, left, width over a given duration */
	-webkit-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
	-moz-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
	-ms-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
	#child1 { left: 0; background: lightblue; }
	#child2 { left: 300px; background: lightgreen; }
	#child3 { left: 600px; background: lightyellow; }

/* 
	When the client has 860 width or less:
	 	- animate the first two elements to be wider
		- fade out and hide the third element
		- animate the background colors
		- animate the font-size of the block
*/
@media screen and (max-width: 860px) {
	#layout { width: 600px; }
	.child { width: 290px; font-size: 12px; }
	#child1 { left: 0; background: blue; color: #fff; }
	#child2 { left: 300px; background: green; color: #fff; }
	#child3.child { /* hider */ opacity: 0; width: 0; }
}

The creativity is all in the developer’s hands; animating media queries isn’t difficult, but the use of them is more interesting. Some sites used to animate the position of structure elements during window resize, which is nice but how often is that a realistic usage? A more realistic usage is with mobile devices, animating elements when orientation changes:

/* base mobile styles */
#sidebar {
	-webkit-transition: opacity 2s;
	width: 300px;
	overflow: hidden;
}

/* portrait */
@media screen and (orientation:portrait) { 
	/* portrait-specific styles */ 
	#sidebar {
		opacity: 0;
		width: 0;
	}
}

/* landscape */
@media screen and (orientation:landscape) {
	/* landscape-specific styles */
	#sidebar {
		opacity: 1;
	}
}

The animation above triggers when the device goes from portrait to landscape, and visa versa. This is incredibly useful when hiding a pane in portrait view and elegantly showing that pane when the user switches to landscape view.

CSS animations between media queries have traditionally been a delicacy of web design, but there are practical uses. The best part of them? There is no JavaScript involved and you can force CSS hardware acceleration if you’d like. Take a few moments to look at your mobile site to see if you can add this effect.

CSS Animations Between Media Queries is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The Only Link You’ll Ever Need…

• Bokeh
• Architecture
• Graffiti
• Lights

Some Examples

Photo by Krystian_O.

Photo by Astragony.

Photo by Aih.

Photo by jonathankosread.

Photo by pilottage.

Photo by jule_berlin.

Photo by cristal_cosmico.

Photo by jonathankosread.

Photo by hermes.

Photo by 85mm.ch.

Photo by bongosphotographie.

Photo from x-ray_delta_one.

Other Uses

#multipleBGs {
	background: url(photo1.png),
				url(photo2.png),
				url(photo3.png)
	;
	background-repeat: no-repeat,
					   no-repeat,
					   repeat-y;

	background-position: 0 0,
						 30px 70px,
						 right top;

	width: 400px;
	height: 400px;
	border: 1px solid #ccc;
}

The JavaScript

As you could probably guess, this task is best accomplished with regular expressions:

function camelize(str) {
	return (str + "").replace(/-\D/g, function(match) {
		return match.charAt(1).toUpperCase();
	});
}
camelize("border-bottom-color"); // "borderBottomColor"


function hyphenate(str) {
	return (str + "").replace(/[A-Z]/g, function(match) {
		return "-" + match.toLowerCase();
	});
}
hyphenate("borderBottomColor"); // "border-bottom-color"

A couple of really handy JavaScript String to corresponding String format functions. Instead of expecting strings in only one format, your mini library can now accept both!

JavaScript CSS Helpers is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Google Chrome & Canary

The repaint feature needs to be enabled at startup for Chrome and Canary with the --show-paint-rects config:

open ./Google\ Chrome\ Canary.app --args --show-paint-rects

Be sure to include --args in your command or you’ll run into problems opening the browser. Repaints will display on each site you visit.

Mozilla Firefox, Aurora, Nightly

To view repaints in Firefox and Aurora browsers, you need to enable an about:config option. The option name is nglayout.debug.paint_flashing. Turn this option to true and you’ll quickly see repaints as the happen!

At the time of publish, only nightly exposed this config feature.

I recommend you take a few moments to scope out the repaint frequency on your websites and see what you can do to improve performance!

View Browser Repaints in Google Chrome and Mozilla Firefox is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.