Wes Bos

Designer, Developer & Entrepreneur making the web an awesome place.

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.

Become a Sublime Text Power User

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

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

ss 2014-07-07 at 12.19.25 PM

osx-dialog-boxes-gif

Quick 1 minute tip for enabling keyboard tabbing on OSX. Never use that mouse to click “Dont’ Save” again.

To enable, Open System Preferences >> Keyboard >> Shortcuts tab and then click the All Controls radio button at the bottom.

ss 2014-07-07 at 12.15.32 PM

Become a Sublime Text Power User

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

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!

Become a Sublime Text Power User

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

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!

Become a Sublime Text Power User

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

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!

Become a Sublime Text Power User

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

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.

Become a Sublime Text Power User

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

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