Earlier this week Chrome for Android was finally announced and web developers everywhere celebrated. Not only did we have one of the best browsers now on our phones, but we had access to remote debugging, which we have been waiting for and talking about forever.

Remote debugging allows a developer to use the browsers developer tools from a desktop computer while inspecting and manipulating the website on the mobile device – all in real time! This means you no longer have to use alert boxes to debug a problem that only reproduces on the phone.

So, while there have been a few earlier implementations of something similar, Chrome for android brings us the rock solid experience that we have been waiting for. Without further ado, here is a quick tutorial on how to get remote debugging up and running.

Update: I’d like to specifically point out that Opera Mobile has has this functionality for quite some time now and you’re able to do it without USB or a SDK (miketaylr had an awesome presentation on it at jQuer conf). So, develop in whatever browser you prefer and use both these tools when you’re debugging that specific mobile browser.

What you’ll need

1. An android phone that runs Ice Cream Sandwhich
2. Google Chrome beta from the Android Market
3. A USB to plug in your phone
4. The Android SDK if you haven’t already installed it.

Installing the Android SDK

This step is really quick because you either already have the android SDK installed or if you need to install it, we just need a tiny little part of it – nothing related to the native android development. These instructions are for OSX but they are very similar to Windows, the one differnce being that Windows users must install the USB Driver. Go ahead and download the SDK, unzip it, and put the entire android-sdk-macosx folder somewhere other than your downloads folder. I reccomend keeping it in in /Developer/android-sdk-macosx/. Double click android file and the Android SDK manager will open up. Uncheck everything except the “Android SDK Platform-tools” and click “Install 1 Package”

You’ll also probably want to add the /platform tools/ to your $PATH so you can access the adb command from any folder rather than just in the platform tools folder. Run the following command from your terminal.

export PATH=$PATH:/Developer/android-sdk-macosx/platform-tools

Preparing your phone

There are two things you need to enable to make remote debugging. Plug your phone in via USB and set the following two options.

1. Check the box for Settings → Developer options &rarrl USB debugging
2. Open Chrome on your phone → Settings → Developer Tools → check Enable USB Web debugging

Starting the remote debugging!

Now that we have everything in place and our phone is plugged in, we can start the remote debugging server. Fire open your terminal and type the following command and hit enter:

adb forward tcp:9222 localabstract:chrome_devtools_remote

Occasionally I’ll either get no response or a “device not found” error. I’ve found that running the command adb kill-server and then the code above resurrects the situation.

Now browse to http://localhost:9222 on your desktop version of chrome and you will see a list of currently open tabs on your phone, clicking one of them will reveal the Chrome dev tools interface that you’re used to. Instead of having the window above the tools, its on your phone!

You can use it just as if you were using your regular dev tools. Go ahead change the CSS background colour or send an alert over the console.

Thats all folks!

Thats all, its an incredible useful tool that we have all been looking forward to. Now we wait with baited breath for Safari on IOS to turn on remote debugging.

If you liked this tutorial, be sure to give me a follow on twitter

For those that don’t know me, I’m an independent developer/designer. A majority of my work falls into the four categories of JavaScript development, WordPress development, HTML5/CSS3 or UI/UX design. I absolutely love running my own show and it would take quite a bit to get me to switch out.

In the beginning

So, a few months ago I had a Google employee ask me if I was interested in joining their team. As I said, I’m super happy with what I’m doing at the moment but I didn’t want to turn down the chance to interview or even work for Google. I happily passed along my resume and that was the end of that for about 5-6 months.

Cut to about 3 weeks ago, I received an email from a Google recruiter asking if I was interested in a software engineer job down in Boston. I told her I was and we arranged a phone interview.

At this point I was really excited because its always been a bit of a dream of mine to work for Google but I have always assumed two things:

• Google only hires those with an educational background in Computer Science
• Google only hires people with a well versed background in many programming languages.

I went to school for Information Technology Management at Ryerson University where I graduated with a bComm. My schooling was more about development methodologies, project management, systems analysis and other high level IT skills combined with way too much math and management approaches. I took one course on development which gave me an excellent primer to C and Unix but it was far from what those in Computer science learn. I’ve been coding since I can remember and have just picked up my chops along the way mainly focusing on PHP development and the last few years, JavaScript.

So, needless to say I wasn’t as well versed in some algorithms and big O as someone who spent 4 years in Comp Sci but I have a pretty good handle on the languages I do know.

The First Interview

The first interview was over the phone with a Google HR rep. It was a fairly quick 20 minute interview where I talked about what sort of projects I liked to work on, what langages were my favourite and my background in both employment and schooling. I also told her I’d be willing to move down to Boston but would love a spot at their Waterloo office (which is about a 1.5 hour drive from Toronto). She told me they primarily hire strong C++ and Java developers, something which I have very little experience with. After I talked about how much I enjoyed front end devleopment, she said that I would be a good fit for a spot in their waterloo office.

We arranged to do two interviews in one day in about a week and a half. The HR rep sent over an email with some guidelines and things to brush up on which included comp sci 101 things such as sorting algos, hash tables, binary trees and so on. I was familiar with a few things on the list, but I definitely had to do a lot of reading in the week and a half before my interview.

Meeting with Google engineers and coding on a whiteboard

After a few late, panicked nights and handfulls of really fun Javascript problems from my good friend Darcy Clarke who did his best to prepare me, I was ready for my two interviews with the engineers.

My first interview was with a mobile developer and it lasted around an hour. He started off discussing different types of sorts, explaining what algorithms would be more performant, which situations I would use a specific algorithm and a whole smattering of comp sci terminology which I had to explain. I tripped over quite a few of these and felt pretty embarrassed. After that we moved onto talking about JavaScript performance, I wish I could say more here but not revealing the questions asked was a large part of the NDA. After that we moved into talking about design for mobile devices. After this and the JavaScript questions I started to feel pretty good about it. We ended the interview with a 25 minute coding question that had to do with efficiently sorting arrays. I had never coded on a whiteboard before and I felt like I made a few stupid mistakes.

Next up was another mobile developer from another product that they work on in the Google Waterloo office. We started off talking JavaScript performance again and then jumped right into the coding problem on the whiteboard. I was pretty nervous at this point in time and I made a few more silly mistakes that I wouldn’t have done in a proper IDE. We finished the interview talking about some HTML5 video stuff I was working on and talked a little bit about typed javascript compression.

