It’s an extremely simple feature but will save you lots of time and potentially lost code.

Let’s take this list as a very basic example. This list could be any block of code that you want to move up or down – they are only numbered as a visual.

How do we move them up and down to end up in the correct order? We could cut and paste, but line bubbling is much faster.

In Sublime Text, hold down ⌘ + control (CTRL + SHIFT on Windows) and use your ↑ up* and ↓ down arrow keys to move the lines around. This works for single and multiple lines.

Check out the video for a visual:

Easy! Want to learn more, sign up below and I’ll let you know when my book comes out.

ST3 is only available to registered ST2 owners, you will be reqired to input your license key upon launch. If you forget where you put your license key, go to Preferences → Browse Packages and then open the settings folder and look for License.sublime_license

What’s new

You can read all the new features over at the Sublime Blog, here are the main features along with some explanation and commentary.

It’s even faster!

Sublime has always been a blazing fast editor and Jon Skinner has outdone himself with this. The editor starts and opens up my last project in less than a second. On OSX the icon doesn’t even reach the top of the bounce before it has loaded.

Python 3.3 & Packages API

Sublime has now switched to Python 3.3. If you aren’t familar, Python is the programming language that Sublime Text uses to expose it’s API. It is how we get all those great packages. Python 3.3 has been out for a while, but many developers have been dragging their heels in upgrading as many of the packages haven’t been ported over. I’m not a Python developer, but according to the Python Wall of Superpowers things are looking better lately.

The downside to this is that most Sublime Text packages will need to be ported to ST2/Python 3.3. The author of Sublime Text says porting to the new API involve minimal work.

Sublime Text package manager doesn’t work yet, but the author Will Bond says work is already underway. Will also has a number of popular packages so I would watch his github, twitter and site for his experiences with porting everything over.

UPDATE: Will Bond has updated package manage to work with Sublime Text 3. See his commend below.

Pane Management

Previously sublime text only allowed you to split your editor into 1-3 columns, 1-3 rows or a grid of 4. This has changed in Sublime Text 3 which exposes controls for splitting panes indefinitely.

I played around with the commands and keyboard shortcuts for a bit but I will be sticking with Origami to manage my panes as I find the commands for moving files splitting panes to be more natural.

Symbol Indexing

ST3 introduces project wide Goto Symbol and Goto Definition. Previously Goto symbol fuzzy search only worked when you specifically noted which file you wanted to look in. In the example above I’m able to see everywhere the post_render function is called in Octopress. This is a really big step up for Sublime that may have a few IDE-lovers jumping ship.

Themes and colour schemes

The UI of Sublime hasn’t changed at all other than a few animations when hiding/showing the sidebar. I’ve tested ST3 with my Cobalt2 theme and color scheme and I’m happy to report that everything worked flawlessly.

Prices

Sublime text 3 will go for $70 or a $30 upgrade from ST2 ($15 if you purchased it recently, so don’t hold off buying ST2).  Money extremely well spent.

Wishlist

This is just the beginning of ST3 and I’m excited to see what it has in store for the future. A few things that are on my wishlist:

• Full blown terminal integration
• Binary file display  - One thing Coda does really well. If I click an image, I’m able to preview it and get its dimensions.
• Find/Replace Macros – being able to record a find/replace and play it back or run with arguments would be very handy.
• Sidebar icons – Sublime excells in its simple interface but having icons for folders/filetypes is something that has always been on my list
• What is yours? - Post in the comments what you hope Sublime Text 3 will bring

The Book

Of course all of this information will be in my upcoming book on Sublime Text. I’m making excellent progress and will have a release date for you all soon. Drop your email below and I’ll give you a hoot when it’s launched.

1. I can’t access my local sites/apps on my mobile devices
2. I can’t access localhost inside of my virtual machines
3. My teammates can’t access my local site to view it
4. I need to test IE6 on my Toshiba crapbook

