Want VIP access? Get the latest tutorials, videos, giveaways and more!

×

Author Archives: wesbos

clipboard

This is a little known secret of Sublime Text – the ability to have multiple items in your clipboard history and access them with the keyboard.

To access the clipboard history, simply hit + K, + V – so just add the + K infront of your regular paste shortcut. Windows users swap out with Ctrl.

Watch the video for a quick tutorial on how to use it with your workflow:

Like this tip? Check out my book + video series for tons more!

ss 2014-11-17 at 3.25.14 PM

Hey everyone – a little trick here today with the HTML5 audio element and the Google translate API.

Turns out you can use this query string to dynamically create an audio element. We can then encode our text, pop that url into an audio element and play it with a few lines of JavaScript.

It’s worth noting that this isn’t the real way to do text to speech, but its a very simple, cross browser solution that can help you out in a pinch.

Here is a quick video detailing how it works – I’d love to see what you all do with this.

ss 2014-10-31 at 9.58.57 AM

Update: November 2014 – these theme has received a major UI upgrade for new Sublime Features and editor tweaks.

I love text editor colour schemes. I’ve tried dozens of them over the years but always found myself coming back to trusty old cobalt. I liked this theme quite a but but I didn’t love it. So, over the years I’ve tweaked and tuned cobalt into a theme that I am very happy with. Its easy on the eyes, works well across many languages and takes note of those little UI elements like the caret, searches and bracket matching.

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 wrote a book on sublime text which comes along with a video series. If you like my themes and blog posts on Sublime Text, you will love this!

#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…) as well as support for SublimeLinter, git diffing and a growing number of plugins.

See below for examples. Read more at http://wesbos.com/cobalt2-theme-sublime-text-2/

Installation

With Package Control

  1. Open package control toolsCommand Palette and type Install Package
  2. Search for Cobalt2 and hit enter
  3. Lastly, open PreferencesSettings - 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

Sidebar Icons

Dirty Tab and Selected Tab

Indentation Guides — Guide, Stacked Guide and Active Guide

Use "indent_guide_options": ["draw_normal", "draw_active"] for this

GitGutter Support

Autocomplete

Command Palette

GoTo Anything

Tabs, Spaces and Comments

Folding Lines

Searches

Highlighted Line

JavaScript

CSS

PHP

Ruby

Python

Markdown

Contributing

While cobalt2 covers all languages, I write mostly JavaScript and CSS so I welcome any additions for other languages.

Thanks

Some icons from Soda Theme by Ian Hill

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

Seti UI Atom theme for the sidebar icons

Official Colours

Yellow: #ffc600
Blue: #193549
Dusty Blue 35434d
Dark Blue: #15232D

You may also like:

Cobalt2 Theme for iTerm https://github.com/wesbos/Cobalt2-iterm

Sublime Text Power User Book

square-share

After over a year of writing, I’ve launched my book and video series on Sublime Text!

The idea for this book was spurred on after a few blog posts on Sublime Text — my readers loved the tips and were always asking for more!

Wait no longer – the 25 chapter book and 20 video package is now available! This book is going to really help you become a better and more productive developer. Head on over to SublimeTextBook.com to see what it’s all about!

ss 2014-09-30 at 12.39.44 PM

A few days ago there was a buzz about a new Sublime Text package called Takana which claimed to do live editing of Sass. As someone who works on fairly large Sass projects, I was skeptical but decided to give it a short.

Wow, it is fast.

Takana is built upon the blazing fast C/C++ libsass and works in parity with Sublime Text to listen to any changes in your code (not just a save).

This is huge for those who work with Sass and Sublime Text in their workflow. Here is a video exploring how to install and get up and running with some HTML, Sass and the Bourbon library.

ss 2014-09-17 at 12.35.04 PM

We need to have a talk about phone numbers on our mobile sites. This is such a small change, but when left out, it causes a major inconvenience for your users.

I’m talking about when phone numbers on a website aren’t tapable. Often the HTML is so that mobile operating systems cannot select the phone number alone and you are forced to remember/recite or write down the actual number.

So, when you put a phone number on a website, don’t just use any old element, use a link with the tel protocol.

So, you links look like this:

<a href="tel:+14168342343">416-834-2343</a>

You can put whatever you want inside the link – just like normal links!