I left after that feeling that I totally slam dunked parts of the interview and bombed other parts.

Whew, its over.

A few days later I got a call from the HR person at Google and she told me in the nicest way possible that I wasn’t a fit for the position. She said she would keep me in mind for future positions, which is nice whether they meant it or not

Coming out of this I’m not particularly bummed out, it was a fantastic experience to interview with Google, I’m honoured they had me come in and interview; its something I never would have thought would happen to me. I still have a really awesome job where I work on some really awesome projects and I have an incredible drive to keep learning more about web development. To sum it up what I learned in a few points:

1. Comp sci problems are a ton of fun to solve in JavaScript. I practiced a lot with Nicholas Zakas’ computer science in JavaScript posts.
2. Even if you aren’t a leet C++ or Java dev, Google still takes interest
3. Learning another language helps you become a more rounded developer. This experience hasn’t made me want to go back to writing C but I may take interest in another language that isn’t as forgiving as JavaScript.
4. Coding Chops > Comp Sci degree
5. A Comp Sci degree is very helpful when trying to explain Hash tables, Vectors and Big O
6. Always be hustlin’ A few years ago I would have never of though I would be interviewing at google just 9 months fresh out of school. Anything can happen.

These aren’t your regular HTML5 shirts, they come from Canada so naturally they involve a polar bear, a beaver and a moose.

How To Enter

To enter, simply sent out a tweet with the hashtag #HTML5shirt and a link to this post.

“Win a #HTML5shirt from @wesbos http://wesbos.com/html5-shirt-giveaway”

Tweet

I will be giving them away to 5 random tweeters and using twittertwitterchickendinner.com to pick the winners. I’ll ship you the shirt anywhere in the world. I have them in most sizes but is first come first serve.

Thats it, good luck and if you so please, follow me on twitter for more on HTML5. Follow @wesbos

Update: Winners!
First off, thanks to everyone who entered the draw, having almost 2,000 enter is pretty nuts! I’ll have to find a way I can do this again because you guys love your free shirts

Drumroll please… The Winners are:

@steno, @sheppy, @csixty4, @oscargodson and @PatridgeDev

Congrats! Contact me wes@wesbos.com within 24 hours with a mailing address and shirt size to claim you prize.

Thanks again everyone, I have some really cool HTML5 stuff coming down the pipe so stay tuned!

The first is an all day workshop on WordPress development which is being done with the great folks at Ladies Learning Code. If you haven’t heard yet, LLC is an awesome initiative started by a few Toronto ladies with the purpose of creating a comfortable environment where women can learn basic web development skills. I will be leading the upcoming WordPress workshop where I will take you from installing WordPress to making your very own theme. The workshop is on Saturday, November 26 and costs $40. The first round of tickets sold out in a heart beat, so be sure to sign up for the second round if you’re interested!

The second is quick talk on HTML5 Canvas at the #devTo meetup. This event is held once a month and is open to anyone who is interested in chatting about development. I’ve been to the last few meetups and I’ve found them pretty awesome. There a good mix of designers, developers (of all languages) and industry folk which always allows for good conversation (the free pizza and beer aren’t bad either!). I’ll be doing a quick introduction to the HTML5 Canvas element, what it is, what we can do with it, how to work with it as well as showing a few examples of stuff I’ve done with it. Canvas really is one of the most exciting parts of HTML5 so I’m looking forward to sharing what I’ve done so far. This event is always super popular and has already sold out, so get on the wait list and cross your fingers!

Thats all for now, hope to see you at one of the upcoming events!

This doesn’t require you to jail break, but it does take a quick finger! Watch this video to see how to do it:

Note

This should only be done if you are no using newsstand. Trying to launch newsstand from within a folder crashes springboard!

Cool eh? Follow me on Twitter for more like this

Unfortunately, collapsing of code in sublime text isn’t exactly the same as textmate, so you dont get the little arrows in the sidebar. The code is also folded into a single character which makes it easy to delete an entire block of folded code without noticing you have done so. This is the first iteration of code folding in sublime text 2, so I’m sure it will only get better. With those cautions in mind lets take a look at how to work code folding in Sublime.

Practice Code

Code folding works in all languages. I’ve created a small snippet of JavaScript which we can use to practice. Copy and paste this into Sublime and set the document mode as JavaScript.

var obj = {
	myStr: "Hello",
	myFunc : function() {
		console.log("hello");
		$('.someDiv').animate({height: 500}, function(){}
			// trigger the callback
			console.log('Done');
		});
	},
	myFunc2 : function() {
		return "Just another Level 2 function";
	},
	myNum : function() {
		return "Level 2 function";
	}
}

Folding Selected Text

This is probably what you came here looking for. you want to select a few lines of text and fold them out of the way. Easy!

Select the text you want to fold and hit Command + Option + [. You'll now see you have a little icon indicating you have folded some code.

To unfold your code, hit the opposite Command + Option + ].

*Note: Windows users, substitute command and option for CTRL + SHIFT

Block level code folding is where its at!

Selecting the code you want to fold can be a pain. If you maintain nice, clean indenting within your document, you’ll be able to quickly fold and unfold several levels of code in just a few key strokes.