Pushing your site to a server isn’t ideal, especially when you are debugging a problem and have a longer deploy process.

I develop everything locally and have to test my sites/apps on a variety of mobile devices as well as a few different installs of windows which I run on Virtual Box. This is how I run a single development domain that is available to every device on my wireless network as well as on my laptop, regardless of the wifi network I’m on.

My Setup

Before we get started, I should say that is works for any programming language that runs a local server. My setup looks something like this:

http://test.com is my domain that I map everything to. I can access test.com on any device on my network. It obviously not the real test.com, but as you will see it resolves to localhost. This domain could be anything – some devs like to run something like http://wes.dev/ but I find using a .com works better as sometimes browsers think I’m searching for wes.dev instead of going to wes.dev.

I run MAMP to serve up both my static files and my static files. I usually have mamp serving up my entire web devleopment folder so I can easily just surf to something like http://test.com/demos/webrtc-demo/ on any device. This is most common for me, so I run this on the default web traffic port 80. If you don’t do PHP development, I reccomend using pythons simplehttpserver as MAMP or WAMP are a pain to get up and running properly.

I run node.js apps on various ports. Express apps run on port 3000 by default so I just need to surf to http://test.com:3000 on any device.

I also have clients who have ruby and python/app engine backends. I usually run these on ports that are easy to remember like 8888. I keep these ports unique for each app so my browser history know the difference between http://test.com:8888 and http://test.com:9000

Just use an IP! What about  localtunnel?! 

I posted on twitter that I was writing this article and I got quite a few people asking why I didn’t just use an IP address or localtunnel. Using an IP isn’t ideal because many times applications I run depend on having a consistent domain name. With many CMS systems such as WordPress, I can’t really develop on localhost  and then view the site on 192.168.1.32. I use a few browser plugins that send my current site to my devie and having the exact same domain name is key here.

Services like localtunnel and PageKit are fantastic for quickly exposing your localhost and are invaluable when working on a remote team. However, we still run into the problem of  having different domains for your machine vs the device. So, you may still require these services and thats great, it just doesn’t replace what we are trying to do here.

Local Setup – edit your hosts file

This is the easy part. We want to edit a file on our computer called the hosts file.  This file tells your computer to resolve names to IP Addresses. So, anytime your computer requests a name – say test.com – it will check the hosts file to see if there is an IP it should resolve to.  Otherwise it carries on with its business and tries to load the web page.

Your hosts file is just a text file so you don’t need any special program.  Just open up the following file:

OSX: open terminal (applications → utilities → terminal) and type sudo open /etc/hosts. You will be asked to enter your password and then the file will open up in your text editor of choice.
Windows: Start → Run → paste notepad c:\windows\system32\drivers\etc\hosts into the box.

Now we just need to map a domain to localhost. We use the IP address 127.0.0.1 because that is the IP for your computer’s localhost.

Go ahead and pop the following line anywhere in your hosts file:

127.0.0.1 test.com

Give it a save (you may be asked to enter your password)

You can map any domain name to an alternate IP address. So, if you wanted to play a prank on a co-worker or block your wife from pinterest, you could easily tell it to resolve to any other IP. This is how those ‘self control’ apps work as well.

# Map Pinterest to google.com
74.125.224.72 pinterest.com

# Disable facebook.com
0.0.0.0 facebook.com

Now when you visit http://test.com you should see your localhost instead on whatever used to be on test.com. If you don’t see it, you can flush your DNS cache:

OSX Paste the following into terminal sudo killall -HUP mDNSResponder
Windows: Start → run → cmd (right click, run as admin): ipconfig /flushdns

Router Level Setup

The above has set you up for a local domain resolution of test.com – but what about when you want to visit test.com on another device? I have at least 20 different devices/vms to test and some of them, like the iPhone, don’t even allow you to edit the hosts file!