<a href="tel:+14168342343">Call me Maybe? <img src="hehe.gif"></a>

This is better for your users, better for business owners and better for the site’s SEO. Win-win-win.

That’s all, please help me in spreading this best practice by sharing this article.

ss 2014-08-12 at 1.22.54 PM

I posted this simple tip to twitter and it was instantly popular with developers from all around the world. It’s a small improvement that makes a big visual difference in your applications.

Since a tweet is only 140 characters, I thought I would expand on best practices a little bit in a post.

Using UTF-8

A few mentioned that you can just go ahead and use the unicode × instead of the HTML entity &times;. As long as your document is setup for UTF-8, go ahead. I personally rather use the HTML entity &times; because I can remember and type that, whereas × needs to be copy and pasted from a blog post like this.

Accessibility

If a visually impaired user uses a screenreader like JAWS to access your website, this will read multiplication to them. So, it is very important that you use proper aria attributes. Something like this will work great:

<a href="#" aria-label="Close Account Info Modal Box">&times;</a>

or better yet:

<button aria-label="Close Account Info Modal Box">&times;</button>

Other Appropriate Characters

A few more mentioned that it would be better to use &#x274C; and &#x274E; as they are real × characters rather than just the multiplication sign. While these are great, they are 1) Not supported on many systems. I’m on osx 10.9.4 and Chrome Canary and they are just boxes. ❌ ❎ 2) twitter and the iPhone swap them out with goofy looking emojis.

So unfortunately, not a good solution just yet.

ss 2014-07-21 at 2.35.55 PM

Choosing a font to use in your editor is a very important step in your workflow that many developers don’t think twice about. Small things like the difference between 0 vs o or l vs 1 and large things like the readability of the font is key to your productivity and strain on your eyes.

If you are still using the default that came with your editor, it might be worth checking out a few below and see how you like coding with each of them.

Since talking about text editor configuration is a huge interest of mine, This list has been compiled over the last year talking to developers at meetups and on twitter. So while the list isn’t totally complete, It’s a great reflection of what developers are using these days.

Consolas

M+2m

inconsolata

Menlo (sublime default)

Monaco

Ubuntu Mono

Adobe Source Code Pro

ANONYMOUS PRO

Dejavu Sans Mono

Envy Code R

Hermit

Have a favourite that isn’t listed? Comment below or tweet at me and I’ll add it to the list.

capslock

I’m a big keyboard shortcut user. After a while you may find that you are running out of easy keyboard shortcuts.

One little trick that many developers do is to remap their capslock key to something a little more useful.

In my case, I remapped my capslock key to open up the Divvy window manager.

Whatever you use it for is up to you, but don’t just let a perfectly good key sit dormant! Watch the 5 min video below or follow the instructions. Happy keyboarding!

Disable the Capslock key

First thing you’ll need to do is open System PreferencesKeyboard → Then click the Modifier Keys button in the lower right.

Set your capslock key to No Action and repeat for every keyboard you have attached in the “Select Keyboard” dropdown. If you are on a laptop with an external keyboard you’ll need to do this twice.

ss 2014-07-18 at 11.08.45 AM

Remap the Key

Now that Caps Lock is disabled, we nede to remap it to another key. When you press a key, the OS sends a KeyCode to the program letting them know what key was pressed. I made a little site to help you with this in JavaScript: http://keycode.info.

To do this, we need to use a program called Seil (previously PCKeyboardHack). Download, install and open it.

Check the first box that says “Change Caps Lock” and set the keycode to be one that you do not use and ideally a key that you do not have. A popular choice here is 80, which maps to F19. Unless you have a huge keyboard, you probably do not have an F19 key.

Now when you press your Caps Lock key, they system will interpret this as a press of the F19!

Now you get to choose which program you want to map Caps Lock to. I chose Divvy:

ss 2014-07-18 at 11.15.13 AM

It works with any program that accepts a hot key including Alfred and Slate.

ie-testing

Testing on other browsers can be a pain, especially if you are on a Mac and need to test on the many versions of Internet Explorer.

Microsoft gets this and has made the process extremely simple. I’ve seen a few guides on how to get up and running with virtual images of Windows, but none of them cover the entire process from start to finish.

So, if you are new to cross browser testing, or just have never had a chance to get your environment setup perfectly, here is a short 11 minute video on how to do just that.