To fold a block, place your cursor anywhere within the block you want to fold. For our example, lets place it in the myFunc function. Now you just hit the folding keys to collapse that block.
Command + Option + [

Fold Multiple blocks at once

Another handy feature of Sublime Text 2 code folding is being able to fold all blocks that are indented with a certain level. For this example, I want to fold all the and just see the the properties/functions of obj.

The keyboard shortcut for this is a little different. We need to hold down Command and then tap k.
While you are still holding down Command tap the level of code block you want to fold. In this case 2.

Confused? CMD + K, CMD + 2

We now see that everything beyond 2nd level blocks are hidden. To unfold everything again, we do the same thing but with 0.

CMD + K, CMD + 0

Folding Tag attributes

When working with an HTML document that is heavy on attributes, it can be helpful to hide everything but the element type. This is extremely useful when working with something like jQuery UI that have long class names, titles, data, and aria attribues. Now, this one is all or nothing, so you can’t hide them case-by-case.

To hide:
CMD + K, CMD + T

To show again:
CMD + K, CMD + 0

You’re now a cold folding master

Do each of these folding steps a few times to get the hang of it and you will find it very useful in your day to day development.

Let me know if you have any questions. If you like this stuff please Follow Me on Twitter.

Watch the tutorial or continue reading to learn how to make Sublime Text 2 build scripts.

Creating a Build Script

To get started, go to Tools->Build System -> New Build System... and you will be presented with the boilerplate for a build script.

We have four lines to feed into our .sublime-build file:

• cmd is an array of commends that will be run.
• selector is an optional way to scope the build script to a specific filetype
• path is where the command is to be executed. Because sublime executes it in the python console, we need to specify where on our system the compliler we want to use lies.
• file_regex specifies where the error lines are and what to be returned.

For a complete list of all the variables available within a build script, check the variable reference.

CoffeeScript Build Script

So, to create our CoffeeScript build file, we simply fill in the following three lines. Keep in mind that with the Node.js coffeescript compiler we would normally execute something similar to this in the terminal:

coffee -c /path/to/file.coffee

{
	"cmd": ["coffee","-c", "$file"],
	"selector" : "source.coffee",
	"path" : "/usr/local/bin"
}

Save your file in your user packages folder and restart Sublime Text. On OSX its located at:
~/Library/Application Support/Sublime Text 2/Packages/User

Now every time we hit CMD + B our coffeescript file will be compiled with the build script. If you want to watch the file for changes after the first compile, simply switch the first line to "cmd": ["coffee","-wc", "$file"],. If anyone is using my CoffeeScript-Growl plugin, change your first line to "cmd": ["coffee", "-r", "coffeescript-growl", "-wc", "$file"], to get growl notifications.

Node.js Files

Another use for Sublime Text build scripts is launching the nodejs file you are currently working on. Our build script now looks something like this:

{
	"cmd": ["node", "$file"],
	"selector" : "source.js",
	"path" : "/usr/local/bin"
}

Thats is!

Pretty simple, eh? There is a lot of room for expanding these builds and making them do a lot of the manual work for you. If you have anything to add, please post it in the comments and I’ll be sure to add it to the post.

As always be sure to Follow me on Twitter

I’ll go into the technical details further on in the post, but here is a demo as well as a youtube video showing the effect as it can be a little sluggish on older machines. Currently tested and working in Google Chrome 14 and Firefox 6.0. 

Try the Demo | Download the Source

Setting up our document

To get started, we dont really need that much. Only two of the files from the CCV Library are required are CCV.js which does the acutal detection of the the face, and face.js which holds the data for what faces look like. We will also need an empty canvas element, a HTML5 video element with .MP4 and .OGG encoded files  (I used Miro to convert mine), and a blank scripts.js file. Things will look like this when we are setup:

<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Face Detection</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
	<h1>HTML5 GLASSES</h1>
	<p>Created by <a href="http://twitter.com/wesbos" target="_blank">Wes Bos</a>. See full details <a href="">here.</a></p>
	<!-- Our Main Video Element -->
	<video height="426" width="640" controls="false">
		<source src="videos/wes4.ogg" />
		<source src="videos/wes4.mp4" />
	</video>

	<!-- Out Canvas Element for output -->
	<canvas id="output"  height="426" width="640" ></canvas>

	<!-- div to track progress -->
	<div id="elapsed_time">Press play for HTML5 Glasses!</div>
</div>
<script type="text/javascript" src="scripts/ccv.js"></script>
<script type="text/javascript" src="scripts/face.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</body>
</html>

Let’s write some JavaScript!

The core of this application is just a single function called html5glasses() that runs every 200 miliseconds. The function grabs the current frame from the window, spits it onto the canvas and then lets the CCV JS library detect the face. When it returns the data we loop through each of the found faces and and apply the silly glasses.

I should note that this isn’t the fastest thing in the world, and it is blocking. In the CCV examples, they provide a web worker example so we could do this asynchronously, but in my tests it was significantly slower. This is new technology and will only get better. On my computer I see a new frame about every 300 miliseconds, or 3 times a second.

Setup the JavaScript Variables

I’ve commented these inline.

var
		// Store the first HTML5 video element in the document
		video = document.querySelector('video'),
		// We use this to time how long things are taking. Not that important..
		time_dump = document.getElementById("elapsed_time"),
		// Create a new image that will be our goofy glasses
		glasses = new Image(),
		// Store the canvas so we can write to it
		canvas = document.getElementById("output"),
		// Get the canvas 2d Context
		ctx = canvas.getContext("2d");
		// Finally set the source of our new glasses img element
		glasses.src = "i/glasses.png";

Create our main html5glasses() function

This is where all the magic happens. Read through each line and realize what is happening. Pay specific attenton to the ccv.detect_objects() function.

function html5glasses() {
	// Start the clock
	var elapsed_time = (new Date()).getTime();

	// Draw the video to canvas
	ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);

	// use the face detection library to find the face
	var comp = ccv.detect_objects({ "canvas" : (ccv.pre(canvas)),
									"cascade" : cascade,
									"interval" : 5,
									"min_neighbors" : 1 });

	// Stop the clock
	time_dump.innerHTML = "Process time : " + ((new Date()).getTime() - elapsed_time).toString() + "ms";

	// Draw glasses on everyone!
	for (var i = 0; i < comp.length; i++) {
		ctx.drawImage(glasses, comp[i].x, comp[i].y,comp[i].width, comp[i].height);
	}
}

Finally, trigger it!

We trigger the detection when the video element is played and stop it when it reaches the end.

/* Events */ 

video.addEventListener('play', function() {
	vidInterval = setInterval(html5glasses,200);
});

video.addEventListener('ended', function() {
	clearInterval(vidInterval);
	time_dump.innerHTML = "finished";
});

Pretty cool, eh?

I'm just getting into CCV, but the library can be extended to recognize much more than just faces. If you take at look at the github repo, they have examples for detecting all kinds of things.

What else?

Next time I'm in the mood for a little hack, I'll try and hook this up to a flash webcam app or Mozilla's Rainbow to stream the data right from the device itself, giving us realtime funny glasses!

Let me know if you have any ideas or questions. I'm @wesbos on twitter and have hosted the source on Git Hub

1. Install the command line utility

If you do a lot of work in bash, its helpful to open up a file or entire folder in your editor right from the command line.

To Install:
Run the following line in your terminal.
sudo ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" /bin/subl
This will then give you access to the bash command subl with a number of arguments.

The most basic usage is to open the current folder in Sublime Text 2. Simply Type subl .