The answer is setting up a similar resolution, but at the router level. We will tell the router to resolve all requests for test.com to the IP address of your computer. When I first set out to do this, I thought I had to do some serious hacking – I was telneting into my router and trying to edit my hosts file. Turns out, it is a lot easier than I thought. This part could vary depending on your router – I run a custom firmware on my router called dd-wrt  and there are a few others available like Tomato and FreeWRT. If you have any sort of dlink or linksys router, you are probably able to run a custom firmware – check into it.

The peice of the puzzle that we need on your router is called DNSmasq. If you are running a router with vanilla firmware, you will have to take a look and see if if it supports DNSmasq or some other version DNS masking. Please share in the comments if you know of a way for a specific router.

First thing we need to do is grab our computers local IP address. You can get this by going back into terminal/cmdline and typing ipconfig (ifconfig on mac). and looking for something that looks like 192.168.x.x. If your computer changes IP addresses frequently you may need to set a static IP for your home network, I’ve run this setup for over a year, event reformatting my mbp once and I’ve never had to set a static IP. [osx guide] [windows guide]

With your computer’s IP handy, Go ahead and log into your router (usually 192.168.1.1 unless you have changed it) and look around for DNSmasq. in DD-WRT its located under services. Then you simply need to type the following into the box and make sure your settings line up with mine:

address=/test.com/192.168.124.110

Save your settings and you are ready to start testing your devices on your local network! I’ve been running this setup for about a year now and I’m really happy with it – would love to hear any other tips/tools you use that might make this easier to the average Joe. Good luck!

Before we go any further, if you are on team $1000 apple thunderbolt display. We get it, apple displays are perfect  and worth every penny to you. Pretty much everyone would kill for a thunderbolt display. This is my story how I got the exact same quality display for half the price.

There are tons and tons of articles that will catch you up to speed on these monitors, I suggest you read them if you want to know more. Here is the short and skinny:

1. There are many different brands that package the same panel and the prices vary. Some have poor build quality (including the circuitry) and other have really nice stands. The three big names are Yamakasi Catleap, Achieva Shimian and  Crossover. Do your research by reading the forums – there are literally thousands of pages of  information on this.
2. Most of these monitors are sold on ebay. Monoprice recenrly started to sell their own brand. I bought mine off a seller called ‘Dream Seller’ who shipped it free from Korea in a shocking 3 days.
3. You run the risk of getting a few dead pixels or back light bleeding. I paid an extra ~$25 for a pixel perfect version and I have zero dead pixels and no backlight bleed. Many buyers risk the dead pixels and end up with perfect displays, others have a few dead pixels.
4. These are barebones as it gets, DVI only and no on screen display.

I bought a Crossover Q27 LED because it has the best build quality with a metal bezel and stand. I replaced the stand with a monoprice arm because I found it less bulky. If you are considering the Crossover Q27 LED and have neck problems, go for the Crossover Q27 LED-P which has a stand that allows for pivoting and moving up/down.

Running it on a Macbook Pro

Most of the forum posters are serious gamers so I found I had to do quite a bit of research about running it on my Macbook Pro. The biggest takeaway is that these monitors require a dual link dvi cable to hook it up. Those $10 mini display port / thunderbolt → DVI connectors won’t work here. Because the resolution is so high, we can’t simply just convert the signal from our macbook to DVI like we do with other monitors – this is what we call passive conversion. As I understand it, we need an Active converter that will take the output from the macbook pro and kick it up to  2560×1440.

The above is Apple’s version, and it doesn’t come cheap at around $150. There are other companies including StarTech and Monoprice that put out cheaper, and supposedly better, adaptors for around $100-120. No cheap, so keep this in mind when factoring in the price of the monitor. These adaptors require a USB port, which is purely for power. The apple one gives you a passthrough so you don’t lose a precious port. I plugged mine into a powered hub and it works fine.