Links mentioned in this video:

https://modern.ie/en-us/virtualization-tools

https://www.virtualbox.org/wiki/Downloads

emmet-value-bumping

One of my favourite things about Sublime Text is the Emmet package. Most people know it for the code completions, but it also has a handful of helpful utilities.

One of those is the ability to increment / decrement values in CSS by 0.1, 1, and 10 – just like you probably already do in dev tools.

incement:decrement

Take 1 minute to watch this video on how to use it, save yourself many minutes in the future!

That’s it! Next time Git requires you to edit a file or commit message, Sublime Text will pop open!

ss 2014-06-05 at 6.10.10 PM

Animate.css  is a fantastic little library of Animations that takes the messy keyframing out of web animations. While they can definitely be abused, short and subtle animations are a great way of adding feedback and interaction to your website or web app.

While you can get away with just using the CSS classes, you will most likely want to apply these animations on command with JavaScript. This short tutorial will show you how to get setup with animate.css, use it properly with jQuery and listen for the animationend event to take the classes off.

Hope you enjoy, please leave any questions or comments below!

ss 2014-06-01 at 3.25.53 PM

Toggling comments in Sublime Text is broken and it’s time you fix it. If you work with HTML/JavaScript you have probably run into this while using the ⌘ + / comment toggle.

broken-toggle

Sublime Text thinks it is JavaScript, so it uses a JavaScript comment! The problem is that the script tag is acutally HTML, so we need to use an HTML comment to comment it out. We want something like this:

<!-- <script src="jquery.js"></script> -->

The underlying problem is inside the HTML syntax file and it is actually an easy fix.

We need to edit the HTML.tmLanguage file that is located in preferencesbrowse packagesHTML.

Open it up and look for a line that looks like the following. It should be around line 286.

<string>(?:^\s+)?(&lt;)((?i:script))\b(?![^&gt;]*/&gt;)</string>

Replace it with this:

<string>(?:^\s+)?(&lt;)((?i:script))\b(?![^&gt;]*/&gt;)(?!.*&lt;/script&gt;)</string>

Save. You should now be able to properly toggle comment out script tags in Sublime Text!

ss 2014-06-01 at 2.36.03 PM

If you are a terminal or command line power user, you often want to open in from Sublime Text right from the cmd line. Often something like this:

subl style.css

On OSX and Linux, we have the subl command that comes with Sublime Text, to install it you can follow the instructions here.

However, on windows we need to do it a little different by creating something called a doskey.

So, if you wish to use the subl command to open files and folders from the command line in windows, you can use the following:

doskey subl="C:\Program Files\Sublime Text 2\sublime_text.exe" $*

Paste the above into your command line prompt and this will make the subl command available to you.

If you are using Sublime Text 3, use the following instead:

doskey subl="C:\Program Files\Sublime Text\sublime_text.exe" $*

wordpress-logo-notext-rgb

When it comes time to migrate wordpress, it isn’t all that easy. You have a number of things to move over including your database, your images, your themes and your plugins.

I’ve been teaching WordPress for years and by far the most common question I get is “How do I get my website online?”

Well, I’ve put everything I know into an in depth tutorial on how to migrate your site. This might take a little while the first time, but as you do it a few times, this becoming a pretty quick process.

I recommend using BlueHost for hosting WordPress as it is very affordable, the support is amazing, and they are professionals at hosting WordPress. Here is my link for a discounted rate: http://wesbos.com/bluehost – if you sign up from this link you’ll get a discounted rate and I’ll get a small affiliate fee.

Hope you enjoy!

ss 2014-05-29 at 10.04.18 AM

In JavaScript or jQuery you often need to find out which key was pressed. Unfortunately, we don’t have it as easy as comparing it against a string like “esc” or “space bar”.
Each key on the keyboard is associated with a number, or what we call a keyCode and it is accessed on the event object.

When I do keycode listening, I always scrounge the net for the appropriate keycode to check for. No more! I’ve made keycode.info which does one thing well: tells you the asociated keycode and key when you tap any key on your keyboard.

Simple and easy. Hope you find it useful. Head on over or make it better on github.

CRA_HQ-slider

I’m preparing to sell my e-book on Sublime Text very soon. Part of that is building the online checkout module.

