Color schemes and productivity

| Comments

Almost all programmers have a color scheme or theme in their terminal and their code editor. Some people actually turns syntax highlighting off, but I will never understand that. To me - code is something that lives on a black or dark background and has syntax colors. I have only ever used a white background color scheme back when I was using Eclipse 8 years ago. And probably because I couldn't figure out how to set another color scheme than the one that comes with Eclipse.

Lately I have been really bothered by reflections in my glossy screen om my MBP and my Apple Cinema Display (I know - first world problem). In the afternoon all I could really see was me - like I was looking in a mirror. While that is very enjoyable it is not the way to get work done, so I set out to find a color scheme that would make it easier to see what I am working on and not myself so much. In that process I found out that I am super sensitive to changes in my editor work setup. Change the colors a little and I have a hard time reading through code fast. It is weird and a little bit stupid that it is so, but I can't help it. It takes me about 2 weeks to get reasonably comfortable with changes to a color scheme.

This blog post is really just a listing and some screen shots of the color schemes I like. And let me tell you right now: there is no dark background color scheme that solves the glare problem - I tried tons of them and none of them are magic. Moving your chair or source of light solves some of the glare problems, but if Apple would just go back to offering a non-glare version it would be a lot easier.

The ones I like

Desert theme

I really like the "Desert" color scheme that comes with Vim as one of the default color schemes. Vim Desert colorscheme The only thing I find a little annoying is the hysterically yellow line numbers. I have put this line in my .gvimrc to tone down line numbers after the color scheme is applied:

hi LineNr guifg=grey50 guibg=grey20

That is better: Grey line numbers in desert colorscheme I haven't found a desert color scheme for PHPStorm yet. I also don't really like to use it in the terminal, so I guess the desert theme is a Vim thing for me.

Tomorrow

In both the terminal and PHPStorm I use the Tomorrow theme. It comes with support for a ton of different applications and is really well thought out. I started using this one because it has a white background version too. So much like the popular Solarized theme it can use the same colors on light and dark background. In the terminal I mainly use Tomorrow Night Eighties and in PHPStorm I switch between Tomorrow Night Eighties and just plain Tomorrow.

Here is the dark version (Tomorrow Night Eighties). Tomorrow Night Eighties in PHPStorm And here is the light version (Tomorrow). Tomorrow theme in PHPStorm

I still mostly use the dark version, but when glare becomes too much I can pretty comfortably switch to the light version and still get stuff done. It is crazy how sensitive I am to having the colors be recognizable.

Darcula

This is the color scheme that comes with the look and feel for PHPStorm called Darcula. I think it is really good looking and I can use it - but only if there is not too much light. It is a little on the low contrast side. Darcula theme

The one I don't like so much

Solarized

I realize that all code snippets on my blog use solarized. It is mainly because I haven't taken the time to change it. It really is not as simple as you would think in Octopress. Ironically - on the documentation site for Octopress solarized is not used. I haven't figured out what theme it using. Maybe it is solarized without the yellow background and just plain white.

Anyway. No reason the hate on solarized. So many people use it and love it. I just happen to think that the dark version has almost zero contrast and the yellow version makes me want to pee.


Finding unused images in your website code

| Comments

I was doing a lot of changes to CSS files today - mainly deleting a whole lot of stuff. I wanted to see if there were image files that were referenced by CSS that were no longer in use, so I wrote this naïve little script that loops through all image files it finds in the dir you give it to see if there are references to the image files.

If you have The Silver Searcher (ag) installed the script is much faster. Without Silver Searcher the script uses grep. If you don't know Silver Searcher go check it out - it is super fast.

#!/bin/bash
DIR=.
if [ -n "$1" ]
then
  DIR=$1
fi

# Find image files in.
FILES=`find $DIR -type f | grep ".*\.\(jpg\|gif\|png\|jpeg\)"`

# Default searcher is grep. If Silver Searcher is installed, use that.
SEARCHER='grep -r -l '
if command -v ag
then
  # Sweet! Let's use Silver Searcher.
  SEARCHER='ag -l '
fi

# Loop over image files.
for f in $FILES
do
  if [[ -f $f ]]
  then
    name=$(basename $f)
    found=$($SEARCHER $name $DIR)
    if [[ -z $found ]]
    then
      echo $f
    fi
  fi
done

Gist is here.