I’m running this on a mid 2010 macbook pro. It’s important to note here that even if you have a newer model with thunderbolt, you still need to buy this adaptor. I found a cheap one on Craigslist.

Power

This is another thing to pay serious attention to. Most of the monitors come with Korean power bricks which operate at 110-240V. North America runs on 120v, so I was safely inside that voltage. The only thing I needed to do was swap the korean plug for a north american on. Its the same plug as printers/scanners/monitors use, so I could just unplug the korean wall plug version and swap it out with mine.

If you live in a european country that runs on 250V – you need to make sure you buy a proper power pick. Do not fry your monitor!

Calibration

Out of the box, the colour was almost bang on and I only had to do a little bit of calibration. These monitors only come with two buttons: brightness UP and brightness DOWN. No problem here though, OSX comes with a very nice colour calibration wizzard which allowed me to make everything look 1:1 to my macbook pro.

Warranty

There isn’t much of a warranty with these things past the initial delivery, this is one of the major downsides. There is no Apple store appointments for these monitors. Luckily, I was able to pop my ebay listing # into SquareTrade and they sold me a 3 year warranty for $50. Totally worth the peace of mind.

Overall Prices

Monitor $380

Display port to Dual link DVI Converter $60 (craigslist)

Monoprice Monitor Arm – $20 off craigslist

Duty – $60 (I was one of the only instances I could find online where poeple got nailed by customs. Oh well, oh Canada).

Total: $520 taxes in

Hope this was helpful and saves you hours of searching. In the picture above, I’m also using a USB to DVI converter from displaylink to run the third display.

Please leave any tips or questions in the commends below.

1. Save on focus lost

Chronic ⌘+S’er? This tip is particularly helpful when working with CSS/LESS/SASS and switching between your editor and browser. Instead of saving on every tiny little change, tell Sublime to automatically save your files when you tab away from the editor.

I find this is super handy when working with extensions like Live Reload or compiled languages like coffeescript that watch for file saves. Put this in your settings file at Preferences → Settings - User

"save_on_focus_lost": true

If you work with other watch scripts that break and restart a process upon save (like supervisor or forever), this might not be ideal for you. No problem, only enable it for the languages you want – simply place the above setting in /Packages/User/[syntax].sublime-settings. For example, I put the above in CSS.sublime-settings and LESS.sublime-settings

2. Paste and Indent

One of the best tricks I’ve ever learned in Sublime Text is paste and indent. If you have ever pulled a piece of code off the Internet and pasted it into your application, you’ll no doubt feel the pain of having it paste in all weird and have to go in and fix it.

Easy fix to this, instead of pressing the normal cmd + v to paste, simply switch to using cmd + shift + v to paste. This will automatically indent your code block.

Like that one? I loved it so I remapped my key combos to paste and indent by default on cmd + v

Paste this little snippet into your key bindings file located at Preferences → Key Bindings - User

{ "keys": ["super+v"], "command": "paste_and_indent" },
{ "keys": ["super+shift+v"], "command": "paste" }

3. Reindent Keyboard shortcut

Now, if for some reason you end up with either a block of code or an entire file filled with hard to ready, messy, poorly indented code, reindent is your best friend.

To automatically re-indent your code, simply select the code you want to indent and then from the menu Edit → Line → Reindent

Sublime doesn’t ship a keyboard shortcut for this. No problem, let’s make our own. Pop this little snippet into the Preferences → Key Bindings - User file.

{ "keys": ["super+shift+r"],  "command": "reindent" }

4. Highlight Modified Tab

When making a change in sublime text, by default it changes the × to a circle of the same colour.

Make it a little more obvious when you haven’t saved changes to a document by turning on the following:

"highlight_modified_tabs": true

The exact styling of your modified tabs will vary depending on your theme. It looks fantastic with my cobalt2 theme for Sublime Text

I’m an instructor at HackerYou where we use Sublime Text extensively. This is a small, yet common, problem that we run into. Making it visually obvious cuts down on mistakes like this.