I was hoping to just use a simple solution where I only needed to ask buyers for a credit card and their email address. Since it’s an online download / virutal product, I didn’t think I needed to collect addresses from users.

So, as I’m setting this up, I was wondering about HST. With regular goods and services, you charge Canadians the destination HST/GST rate. I bill Ontario customers 13% HST, Alberta Customers 5% GST and out-of-country customers 0%. But how does this work when you are selling something online and planning not to collect addresses? Whoever buys the e-book might be from Ontario, they might be from somewhere else in Canada or they might be from outside the country.

So, I called up the CRA and asked them what to do in this situation. Lucky for me I was able to get a tech-savvy person on the other end that was extremely competent in his job. Because the good will be usable in Canada (Canadian can read the book), I will need to follow regular HST charging practices. So, I would need to collect the home address of every single person who buys my book. Arg.

So my next question was:

Can I just ask them if they live in Canada or not?

No. Asking someone isn’t enough proof of where they live. It won’t hold up in an audit.

Well, then..

Can I use IP address detection to see if they live in Canada or not?

No, because users can spoof an IP. Still not good enough…

So what are my other options if I don’t want to collect addresses?

If I really don’t want to collect billing information from everyone who buys the book, I would have to charge Canada’s highest possible tax rate to every single customer, regardless of if they live in Canada or not. This is the 15% tax rate of Nova Scotia.

Better safe than sorry

So, it looks like I’ll have to collect the addresses and charge the customer’s provinces HST/GST rate. Out of country customers will pay nothing in taxes.

Not the solution I wanted to hear, but I’m glad to find this out now rather than down the road.

Hope this answers a few questions!

gitsublime

By default, git uses Vim as the editor for commit/rebase messages. This can be somewhat limiting if you aren’t comfortable with using Vim, especially if you need to move around lines of code.

Luckily it’s easy to switch over to using Sublime Text as the editor for your messages. When git needs you to input and save a message. It will simply open up Sublime Text and prompt you with the file that needs editing. Once you save and close the file, git will continue on with what it needs to do.

Install subl

First thing we need to do is to make Sublime accessible via the command line. Chances are you might already have this installed, but if you haven’t, you can follow the instructions here. If you are still on Sublime Text 2 – follow these instead.

Set git to use

Next, open up your Terminal or command line and paste the following:

git config --global core.editor "subl -n -w"

That’s it! Next time Git requires you to edit a file or commit message, Sublime Text will pop open!

gutter

At my jQueryTO talk I showed a new Sublime Text Package called GutterColor that allows you to view your CSS colours in your gutter.

Amazing! It works with plain CSS, SASS, Stylus or LESS. If you are any sort of front end developer, you probably want this right away! Unfortunately the install process is a little klunky as it relies on a lower-level program called ImageMagick to be installed on your computer. It’s easy to do, just requires a handful of steps to get up and running.

TL;DR: brew or port install ImageMagick and set the path of your convert script in your GutterColor prefs.

Installing ImageMagick on OSX

So, we need ImageMagic to be installed on our computer. The easiest way to do this is with a package manager for your mac. If you already have homebrew or macports installed, you can simply type one of the following into your terminal:

brew install imagemagick

or

sudo port install ImageMagick

No idea what brew or macports is? You’ll need to install that first before you can install ImageMagick. I recommend using HomeBrew. Simply open your terminal window (found in applications → Utilities → Terminal) and paste the following code in and hit enter:

ruby -e “$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)”

That will ask you for your computer’s password and then take a few minutes to install homebrew.

Once that is complete, copy and paste this into your terminal as well:

brew install imagemagick

This will also take a few minutes to install, grab a coffee!

Finally, type the following into your terminal

which convert

This will return the location of your imagemagick convert script. Remember this. Skip the windows part and jump down to Setting up Sublime Text

Installing on Windows

Head on over to the ImageMagick website and download/install the option that works with your computer. If you download the wrong version, no worries, just try another version.

When installing, take note on the install path. You will need it later.

Once you have that installed, check if it worked by opening up the command prompt (start->cmd) and type convert. You should see a few hundred lines scroll across your screen.

Now, you need to find the path that it was installed to. Open windows exporer and find where it was installed to. This is probably something like c:/Program Files/ImageMagick-6.x.x.x We want to find the convert.exe file as below:

Setting up Sublime Text

