Wes Bos

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

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

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:

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

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!

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

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.

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!

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

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!

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…

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!

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!

ss 2013-01-04 at 12.39.20 PM

I love huge 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 langages 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’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.

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!

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 PreferencesBrowse Packages

1. Drop in the Theme - Cobalt2 directory here (Right into /Preferences/)
1. 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

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.