5. Proper Fullscreen for Mac Users

This one is only for those running Sublime Text on Mac OSX 10.7 or 10.8 with multiple monitors. You have probably realized that apple has really dropped the ball when using fullscreen, rendering the rest of multiple monitors into nothing but a linen backdrop.

If you like to code fullscreen yet still use your other monitors, go ahead and add the following to your preferences file:

"use_simple_full_screen": true

You’ll have to restart Sublime Text for this one.

More?

I’ve got plenty more tips as well as in-depth guides on the rest of Sublime Text coming up in my book. If you have a must-use tip or commends on any of the above, please feel free to leave a comment!

Here are five visual changes you can use to make your text editor just right. You should place these items inside your User settings file which can be located at preferences → Settings - User

1. Change the caret style

Who thought a caret could be sexy? Change your caret style to phase and it will fade in and out rather than blink.

"caret_style": "phase"

Other available options include “smooth”, “phase”, “blink”, “wide” and “solid”. I’ve been fond of “wide” which doesn’t blink and is clearly visible for screenshots in my new book.

2. Highlight current Line

This is one thing I wish Sublime Text enabled by default. Highlighting the current line is a subtle visual cue when jumping back and forth between a browser and code.

This is also super handy when you are dealing with long lines of code/text and you want to quickly know if the current line is wrapped or not.

"highlight_line": true

3. Increase the line height

This trick adds just two pixels to each line, but increases the readability of code so much better. Might not be for everyone but I really enjoy this one.

 "line_padding_bottom": 1,
  "line_padding_top": 1

4. Show Code folding arrows

Code Folding in Sublime Text is really great but I’ve noticed most people don’t use it as much as they do in editors because the arrows aren’t visible until you hover over the gutter.

Make them always visible and get folding!

"fade_fold_buttons": false

5. Bold Folder Labels

One of the downsides to Sublime Text is that the sidebar isn’t as strong as other editors. One visual cue that helps me out is bolding folders. This helps me quickly identify what is a folder and what is a file.

"bold_folder_labels": true

More…

I’ve got plenty more in a book I’m writing about Sublime Text. If you are interested in improving your text editor productivity, please sign up below and I’ll give you a hoot when it goes live!

I have had quite a few friends use my theme and they seem to be sticking with it. So, I’ve decided to release it to the masses. To download it, head on over to the github repo. As always, would love to hear any feedback you may have

Quick aside: I’m in the process of writing a book about Sublime Text. If you are interested in improving your text editor productivity, please sign up below and I’ll give you a hoot when it goes live.

cobalt2

A Sublime Text theme based on our old blue friend cobalt.

A refined colour scheme that is easy on the eyes and takes small UI elements into account. Includes full sublime theme (sidebar, search, tabs, etc…).

See below for examples.

Installation

Installation is easy, just follow these steps:

1. Open your Sublime Text packages directory Preferences → Browse Packages

1. Drop in the Theme - Cobalt2 directory here (Right into /Preferences/)
1. Lastly, open Preferences → Settings - User. Add the following two lines:

"color_scheme": "Packages/Theme - Cobalt2/cobalt2.tmTheme",
"theme": "Cobalt2.sublime-theme",

If these are the last two lines of your settings file, make sure to omit the trailing ,

Screenshots

Indents, searches, current line and folding

Tabs, spaces and comments

JavaScript

CSS

PHP

Ruby

Python

Markdown

Kyle Knight for pushing cobolt2 past the code screen and styling the entire editor.

These tips are best if you are thinking about running a sole proprietorship (a business that is owned and run by a single person) in Canada but are helpful for other outside of the country.

Hire a good Accountant