First we need to go ahead and install the GutterColor package. You can do this via Package Control (Tools → Command Palette → Type install → Search for GutterColor and hit enter).

As of right now, this package requires you to tell SublimeText where the convert script lives on your computer. Go to Sublime TextPreferencesPackage SettingsGutterColorPreferences - User and paste the following code in there. Make sure to swap out the path if your which convert command returned something different.

{
“convert_path” : “/usr/local/bin/convert”
}

In my experience, sublime required a few restarts before it started to work totally. If you see red squares in your gutter, it’s helpful to look in the Sublime Console (view → Show Console) to see if you can make sense of the errors.

ss 2013-11-15 at 1.59.48 PM

Three things I love are coding, teaching and running a business. I’m fortunate enough to do all three for a living. Doing so I get a ton of questions about my lifestyle. What is it like? How do you get work? How much do you charge? What are the challenges? Do you wear pants during the day?

Learning to code is one thing, but running a successful business as a freelancer is an entirely separate skill. So, rather than reply to email after email, I decided that we would hold an informal Q&A night at HackerYou to answer all your questions! If this if of interest, you may want to join us at HackerYou where I teach everything from HTML, CSS, Responsive Design, JavaScript and WordPress to the real skills you need to start getting paying clients and running the business.

Below is a 2 hour video recording of our Q&A night as well as a summary write. Big thanks to Heather Payne for taking the notes below and distilling my thoughts into short, concise paragraphs!

Continue reading

blogtitle-ep2

The second instalment of the CSS3 FlexBox video series. This video will show you how to use order, re-ordering and columns to achieve an extremely flexible layout without re-ordering any of your HTML.

Series Links:

Introduction & Basics — Part 1
CSS Flexbox Video Series: Flexbox order, re-ordering columns and rows — Part 2
CSS Flexbox Video Series: widths, heights and Layout — Learn CSS3 Flexbox — Part 3

blogtitle-ep1

Flexbox is a new part of CSS3 that allows us to create super flexible layouts without having to deal with floats, margin centering hacks, variable height bugs, vertical centering hacks and any number of layout challenges you face when creating a website or application.

With the rise of Responsive Design, web developers everywhere feel the pain of trying to create ultra-flexible layouts with traditional CSS tools. With flexbox, we can create a container with children that expand, contract and scale to fit in the best possible way. Columns, rows, scaling, equalized heights, re-ordering and directions have never been easier with flexbox.

Flexbox is a very new idea and it can be really hard to wrap your head around how it works, and when you should be using it. To add insult to injury, there are two implementations of flexbox in the wild and every browser vendor does it just a little differently.

This leaves us with a MESS of code that will leave even seasoned CSS developers running back to warm familiar arms of floats, clearfixes and JavaScript hacks.

.flexWrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
height: 100%;
}

This video series will simplify things, discover the ins and outs of flexbox, how it works as well as how to back-port flexbox to work with older implementations, devices and browsers.

Here is video #1 introducing the video series as well as the very basics of what flexbox is and how we can use it. I will be updating my blog over the next few weeks with the rest of the videos, each diving into a different part of flexbox.

Series Links:

Introduction & Basics — Part 1
CSS Flexbox Video Series: Flexbox order, re-ordering columns and rows — Part 2
CSS Flexbox Video Series: widths, heights and Layout — Learn CSS3 Flexbox — Part 3

ss 2013-07-08 at 5.36.16 PM

So, can I move to Sublime Text 3 yet? 

I’ve had this question asked quite a few times over the past month so I thought I would write up a quick post on my answer: probably.

Since my last “First Look” post on Sublime Text 3, 5 months have past and a lot has changed. Updates have been flying out, producing a faster and more stable Sublime Text 3.  Since then the beta has been opened to the public, so if you are still checking Sublime out, you can give ST3 a shot.

Continue reading

linebubble.mov

As I’ve been writing the Sublime Text Power User book over the last few months, I’ve had some interesting conversations around favourite features of ST. The one feature that I constantly surprise people with is called line bubbling – moving lines of code up and down a document without cutting and pasting them.

linebubble.mov

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.
ss 2013-03-11 at 11.14.30 PM
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:

ss 2013-01-29 at 1.48.10 PM