subl -ab tutorial.html opens the file tutorial.html in the current window but keeps terminal in focus. This is handy if you need to traverse a few directories and cherry pick a number of files to be opened.

Arguments:
–project : Load the given project
–command : Run the given command
-n or –new-window: Open a new window
-a or –add: Add folders to the current window
-w or –wait: Wait for the files to be closed before returning
-b or –background: Don’t activate the application
-s or –stay: Keep the application activated after closing the file
-h or –help: Show help (this message) and exit
-v or –version: Show version and exit

2. Open files in current sublime text window

This was one of the biggest annoyances for me when switching over from coda. Whenever I would drag a file into the sublime dock icon it would open a brand new instance of sublime when I just wanted to view it along with the rest of my files. Turns out this is a super simple fix.

HitCommand + Shift + P to bring up the sublime launcher type “user global settings and hit enter. This file is similar to a .vimrc file and holds all of your custom settings. This file wont be written over when you upgrade like default global settings. Once you have this file open, add the following line:

"open_files_in_new_window": false

3. Get Code Hinting in Sublime Text 2

One feature that Coda has just slam dunked is their code hinting. I rarely ever have to type entire key words. A solution for getting code completion working in Sublime Text is to install SublimeCodeIntel, a port of the Komodo editor code  completion engine. It isn’t perfect, particularly in CSS file, but its pretty good and gets the job done.  Download the repo here and drop it into your packages folder at ~/Library/Applications/Sublime Text 2/Packages

4. Upload with Transmit shortcut

If you are working on a code n’ upload project you need to be able to edit a file and quickly FTP it up to your server. Since sublime doesn’t have this built in like Coda does, you’ll need to use the Transmit FTP client.

First, set up your project folders in transmit.

Next, install Sublime Transmit Docksend, The way this package works is by simulating a docksend (drag and drop a linked local file) to transmit when a key combination is pressed.

Finally, when editing a local file that is linked up in transmit, hitCommand + Shift + U and the file will upload. If you are editing /js/scripts.js locally, the file will be uploaded to /js/scripts.js on your server in split second.

5. Create your own snippets!

Its a given that you should have already installed Zen Coding, but there are always snippets that are developer specific that you use on a daily basis. For me, I usej + tab  to expand into a jQuery selector $(' '); To setup your own snippets, go to tools->New Snippet. The XML markup is fairly straightforward so I wont go into it. Just plop your code inbetween and ]]>. You can even set areas to tab through the snippet as well as defaults.

Here a basic snippet using the letter j as the tab trigger. When I tab, the cursor will be place inside the jQuery selector, tab again and I’m outside the selector ready to call a method on it.

<snippet>
	<content><![CDATA[\$('${1}')${2};]]></content>
	<tabTrigger>j</tabTrigger>
</snippet>

Thats is!

There is a lot more to Sublime Text 2 and many cool new features such as code folding and Vim support are currently in development. I will go into many more features in coming blog posts. Want to know how to do something? Just ask in the comments below! Be sure to also Follow me on Twitter.

function make_mce_awesome( $init ) {
	// our Options will go here..
	return $init;
}

add_filter('tiny_mce_before_init', 'make_mce_awesome');

Only allow certain block level elements

Out of the box WordPress has a bunch of elements which you can use to style your text. Chances are your client doesnt need most of them. Also, they certainly do not need access to h1 and h2 elements as they should be already coded into your theme.

$init['theme_advanced_blockformats'] = 'h3,h4,h5,h6,p';

Remove Unnecessary Buttons

This is totally up to you, but I like to remove the underline as its ugly, the spellchecker as this is now built into most browsers and the WordPress Help button. You can find the names of all the buttons by opening up dev tools and looking at the title attribute of each button.

	$init['theme_advanced_disable'] = 'underline,spellchecker,wp_help';

Create a custom Colour Pallet based on the themes colours.

Changes are the default colours in WordPress arent the same as your theme’s colours. Feed in a comma separated list of hex colours and you’re off the the races!

	$init['theme_advanced_text_colors'] = '0f3156,636466,0486d3';

Add Custom Classes to mirror your CSS

When you want to move past your basic heading and paragraph tags, it can be helpful to append custom classes to your elements from within TinyMCE. First you want to enable the style select drop down:

	$init['theme_advanced_buttons2_add'] = 'styleselect';

Then you can specify a list of labels and associated CSS classes.

$init['theme_advanced_styles'] = "bigTitle=bigTitle;Call To Action Button=ctaButton,Rounded Corners=rounded";

Our Final function looks like this:

function make_mce_awesome( $init ) {
	$init['theme_advanced_blockformats'] = 'h2,h3,h4,p';
	$init['theme_advanced_disable'] = 'underline,spellchecker,wp_help';
	$init['theme_advanced_text_colors'] = '0f3156,636466,0486d3';
	$init['theme_advanced_buttons2_add'] = 'styleselect';
   	$init['theme_advanced_styles'] = "bigTitle=bigTitle;Call To Action Button=ctaButton,Rounded Corners=rounded";
	return $init;
}

add_filter('tiny_mce_before_init', 'make_mce_awesome');

Style the editor on the backend

Your theme’s styles should mirror on the backend. You can add in a custom stylesheet for the backend with the following line. This is helpful for getting an accurate idea of what size/colour/alignment your page will have.

	add_editor_style('editor-style.css');

I found that passing in editor-style.css (which should be found in the root of your theme) busted any cache that add_editor_style() was giving me.

Have more tips?

I would love to hear them! Leave them in the comments below and I’ll update this list as we go along.

• Download the code on GitHub
• Follow @wesbos on Twitter

Quick Screencast detailing tutorial

Cross Device / Browser compatibility

Server Side

The first thing we need to do is create a web socket server. For this we will be using Node.js and the module Socket.io. Socket.io makes its super easy to get a web socket server up and running. It even provides a flash fallback for browsers that don’t support native web sockets. In this tutorial we will only be working with browsers that support the canvas element.

If you don’t have Socket.io installed yet, make sure you do so by typing npm install socket.io into your terminal.

For now, lets just set up the web socket server. Create your server.coffee file with the following configuration.

io = require('socket.io').listen(4000)
io.sockets.on 'connection', (socket) ->

Compile your coffeescript and hop back into your terminal and type node server.js. You now have a web socket server running on port 4000.

If you go to localhost:4000 you’ll see the following:

Client Side

First, lets quickly get our index.html file up and running. In addition to some bare bones markup, I’m also including jQuery, our Socket.io JS file which is now being served up from our server, a jQuery plugin for drag events, and our own scripts.js file which will hold all the magic.

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.event.drag-2.0.js"></script>
	<script src="http://localhost:4000/socket.io/socket.io.js"></script>
	<script type="text/javascript" src="scripts.js"></script>
	<link rel="stylesheet" href="style.css" />

	<title>HTML5 Canvas + Node.JS Socket.io</title>
</head>
<body>
	<article><!-- our canvas will be inserted here--></article>

	<!-- Scripts required -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.event.drag-2.0.js"></script>
	<script src="http://localhost:4000/socket.io/socket.io.js"></script>
	<script type="text/javascript" src="scripts.js"></script>
</body>

Now that we have our server up and running, we can write some code which will draw to the canvas. Create a new file called scripts.coffee. All of the following code happens within the App.init() method which we will trigger on the jQuery document ready.

Create our Canvas Element

# setup our application with its own namespace
App = {}

###
	Init
###
App.init = ->
	App.canvas = document.createElement 'canvas' #create the canvas element
	App.canvas.height = 400
	App.canvas.width = 800  #size it up
	document.getElementsByTagName('article')[0].appendChild(App.canvas) #append it into the DOM 

	App.ctx = App.canvas.getContext("2d") # Store the context 

	# set some preferences for our line drawing.
	App.ctx.fillStyle = "solid"
	App.ctx.strokeStyle = "#bada55"
	App.ctx.lineWidth = 5
	App.ctx.lineCap = "round"

	# Draw Function
	App.draw = (x,y,type) ->
		if type is "dragstart"
			App.ctx.beginPath()
			App.ctx.moveTo(x,y)
		else if type is "drag"
			App.ctx.lineTo(x,y)
			App.ctx.stroke()
		else
			App.ctx.closePath()
	return

Draw to canvas function

Since drawing to canvas involves beginning, moving and closing paths, i’ve create a short little function that hooks into the jQuery dragstart and drag events.

# Draw Function
App.draw = (x,y,type) ->
	if type is "dragstart"
		App.ctx.beginPath()
		App.ctx.moveTo(x,y)
	else if type is "drag"
		App.ctx.lineTo(x,y)
		App.ctx.stroke()
	else
		App.ctx.closePath()
return

Setup our client side web socket

Since we included our file at http://localhost:4000/socket.io/socket.io.js we are able to create an object which we can send our data over. With just a few lines, we create our App.socket object and bind to any incoming web socket events called ‘draw’. We will go over this more soon.

# Sockets!
App.socket = io.connect('http://localhost:4000')

App.socket.on 'draw', (data) ->
	App.draw(data.x,data.y,data.type)

Canvas Drawing Event

This is where things gets exciting. Now we want to bind a few events to our canvas element. The way this works is when someone draws on the canvas, we immediately use our draw() function to draw to the current canvas as well as send the x and y ordinates over the web socket with socket.io’s emit. In just a bit we will take a look at the server side part of this event and see how the server sends out this data to all open windows.

###
	Draw Events
###
$('canvas').live 'drag dragstart dragend', (e) ->
	type = e.handleObj.type
	offset = $(this).offset()

	e.offsetX = e.layerX - offset.left
	e.offsetY = e.layerY - offset.top
	x = e.offsetX
	y = e.offsetY
	App.draw(x,y,type)
	App.socket.emit('drawClick', { x : x, y : y, type : type})
	return

Jump back to server side

Now that we know we are sending the x, y and type of event over the web socket, we need to do something with that on our server. What we want to do, is take that data and send it back out to everyone else that has a browser open.

Our updated server.coffee file now looks like this. We first wait for a connection event, then wait for a ‘drawClick’ event to be sent by a browser. When that happens we take the data and send it out to everyone else with a browser open. THe server side script we wrote earlier will then paint the canvas.

io = require('socket.io').listen(4000)

io.sockets.on 'connection', (socket) ->
	socket.on 'drawClick', (data) ->
		socket.broadcast.emit 'draw',{ x : data.x, y : data.y, type: data.type}
		return
	return

You’ll now need to restart your web socket server as we have made changes to it. Hit control-c to kill it, and node type node server.js to restart it.

Get Drawing!

One you fully understand how this all works, open your index.html file in any web browser that supports web sockets and canvas (at the time of writing Chrome, Firefox, Safari, Opera and IE9). Check http://caniuse.com/#search=canvas for more support info.

Limitations

As this is a very basic demo, there are a few limitations which can easily be solved with a little more code. Currently the canvas only supports one person drawing at a time, if two or more are drawing, the canvas will be painted sporadically. Also, there is definitely a lot of room to add tools such as brushes, colours, erasers and PNG export. If there is interest, I’ll expand this tutorial series to cover them.

If you’re interested in getting this up and running in the real world and off of your localhost, I was able to get mine running on Amazons free micro instance of EC2 although this involves installing Node and NPM all over again. Also note you should run your server on port 80 rather than 4000.

Please feel free to download, hack, complain, fork or contribute to the project on my github account.

The way I develop my CoffeeScript is by using the Node.js compiler to watch my `scripts.coffee` for any changes and compile it into normal JavaScript every time I save my file. The process is instant, but I need to watch my terminal window to see if there were any compiling errors. As you can imagine, this can get fairly annoying especially if you aren’t on dual monitors.

So, my solution was to write a Node.js module that would send a growl notification to the user when the compile was finished. I made use of the growlnotify command line plugin for OSX.

To use, you need to first install growlnotify.

Then use NPM to install the package `npm install coffeescript-growl`

Finally, require (with -r or –require) the module when you compile your script. I like to use something like this:

`coffee -r coffeescript-growl –watch –compile ~/sites/my_project/scripts.coffee`

Thats it! If you have any suggestions or fixes, please fork me on github and follow me on twitter.

A great example of this is for a photographer that may have 50 pictures in their portfolio, they often do not let you share the link to that specific picture but rather just the page with the slideshow embedded in it. Additionally, the user can now use the browsers back/forward buttons to navigate through your slideshow

Not to fear! We can set a hash on the url every time we change the slide and then check for a hash when the page loads, sending them to that specific slide.

The code isn’t too complex, so if you’re comfortable with cycle, head on over to view the demo or download it at the github repo.