I’m putting this one first because its by far the most important thing you should do when starting a business. My first year I paid someone $50 to do my taxes and I really got what I paid for. I had my taxes reassessed three times and had to pay the government more each time. The second year around I paid around $700 for the fantastic services of Waterford Tax & Advisory who did an amazing job straightening everything out and giving me some fantastic advice which saved me tons in the long run. A good accountant will always be around to answer questions and give you advice. You can’t afford to use a cheap accountant, trust me.

Ditch excel, use Freshbooks

This is a no-brainer for taking care of estimates, expenses and invoicing clients. At $33 a month, this is one of the more expensive services I subscribe to, but it is worth every penny. At the end of the year I’m able to export a few reports and send them off to my accountant – no dealing with spreadsheets. My clients love Freshbooks too – I often get compliments on both how easy it is to manage invoices and how professional my invoices look like.

Understand taxes – Personal and HST

Starting a business, you are probably coming from  a job where all your taxes are taken care of and at the end of the year, you get a nice little return from the government. Not so when you are on your own, take the time to educate yourself on what sort of taxes you need to pay in your area.

Personal Income Taxes: Running a sole proprietorship in Canada means you get taxed at the same rates as everyone else who isn’t self-employed. There are both provincial and federal tax rates that vary depending on how much income you bring in. You can run your numbers for both at the CRA website.

HST: I run my business in Ontario, and I need to charge all my clients who live in Ontario 13% HST – your province or state will have something similar setup. If you are making more than $30,000 a year  you will need to register for a HST number and start collecting.

So, the biggest lesson learned here is you need to pay a ton of taxes. As soon as you get a cheque, you should cut out anywhere from 35-50% (13% HST, 22-37% income tax)  - depending on how high your taxable income is – and placing it in another account to pay the tax man at the end of the year.

Keep every receipt and expense everything

The best thing you can do to reduce how hard you get hit by taxes is to expense every single dollar you pay to run your business. Again, this may seem like easy stuff to some, but its worth noting how this stuff works.

You only get taxed on net income, not gross income. So, if you get paid $1,000 for a project, but spent $200 on hosting for it, you will only be taxes on $800.

So, think of every little thing you use to run your business. Buying a new laptop, conference tickets + flights, printer ink, online subscriptions, software licenses… It all adds up quickly and can really help you reduce your taxable income.

As a business, you also don’t have to pay HST. So any receipt you have that includes 13% HST, you will get that back from the government when you pay your taxes.

Max out your RRSP

This is a good tip for anyone around tax time. Up until the end of February, you can contribute to the previous years RRSP. Anything you contribute to your RRSP is not taxed, so you can treat it as a huge expense. The amount you con contribute depends on your previous years income, but it could be as much as around $20,000. In Canada, this money is meant to only be taken out at retirement, but there is a special clause that lets you cash it out, without penalty, when you buy your first house.

Health Insurance is cheap

My wife recently quit her job to work independently beside me. While we are super happy with that decision, we lost the perk of health benefits. In Canada residents are covered for the big stuff like surgeries and doctors appointments, but not things like medicine, dental work and eyeglasses. Insurance plans are surprisingly affordable, starting at $60 for basic coverage. Kait and I went for pretty good dental, eye and prescription coverage and it was around $160/month.

One other thing, we shopped around on the net for insurance and we didn’t find any good rates, only after getting in touch with a broker did we find out its much cheaper to have a human do it for you.

Incorporate to save $$

Coming full circle to having a good acceptance, mine suggested that once you start earning decent income or are working in an arrangement like Kait and I are, it would make sense to ditch the sole proprietorship and incorporate as a business. Its more expensive to incorporate a business (~$500 vs $60) and its a more work to get up and running, but its well worth the tax savings in long run. I’m only beginning to explore this world but I’ll be sure to follow up with a post after a few months.

That’s it

TL;DR : Hire a good accountant and explore every possible way that you can reduce your taxable income. Starting to run your own business can be confusing so hopefully these tips can help you.

Update: Check this comment for a lot more useful tips, thanks Martin

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 have thought 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.