I woke up to a real treat this morning: Sublime Text 3! Sublime Text development has always moved at an incredible pace and now just a few months after 2.0 was released, 3.0 peaks around the corner. ST3 isn’t at the point where it can be your daily editor – you will still be using ST2 for some time – but its exciting to take a look at what ST3 has in store for us!

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

photo (1)

If you do any sort of web development locally you have probably run into at least one of the following problems:

  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.

Continue reading

photo

photoIf you haven’t heard, there are beautiful 27″ IPS monitors coming out of Korea that use the same panels as the Apple Thunderbolt display. Turns out that Apple buys its panels from LG and any panels that aren’t absolutely perfect get rejected. Enterprising companies in Korea are then buying these panels and putting them into their own monitor housing. You don’t get the apple looks, nor the docking ports at the back, but at $300-400, these monitors are attractive to many who just want a high quality panel without the $1000+tax price tag an Apple display. This isn’t a $300 best buy special with a 1080 resolution, its a serious monitor pushing out 2560×1440.

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.

photo_3

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.

DV019_Jpg_Regular_501043

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.

 

photo_2photo_1

Please leave any tips or questions in the commends below.

Let me know when this book launches

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!

Sublime_Text_Logo

I’m working hard on my Sublime Text Book and have received fantastic response for everything so far – very motivating. The last post was so well received that I’ve decided to post a few more of my favourite tips.

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 PreferencesSettings - 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 PreferencesKey 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 EditLineReindent

Sublime doesn’t ship a keyboard shortcut for this. No problem, let’s make our own. Pop this little snippet into the PreferencesKey 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 in my book. If you have a must-use tip or commends on any of the above, please feel free to leave a comment!

ss 2013-01-08 at 11.38.07 AM

I love tweaking Sublime Text. There are hundreds of settings you can change and I’ve blogged about a few of them before.

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 preferencesSettings - 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

ss 2013-01-08 at 11.21.30 AM

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

ss 2013-01-08 at 11.27.27 AM

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

ss 2013-01-08 at 11.28.45 AM

More…

business

2013 marks the beginning of a new fiscal year for many businesses so I thought I would share a few things I have picked up over the past few years. I’ve run my web consulting business as a proprietorship the past three years and have picked up quite a few nuggets of useful information along the way. These things seem simple and almost laughable now, but as a greenhorn I wish I had known these before I started.

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 taxed 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 accountant, 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

androidthumb

Be sure to Follow @wesbos on twitter for more like this :)

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.
Continue reading

goog

Over the last few weeks I’ve been interviewing with Google for a job doing primarily JavaScript development. I didn’t end up getting the job but I thought I would share the process of interviewing for Google as it was both very exciting and a humbling experience. I can’t reveal everything as I’m under a few NDAs. I’m not going to mention the products or teams that I was interviewing for but you may be able to guess.

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.
Continue reading

html5icon

Happy New Year! I hope everyone had an awesome holidays. To celebrate, I’m going to be giving away 5 of these kickass HTML5 shirts that the folks at Microsoft have kindly provided.

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”

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.

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!

llc

This November I have two development related talks coming up and I thought I would take a second to formally invite you!

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!

newsstand

Many people, myself included, were annoyed that you aren’t able to put the new Newsstand Icon in a folder. Well a quick little hack I found today lets you do just that! Turns out you can trick iOS5 by creating a folder with other icons and then quickly drag it into that folder.

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 :)

Screen Shot 2011-10-03 at 5.57.36 PM

To continue on with my string of blog posts on Sublime Text, I’m going to show you a short but handy feature that was just pushed to the stable build. Code Folding!

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.
Continue reading

build

A really great feature of Sublime Text 2 is the ability to create your own build scripts. A build script is helpful when you are writing in a language that needs to be compiled or executed from terminal / command line. I personally use build scripts to compile the current file into CoffeeScript as well as run the current file in Node JS.

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

facedetection

This morning I saw this link on youtube which was a little mashup of some HTML5 technologies. I thought it would be funny if I could do the same, but with goofy pair of glasses. I’ve also been itching to put the CCV JavaScript Face Detection library to use. This library shows a few examples on static images, but after a quick look at the code, it shows that the underlying element to the script is a canvas element. So instead of running it on a single image, I am running it on a feed of frames coming from an HTML5 video element.

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.  Continue reading

sublIcon

