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.
Overview
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.
Conclusin
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.
The problem with SKU proliferation
TechCrunch has a short post on the number of models of handsets Nokia and Sony Ericson have on their site.
Why Nokia and Sony Ericsson are failing
For reasons of market segmentation and distribution strategies electronics companies choose to spin new almost identical models of products which on some marketing plan may seem reasonable, but which in fact tend to confuse the customer and add operational overhead.
Whenever someone asks me about a laptop I can quickly tell them about all the Apple models, not only because I am a Mac user, but because remembering the permutations is incredibly simple. MacBook, MacBook Air, and MacBook Pro. It’s not hard to remember even for a person who tends to forget things, like me.
Look at companies like Toyota and Honda and you will find the same thing. Very simple, clearly differentiated models each targeting a specific segment of the market.
Large consumer manufacturers should take note and not create a new indistinguishable model just to sell a “different” TV at Costco. The iPod you can get at Costco and Walmart are in fact the same ones you get at Best Buy or at the Apple store. Simple for the company and simple for the consumer.
The Toyota A3 Report | shmula
This is a really good article on the Root Cause analysis technique developed by Toyota.
The Toyota A3 Report | shmula.
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)
%ul#menu
%li#menu_item1
%a{:href => "#1"}
%li#menu_item2
%a{:href => "#2"}
%li#menu_item3
%a{:href => "#3"}
%li#menu_item4
%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
#menu
:margin 2em 2em
:position relative
:width 400px
:height = !height_menu + !unit
:padding 0
:background = !menu_image
a
:height = !height_menu + !unit
:display block
li
:display block
:position absolute
:list-style none
:height = !height_menu + !unit
menu_item1
:margin-left 0
:width = !width_item_1 + !unit
a:hover
:background = "transparent " !menu_image "0 " -(!height_menu) + !unit no-repeat
menu_item2
:margin-left = !width_item_1 + !unit
:width = !width_item_2 + !unit
a:hover
:background = "transparent " !menu_image " " -(!width_item_1) + !unit " " -(!height_menu) + !unit no-repeat
menu_item3
:margin-left = (!width_item_1 + !width_item_2) + !unit
:width = !width_item_3 + !unit
a:hover
:background = "transparent " !menu_image " " -(!width_item_1 + !width_item_2) + !unit " " -(!height_menu) + !unit no-repeat
menu_item4
:margin-left = (!width_item_1 + !width_item_2 + !width_item_3) + !unit
:width = !width_item_4 + !unit
a:hover
: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.
iPhone 3G S, The world's most accessible smart phone
Today Apple upgraded the iPhone and made it the most accessible phone. As I had predicted in an earlier post, with more capable hardware they were able to improve accessibility. Apple gets it, they see accisibility not as a hindrance, but as a way to create a competitive advantage.
Voice Over, speak it to me
With Voice Over anyone can now control the iPhone without needing to see the screen. Gestures are used to move around and the entire OS is opened up to the blind:
You’ll hear descriptions of every item on the screen, including status information such as battery level, Wi-Fi and cellular network signal levels, the cellular network provider, and time of day. It even lets you know when the display changes to landscape or portrait orientation, and when the screen is locked or unlocked.
VoiceOver includes built-in voices that speak 21 languages including Chinese (Cantonese), Chinese (China), Chinese (Taiwan), Dutch, English (US), English (UK), Finnish, French (Canada), French (France), German, Italian, Japanese, Korean, Norwegian, Polish, Portuguese (Brazil), Portuguese (Portugal), Russian, Spanish (Mexico), Spanish (Spain), and Swedish.
This feature also allows a blind person to interact with a sighted person by displaying a Voice Over cursor which displays a rectangle around the item being described and the screen can be turned off for privacy. The Voice Over feature could be great for a sighted person as well. You can control the iPhone without taking it out of your pocket and you can probably extend battery life by not having the LCD on.
I am not sure how typing is handled (probably by selecting each letter at a time with the gestures), but Voice Over is a real win for the iPhone.Voice Control, do as I say
Another feature that makes the new iPhone more accessible is Voice Control. Apple prominently showcased this feature during the keynote announcement of the iPhone as one that has mass appeal, but here is another feature which helps the disabled by allowing dialing and music selection via voice commands. It also supports 21 Languages.
you can use your voice to play music and make a phone call. Just press and hold the home button, listen for the audio prompt, and speak the name of the artist, album, or playlist you want to hear. You can pause, play, change tracks, even shuffle your music.
Zoom Zoom Zoom
The iPhone 3G S now lets you magnify the screen of any application on the iPhone. Not only does this help those who traditionally need magnification, but Baby Boomers with poor eye sight now have an option for an accessible smart phone.
Zoom works everywhere, including the Home, Unlock, and Spotlight screens—even with applications you purchase from the App store.
And there’s more…
These are just a few of the accessibility features of the iPhone , but these are ones which potentially have uses outside the disabled community. It is clear that Apple is motivated to create accessible products, but by addressing this need, it also opens up the possibility to market these features outside the disabled community.
Be sure to check out Apple’s iPhone accessibility page for more information of solutions for the hearing impaired and those with physical and motor skills difficulties.
Why Time Warner should incorporate Hulu

Time shifting is fast becoming the norm, but what if you forget to record a show? What if you want to catch the previous season of a program before jumping into the new season? Let’s not even get into the potential for making money from overseas content.
Media companies are slowly embracing the realities of the internet and it seems like this is a perfect opportunity to make a difference.
I understand that TW has to protect its add revenue and it wouldn’t want to have Hulu gain a bigger audience thus shifting ad revenue there, but what if instead it could figure out a model where TW could do the ad placement on hulu content and share the revenue?
TW could also make it so that a viewer could schedule a program to record on their TW DVR after watching the content from Hulu. This would bring the audience back to traditional media while blending in the online experience. In a sense this is enhanced TV. Without this option I might be more reluctant to jump into the new season of Heroes if I have never watched the series, but if I could go back and catch the series from season 1, I might stick around.
There are many ways that traditional media sources can collaborate with new distribution channels to enhance their offerings, but by not acknowledging the elephant in the room they can seal their own fate as more and more viewers catch on to the power of true on-demand entertainment. I already know people who are canceling cable in favor of online distribution and this trend is bound to continue unless companies like TW figure out more compelling ways to engage viewers.
Larry Page's University of Michigan Commencement Address
Larry Pages University of Michigan Commencement Address
via Google Press Center: Press Release.
A nice read. Right up there with Job’s speech about his life.
Kindle 2 v iPod Shuffle text-to-speech: Funny
BlueTrip CSS grid overlay bookmarklet
badlyDrawnToy created a bookmarket for the 960.gs grid overlay. I modified it for Bluetrip. Just drag the link below to your bookmarks toolbar. In Internet Explorer, right click, select ‘Add to favourites’ and then select ‘Links’. It does not work with IE6.
Updated to version 2.0
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 960.gs
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
$(document).ready(function(){
$("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/',
opacity:.6,
margin:'0 auto'
};


