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.

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.

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.

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 `

Work Faster with Basic Shell Commands

Writing your own shell scripts may seem a little intimidating at first, but it’s actually quite simple and can drastically improve your workflow. Any sequence of commands you would run from the command line you can put into a shell script.

For example, when I want to start coding on a project, I usually end up opening my editor from the terminal and a new tab in my browser to view the project. This doesn’t take very long, but since it’s something I do multiple times every day, I figured I should try to automate it.

Let’s Scriptify It

I wanted to be able to pull up my editor and open the new browser tab right from the terminal so I came up with the following script to do just that:

# !/bin/sh

open -g 'http://localhost/chris-schmitz.com' 
subl .

Breaking this down, here’s what each line does:

  1. # !/bin/sh – Invokes the shell, a standard starting line for a shell script
  2. open -g 'http://localhost/chris-schmitz.com' – Opens the URL for the project in a new tab of my default browser
  3. subl . – Opens the current directory in Sublime Text 2 (using TextMate the command would be mate .)

Now, assuming I saved the file as open.sh, I can run sh open.sh from the command line to open my editor and the browser tab. This was a great next step, but I thought I could do a little better.

A Shortcut for the Shortcut

I love TextExpander and any time I have text that I need to type on a regular basis I make a snippet for it. I figured this shell script is a perfect candidate for that.

I didn’t want to have to create a new file and then use a snippet to insert those three lines, so I use the following snippet to create the file with those three lines all in one step from the terminal.

echo "# !/bin/shnnopen -g 'http://localhost/%fill:site_name%'nsubl ." >; open.sh

It’s just a one-liner with some escaped characters and line breaks that get inserted into the open.sh file. I set the shortcut for the snippet to qlp, short for Quick Launch Project.

Now I can create these shell scripts with ease, but I still didn’t like having to type sh open.sh all the time. I decided I wanted to make it shorter, so I aliased that to dev with the following command:

alias dev='sh open.sh'

Note: I’m using ZSH in my terminal, but I believe this command is the same for Bash.

My New Workflow

Now when I create a new project, all I have to do to get setup is:

  1. cd to the directory
  2. Expand my qlp snippet
  3. Run the dev command, and I’m ready to go

The main takeaway from this shouldn’t be the actual code, but the idea of how easy it is to automate repetitive tasks. A few basic shell commands can go a long way.

If you want to learn more about shell scripting, I highly recommend the Bash Guide for Beginners.

My Path To Vim Enlightenment

It’s been about 2 months now since I began using Vim as my full-time editor and I can easily say that my productivity has increased as a result. I’m still only scratching the surface of what the editor can do, but I’m confident that this is going to be one of the single best moves I make in my programming career. Not only will it save me time and money  by not trying out every new editor that comes out on the market, but it is a tool that I can use for the rest of my programming career and on any machine I will ever have to code on. I highly recommend integrating Vim into your workflow and hopefully the following resources will make it a lot easier to do so.

I wanted to write and share some of my experiences with the editor, but there are already so many good articles our there I figured I would just share some of the more helpful ones I’ve come across rather than trying to re-invent the wheel. I tried to list the articles in the order I think it would be most beneficial to read them in, but don’t be afraid to jump around or cherry pick through them. Like I said, I’m only scratching the surface with what the editor is capable of so I will make sure to curate this list over time.

Everyone Who Tried to Convince Me to use Vim was Wrong

An awesome article by Yehuda Katz which talks about his transition to Vim. He lets you know that it’s OK to hangout in insert mode most of the time and stick to your usual editing habits when you’re starting out. This way you can at least continue being productive while trying out the editor so you won’t have to switch back to your old editor if you are feeling pressure of a looming deadline.

A Starting Guide to VIM from Textmate

Even if you’re not coming from TextMate, this article has some practical advice for getting started with Vim. This article is what got me to fire up vimtutor for the first time which was a great way to start editing some text and getting a glimpse of the power of Vim.

Learn Vim Progressively

Probably my favorite Vim article I’ve ever read, or at least the one I got the most out of. It has some great advice on learning Vim and covers some incredibly helpful commands. It was also the first time I saw the power of out Vim Macros.

The Vim Cheat Sheet for Programmers

There are a lot of Vim cheat sheets out there, but this is the one that I keep on-hand and have found to be the most complete and easy to find what I’m looking for.

Anything Else?

Well that’s a starting point, but definitely not a complete list of the articles that have helped me in learning to use Vim. I’m sure this will continue to grow over time.

Getting Started with Vim

I’m giving Vim a try for the next 30 days (well, 27 days now) as my only editor. I just switched over to a Macbook Air as my main development machine so I am not even going to install TextMate or any other editors besides MacVim. I’ve made a couple attempts in the past at getting into Vim, but I just found myself getting frustrated at how unproductive I was and I quickly switched back to TextMate.

I’m already a couple days in to the challenge and have really enjoyed learning about all the editor has to offer. Partially to keep myself accountable to the challenge and partially to help others who are trying to make the switch to Vim, I’m going to be sharing my experiences here along the way. I’ll be giving my perspective coming from TextMate to Vim but I will try to share any tips and tricks I learn along the way that I find are improving my productivity.  I’d also be happy to answer any questions people have, so feel free to ask away in the comments.

The First Few Days

I’m already a few days in to the challenge and have had my fair share of struggles figuring out how to do things that were already part of my workflow in TextMate. I’m getting fairly comfortable with the editor and I would say that I’m about 90% as productive as I was previously in TextMate and I still have a lot to learn.

Here are a few things things that have been important to my adoption of the editor.

Multiple Editing Modes

This was tough to get used to at first. Remembering to switch between insert, visual and normal mode was a bit of a pain and I found myself typing a lot of nonsense when I would forget to jump in or out of a certain mode, but I’m pretty much past that. I’m already enjoying a lot of the commands that are available in normal mode and I would probably miss them if I were to make the switch back at this point.

Working with Multiple Files

One of the biggest differences with MacVim and pretty much any GUI editor out there is that you don’t have a file tree to look through and open files. Opening files with the default command (:e) is a bit of a pain, especially in large projects, but I realized that PeepOpen could bring back the awesome Go to File… command from TextMate (Command + T). This alone was a huge time saver.

If you haven’t heard of PeepOpen, you should check it out. If you are a MacVim or TextMate user, it is an awesome add on that can help you a lot when working with multiple files.

Learning My First Few Commands

To get my feet wet with Vim I tried out the built-in vimtutor that comes with the editor. It was a great introduction and easily worth the 45 minutes or so it took to get through it. Even if you aren’t using Vim on a regular basis, I would highly recommend it to anyone who has to do any editing of files over an SSH connection just so you have the basics of Vim under your belt for those few occasions that you actually have to use it.

To start vimtutor, just go to your Terminal and type vimtutor. That’s all there is to it! It’s really just a big text document that walks you through the Vim commands, but it’s very well done and covers all the basics you need to get started.

Next Steps

I’m still trying to work my way to some more advanced features, but am hoping to get through the Smash Into Vim screencasts from PeepCode in the next couple weeks. I am starting to get the hang of finding and replacing in Vim, but it takes me a while yet so I want to practice up on my regular expressions and understand all the possibilities of the vimgrep command. I also haven’t done any remote editing but am excited to try working with files over SSH.

What I Miss

Although there are a lot of things I like more about MacVim, there are a few things that I really miss.

  • Bundles – not a dealbreaker, but it would be nice to have some of my old bundles for PHP/CodeIgniter and Ruby/Rails.
  • Git Integration – I loved the Git bundle for TM and used it for all of my commits.
  • Find in Project – I used this command all the time, and it will take me a while to get used to finding and replacing in Vim.

I’m guessing all of these issues are not shortcomings of the editor, but only my lack of knowledge about it.

Resize Images the Right Way With Photoshop’s Image Processor

This may be old news for some, but batch resizing a mix of portrait and landscape images has always been a pain for me.  I used to:

  1. put all of my landscape images in one folder and my portrait images in another
  2. create a set of actions for each image orientation
  3. run a batch with the respective actions I just created on each folder

I was about to start going through this exact process to resize a set of images when I stopped and decided that I was going to find a better way to handle this.  I’m obviously not the first person to run into this issue so I figured there had to be an answer out there somewhere.  After searching for a while, I discovered Photoshop’s Image Processor tool.  I can’t believe I’ve gotten by this long without it.

The Image Processor can be found by going to:

File > Scripts > Image Processor...

The Photoshop Image Processor settings screen

Most of the settings are self-explanatory, but the “Resize to fit” option is the big time saver for me.  As you can see, I have the maximum height of my images to be 1000px and the maximum width to 1500px.  It makes sure that the dimensions fall within the boundaries of these dimensions so it is basically saying, “make the height of my portrait images 1000px” and “make the width of my landscape images 1500px.”

Hopefully this helps someone else who was running into the same issue and if you have any other questions, feel free to email me or ask a question in the comments.