How to use the script

  1. Don't use windows.
  2. Download the gist and put it somewhere in your project.
  3. cd to the script in your command line and go chmod u+x unused-images.sh
  4. Run the script by going sh unused-images.sh or /.unused-images.sh. If you pass a directory as an argument you will search in that dir only. If you don't pass an argument the script will search in the dir it is in, so be a little bit careful with doing that in a directory that contains thousands of files.

The script outputs the images that have no references. So if you feel courageous you can delete the unused image files by piping the output to xargs and delete:

./unused-images.sh themes | xargs rm

Windows in VirtualBox on the Mac

| Comments

I have been doing more CSS and front-end stuff lately. I am having a lot of fun learning more about these things that I have somehow avoided doing for the last many years.

Today I realized that I don't have to own a MS Windows license to run a setup in a VM for browser-testing. While I don't hate Microsoft (anymore) I would really rather not buy a license for a product that I think is horrible. Anyway - I had no idea that it is super simple to set up a VM running whatever version of IE you want on Windows.

Installing the disk image was easy and I was up and running in very short time. I did however struggle a little with getting Windows to recognize the localhost (my Mac) and the vhosts I have on my local machine. I do all my development on my localhost, so I really needed Windows to understand my vhosts. Here is a writeup of what I did:

Note that I installed Win7 - the instructions for editing the hosts file might be different on other versions of Windows.

Install VirtualBox

First you need to install VirtualBox if you don't have it. Go grab an installer from the VirtualBox Downloads page and install it.

Install the Windows image

Now go to modern.ie's download page and download a virtual machine in the IE version you would like to test stuff on. For this writeup I got an IE9 on Win7. Note that instead of downloading a lot of rar-files, you can just grab a cUrl command at the bottom of the downloadboxes and paste that into your terminal.

This part takes a good while, so be patient.

Configure networking in VirtualBox

Before you start Windows, you need to configure networking in VirtualBox. So go to VirtualBox and choose 'Preferences' from the menu (or go Command-,). In the settings window - click "Network" and choose the "Host-only Networks" tab. On that tab there is a plus that you just click and accept. I didn't have to configure anything - I just got a configuration called vboxnet0. Go ahead and close preferences - this is a onetime setup thing. All images you install will be able to use these settings (if you want). Host-only Networks

Boot up Windows

Now you can double click the image in VirtualBox's main window to start up Windows. Yup - you get the Windows sound.

Find the Gateway

Once Windows has booted up we need to configure the image to talk to our localhost. Click the start button or whatever it's called and type 'cmd' in the textfield to get a "terminal". Type ipconfig at the prompt and find the part in the output where it says "Default Gateway" under the "Ethernet adapter Local Area Connection". Note that IP. It should be something like 10.0.x.x. Mine is 10.0.2.2.

Set file permissions on the hosts file

Now we need to edit Windows' hosts-file so that the vhosts we have on our Mac can be used. But first we have to change the file rights on the file. To open the Finder thingy, type explorer C:\Windows\System32\drivers\etc in at the prompt. That gives you the folder with the hosts-file. Now right click on that and select "Properties". In the window you get, click the "Security" tab and then click the "Edit button". File permissions Select the "Users" group/user and tick the "Full control" box. File rights All this probably is a horrible idea securitywise, but I don't really care - I'll use this Windows install very little. Click save and you're good.

Edit the hosts file

Now we can edit the hosts file. Double click on the hosts file and choose Notepad in the "Open with dialog". Now you can add the urls that you have set up as vhosts on your Mac. Use the 10.0.x.x IP address from the ipconfig command like this for example:

10.0.2.2 d7.dev
10.0.2.2 d8.dev

Save the file and you're done! I made a desktop shortcut to the file because I feel like I'll be back for more vhost-editing soon.

Use IE!

Now you can see your Mac's webserver's pages from your VM. So open up IE(!) and go to whatever url you put in the hosts file. I just want to point out one last thing: There is a Firebug Lite to be found in (this) IE if you click the gear in the upper right corner. Firebug lite

Hope you found this very verbose walktrough helpful.


Setting up a file watcher for Compass in PHPStorm

| Comments

EDIT: It seems that the version 7 early access now has a file watcher preset for Compass - nice work JetBrains! The part about scope from this blog post is still useful to you if you are on PHPStorm 7 though.

I started using PHPStorm about 6 months ago and while it is an extremely awesome and powerful IDE there are just so many things you can set up and configure. I have to admit that for the first couple of months I pretty much used PHPStorm just like I did Vim and not using any of the many configurable things except for the debugger. I am slowly venturing into playing around with setting more stuff up, and I thought I would share this one because it took me a while to get right.