First we start off with some basic markup

	<a href="#" id="prev">Prev</a>
	<a href="#" id="next">Next</a>

	<div class="slideshow">
		<img src="http://farm5.static.flickr.com/4029/4646753786_4a219fbbe3_z.jpg" alt="" />
		<img src="http://farm4.static.flickr.com/3472/3817281628_d5933948db_z.jpg" alt="" />
		<img src="http://farm1.static.flickr.com/199/476514422_0c1424fb06_z.jpg?zz=1" alt="" />
		<img src="http://farm2.static.flickr.com/1311/909213290_161035cf47.jpg" alt="" />
		<img src="http://farm4.static.flickr.com/3088/2688916488_1a125cd0e7_z.jpg" alt="" />
		<img src="http://farm1.static.flickr.com/215/520495246_22da7d843b.jpg" alt="" />
		<img src="http://farm4.static.flickr.com/3537/3492378275_fceca7bf0e_z.jpg?zz=1" alt="" />
	</div>

Then be sure to include jQuery, jQuery Cycle and Hashchange.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="plugins.js"></script>

Finally, we write a little JavaScript

This can be broken down into three parts:

1. Setup your document
We write a small function that will determin the current slide, so if a user visits http://wesbos.com/demos/jquery-cycle-link-within/index.html#photo-3 we know they want to see photo 3.

	// get current slide's number
	function currentSlide() {
		var hash = window.location.hash || '#photo-1';
		return parseInt(hash.replace(/[A-Za-z#\-\/!]/g, '') - 1);
	}
	// global vars
	var	cycleSelector = $('.slideshow'),
			startSlide = currentSlide(),
			hasSlid = 0;

2. Build our jQuery Cycle slideshow
Here we are doing two important things. First we set the browsers hash to the current slide that was either clicked on the thumbnails or using the next/prev buttons. Next we set the variable hasSlid to 1. This is our way of telling the hashchange event not to fire the slide change since we have already done it here. More on this below.

// append some markup for the controls
	cycleSelector.before('

')
	// start jQuery Cycle
	.cycle({
		 startingSlide: startSlide,
		 // when using the next/prev links
   	 onPrevNextEvent: function(isNext, idx, slide) {
   	 	hasSlid = 1;
   	 	window.location.hash = "photo-"+ (parseInt(idx) + 1) + "";
   	 	return false;
   	 },
   	 // when using the pager thumbnails
   	 onPagerEvent: function(idx, slide) {
   	 	hasSlid = 1;
   	 	window.location.hash = "photo-"+ (parseInt(idx) + 1) + ""; 

   	 	return false;
   	 },
   	 timeout: 0,
   	 pager:  '#nav ul',
   	 next: '#next',
   	 prev: '#prev',
   	 speed: 500,
   	 // build the thumbnails
   	 pagerAnchorBuilder: function(idx, slide) {
       return '


';
    }
	});

3. Bind to hashchange
Finally, we need to listen for the hashchange event. This means that the code within this event will execute whenever the hash in the url is changed. So, for example, if a user changes the url from #photo-2 to #photo-4, this event will be fired and change the current slide to slide 4.

Again, we only want to change the slide if our variable hasSlid is set to 0, if its set to 1 we know that either the prev/next controls or the thumbnails have taken care of this. If a user visits the url from a link or is using their browsers back/next buttons, then we use this to change the slide.

	// bind to the hashchange event
	$(window).bind('hashchange', function () {
			var slideNo = currentSlide();
			// we only want to fire the slide change if the next button or the pager hasn't done it for us
			if (hasSlid === 0) { cycleSelector.cycle(slideNo); }
			// return it back to zero
			hasSlid = 0;
	}); 

	// when the page loads, we need to trigger a hashchange
	$(window).trigger( "hashchange" );

And thats it. You’re now able to link within a jQuery Cycle slideshow, bookmark and share certain slides, and use your browsers back/forward button. Let me know if you have any questions or improvements. Please fork the github repo and send me a pull request.
Want more like this? Be sure to Follow me on twitter for the latest

I was quickly able to find a hack that gave me access to all the levels, even the special Chrome levels!  So to  get access to all levels in Chrome Angry Birds, just copy and paste the following line into your browser’s address bar.

javascript: var i = 0; while (i<=69) { localStorage.setItem('level_star_'+i,'3'); i++; } window.location.reload();

To set all levels to locked, simply copy and paste this into your address bar:

javascript: var i = 1; while (i<=69) { localStorage.setItem('level_star_'+i,'-1'); i++; } window.location.reload();

How?

In the talk Rovio did at Google IO, they mentioned they were using HTML5′s LocalStorage. If you open up Web Inspector in chrome, you’ll see they are keeping track of your score and stars with localstorage. Lucky for us, that means we can use setItem() set all 70 levels to 3 and get access to them all.

If you like this kind of stuff, be sure to follow me on twitter for more .

So, I decided it was time to figure out how to automatically backup my databases. The problem is that my MySQL databases are not in the same folder as my Dropbox folder.

The answer to this is very simple! First, if you haven’t already, sign up for dropbox. Then we just need to create a simple symlink that will allow the databases to be stored in their location and still be backed up to the DropBox folder.

First, figure out where MAMP stores your databases. If you are on good old MAMP, they will be located at /Applications/MAMP/db/ and if you are on MAMP Pro, they are located at /Library/Application Support/appsolute/MAMP PRO/db/mysql/

Next, pop open terminal so we can create our symlink. We will be using the link folders command (ln) and the -s argument to specify that its a symbolic link.

ln -s  /Applications/MAMP/db/ ~/Dropbox/symlinks/db

If your dropbox folder is different, make sure to change the last argument. Other than that, you’re setup. No more database loss nightmares!

Make sure to view video in HD

First thing you need to do is setup a new page with a custom page template. It can be as simple as below but may vary depending on your theme structure. I’m using the default WordPress 2010 theme.

<?php
/* template name: Posts by Category! */
get_header(); ?>
		<div id="container">
			<div id="content" role="main">
			</div><!-- #content -->
		</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Then We need to get all of our categories into a variable called $cats. Once they are setup, we’ll just loop through the categories, setup a new WordPress loop for each of them, and echo out the information needed.

Here is the final code, I’ve commended each line as needed.

<?php
/* template name: Posts by Category! */
get_header(); ?>

		<div id="container">
			<div id="content" role="main">

			<?php
			// get all the categories from the database
			$cats = get_categories(); 

				// loop through the categries
				foreach ($cats as $cat) {
					// setup the cateogory ID
					$cat_id= $cat->term_id;
					// Make a header for the cateogry
					echo "<h2>".$cat->name."</h2>";
					// create a custom wordpress query
					query_posts("cat=$cat_id&post_per_page=100");
					// start the wordpress loop!
					if (have_posts()) : while (have_posts()) : the_post(); ?>

						<?php // create our link now that the post is setup ?>
						<a href="<?php the_permalink();?>"><?php the_title(); ?></a>
						<?php echo '<hr/>'; ?>

					<?php endwhile; endif; // done our wordpress loop. Will start again for each category ?>
				<?php } // done the foreach statement ?>

			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Thats it! You can obviously customize this to your own likings. I suggest you check out and read The Loop and query_posts().

Please leave any questions or commend below!

Since they still want to be indexed by search engines, they don’t bother to hide the content once you have reached your 20 max. Two simple lines of CSS will hide this. I’ve also made it into a Chrome Extension

Update: Just want to be clear that this is not about the NYT business model or getting stuff for free. If you want  to view the NYT, pay for it. This also isn’t a hack or a security intrusion, its simply hiding a div that is overlaying the content. The same results can be achieved by disabling javascript or selecting “no style” in your favorite browser. This is simply a tutorial on how to style the content of a page to your liking.

Update 2: Looks like New York Times have updated their CSS classes from #gatewayCreative to #gatewayUnit in an effort to thwart cheaters.  I will not be updating the extension as this wasn’t intended to get around the wall for free but rather to expose how hilarious their pay wall security was. I think that point has been made, feel free to fork this plugin.

Update 3: Now Google has taken down the extension. Not sure why, may have been for using the NYT logo, may be more serious. Either way, it was fun while it lasted

Video

Code

#overlay, #gatewayCreative { display: none !important; visibility: hidden !important; }
body { 	overflow: scroll !important; }

Then create a manifest.json file to register the Google Chrome Extension

{
	"name" : "New York Times Paywall Smasher",
	"version"  : "1.0",
	"description" : "Disables the New York Times Paywall",
	"browser_actions" : {
		"icons" : {
			"128" : "icon128.png",
			"48" : "icon48.png",
			"16" : "icon16.png"
		}
	},
	"content_scripts" : [{
		"matches": ["http://www.nytimes.com/*"],
		"css" : ["nyt.css"]
 	}]
}

Load the chrome extension into developer view and say goodbye to the paywall (at least until they implement something that isn’t defeated with display: none). Install Chrome Extension.

1. Open up your Applications folder and find your old version of Firefox
2. Right click-> get info.
3. Rename to “Firefox36.app”
4. Download Firefox 4.0 and install as normal
5. Celebrate that you now have 1 more browser to test in!

Really simple! If someone knows how to do this on the Windows and Linux side, I would love to hear how.

Take a big dump

Although this script has been around for almost 9 years, its still an essential tool for every developers toolbox. Big Dump staggers the database import so your server does not timeout. Here is a quick tutorial on how to use Big Dump.

Video

Instructions

1. Download the latest version of Big Dump here.
2. Open up bigdump.php and configure: Server, database name, username, password, and the file name.
3. Upload both your SQL file and bigdump.php to your server
4. Browse to bigdump.php and click import

Thats it! Wait a few minutes and you will see a confirmation screen similar to the one below. Make sure to delete bigdump.php off your server when you are finished.

1. Log into your host’s backend and find the spot to edit your databases

If you are unsure of which database is your WordPress install. Open up your FTP client and browse to /wp-config.php. This file will contain your database name as well as the username and password of it.

2.  Login to your database and you will be presented with PHPMyAdmin.

On the side, you will see a list of  tables. Click the one that says “wp_users”. Once that loads, click the “Browse” tab.

3. Edit the specified WordPress User

You should now see a list of users in your WordPress install. Click the pencil icon to edit the user you wish to reset the password for.

4.  Set the new password

Finally, delete the data from the “user_pass” field, enter in a new password, and select MD5 from the dropdown to the left of it. When done, click go.

5. You’re done! Log in as normal with your new password

View Demo Download Files

Setting up

You’ll need three files: index.html, wb.js, and style.css. The bulk of our content will go into wb.js as we are loading everything in via JavaScript.Your index.html file should look like this:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Google Maps Burstn Mashup</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=false"    type="text/javascript"></script>
  <script type="text/javascript" src="wb.js" ></script>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="map" style="width: 100%; height: 100%; position: absolute;"></div>
</body>
</html>

Getting the data from Burstn API

Pulling the data from Burstn couldn’t be easier. A quick look at their documentation shows that we need to make a GET request to http://api.burstn.com/1/timeline/global. Since we want to load quite a few photos, we are going to set our limit to 400. We also need to append &callback=? to the end of our url so we can get around the “Origin null is not allowed by Access-Control-Allow-Origin.” browser security.

Using jQuery’s AJAX method, we pull in the JSON data as so:

	$.getJSON('http://api.burstn.com/1/timeline/global?limit=400&callback=?', function(data) {
		console.log(data);
	});

Now if we take a look at our console. we’ll see an object that was returned that looks like this:

This is all the data we need to start plotting it on our map. Using the Google Maps JavaScript 3.0 API, we will now modify the code above to be able to plot these pictures on a map.

First, setup your scripts file to populate with a map

// check that the document is ready
$(function() {
	// setup a few vars
	var marker, i; 

	// setup our map
	 var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: new google.maps.LatLng(43, 20),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // setup the info window (the popup bubble that display the info
    var infowindow = new google.maps.InfoWindow();

Next, Pull in data from Burstn and plot on mapa

You’ll see in this chunk of code that we use jQuery’s $.each() to loop over each of the results, check for a latitude coordinate, and then plot it on the map.

	$.getJSON('http://api.burstn.com/1/timeline/global?limit=400&callback=?', function(data) {
		console.log(data);
		$.each(data['body']['data'], function(i,v) {
			// setup some variables
			var coords = data['body']['data'][i]['coordinates'],
				imgsrc = data['body']['data'][i]['image'],
				caption = data['body']['data'][i]['caption'];

				 // setup the image markers
				var image = new google.maps.MarkerImage(imgsrc['square'],
					new google.maps.Size(20, 32),
					new google.maps.Point(0, 32)
				);

				// check if this image has a lat set, if not, we skip it.
				if (coords.latitude) { 

					marker = new google.maps.Marker({
						position: new google.maps.LatLng(coords.latitude, coords.longitude),
						icon : image,
						map: map
					});

					google.maps.event.addListener(marker, 'click', (function(marker, i) {
						return function() {
							infowindow.setContent('<div class="picture"> <span class="title">'+caption+'</span><img src="'+imgsrc['medium']+'" alt="" /></div>');
							infowindow.open(map, marker);
						}
					})(marker, i));

				} // end if

			});
	});
});

Thats it! Just add some style

Thats it! Just add a quick dash of style to make things look good and we are off to the races.

#map {
	overflow: hidden;
}
.picture {
	background: yellow;
	overflow: hidden;
	position: relative;
	}

	.picture span {
		position: absolute;
		width: 100%;
		bottom: 0;
		padding: 4px;
		background: #000;
		color: #fff;
		font-size: 12px;
		font-family: Arial;}

	.picture img {
		height: 400px;}

1. Load a JSON file via Ajax
2. Parse the results
3. Pass it to Google’s Visualization into a data table
4. Create a map based on that data.

Now the example given is great, however it doesn’t jive well when you want to add in a friendly library like jQuery. So here is how we fixed it:

The JSON Data in regiontop10.json

[
    {
        "DisplayName": "United States",
        "Name": "US",
        "population": 307006550
    },
    {
        "DisplayName": "Canada",
        "Name": "CA",
        "population": 33739900
    },
    {
        "DisplayName": "United Kingdom",
        "Name": "GB",
        "population": 61838154
    },
    {
        "DisplayName": "Mexico",
        "Name": "MX",
        "population": 107431225
    }
]

Then we just needed load the data from this file and create the map. Comments on how this code works are inline.

    google.load('visualization', '1', {packages: ['geomap']});

    $(function() {
    		// when document loads, grab the json
			$.getJSON('regiontop10.json', function(data) {
				// once grabbed, we run this callback

				// setup the new map and its variables
				var map = new google.visualization.DataTable();
					map.addRows(data.length);  // length gives us the number of results in our returned data
					map.addColumn('string', 'Country');
	      		map.addColumn('number', 'Population');

				// now we need to build the map data, loop over each result
				$.each(data, function(i,v) {
					// set the values for both the name and the population
					map.setValue(i, 0, v.DisplayName);
					map.setValue(i, 1, v.population);
				});
				// finally, create the map!
				var geomap = new google.visualization.GeoMap(
		          document.getElementById('visualization'));
		     		 geomap.draw(map, null);

			});
   });

And that is it! Take a look at the demo and view source for the rest of the HTML markup.

I’m Blogging!

Over the past couple of years I’ve gathered up so much knowledge, so many code snippets and many more insights on everything from web development to entrepreneurship. These were all great, but I never had a spot to put them! With the start of this blog, I hope to further establish myself by helping the community who I’ve learned so much from over the years.

Ingredients

Incase you were wondering, the site, which is fairly simple in its make up, is run on WordPress with hints of HTML5, CSS3 and some jQuery.

Suggestions

I am often asked questions by friends who are just getting into something like WordPress or jQuery. They are usually asking how I did something on a certain website, or how to get started with a certain lanaguage. If there is anything you want to ask me, please get in touch right now. I’m always looking for ideas to do tutorials and blog posts on, so I would love to hear from you!

<?php
	// define the path and name of cached file
	$cachefile = 'cached-files/'.date('M-d-Y').'.php';
	// define how long we want to keep the file in seconds. I set mine to 5 hours.
	$cachetime = 18000;
	// Check if the cached file is still fresh. If it is, serve it up and exit.
	if (file_exists($cachefile) && time() - $cachetime < filemtime($cachefile)) {
   	include($cachefile);
    	exit;
	}
	// if there is either no file OR the file to too old, render the page and capture the HTML.
	ob_start();
?>
	<html>
		output all your html here.
	</html>
<?php
	// We're done! Save the cached content to a file
	$fp = fopen($cachefile, 'w');
	fwrite($fp, ob_get_contents());
	fclose($fp);
	// finally send browser output
	ob_end_flush();
?>

Have some others tricks? Leave a comment below!

Freshbooks

Freshbooks makes invoicing clients easy. Dealing with poorly formatted excel documents and keeping track of payments are a thing of the past when you use freshbooks. At around $15/ month, the service pays for itself even if you are sending just a few invoices a month.

Cloud App

Could App is a new addition to my paid services as I only signed up for the premium membership a month ago after using a free account for 7+ months. The app is very simple, take a screenshot and it automatically uploads it to the cloud and embeds a short URL into your clipboard – all within about 2 seconds. The premium account (at $5/ month) allows me to upload any type of file up to 250MB as well as use my own snazzy domain name ‘b-w.es’.

Basecamp

Basecamp is a project management and collaboration tool created by 37 Signals. Ask any developer, designer or team lead what tools are in their toolbox, and they will likely say Basecamp. The premium service allows me to manage large projects, collaborate communication, organize to-dos among other time savers. If you’re pulling your hair out because your email inbox is in disarray, its time to check out Basecamp.

Dropbox

Dropbox is a file syncing service that has grown to become the standard in the web design and development industry. I work right out of my Dropbox folder and always maintain a safe backup both in the cloud as well as on my other computers. It even acts as sort of a source control system when working on a project with more than one developer. The revert history function has saved my ass many times over to make it worth the $100/year.

Tuts Plus Membership

Keeping your skills sharp is an important part of being a developer. The TutsPlus network provides an array of sites that offer up premium tutorials to paying subscribers. The tutorials are always top quality and definitely worth the few bucks a month I pay. I check NetTuts daily but also keep an eye on Web Design Tuts Plus, Mobile Tuts, and PSD Tuts

Reinvigorate

Website analytics company Reinvigorate fills in the gaps where Google Analytics falls short. With realtime tracking and really awesome heatmaps, the data I get from them is worth the $10/month.

Groove Shark (Almost)

I’m a huge Groove Shark user and have considered their premium plan many times. The only thing that is holding me back at the moment is the ability to use the forward and back media keys on my laptop. The day they implement this, I’ll be first to sign up