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

Before:
Chrome Dev Tools before customization

After:
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.

Profiles

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 http://getcomposer.org/installer | php

You should see a success message if everything runs correctly.

Troubleshooting

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": [
            "app/controllers",
            "app/domain",
            "app/tests/TestCase.php"
        ]
    },
    "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": "taylorotwell@gmail.com"
        }
    ],
    "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": [
            "src/helpers.php"
        ]
    },
    "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: Postgres.app 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, Postgres.app and Induction. Postgres.app 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 Postgres.app

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 127.0.0.1 (localhost)
  • Username: You can use the username Postgres.app 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 Postgres.app 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 Postgres.app 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 Postgres.app 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 Postgres.app, 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, Postgres.app 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 Postgres.app’s bin directory to your PATH. You can do this by adding the following line to your shell’s configuration (.bashrc or .zshrc).

PATH="/Applications/Postgres.app/Contents/MacOS/bin:$PATH"

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

Postgres.app 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?
    end
  end

  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?
  end

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

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

class ActiveRecord::Base
  include HasDefault
end

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
    has_default
end

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?
  end
end

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?
end

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

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
end

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
end

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

Code Highlighting and Marked Preview Styles in nvALT

Everyone loves nvALT, but the markdown preview you get out of the box isn’t anything special. Although there are some instructions on customizing the markdown preview in nvALT, he doesn’t go into specifics about where to find new styles or exactly how to import them.

Personally, I like the previews that I get in Marked, another one of Brett Terpstra‘s creations. Knowing that the markdown preview styles are stored in a plain CSS file in nvALT, I figured it was the same for Marked.

The first place I looked was in ~/Library/Application Support/Marked, but I only found a Custom CSS folder that stored all of the custom stylesheets I had added. This makes sense since these are user settings. The core styles that aren’t editable by the user came with the application, which is why I checked the package contents of the application next, this is where I found the CSS files.

Note: You can view the package contents by going to the Marked.app file, right-clicking and selecting “Show Package Contents”.

I opened up github.css, copied the entire stylesheet and brought it over to my ~/Library/Application Support/Notational Velocity/custom.css file for nvALT. I restarted the program selected a different note (thanks Brett) and the new styles were live!

Further Customizations

If you look in the ~/Library/Application Support/Notational Velocity directory, you’ll notice that the template for the markdown preview is actually just an HTML file. As you can see, jQuery is being loaded from the Google CDN, so you should be able to import any external JS/CSS you’d like.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script></code>

I haven’t played around with this much yet, but I did setup highlight.js to provide code highlighting. All I had to do was include a JS and CSS file from the download instructions and then call the init method. You can copy and paste the following code right above the `