It is super simple to use the Compass compiler from the command line and I always have. But PHPStorm can compile your .scss files into .css on the fly so why not take advantage of that.

So here is what I did. The settings assume that you use something that resembles the default settings in a Compass project with a folder for the scss files and the css being output to another folder called something like "stylesheets" or "css" (could be anything really). You also need to have Compass installed on your machine.

  1. In the PHPStorm settings, go to "File Watchers".
  2. Click the plus to add a watcher and choose SCSS.
  3. Edit the settings to look like the ones on the screenshot. Where Compass is installed on your machine may not be in /usr/bin/compass like it is on mine, but you can use the command whereis compass from your command line to figure out where compass is. The output path is "stylesheets" for me for this particular project, but you shold edit that to whatever your project has named the css output folder.

Settings in PHPstorm

Note that I have created a "scope" called Theme. Scopes in PHPStorm are parts of your project that you would like included or excluded in things like searches and settings like this Compass setup. There is no reason for PHPStorm to listen for changes to your module files if your theme folder is where you have your Compass project. So if you click the button with the three dots at the scope field you can setup PHPStorm to only look where it is relevant. I use scopes a lot to cut down on how long searches take, so setting up a few scopes for each project is time well spent.


A git commit hook helps you keep your code clean

| Comments

I like to keep my code free of trailing whitespace. I feel what xjm describes as "spinach in your teeth" about whitespace and non-conforming coding standards.

I got (heavily) inspired by Josh The Geek's git pre-commit hook, and made myself a commit hook that will check the code I am about to commit for common errors. In addition to whitespace, I like to make sure that I don't accidentally commit debug code like krumo(). The commit hook also checks for common calls to debug functions.

If you want to use it, simply put it in your .git/hooks folder in your git checkout. Make sure the file is executable with chmod +x .git/hooks/pre-commit. This will only effect the git checkout you put the commit hook in, but you can make it apply to all future checkouts by putting it in your git install directory's template folder. Where that folder is will vary, but on my mac it is in /usr/share/git-core/templates/hooks.

The script is not the most clever in the world, so it will be wrong about some things from time to time. You can override it and still commit with the command git commit -n

Here is the pre-commit file: Gist is here.

#!/usr/bin/php
<?php
/**
 * @file
 * This is a Git pre-commit hook that informs you when you are
 * about to commit whitespace or a debug function.
 */

$red = "\033[1;31m";
$red_end = "\033[0m";

$yellow = "\033[1;33m";
$yellow_end = "\033[0m";

/**
 * An array of functions to check for.
 */
$check = array();
$check[] = ' dsm(';
$check[] = ' dpm(';
$check[] = ' dpr(';
$check[] = ' dprint_r(';
$check[] = ' db_queryd(';
$check[] = ' krumo';
$check[] = ' kpr(';
$check[] = ' kprint_r(';
$check[] = ' var_dump(';
$check[] = ' dd(';
$check[] = ' drupal_debug(';
$check[] = ' dpq(';

$return = 0;
$diff = array();
exec('git diff --staged', $diff, $return);

if ($return !== 0) {
  fwrite(STDOUT, "git diff returned an error. Commit aborted.\n");
  exit(1);
}

foreach ($diff as $lineno => $line) {
  if (substr($line, 0, 1) != '+') {
    // Skip the line if you aren't adding something that may contain a debug
    // function call.
    continue;
  }
  foreach ($check as $lineno => $function) {
    if (strstr($line, $function)) {
      fwrite(STDOUT, "{$red}Oh, noes! You were about to commit a $function)?{$red_end}\n");
      fwrite(STDOUT, $yellow . $line . $yellow_end);
      fwrite(STDOUT, "\nCommit aborted.\n");
      exit(3);
    }
  }
}

$whitespace = shell_exec('git diff --staged --check');
if (!empty($whitespace)) {
  fwrite(STDOUT, "{$red}Commit aborted. Fix trailing whitespace.{$red_end}\n");
  fwrite(STDOUT, $yellow . $whitespace . $yellow_end);
  exit(4);
}

// If this is still running, all is peachy. Let the developer commit.
exit(0);

Using specific versions of formula with Homebrew

| Comments

I have my LAMP stack and other things set up on my mac with the wonderful Homebrew.

I recently did a brew upgrade on my system and it seemed that everything went smooth. But when I later ran PHP from the command line I got this error:

