CoffeeScripters, Have You Tried ES6 Yet?

ES6 is providing a lot of features that I’ve heard CoffeeScripters bragging about for the last few years, but is it enough for people to start considering vanilla JavaScript to be a viable alternative? Let’s take a look at some of the big selling points of CoffeeScript and see how they compare to some of the new hotness in ES6.


The first and most obvious of these features is classes. ES6 supports them natively and we even get inheritance and super!

Here is some CoffeeScript from the class examples on

class Animal
  constructor: (@name) ->

  move: (meters) ->
    alert @name + " moved #{meters}m."

class Snake extends Animal
  move: ->
    alert "Slithering..."
    super 5

class Horse extends Animal
  move: ->
    alert "Galloping..."
    super 45

sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"


Alright, now try to look past the curly braces and semicolons (which are optional in most cases) and make note of the similarities with what’s available in ES6 now. This functions the exact same as the CoffeeScript example, but is pure JavaScript:

class Animal {
  constructor(name) { = name;

  move(meters) {
    alert(`${} moved ${meters}m.`);

class Snake extends Animal {
  move() {

class Horse extends Animal {
  move() {

var sam = new Snake("Sammy the Python");
var tom = new Horse("Tommy the Palomino");


This example shows off classes, inheritance, the use of super and string interpolation. These are some of the major features of CoffeeScript that are now available natively in pure JavaScript.

Arrow Functions

There is a new arrow function syntax in ES6 which lexically binds this, providing a convenient syntax for declaring functions that capture the this value of the enclosing context. This is the equivalent of the “fat arrow” (=>) in CoffeeScript.

Here is another example from

Account = (customer, cart) ->
  @customer = customer
  @cart = cart

  $('.shopping_cart').bind 'click', (event) =>
    @customer.purchase @cart

Here is what this translates to in JavaScript:

var Account = function(customer, cart) {
  this.customer = customer;
  this.cart = cart;

  $('.shopping_cart').bind('click', (event) => {
    this.customer.purchase this.cart;

The differences in this example are a little more glaring, mostly because ES6 doesn’t support the “skinny arrow” syntax (->). However, I don’t see this as a big downside. Most of the time I’m wanting to pass this rather than override it and if I really don’t want a lexically bound this in a function I’d want to think about why that’s the case. It could be considered a code smell for poorly structured code.

Splats and Spreads

CoffeeScript has the splat operator which can be used to make things like handling a variable number of arguments in a function a lot easier.

gold = silver = rest = "unknown"

awardMedals = (first, second, others...) ->
  gold   = first
  silver = second
  rest   = others

contenders = [
  "Michael Phelps"
  "Liu Xiang"
  "Yao Ming"
  "Allyson Felix"
  "Shawn Johnson"
  "Roman Sebrle"
  "Guo Jingjing"
  "Tyson Gay"
  "Asafa Powell"
  "Usain Bolt"

awardMedals contenders...

alert "Gold: " + gold
alert "Silver: " + silver
alert "The Field: " + rest

ES6 has the spread operator which basically does the same thing. The syntax is almost the same, but the ellipses goes at the beginning of the argument name:

var gold = silver = rest = "unknown";

var awardMedals = function(first, second, ...others) {
  gold   = first;
  silver = second;
  rest   = others;

var contenders = [
  "Michael Phelps",
  "Liu Xiang",
  "Yao Ming",
  "Allyson Felix",
  "Shawn Johnson",
  "Roman Sebrle",
  "Guo Jingjing",
  "Tyson Gay",
  "Asafa Powell",
  "Usain Bolt"


alert(`Gold: ${gold}`);
alert(`Silver: ${silver}`);
alert(`The Field: ${rest}`);

Destructured Assignment

CofeeScript says outright on their homepage that they implemented this feature straight from the spec so this works exactly how you would expect it to.

Here is the CoffeeScript:

# variable swapping
theBait   = 1000
theSwitch = 0

[theBait, theSwitch] = [theSwitch, theBait]

# handling multiple return values
weatherReport = (location) ->
  # Make an Ajax request to fetch the weather...
  [location, 72, "Mostly Sunny"]

[city, temp, forecast] = weatherReport "Berkeley, CA"

And the JavaScript:

// variable swapping
var theBait   = 1000;
var theSwitch = 0;

[theBait, theSwitch] = [theSwitch, theBait];

// handling multiple return values
var weatherReport = function(location) {
  // Make an Ajax request to fetch the weather...
  [location, 72, "Mostly Sunny"];

[city, temp, forecast] = weatherReport "Berkeley, CA";

String Interpolation

We already saw a taste of this in the classes example, but here is a full comparison:

Here is the CoffeeScript:

author = "Wittgenstein"
quote  = "A picture is a fact. -- #{ author }"

sentence = "#{ 22 / 7 } is a decent approximation of π"

And the JavaScript:

var author = `Wittgenstein`;
var quote  = `A picture is a fact. -- ${ author }`;

var sentence = `${ 22 / 7 } is a decent approximation of π`;

Default Parameters

In ES6 you no longer need to use the a = a || 'b' hack for assigning default values to parameters. It works the exact same way CoffeeScript’s default parameter value assignment works:

fill = (container, liquid = "coffee") ->
  "Filling the #{container} with #{liquid}..."

Here it is in JavaScript:

var fill = function(container, liquid = "coffee") {
  return "Filling the #{container} with #{liquid}...";

The Bottom Line

CoffeeScript still does provide a lot of value for people who aren’t fans of certain JavaScript syntax. However, the value proposition for using something like CoffeeScript is diminishing rapidly as we get access to new ES6 features. Things like Traceur and 6to5 enable us to start using these features today, and for someone like me who is mainly writing JavaScript right now, the cons outweigh the pros for using a tool like CoffeeScript.

My goal is to write code that is maintainable and takes advantage of the latest features of the language. Using the new syntax now along with a transpiler means that I can remove the transpilation build step in my projects one day when browsers have implemented the features I’m utilizing without changing any of my source.

“But CoffeeScript IS JavaScript!”

I’ve heard from a lot of people that at some point they do plan on abandoning CoffeeScript. Their plan for transitioning is usually something like this:

I’ll just compile my CoffeeScript and swap out the .coffee
for my .js files.

Based on the compilation results I’ve seen, I don’t think CoffeeScript produces code anyone would want to maintain as vanilla JavaScript, especially if they have spent the last few years writing CoffeeScript. If you have given any thought to abandoning CoffeeScript at some point, I strongly encourage you to give JavaScript with transpilation for ES6 features a shot.

Pimp Your Chrome Dev Tools with Custom Stylesheets

Did you know that Chrome gives you a stylesheet you can use to customize the look of your dev tools? I didn’t either until I looked over at my buddy Zach‘s screen and saw him rockin’ a dark color scheme in his dev tools when we were working at a coffee shop a couple weeks ago.

He informed me that you can put custom styles in ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css and these will override the default dev tool styles. Obviously, I spent the next couple hours looking for the perfect color scheme and I finally settled on this Readable Theme. To install it you just drop the theme’s Custom.css over Chrome’s. The theme even has some SCSS you can pull down and tweak to configure the scheme to your liking if you don’t like some of the defaults.

Before and After

Chrome Dev Tools before customization

Chrome Dev Tools after customization

You might think this is a trivial upgrade, but I’ve found that this has actually saved me a fair amount of time. The tweaks to the selected attributes and active selector highlights, updated font styles and guides around the contents of the selected element all make it easier to find what you’re looking and have definitely made me more efficient in the dev tools.

It only takes a couple minutes to install a theme and there are quite a few to pick from, so what are you waiting for?

Update: There are now a number of themes available as Chrome extensions. This is the way I would recommend installing them so that you don’t need to worry about updating the styles all the time.

Lessons Learned from Selling My First Business

We recently sold a coffee shop and I think we did almost everything wrong. Here are a few lessons I learned selling my first business. Hopefully this will help others avoid the mistakes we made.

Don’t show your hand

We found out a few months ago that my wife is pregnant. She has been putting in 60+ hour weeks and we knew this wasn’t a sustainable thing so we wanted the deal to move quickly. We advertised this to our buyers openly saying that we would take less money in exchange for a shorter timeline on the deal. This seemed harmless at the time because it was the truth, but it came back to bite us.

Letting our potential buyers know that we were in a bind immediately gave them all the control in the negotiations. They knew our options were limited and that it wouldn’t take much for their offer to be more attractive to us than having to liquidate everything and find someone else to take over our lease.

Don’t count on anything until it’s in writing

We wanted to do everything by the book but we ended up getting verbal offers and making agreements on a handshake with the promise that the paperwork would come later. We banked on these agreements and started planning our lives around transition dates that came and went without any word from our buyer. Even if you ask for things in writing, people are going to try to negotiate with you before making a formal offer. Don’t count on anything from a verbal agreement because you don’t have anything until it’s in writing.

This was one of the most frustrating things I’ve ever had to deal with. We kept asking for things in writing but we didn’t get them. At first we trusted the person we were negotiating with and he would say “my laywer is putting something together” but it never came. We had agreed on a price, transition date, etc., but because the offer wasn’t in writing there was nothing we could do when our buyer didn’t hold up his end of our agreement.

Put everything in writing

My wife originally said that she would be happy to help with the transition. Unfortunately, nothing was laid out in the contract about what that transition period would look like. We thought it meant that they would come in a couple weeks early to shadow and learn our processes, but they took it to mean that my wife or someone from our staff would be sticking around after the new owner took over.

Anything that could possibly be negotiable needs to be written down. No matter how small a detail, if you think of it, put it in writing. It really isn’t that hard and you’ll thank yourself later when you can say “what does the contract say about that?”

Always be looking for a better offer

When we made a verbal agreement to accept an offer we put our marketing efforts on hold. We were stuck scrambling when the agreement wasn’t upheld by the buyer which put us in an even worse spot than where we started for negotiating a new deal with someone else.

Had we kept marketing the sale of the business we would have put some pressure on the person we were working with to move things forward on his end and we may have even found a better offer. There is no way it could have hurt us and it came back to bite us in the end because we ended up working with our original buyer, but completely on his terms.

Don’t be desperate

When we met with potential buyers I’m positive that we came off desperate and that it took power out of our hands. We acted like someone was doing us a favor by buying our business, but that’s certainly not the case. I guarantee that having this mentality during a negotiation will leave you frustrated and disappointed with the outcome.

Save yourself some energy and frustration. Don’t be desperate to sell your business and don’t be afraid to ask for what you want. You’re not going to scare anyone off by asking for more favorable terms.

Develop Faster with iTerm Profiles and Window Arrangements

My friend, Jon Kinney, was showing me how he’s able to jump into dev mode with his server, Rails console, database console, test suite and Vim all running at once using tmux and the tmuxinator gem. I was obviously jelly and I wanted to find a way to do something similar, but since I don’t really use terminal Vim for regular development I thought tmux was overkill for just starting up my server, consoles and tests so I decided to find a way to be more productive in iTerm 2.

Using split panes, profiles and window arrangements we can create a workspace that has everything we need to be productive and we can launch it with a single click. Here’s a preview of the kind of thing you can do:

A preview of the terminal setup

Above we have a regular terminal session, Rails console, database console and server running in 4 different panes.


In order to open all the panes and run the commands to start our server, console, etc., we need to create profiles for each type of pane. You can create a profile by going to the Profiles tab in the settings pane. Give it a name and set the command you want to execute when the pane opens in the Send text at start input. You might also need to select the Reuse previous session’s directory as the working directory.

Here are the settings for a profile that I use to start a Rails server:

Preview of iTerm's Profiles tab

Window Arrangements

After you have your profiles setup, you can setup your workspace the way you want and then save the arrangement to use it again later. To create a new pane, use Command + Option + Shift + H for a horizontal split, or Command + Option + Shift + V for a vertical split. When creating a split, it will ask what profile you want to use.

Once you have your panes setup the way you like, just hit Command + Shift + S to save the window arrangement. Unfortunately, you can’t set a hotkey for different window arrangements, but you can launch your default arrangement with Command + Shift + R.

Other Tips and Tricks

  • You can save tabs in your arrangements as well. One cool thing I’ve used this for is starting up a bunch of web services I’m working on so all the APIs are available locally. This would be a huge pain without a saved window arrangement.
  • You can dim, adjust the dimness and animate the dimming for inactive panes under the Apperance tab in the settings.
  • Command + Option + [Arrow Key]: Switches to the next pane in that direction.
  • Command + Shift + Enter: Maximizes the active pane. I find this to be really handy when digging through server logs and stuff.
  • Command + [ or ]: Select the previous ([) or next (]) pane.
  • You can customize the hotkeys by going to the Keys tab of the settings.

Getting Started with Laravel 4

With the release of Laravel 4 just around the corner a lot of people are trying to decide whether to start a new project with a stable 3.2 build or wait for the new version. I found myself in that position earlier this week so I decided to pull down Laravel 4 and work off that since I figured the transition would be smoother once a stable version 4 is released.

There isn’t really any documentation on how to get started with Laravel 4, and if you aren’t familiar with Composer, you might not know where to begin. That’s why I’m writing this. If you want to get started with Laravel 4 today, here’s how.

Laravel, Illumniate and Composer Packages

Laravel 4 breaks each core component of the framework into a Composer package. These packages are currently grouped together under the “Illuminate” organization on GitHub. All of these components are used by the Laravel framework, but now that they are stored as separate packages, they can easily be pulled into other projects with Composer.

Note: Familiarity with Composer isn’t necessary for this tutorial, but if you want to learn more, check out Easy Package Management With Composer by Phil Sturgeon.

Since Laravel 4 is dependent on Composer, you already have access to any package from the Packagist directory anytime you start a new project. That means you have thousands of packages at your fingertips and it eliminates the need for proprietary package management systems like Laravel Bundles and CodeIgniter Sparks.

Getting Started

There’s not much to this, it’s just 3 simple steps. I work on a Mac, but I’d imagine these instructions are pretty similar for other operating systems.

1. Pull Down the Application Template

First thing you need to do is pull down the Laravel application template. This is the starting point for Laravel 4 projects. The template is pretty empty, and if you’re coming from Laravel 3, you’ll immediately notice the absence of the laravel, bundles and storage directories.

2. Install Composer

Run the following script to install Composer into the root of your project:

curl -s | php

You should see a success message if everything runs correctly.


I received the following error when I tried to install Composer the first time:

Some settings on your machine make Composer unable to work properly.
Make sure that you fix the issues listed below and run this script again:

The detect_unicode setting must be disabled.
Add the following to the end of your `php.ini`:
    detect_unicode = Off

If you encounter this error, just do as it says and add detect_unicode = Off to the end of your php.ini file at /private/etc/php.ini.

3. Install the Laravel Components

After composer is installed, you can use it to install all of the other Laravel components.

php composer.phar install

Running this command will install the packages that are specified in the composer.json file. Here’s what that looks like:

    "require": {
        "illuminate/foundation": ">=1.0.0"
    "autoload": {
        "classmap": [
    "minimum-stability": "dev"

This doesn’t seem like much considering how many packages get installed when you run php composer.phar install, but that’s because each package can have its own dependencies. If we take a look at Illuminate’s foundation package, we can see that it has a whole bunch of its own dependencies that get installed too.

    "name": "illuminate/foundation",
    "description": "A web application foundation.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "authors": [
            "name": "Taylor Otwell",
            "email": ""
    "require": {
        "php": ">=5.3.0",
        "illuminate/auth": ">=1.0.0",
        "illuminate/cache": ">=1.0.0",
        "illuminate/config": ">=1.0.0",
        "illuminate/container": ">=1.0.0",
        "illuminate/cookie": ">=1.0.0",
        "illuminate/database": ">=1.0.0",
        "illuminate/encryption": ">=1.0.0",
        "illuminate/events": ">=1.0.0",
        "illuminate/exception": ">=1.0.0",
        "illuminate/filesystem": ">=1.0.0",
        "illuminate/http": ">=1.0.0",
        "illuminate/pagination": ">=1.0.0",
        "illuminate/profiler": ">=1.0.0",
        "illuminate/redis": ">=1.0.0",
        "illuminate/routing": ">=1.0.0",
        "illuminate/session": ">=1.0.0",
        "illuminate/support": ">=1.0.0",
        "illuminate/translation": ">=1.0.0",
        "illuminate/validation": ">=1.0.0",
        "illuminate/view": ">=1.0.0",
        "symfony/browser-kit": "2.1.0",
        "symfony/css-selector": "2.1.0",
        "symfony/dom-crawler": "2.1.0",
        "symfony/http-kernel": "2.1.0",
        "symfony/translation": "2.1.0",
        "underscore/Underscore.php": "1.3.1"
    "require-dev": {
        "mockery/mockery": "0.7.*"
    "autoload": {
        "psr-0": {
            "IlluminateFoundation": "src/"
        "files": [
    "minimum-stability": "dev"

Start Your App

That’s everything! You can go visit your app just like you normally would and developing for Laravel is pretty much the same as it was before. Setup some controllers or start defining some routes!

Let me know if you have any troubles with this and I’ll be sure to revise this article or provide more troubleshooting tips!

The Easy Way to Get Started with PostgreSQL on a Mac: and Induction

Here’s how to get started with PostgreSQL in minutes without having to touch the command line. You’ll need two applications to run and manage PostgreSQL, and Induction. is the equivalent of the MySQL server you get with MAMP and Induction is the equivalent to something like Sequel Pro if you are coming from MySQL.

Up and Running

Once you have those two applications downloaded and installed, here’s what you need to do to get your PostgreSQL server running and be able to use Induction as a GUI to manage your databases.

1. Open

This will start the server and if it’s the first time you’ve run the app, it will automatically create a PostgreSQL user and database named after the user you are logged in as on your system.

2. Configure Induction

Open Induction and you’ll see the login screen. Enter the following information:

  • Adapter: Select postgres
  • Hostname: Enter (localhost)
  • Username: You can use the username created for you (the same name as the user for your system)
  • Password: You should be able to leave this blank if you are using the user that created for you
  • Database: As of this writing, it says this is optional, which it should be, but I couldn’t connect without specifying the name of a database. You can use the one created for you (should be the same as the username) or create one by hand with as explained later in this post.

the Induction login screen

That’s it, you should be up and running (told you it was the easy way!), but read on for a couple other tips on working with and Induction.

Note: There are other tools that are more full-featured than Induction, like Navicat, but Induction is the only open source GUI I’ve seen for managing PostgreSQL and it is being developed by Matt Thompson, the creator of, so you can be confident they are going to play nice together.

Setup the Command Line Tools

Lion and Mountain Lion come with an older version of PostgreSQL which includes a psql command line utility for managing your PostgreSQL on your machine. However, comes with its own psql utility as well as a slew of other useful binaries that I’m sure you’ll want to have access to at some point if you continue working with PostgreSQL.

To install these tools, just add’s bin directory to your PATH. You can do this by adding the following line to your shell’s configuration (.bashrc or .zshrc).


Then open a fresh terminal session and you should be able to run all of the command line tools directly. This will also allow you to run psql on its own, without a host, to login to the console. Try it out and make sure it’s working.

Creating Databases

In the current version of Induction (0.1.0) you can’t create databases from the app (I’m assuming you will be able to at some point) so you still need to do that from the command line using psql. Just connect by running psql, then create a database with the CREATE DATABASE command.

CREATE DATABASE database_name;

You can remove a database by using the DROP DATABASE command:

DROP DATABASE database_name;

If you’re using Rails, you can also use rake db:create to create your database without using psql. Just make sure to configure your database.yml first.

The Future and Induction are relatively new and look like they are being very actively developed. Keep an eye out for new releases and additional functionality in the near future, especially with Induction since it is still in alpha.

These tools should make getting started with PostgreSQL on a Mac a lot easier and enable a lot of people who rely on GUIs to administer their databases to make the transition from MySQL to PostgreSQL. If you’re trying to decide if PostgreSQL is right for you, just Google around, there are a lot of resources highlighting the differences.

Please let me know if you have questions, comments or corrections on any of this info. I’ll make sure to update this post if these steps change as the apps evolve.

Extending ActiveModel via ActiveSupport::Concern

In a project I’ve been working on we have some functionality that is shared across multiple models – assigning a default record on a has_many association. Obviously we didn’t want to duplicate the methods in each model, so we explored our options for sharing the logic. We figure we could:

  1. Setup a HasDefault base class that we could extend our models from (i.e. class CreditCard < HasDefault)
  2. Extend the functionality of ActiveRecord::Base

Inspired by how has_secure_password is setup, we decided to extend the functionality of ActiveRecord::Base so we could just call a method inside of a model we wanted to expose the default record assignment methods and callbacks to. Here’s what we ended up with:

File: lib/active_model_extensions.rb

module HasDefault
  extend ActiveSupport::Concern

  module ClassMethods
    def has_default
      attr_accessible :is_default

      before_create  :set_default_if_none_exists, unless: :is_default?
      before_save    :set_default,                if: :is_default?
      before_destroy :set_fallback_default,       if: :is_default?

  def set_default
    current_default = self.class.first conditions: { user_id: self.user_id, is_default: true }
    current_default.update_column(:is_default, false) if current_default
    self.update_column(:is_default, true) unless self.new_record?

  def set_fallback_default
    if self.is_default?
      fallback = self.class.first conditions: { user_id: self.user_id, is_default: false }
      fallback.update_column(:is_default, true) if fallback

  def set_default_if_none_exists
    current_default = self.class.first conditions: { user_id: self.user_id, is_default: true }
    self.is_default = true unless current_default

class ActiveRecord::Base
  include HasDefault

This allows us to call has_default in any model to expose the three callback methods for assigning the default record. Now all we need to do to in our model is

class CreditCard < ActiveRecord::Base

and the default record assignment will be taken care of automatically. This assumes there is an is_default column in the table, but has_secure_password makes similar assumptions so that doesn’t really bother me.

The Breakdown

The big thing here is to make sure we are using ActiveSupport::Concern to extend the core Rails classes. This makes our lives a litter easier by helping us setup our class and instance methods. It takes everything inside the ClassMethods module and makes them available as, you guessed it, class methods. All the other methods in the HasDefault module get turned into instance methods.

From the code above, you can see we setup the has_default class methods

module ClassMethods
  def has_default
    attr_accessible :is_default

    before_create  :set_default_if_none_exists, unless: :is_default?
    before_save    :set_default,                if: :is_default?
    before_destroy :set_fallback_default,       if: :is_default?

and then setup the methods used in the callbacks in the HasDefault module.

def set_default
  current_default = self.class.first conditions: { user_id: self.user_id, is_default: true }
  current_default.update_column(:is_default, false) if current_default
  self.update_column(:is_default, true) unless self.new_record?

def set_fallback_default
  if self.is_default?
    fallback = self.class.first conditions: { user_id: self.user_id, is_default: false }
    fallback.update_column(:is_default, true) if fallback

def set_default_if_none_exists
  current_default = self.class.first conditions: { user_id: self.user_id, is_default: true }
  self.is_default = true unless current_default

Note: ActiveSupport::Concern used to support a module called InstanceMethods, but recently changed this to make anything outside of the ClassMethods module an instance method.

The last part of this example includes the HasDefault module in ActiveRecord::Base, which actually adds the module and exposes the has_default method to all classes extending ActiveRecord::Base, in other words, all of your models.

class ActiveRecord::Base
  include HasDefault

Why ActiveSupport?

It’s true, there are other ways to extend classes in Ruby, but using ActiveSupport::Concern makes things a little easier and definitely cleaner. It can also handle dependency resolution, which we didn’t need here, but is quite useful.

Further Reading