Category Archives: Programming

Book Review: Rails Freelancing Handbook

As part of helping out on a RailsBridge project, I was given a copy of the Rails Freelancing Handbook by Mike Gunderloy so I thought I would share my impression of it.


Even though the book has the word Rails in the title, a lot of the advice in this book can apply to anyone who wants to work on their own, from a freelance designer to a business consultant.

The book covers topics from deciding if freelancing is for you to legal and tax implications, marketing, and managing clients.

Writing Style

This book packs a lot of good advice and is a quick read at just 65 pages.  I love this.  There is no fluff, just clear concise advice based on Mike”s personal experience as a freelancer.

Mike’s Advice

Mike does not pretend to have all the answers, but instead points you in the right direction.  Whether that means telling you to find a lawyer and an accountant, or pointing you to web resources for doing it yourself if you can’t afford one,.  This makes the book a really practical resource which you can refer to as you move through the stages of becoming a freelancer.

You will find that Mike’s advice is pretty comprehensive and you will gain nuggets of wisdom even if you have experience freelancing.  Even though I have done consulting work and have gone through the process of establishing an LLC, I learned about factoring receivables which was something I had no idea even existed.

Mike even covers ergonomics, using multiple monitors, and web based tools to improve your workflow.  I had never put as much thought into an office chair as I know Mike has, and since I’m a person that rather get the Consumer Reports version, I found this topic particularly interesting.


For under $10 you can’t ask for more.  This book is full of actionable advice for anyone starting a small business.  There is a free chapter online, so check that out and if you find it as useful as I did, you will want to get yourself a copy of this book.

A study of Sass (meta-language on top of CSS)

I’ve been experimenting with different technologies as I learn Ruby on Rails and recently I have been looking into using HAML instead of ERB and Sass instead of CSS.  I started using HAML a while back and I really enjoy how clean the template files look. This article has an argument for HAML and I agree with the author. I found an article on A List Apart on sprites and I thought it was a good way to showcase the awesomeness of Sass.  The article covers creating an image map with a hover effect.

The Links

The HTML for the map is below: (I modified the IDs from the original article to make it simpler to follow)

Here is the same map in HAML: (WP-Syntax does not support HAML/Sass, but this is not too bad)

    %a{:href => "#1"}
    %a{:href => "#2"}
    %a{:href => "#3"}
    %a{:href => "#4"}

The Style

In the article they discuss how the hover effect is achieved using this image. (dimensions added for clarity)
The CSS used for the hover effect is below with some minor modifications to the original:

#menu {
  width: 400px;
  height: 200px;
  background: url(../../images/test-1.jpg);
  margin: 2em 2em;
  padding: 0;
  position: relative;

#menu li, #menu a {
  height: 200px;
  display: block;

#menu li {
  position: absolute;
  list-style: none;

#menu_item1 {margin-left: 0; width: 96px;}
#menu_item2 {margin-left: 96px; width: 76px;}
#menu_item3 {margin-left: 172px; width: 111px;}
#menu_item4 {margin-left: 283px; width: 118px;}

#menu_item1 a:hover {
  background: transparent url(../../images/test-1.jpg) 0 -200px no-repeat;

#menu_item2 a:hover {
  background: transparent url(../../images/test-1.jpg) -96px -200px no-repeat;

#menu_item3 a:hover {
  background: transparent url(../../images/test-1.jpg) -172px -200px no-repeat;

#menu_item4 a:hover {
  background: transparent url(../../images/test-1.jpg) -283px -200px no-repeat;

In the article they discuss the math that must be performed to make this work, but it’s hard to go from all the values presented to the logic that was used to arrive at those values. In addition, there are a lot of constants and repetition in the CSS. Not very DRY in my mind. Now here is the Sass that will produce the same CSS:

!menu_image = "url(../../images/test-1.jpg)"
!width_item_1 = 96
!width_item_2 = 76
!width_item_3 = 111
!width_item_4 = 118
!height_menu = 200
!unit = px

  :margin 2em 2em
  :position relative
  :width 400px
  :height = !height_menu + !unit
  :padding 0
  :background = !menu_image
    :height = !height_menu + !unit
    :display block
    :display block
    :position absolute
    :list-style none
    :height = !height_menu + !unit
      :margin-left 0
      :width = !width_item_1 + !unit
        :background = "transparent " !menu_image "0 " -(!height_menu) + !unit no-repeat
      :margin-left = !width_item_1 + !unit
      :width = !width_item_2 + !unit
        :background = "transparent " !menu_image " " -(!width_item_1) + !unit " " -(!height_menu) + !unit no-repeat
      :margin-left = (!width_item_1 + !width_item_2) + !unit
      :width = !width_item_3 + !unit
        :background = "transparent " !menu_image " " -(!width_item_1 + !width_item_2) + !unit " " -(!height_menu) + !unit no-repeat
      :margin-left = (!width_item_1 + !width_item_2 + !width_item_3) + !unit
      :width = !width_item_4 + !unit
        :background = "transparent " !menu_image " " -(!width_item_1 + !width_item_2 + !width_item_3) + !unit " " -(!height_menu) + !unit no-repeat

The top of the Sass file defines the constants that will be used for all the calculations in the CSS. This may seem like a little extra work, but it has a few advantages. First, this makes it simpler to calculate the position of the background image for the :hover and it allows the developer to quickly change the CSS if the image changes. For example, imagine that the image changed to this:

Not only did the dimensions for each item change, but the overall height changed from 200 to 50. If CSS was written directly, not only would the url to the new image need to be changed, but the positions would have to be recalculated and the height and negative y-position would need to change. Using Sass, we can just change the constants defined at the top of the Sass file:

!menu_image = "url(../../images/test-2.png)"
!width_item_1 = 75
!width_item_2 = 100
!width_item_3 = 50
!width_item_4 = 175
!height_menu = 50
!unit = px

I like the simplicity and flexibility that Sass enables when defining CSS. When I learned about CSS, the selling point was to allow the design of a site to be flexible, but having to statically define colors, positions, heights and widths for items like the one discussed here, make maintenance more complex and error prone. Imagine the potential for errors when the image was changed above. Finally, I believe maintenance and readability increases as it is simple to follow how the values are arrived at instead of simply stating the value.
Sass has a lot more to offer than what I present above. If you would like to learn more check out the HAML/Sass site.

Blueprint grid overlay – a jQuery plugin

Today I saw a link on Twitter for a jQuery plugin written by badlyDrawnToy that allows you to toggle the grid overlay when using

I have been using Bluetrip for my app development, so I adapted badlyDrawnToy’s plugin to work with BluePrint / Bluetrip CSS.

You can get it on my Github repo

The only file you need is jquery.BTshowgrid-1.0.min.js. The other files are just there to support the example.

To enable it on your page just call

   $("body").addGrid({img_path: '../img/',margin:"1.5em auto"});

The default options are as follows. They may be overridden by passing in this param

var defaults = {
   z_index: 999,
   img_path: '/img/',
   margin:'0 auto'