PHP Warning:  PHP Startup: Unable to load dynamic library '/usr/local/Cellar/memcached-php/2.0.1/memcached.so' - dlopen(/usr/local/Cellar/memcached-php/2.0.1/memcached.so, 9): Library not loaded: /usr/local/lib/libmemcached.9.dylib
  Referenced from: /usr/local/Cellar/memcached-php/2.0.1/memcached.so
  Reason: image not found in Unknown on line 0

I poked around in my php.ini to see if the wrong file was being included or something like that, but it turned out that I had upgraded to a newer version of libmemcached than the one memcached was using. So I needed to downgrade libmemcached. Here is how to switch to any version available with Homebrew:

  • brew versions libmemcached

  • Find and note the version number you want. In my case I wasn't sure, so I just went with the second newest and that worked.

  • brew switch libmemcached 1.0.4

Change the version number and the formula above to whatever makes sense for what you are doing.

The example above is using a command that is an external command for Homebrew. It works super fast and is easy to use.


What's with the weird name?

| Comments

So, Camilla.. Why is your nick everywhere naxoc?.

Xoc means shark in Yucatec Maya. It might actually be one of the very few words that made it into English. I used to study American Indian Language and Culture at the University of Copenhagen. Those were the days with much nerding over Mayan hieroglyphics. Maya hieroglyphic texts are often about how fantastic the rulers where and one of the more fantastic female rulers was called Lady Xoc. I thought she was pretty cool, so I stole the name. The Na- prefix is simply a marker for female. So there is the story of my weird nick.

It is pronounced “nashoc”.


Navigating with Krumo

| Comments

The Devel module includes the super helpful Krumo library. I use dsm() and krumo() all the time. If you are not familiar with Devel, you should try it. Morten Wulff wrote a demo page for the module.

Krumo output

Today a client suggested that the Devel module Krumo could display the "path" to an item in an array by right clicking or otherwise interacting with the nested elements in the output from Krumo. I was really excited about that idea - I can't count the number of times I have tried and failed to target an item deep in a form array or an item in the node object simply because my human brain can't remember a structure like $form['#node']->content['links']['comment']['#attributes']['class'] for more than 3 seconds.

Still very happy with this new idea I went straight home and started to hack away at the Krumo library to make it display the path to a desired item. After looking at the javascript for a while, and saying out loud that Javascript hates me, I realized that the killer feature I was trying to make already exists in Krumo! This is a well hidden gem that I haven't seen before today, so I thought I would share it: If you double click an item in the Krumo output it prints the items array "path" so that you can copy paste it into your code and stop worrying about remembering long array structures.

Krumo path

Thanks to Niels Fanøe for the inspiration.

EDIT: I was using the dev D7 version, and the feature just went in this August. Thanks to Mark Theunissen for pointing that out. I also feel less stupid for not discovering the feature before now!


Moving an iTunes Library

| Comments

If you are moving an iTunes library to a new mac it will go smooth if the user login is the same. So if I move my iTunes library from an old machine where it was located in /Users/ckj/iTunes to a new machine where it is gonna go in /Users/ckj/iTunes - I have no problems. But if I changed to another username on the new machine - all the paths in the iTunes Library.xml file will not be correct anymore. I have moved libraries so many times now and I thought I would share a really quick way to fix the iTunes Library.xml file to reflect the correct user directory.

If you use the built-in command line tool called sed, you can type one line in the terminal and be done. Let’s say I was moving from a mac with a user directory called "ckj" to another machine with a user directory called "naxoc". All I would have to do in the terminal would be this:

  1. cd to the iTunes folder in the user directory you are moving to.
  2. Enter this: sed -i "" -e "s,Users/ckj,Users/naxoc,g" files iTunes\ Library.xml

Note the funky syntax with the -i "" This is a mac quirck in sed. I found some info on it here.


Hot Laptop? Vacuum it!

| Comments

My beloved 3years old Macbook Pro was starting to get really hot when I used it. It had gotten to the point where I would burn my legs if it was on my lap, and since having your laptop on the lap is kinda the point, I felt had to do something about it.

I bought a Logitech Notebook Cooling Pad that actually is very comfortable and does exactly as it says it will, but I was still curious to see if I could get my old healthy Macbook back.

I found this blog post about how to vacuum the laptop and the result is amazing. I was a little worried about the static, so I turned the machine completely off and removed the battery before vacuuming. The happy laptop is now quieter and cooler! Very simple and very recommended.

Cat and vacuum cleaner Image from noor*.