I’m a long time Coda user. A few months ago I, like everyone else, decided to switch over to vim. I really liked Vim but just couldn’t get the hang of it for whatever reason. After shamefully crawling back to Coda, I found myself realizing that Coda fell short in a few areas. It was then I decided to give Sublime Text 2 a shot as it had been touted as the sucessor to Text Mate. Its taken me a few weeks to get used to, but I can happily say I’m a Sublime Text 2 user now. Here are a few tips that make switching over easier.

Continue reading

wordpress

We have all been there. You finish up the most beautiful design with perfectly picked colours, font sizes and page style and pass it off to the client. A few days later you check back at the site and they have happily splattered underlined neon green h1 tags with inline styles. Why why why? Because the WordPress WYSIWYG editor is hard to use and by default it temps you with a basic colour pallet and basic h1-h6 tags.
Continue reading

sockets

Web sockets and Canvas are two really cool features that are currently being implemented into browsers. This tutorial will give you a short rundown of how they both work as well as create a realtime drawing canvas that is powered by Node.js and web sockets. For simplicity’s sake, I’ll be writing all the code in coffeescript. If you prefer regular ‘ol JavaScript, take a look at the corresponding .js files. I’ve also left out the CSS for the same reason.

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.

cofeegrowl

Two things I’ve been working with lately have been Node.js and CoffeeScript. If you haven’t heard of either, Node.js is server side javascript and CoffeeScript is a ruby/python like langage that compiles down to regular javascript.

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.

Screen shot 2011-05-17 at 12.56.54 PM

Two of my favorite jQuery plugins are Mike Alsup’s Cycle and Ben Alman’s Hashchange. Cycle allows you to create really flexible sliders /slideshows and Hashchange allows you to create an event that triggers on hash change. When you’re using jQuery cycle for a large slideshow, its a good idea to let users link within that slideshow to a specific slide so that they can share and bookmark them.

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 Continue reading

Screen shot 2011-05-11 at 3.08.07 PM

Just about an hour ago Rovio and Chrome released Angry Birds for Chrome. As a JavaScript / HTML5 guy, I quickly jumped into the code to see how things worked.

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.

Continue reading

mamp-logo

I’m a backup fanatic and not having a few backups of files makes me uneasy. Today I had a little scare where I couldn’t find a few of my databases when viewing PHPmyAdmin through MAMP. Turns out sometimes MAMP likes to sometimes grab the databases from the MAMP Pro location and sometimes the MAMP location.

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.

Continue reading

paywall

If you haven’t heard, the New York Times has implemented a paywall where you can only view 20 articles a month. After that they throw an overlay on top of the content so you can’t view it.

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
Continue reading

Screen shot 2011-03-23 at 2.56.08 AM

Yesterday Firefox 4.0 was released and web developers everywhere celebrated a really great browser.  The browser comes packed with a super fast JavaScript engine called JägerMonkey. Now don’t get too excited just yet! We still need to keep that old version of Firefox around for testing; we can’t assume everyone has upgraded to Firefox 4. So, to run both Firefox 3.6 and Firefox 4.0 on the same machine, just follow these simple steps: Continue reading

Screen shot 2011-03-21 at 2.43.09 PM

Every now and then I like to play with the API of a social networking site. Burstn is an photo sharing website that allows users to quick snap photos and upload them to their website. Lucky for me, their API is fairly wide open, allows to easy calling, and returns a super nice JSON response. My idea is to ping the Burstn API for a timeline of public photos, parse the JSON response, and plot them on a Google Map based on their Lat and Long positions.  Sound fun? Lets go! Continue reading

Screen shot 2011-03-16 at 11.44.30 PM

Was helping someone out in the jQuery IRC channel today and they were having some trouble with a JSON api that they were using. To simply put it they wanted to:

  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: Continue reading

wb

This is a phrase I will no longer have to joke about when telling someone about my website. I’ve finally taken the time to create myself a brand spakin’ new website. Its been almost 2.5 years since I launched the last one and a lot has changed. I’m very proud to launch this site as I think it reflects who I am a lot better than the old one. Continue reading

pagecache

This is a little code snippet that I use in almost every project that isn’t based on a popular CMS. Since its fairly expensive to hit the database on every page load, its a smart idea to cache the plain HTML markup of your page and serve that up. You can set how often the page cache is flushed out depending on how often you update your site’s content. Continue reading