Utilizing Jekyll with Sinatra on Heroku for a Facebook App

I love working with Jekyll. It’s very nerdy for what it does since the final output is a static HTML server which is awesome for smallish projects not utilizing a database. Low and behold, most Facebook apps are just that — a show case of some special feature that only fans of the page can access. Forget using Flash anymore, this is quicker and simpler and of course you can mixing some HTML5.

Using Jekyll, Sinatra (for the Rack aspect) and hosting it on the awesome Heroku stack makes creating Facebook apps a breeze — if you know the steps to begin with.

Things you will need and know

1. A Heroku account - free to signup and also provides a free development account
2. Jekyll installed - Check out the docs for setup and installation
3. Basic knowledge on how to create a Jekyll project
4. A Facebook developer account to create the app - this post is not about creating one or setting up the app on Facebook. You should have a working knowledge of creating the app through their tools.

Before I get started with the basic code, I want to extend thanks to Jesse Storimer on his post to get me started with how to run Jekyll output on Heroku and also this Stack Overflow response for the JavaScript “Like” gate solution.

The setup

In order to run a Jekyll project on Heroku, you need to fake out Heroku into thinking it’s a Rack app. This is done by making the project run through Sinatra. Using Jesse’s masquerade code with some minor modifications for ability to run on Facebook you can create these files in your base Jekyll project folder.

Gemfile (always good to utilize this)

source ‘http://rubygems.org'
gem ‘sinatra’

configu.ru

require './masquerade'
run Sinatra::Application

masquerade.rb

require 'rubygems'
require 'sinatra'

set :public, Proc.new { File.join(root, "_site") }

# This before filter ensures that your pages are only ever served 
# once (per deploy) by Sinatra, and then by Varnish after that
before do
    response.headers['Cache-Control'] = 'public, max-age=31557600' # 1 year
end

get '/' do
    File.read('_site/index.html')
end

post '/' do
    File.read('_site/index.html')
end

Things of note

The masquerade.rb file sets up Sinatra to default to the site/index.html structure from which the app runs.

In the config.ru file I changed the path to the required masquerade file. Heroku would throw an error and crash because it could not find the required rb file when launched. Better to explicitly tell it were to find the file than not.

For Facebook iFrame tabs, Facebook sends a POST request to your app for it to return the actual page data. I added to the masquerade.rb file the route for the POST request. Initially, I only had the GET request so the app would return Facebook a 404 error thus resulting in an ugly h1 tag wrapping “Not Found”. Good luck finding a solution that until you check your heroku logs.

Extra credit - make visitors like your page

Since this post is about a static HTML application, there was no need for a dynamic language such as Ruby on Rails using Ruby or even PHP to utilize the Facebook SDK. If you want to setup what is known as a Like Gate you would need to add the ability to check the current user session information. Unfortunately, you can’t do that very easy with JavaScript, but you can utilize the JavaScript SDK and a simple query of current user ID and page ID. Easiest way is to wrap all of below in the asynchronous solution Facebook provides

FB.init({
appId: ‘YOUR APP ID’, 
status: true, 
cookie: true,
xfbml: true
        });
FB.login(function(response) {
    if (response.session) {
    var user_id = response.session.uid;
    var page_id = “YOUR PAGE ID”; 
    var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
    var the_query = FB.Data.query(fql_query);
    the_query.wait(function(rows) {
    if (rows.length == 1 && rows[0].uid == user_id) {
    // The user has liked your page
    } else {
    // The user has NOT liked your page
    }
    });
    } else {
    // user is not logged in
    }
});

Hope this helps whomever has stumbled upon this post. I know I will utilize it to remember the hoops I had to jump through to get this to work.

Update

I created a basic default project available for cloning on Github utilizing Jekyll, Sinatra and Compass from discussion above. Feel free to check it out Jekyu.

A new experience - redux

Her name would be Addisyn Jo. Would she be like her sister, wild from the start, but knew how to flash you a smile that would melt your heart or would she walk her own beat and totally surprise us. A year ago tomorrow, she would come into our lives submersing us back into the newborn world whether we were ready or not.

I would have liked to say we were ready. We had just had a newborn not fifteen months prior and had been through all the classes, been through all the odd feeding times, dealt with many a diaper. We were ready, right? Of course there is more to that then just the minor physical things. We would now have twice the diapers, twice the number of little feet to run after, twice trips to the doctors when they were sick; I could easily go on. We’re we ready? I think we were ready to share our love with one more.

Her name is Addisyn Jo. She has now been with us for a year. A complete opposite of her sister, but they balance each other out. She is the quiet silent type, but filled with personality you would not believe. She bobs her head to any music that comes on the radio, speaks in her own dialect of baby-ese, and of course must follow everything her big sister does. Her name was derived by my wife after her Great Grandmother, Dorothy. Only she ever called her Dee and this is what we have nicknamed Addisyn. Unbenounced to us, Haidyn, picked up calling Dee just that on her own without any prompt.

A big sister must be a big sister. One would think we were in trouble from day one by the reaction we got when Haidyn met Addisyn for the first time. A photo immortalized in the digital world, we all look back at the extreme confusion, fear and despise that is portrayed and laugh as now she completely loves her little sister. Dee need a bottle? No problem, Haidyn lets us know. Dee asleep? Shhh… don’t talk loud as Haidyn lets us know. Sharing gummies with her little sister is a must. Helping feed Dee or throw a diaper away is always entertaining. Hugs come often, but also so does the occasional push and shove. Sisterly love is definitely showing through between the two.

So Adee, when you are finally able to read this, whether it is in paper or on the iPad that your sister has already mastered and I am sure eager to show you how to play games, here is to the first year of your life that has brought us so much joy. We can not wait to see how you will grow and partake in this world. You definitely walk your own beat.

We love being your mommy and daddy.

Digital world emersion

I was leaving the dentist office after having a checkup and passing the grade of having teeth in good order, when the receptionist handed me a paper card with my next appointment time. I was used to this as she does this every time I visit which in turn I put directly in my phone. What caught me off guard was her next offer — a free mini paper calendar. I briefly thought about it, but politely said “No thanks”, which immediately made me wonder, when was the last time I actually used a paper calendar or a written anything down on paper for that matter.

The techno world I live in

My typical day usually starts out (after I get the kids off to daycare that is) with a quick check of the email that came in since last night, opening up my calendar app on the computer and checking what is scheduled today or this week, and turning on the iPad to read through the latest RSS feeds for my daily news intake. There is also a quick glance at Facebook to catch up and see what “friends” have been doing since last time I was on and a read through my twitter timeline to see what breaking news is happening. Maybe also a quick balancing of the bank accounts online or even “penning” a new blog entry.

To sum it up, I live in a world of technology “I want it now” emersion. Each one of the items above can be replaced with things of yesteryear in that it makes me wonder, what did I do before these things enriched my life. One might say that I spend too much time in front of the glowing screen, but this is the age of now and the age of consumption.

Think about it

When I was a kid, if I wanted to catch up with friends or hang out, I called them on the phone. Now that I am an adult, I use Facebook or pretty soon the awesomely new Google+, as my friends are spread about the country. I could even email them or family members for instant updates or quick hellos. Writing letters, albeit more personable, but definitely more time consuming, has become a thing of the past. No wonder the Post Office is having trouble.

I grew up in a household where the news came in on the TV at 6pm and in the morning newspaper. I never really read the newspaper, unless it was the comics section. Now I catch up on my news through RSS feeds (which I cater to my liking — a newspaper you can not do that) and through Twitter in which I usually find out breaking news before the major news outlets, again which I can customize to follow whom I want. This method of news aggregation is quick and easy to find what you want and is important to you; plus, think of all those trees you are saving.

I used to use paper calendars to write down what I needed to get done for classes when I was in school, but that was because I didn’t have a “smart phone” that I carried with me all the time. It was good for what it was worth, but does a paper calendar email you 15 minutes prior to an appointment or send a verbal notice? My wife still uses a paper calendar for her items, as she likes seeing things written down. Although, now she has gotten into the habit of just asking me what is on the calendar before planning anything.

As I mentioned before I carry around a phone everywhere I go. On it includes an address book, maps and any application I want. It also has quick access to a search engine in which I can look up any address or phone number — don’t get me started about getting those hefty phonebooks in the mail, which have become so pointless these days. If I need to travel someplace, I used to use paper maps — which I still keep in the car, but now a quick entry into the GPS and I am off to my destination.

The hum of the world around me

No I do not mean the electrostatic noise that my wife and I hear every night due to the baby monitors in our room with all the interference from the electronics in our house, but just how the technology of today has made this world hum.

Some may say its making us anti-social at the same time making us a new type of social. I would say it’s making my life easier from an organization and time benefit standpoint. Gone is the clutter of keeping paperwork organized in multiple locations. Gone is the forgetting of an important date. Gone is the ability not knowing what your friends have been up to and the once a year letter.

I welcome technology with arms wide open and can’t wait to see what my girls grow up with.

Amazon S3 and OGG Content Types

Note: This post is more of a reminder to myself and also help out whomever lands here. It took me a couple of good Google searches to figure this one out.

Uploading directly to Amazon’s S3 through the web client has definitely changed overtime. It used to be that in order to change any content-types for files, you had to either create a script yourself or use an FTP client to physically set the content-types. I decided to use the web interface to be quick and rely on Amazon S3 automatic meta data preference setters. Unbeknownst to me, I didn’t realize it doesn’t set an OGG content-type correctly.

The setup

With HTML5 video, there are three main players (outside of Flash Video) in the field. MP4 — which all webkit based browsers read and understand, OGG — for Mozilla based browsers such as FireFox, and WebM — relatively newer, but based off the OGG codec. With everyone still duking it out to see which one is better or who wins, you must support all of these in your HTML5 video tag.

Since this Facebook application was going to get pretty good traffic based on the subject matter (Absolut Vodka and Cee Lo Green), we chose to serve the video files off S3.

The issue at hand

I develop in Chrome and test in all browsers, but this one time, I forgot to utilize FireFox to make sure it worked. It just so happened that the client uses FireFox and let us know that the videos they were trying to view were not playing.

Now we were using a JavaScript plugin called VideoJS which automatically falls back to using a Flash player if the browser doesn’t support HTML5 video, this should not have been happening. Since it was FireFox, it was looking to read an OGV codec file, which it was getting, but didn’t understand it because of the content-type it was being served.

The solution

By default, when uploading any files to Amazon S3, Amazon automatically sets the content-type headers. Any video file that is uploaded, it tags it as content-type:

application/octet-stream

This is perfectly fine for serving MP4 files, but OGV (OGG) files don’t follow those rules. To fix, you have to change the value to something not in the given list:

video/ogg

Doing so allows S3 to serve the OGV file to the browser and the browser understand what content it is being given.

Like I mentioned above, this only happened when using the web interface for S3. Doing so through an FTP client, you can set it at the time of upload.

Hope this solves any headaches in the near future.

Why owning an iPhone now scares me

About a month ago, I started a new job. I left my job at RealTravel to move on to a new gig working for a much larger, non-startup, but still in the web industry company called Patch. For those that might not know much about Patch, it's owned by AOL and is a great site for local community news near your hometown. Unfortunately, there isn't a Patch for Appomattox, or near me for that matter. But I digress; this is not about Patch, which I will save for another time, but instead how much AT&T service is hard to come by in rural Virginia.

Patch (AOL) was gracious enough to allow me to still work remote and in doing so, hooked me up with an iPhone to keep in touch. I had never owned an iPhone, have always wanted one after seeing a lot of my buddies have them, but I kept to cell companies that actually had service around here — AT&T barely reaches the house. For the past year and a half, I have been a happy customer of Sprint with an Android HTC Hero. Loved my Android phone, but the iPhone form factor and apps are so much better. Anyways, for the past month, I have been using solely my iPhone on the AT&T service that is the suck.

One reason why Sprint just works is because they do cell tower sharing. They don't own the towers, but instead "rent" service from the companies that do. That way I can be anywhere in the country and still have great service on my phone.

Don't get me wrong, the iPhone is awesome, it's just the service around here. I am now afraid, well, not seriously, to venture out to more remote parts of rural Virginia knowing that I may or may not have cell service. Just today, my phone calls were dropping in and out as I was driving — yes, we are still allowed to do that in Virginia, but definitely ready for the law to be passed — on a major highway. My Sprint phone would have held up like a champ, even if I was in some deep bush country.

So, I have to say, what gives AT&T? I'm not in New York City or a larger metropolitan area where everyone is using their new iPhone tethering to download the latest Justin Bieber release.

All of this leads me to wonder, what did we do without cellphones fifteen years ago?

An iPhone app built in one day

My buddy Jerrod Blavos hit me up last Friday evening about 8pm. He said he had been working on an iPhone app and needed a user interface to go along with it. Being a designer that is always itching to design new things, I said sure. Two hours later, we had a functioning app that was submitted to the Apple App Store.

Maybe I should expound

That’s pretty much the gist of how it went down, but let me explain a little more. The app we built was very simple. Called AspectGadget, it does calculations of aspect ratios for images or videos for a given size converted to a desired size. Apparently, Jerrod has been doing this calculation everyday the long way and was tired of it so he saw a need and built an app — I know I will be using it for when I do designs from now on.

Anyways, he started it last Friday morning, programming the base app in Objective-C using the iPhone SDK. He has been wanting to get into the mobile app world and has been eating, breathing and probably dreaming how to program his debut iPhone OS app. I myself have even delved into reading up on it to get my head around how the user interface objects function. Mobile is definitely a different and exciting breed when it comes to the user experience.

That evening, he contacted me asking me to throw together an icon and user interface that he can use. Since I had already been researching great apps on the iPhone to understand why the designer designed the UI elements he or she did, I was eager to jump on this. With in two hours I was able to provide him pixel perfect images for him to use in the SDK build.

I was able to do this because he provided me a screen shot of the base app utilizing the ordinary SDK elements the interface builder provides. From there, I took a quick sketched concept into PhotoShop and out put the graphic images.

Now that the iPhone 4 is out with Retina display, you have to provide two image file types to handle the different resolutions. This can get tricky when designing an interface as the pixels and space change.

That evening he submitted it for review to the App Store and four days later, it was approved and available for purchase.

Keys to a good app

Research the store and what is in it

The App Store is filled with tons of duplicate apps performing pretty much the same functions. If you have an idea for an app, try to find it in the store. If the concept is not in there, you are in luck. If it is, you must think harder of how yours could stand out from the rest. Remember, find a void and fill it.

Make the user interface relevant

No one will buy an app that has a horrible un-usable interface — even if it is free. It must be intuitive and responsive. With the mobile form factor, there is less space and less visual time to get your message across.

A good price point

Think about what your app is worth. If you think it’s worth your first born because of the amount of time put into it, then take a step back. Find any similar apps in the store and see what their price is. 99¢ is considered impulse buy money when it comes to apps. Free is also good, but if you want to get a little kick back, think about putting ads in the app or offering a way to upgrade to the bigger and better.

We aren’t done yet

This was just a taste of getting into the mobile world. I know Jerrod and I are not done with churning these out. We are already working on another simple app involving the Twitter timeline, so check back for whats new.

Also, if you are feeling generous or maybe think you would use the app, go ahead and throw down a buck and purchase AspectGadget.

Easy form validation with UJS and Rails 3

In a previous post, Rails 3, jQuery & UJS, I talked about how easy Rails has made it to do remote forms or even linking to remote actions. It covered how to set up the basics of a remote form to gather the information and let the user know something is being processed. The only question I didn’t cover is, what happens when a form returns a validation error? It’s as easy as making a generic js.erb file.

The setup

Assuming that you already have your UJS working to save the data when everything validates, let’s setup a way to handle when the data does not validate. I will just be covering the example of creation, but this can easily be applied to the update action as well.

The controller

def create
    @bar = Foo.new(params[:foo])
    respond_to do |format|
        if @bar.save
            format.html { } #index.html
            format.js  { } #create.js.erb
        else
            format.html { } #new.html
            format.js  {
            render :template=>"shared/ujs/form_errors.js.erb", 
            :locals=>{
            :item => @bar, 
            :notice => 'There were errors creating your bar.’
            }}
        end
    end
end

The important part of this is the handling of when it doesn’t save from a JavaScript call, it renders a js.erb file called form_errors.js.erb and passes appropriate hash. I have also created another local variable called notice that is used as a temporary flash.

The form_errors.js.erb file

Since rails form helpers handle creation of forms the same way no matter what the object is, to reduce code duplication, using the same error handling file goes a long way.

The following is what I typically put into my form error handling js.erb file:

// to hold the form element IDs
var errorIDs = new Array();

// to hold the error messages
var errorMessages = new Array();

Since Rails holds the messages and object ID’s in separate methods on the object it returns, it is easiest to store these in two separate arrays to call together later using their index.

The next part is crucial to finding and storing the DOM elements on the page that have validation errors. Using the way Rails form helpers place ID’s on the fields (type_object), you can store the exact DOM object into the array. This is of course if you haven’t broken Rails convention in naming your objects.

// Loop through all the error objects to story as JS objects
<% item.errors.each do |error_object| %>
    <% if params[:from_modal] %>
    errorIDs.push("#<%= item.type.downcase %>_<%= error_object %>");
    <% else %>
    errorIDs.push("#<%= item.type.downcase %>_<%= error_object %>");
    <% end %>
<% end %>

Next you want to loop through all the error messages and store them in the array.

// Loop through all the error messages to store for use
<% item.errors.full_messages.each do |msg| %>
    errorMessages.push("<%= msg %>");
<% end %>

Now to handle these freshly created arrays and display the errors:

// Attach the messages to the error form objects and show some visibles
$.each(errorIDs, function(index, value){
    $(errorIDs[index]).attr(“title”, errorMessages[index]).addClass(“error_field”);
});

This is a quick example of how to handle the form errors by giving the DOM element a title and adding a class to signify that it’s an error field. I like to use a jQuery plugin called QTip which you can place on the form fields. When the field is then selected, a tooltip pops up with the error message.

Other than that, styling up the form errors is all you have to do. Of course, there are many ways to validate a form before it is even sent to the server, but this is a great fall back method until you have that in place.

A/B test like a boss

When the word testing comes to mind, there are many definitions. From using RSpec or Cucumber which test the validity and robustness of the code base to visual testing frameworks which find hot spots on a website. The one testing definition that I am going to touch on is that of A/B testing.

So what is it?

Some of the major players in the web industry practice this on a regular basis. Amazon.com and Netflix are two that come to mind that regularly throw different layouts or calls to actions in front of a given user. They have gotten so good at it, as a regular user myself of both services, it is hard to tell that you are currently in a bucket.

In short sense, it’s the process of showing two different versions of a product and seeing which performs better. The performance is tracked by conversions, which can range anywhere from click-thrus to increased traffic to even a lower bounce rate. Whatever the measurement is, it is always good to have a handle on what will be the key factor in knowing which one wins.

A/B testing can go even deeper through use of multi-variant testing — that is doing a C, D, etc. version. The one thing with this is to know how the individual tests as a whole effect the outcome of the performance. For this blog entry, I am just going to cover a quick how-to guide on getting up and going with A/B testing.

Sounds great, where do I start?

Before you start changing up the layout of your application or website, it’s best to have a plan in place. This plan will be beneficial to getting everyone’s buy-in on how to mark which option wins. A good starting point is to create a decision tree of the testing process. After your plan is set, think about how you will know when to mark your test as complete. And of course, you will need a good testing framework to make all of this run.

Set guidelines

At Real Travel, I created a simple decision tree that outlined the steps in the process of creating a new hypothesis, testing it, gathering results and making a decision. This helped not only the team, but the CEO understand why we were choosing the option A or B. Creating a good visual representation of this that everyone can use for reference saves a lot of back and forth time.

Find your result set

Figure out how and when you will know if your test is complete. At Real Travel, our money making pages are our highest traffic pages so it made sense to test those pages. We would mark a test complete if one of the following was met:

1. Enough participants in the pool — about 1,000
2. A test runs for 24 hours
3. Our testing framework tells us that the results are statistically significant — this must always be met

Of course, we had run some tests that didn’t meet some of these requirements because our conversion rate was so low even though the 24 hour period expired or had enough participants. When this happens, we decided to fall back on the hypothesis instead of using the null hypothesis, knowing we would revisit this test at another time. That is why having a statistically significant result is a major factor in determining a winner.

Figure out your conversion trigger

When running an A/B test, in order for it to be successful, there has to be a measurement of a conversion. A conversion can be anything from a click of a button, increased traffic or even more signups.

Again, with Real Travel as an example, we make money when people click our check rates buttons so this was our conversion trigger. Testing different layouts, presentations, colors, etc. were all tracked through clicks on our check rates buttons. In many of our A/B tests we were able to create up to a 4x conversion rate.

Install a testing framework

There are many frameworks available to install based on the code base of your choosing. Since we develop in Ruby on Rails, we decided to implement ABingo because of its simplicity and quick stats. I say it is a simple install, but we did have to make a few changes to it to work with our development environment.

A few other frameworks for Ruby on Rails include:

• Vanity
• Google Analytics - this is a little more involved in setup

Last, but probably pretty important

To really make these tests work to your advantage, a key point to remember is to have an environment setup that allows you to continuously release — that is to push out your code to a live production at a whim.

My good friend Paul implemented this method at Real Travel through the use of Hudson and deploy scripts. Without this, we would not be able to turn around tests in 24 hours.

Testing can be fun

After all is setup, dream up some interesting A/B tests to run. You will be surprised at what information you find from running these tests. Like I mentioned, we were able to increase conversion rates on simple changes to UI. These might also put to rest the crazy ideas that your marketing team has when they say the want the logo bigger...

Rails 3, jQuery & UJS

The days of old JavaScript where writing events and handlers inline on the html DOM elements have finally passed. Rails 3 has caught up with this movement and no longer will there be source code filled with extremely verbose onclick handlers. Hopefully, if you are reading this, then you are long past this dark age method too, or maybe you just are looking to find out how Rails 3 handles the unobtrusive JavaScript (UJS) now. Either way, it took me a while to put together exactly what goes on, so I figured I would write it down.

Utilizing jQuery

I have dabbled in almost all the major players in the JavaScript library list. Starting out in MooTools and writing my first plugins, moving to Prototype — it was bundled with Rails so I figured why not, and porting over those plugins then finally landing on jQuery, of course porting over those plugins.

There are a few reasons I switched over to jQuery, and no I was not drinking the Kool-aid of joining the boat of the bigger players.

• The syntax made sense and was so much easier to write.
• It was faster at its traversing of the DOM compared to other libraries. I didn’t even try to use YUI, while it’s very hefty in what it does, it is extremely slow and seems to reek of code bloat.
• It’s continuously developed on as the community seems a lot stronger than that of Prototype’s.

Rails 3 gets jQuery-fied

For a while now, Rails has always been bundled with Prototype and Scriptaculous. Now, with the awesome rails generators, you can tell it to skip that:

rails new test-project -J # the -J skips Prototype builder

Now that Prototype isn’t in the project, you still need the jQuery drivers to interact with the UJS. To do so, it’s as easy as installing a gem from the jquery-ujs repo on github.

$ > gem 'jquery-rails', '>= 0.2.6'
$ > rails generate jquery:install # --ui if you want jQuery UI

You can find more about what this does, but in short, it creates a rails.js file, and all the latest jQuery library files, in your javascripts directory for you to include. This file includes all the drivers for the UJS methods that Rails utilizes. Now you can write your own custom JS (or not) to interact with the callbacks the AJAX methods create.

The new Rails way

As mentioned above, Rails used to include all JavaScript calls, methods and callbacks inline in the DOM. This was a big no-no as it bloated the source code, loaded as the page rendered and was hard to customize. Now Rails leaves all the JavaScript to you.

The following are examples for creating objects in the database. Of course, these can be written to handle anything, but these are the bare examples that are typically used with UJS.

The new, but old view helpers

Gone are the old helpers:

remote_form_for
link_to_remote

And replaced by normal helpers with a few extra HTML5 type parameters:

Remote forms

form_for(@foo, :remote => true)

The “remote” paramter makes it a UJS form.

Remote links

link_to(“My delete link”, “/delete/me“, data-method” => “delete”, “data-confirm” => “Are you sure?”)

The “data-“ params make it a UJS link.

So simple. These new parameters allow the rails.js file you included to recognize that there are remote forms or links on the page and handle accordingly.

The controller

No more RJS or old faux Prototype helpers. Now instead all you need to do in the controller is include the respond method to handle the xhr request.

def create
    @foo = Bar.new(params[:zook])
    respond_to do |format|
        if @foo.save
            format.js {} # this handles the xhr request
            format.html # for rendering regular html
        end
    end
end

The line for format.js handles the xhr request telling the app to render the view “create.js.erb.” So if you don’t already have the that file, create it now as the next step is to write some custom JavaScript.

The JavaScript

This is where the magic and customization comes in with the new Rails 3 UJS setup. Here you can write any custom Javascript to handle the callback methods with what the server returns.

Handling the callto

The rails.js file only contains the ability to perform on what to do when you throw AJAX methods to it such as the standard beforeSend, success, complete, or error. This way you can write any custom functions to interact with these callbacks. Here is a base structure of how to handle just that:

$(“#my_remote_form”)
    .bind("ajax:beforeSend", function(){
        // Things to do before sending
    })
    .bind(“ajax:complete”, function(){
        // Things to do after the ajax is sent
    })
    .bind(“ajax:success”, function(){
        // Things to do when it’s a successful call
    })
    .bind("ajax:beforeSend", function(){
        // Things to do for an error
    });

The beforeSend action is great for letting the user know that something is happening. This can be done by changing the value of the submit button or adding a nice AJAX spinner graphic.

Handling the server callback

So the object was successfully saved to the database, now let’s take the data returned and append it to the DOM with an animation signifier.

$(“#foo_list”).prepend(“<%=escape_javascript(render :partial=>’foo/bar_item’) %>");
$(“#foo_list”).effect(“bounce”, { times:3 }, 300);

That’s it!

So much simpler

I think the great thing about this new method is that there is no longer a reliance on knowing the RJS syntax. If you are already strong in writing jQuery syntax or just starting out, then this will become second nature. Removing the massive code from the DOM and extruding it into their own files makes debugging quicker and reduces complexity. This is just plain awesome, but that’s just my two cents.

Withstanding time

First rule of thumb when it comes to logo creation is to pick a typeface that holds up to the changes in design and tastes. A font choice can easily make or break the logo by portraying the wrong message or easily look out dated within the next couple of years. Of course a logo does not always need words to portray it’s branding, but when it is required, choose wisely.

Found still usable

The other day, I was poking around Virginia Tech’s School of the Visual Arts website to see what has been going on since I graduated from the program and I ran across their faculty-led design house for students.

FourDesign, which used to be called VDS4 when I was in the program, has a plethora of work that they’ve created. To my surprise, in their portfolio was a design for an arts celebration brochure at Virginia Tech every year. Back in 2004 I was the lead designer for all marketing material for this celebration, ArtsFusion in which I ended up creating the branding and logo for the entire event.

Unfortunately, the website I created back then has been left to decay based on what is left, but the logo is still standing. FourDesign continued to use the logo and elements in the latest mailing brochure. This was exciting to me because after six years, it is still being used and loved by the ArtsFusion committee.

At the time of creation of the logo, I was infatuated with Futura — I still like it for print work, but now that I do more designing for the web, I tend to lean on Helvetica more often than not. I felt Futura gave off the modern, forward thinking look that the ArtsFusion committee wanted to express. Mixing in a lighter semi-serif font for subtext combined well with the heavy glyphs of Futura.

Choose the font wisely

One of my design teachers said that a good designer should be able to design anything with one choice font for a span of multiple projects. This not only instills their ability to create and manipulate with the font in new ways, but makes them understand what works and doesn’t for its application. This is probably why I went through a good long stint of using Futura for lots of my projects.

If you are a designer, then surely you know the jokes behind Comic Sans; same could easily be laughable for creating a logo using Times. Starting from scratch to create a logo can be fun or trying, but ultimately enjoyable if you find the right font that speaks to the logo.

Safe fonts are typically those that have been around a long time, such as Futura or even Helvetica &mdash although, one could argue that Helvetica is starting to become over used. Try to stay away from the bad display fonts that are readily available for free to download. A good rule of thumb is if it’s found for free then it’s probably not worth using.

Most importantly, think about the audience. If your logo is for a company that caters to kids, then maybe, just maybe, Comic Sans could be the answer, but I highly urge against it.

Home is where the office is

For those not familiar with the term telecommuting, has Greek origins with tele meaning distant and commute to travel. Commuting from a distance. This is not your typical commute, but instead performed remotely to an office using communication tools such as telephone or in my case, a computer.

My experience as telecommuter

Graduating from Virginia Tech back in 2005, you may be asking if I have always been a telecommuter since joining the work force? The answer is a sort-of-no. I started out working for a graphic design / web development company in North Carolina, Imp Designs. I would drive an hour up to Raleigh everyday to work at a great office with great people. Unfortunately, about two months into the job, the first major gas price spike hit. Graciously, I asked my boss if it would be alright to work remotely from home two days of the week, which he allowed because he new my work ethic.

Skip a year later and my wife and I moved back home to Virginia. I started at an advertising agency and worked there for a month before I figured out it was not where I wanted to be. During this time, I was freelancing for a company called RecCenter, which at the time was trying to build a music social network to rival that of PureVolume. They ended up asking me to do a full time gig remotely and I quickly jumped on board at that opportunity. This was the start of my official telecommuting lifestyle.

Since then, I’ve gone from freelancing for a while, to working again for Imp Designs and now for the past two years worked for RealTravel — which just got purchased by UpTake, all of which I have done telecommuting.

How do I do it?

It takes discipline.

Working from home can definitely be a distraction. From the television to what can seem like more free time to taking care of household chores, any one of those factors can come into play. It took a while to get used to this, but eventually fell into a routine that works well.

With the introduction of video chat cameras and the screen share ability, I am able to keep in contact with my coworkers. Everyday at 1pm, we have a standup meeting in which I video conference into. If I need some help with some code or run into a bug, I can easily talk to my coworkers through instant messenger or screen share to pair program.

Some benefts

Working from home can have a plethora of benefits. I have found that a typical work day of 8+ hours can be squeezed into 5-6 hours. I say this because if you look at the typical office work day, it is riddled with distractions from office meetings about when to have office meetings to co-workers gossip. I also do not take the normal hour long lunch break, but instead usually grab a quick bite to eat.

Time. I have also found that it has given me a more leisurely morning. Currently my wife leaves the house around 6am to take her hour drive to work. We have two daughters under the age of two — I should take back the word “leisure” and replace it with “invigorating.” Telecommuting allows me to get them off to daycare within a reasonable time and then get back to clean up the house where the tornados came through.

Money. Telecommuting has also offered some money saving benefits. No longer do I drive the hour plus to work, but instead make the ten second walk to the home office. I also rarely eat out for lunch, except for my lunch fridays. Granted, being at home may use more energy, but that is incomparable to the amount of energy I used to drive back and forth to work.

Another thing I like about working from home is the environment. I am now free to move about the house and work wherever I want. If it is a nice day outside, I can be found on the back deck. Having the change of atmosphere makes the work environment more enjoyable instead of sitting at the same desk day in, day out.

Some draw backs

One of the biggest draw backs I have run across from doing telecommuting so long is the human interaction. Sometimes I definitely yearn for that face to face contact that came with the everyday office work. Luckily, my job now allows me to travel out to them once every quarter to get that much needed face time.

Living in a rural part of Virginia, internet is hard to come by. It took some back and forth with the only ISP in the area to get service to the house. Even now that we have internet, there are some days it just decides to quit. When this occurs, I find myself switching into nomad-mode and heading to the closest coffee shop or library.

Time again. With working from home, there isn’t a set work schedule, unless you make one. I have found a couple of times that I work later into the evening than typical. Sometimes working from home there are things out of your control in that push the start of your work day later. As long as I get my work done, I feel that this is not a problem.

Trust is another key factor that comes with the territory of telecommuting. The company you work for must have complete trust in your work ethic. The relationship between the company and yourself goes a long way if you can show them you are a diligent hard worker.

Is it right for you?

Telecommuting is not for everyone. It takes time to adjust to the different work schedule, the solo work environment and the distractions that come with being at home.

My wife, before she went back to working at her plant, was able to work from home for about ten months in a recruiting job. We were lucky to have this opportunity as at the time she was pregnant with our second daughter. She was hesitant to start telecommuting because she had never done it before and worried about not being in a physical office to have the discipline of working solo. She did it with flying colors and I now miss the daily lunch dates we had.

Another big part to telecommuting is buy-in from your company. Luckily the jobs I have had have been nothing but open arms to using telecommuting. This may partly be due to the field I am in, because my wife, as an HR Manager, needs to physically be around people to do her job; I myself just need a computer.

So with that said, telecommuting has been a blessing for my career. With what ever other endeavors come my way in the future, I know I will always love to entertain the idea of telecommuting.

Git reflog to the rescue

The other day, I was working on a feature for Real Travel using our current branching strategy in that each release we do is a separate branch. Not sure if it was a cause of lack of sleep from late hours pulled, but I accidentally deleted my local and remote copy of the branch before I merged it back into the master branch for release. After a quick state of shock and thoughts running through my head of losing hours of work, I calmed down and relied on my Git knowledge.

Reading your full commit history

There are two ways to read the commit history in git. The first way shows a list of details commits while the other shows the log in reference to the current HEAD.

// log of detailed commits by users
$> git log

// reference log compared to the current HEAD
$> git reflog

Using the reflog command, I was able to find out exactly where the last reference to my deleted branch was. An example output of the reflog might look like this:

c7f3d98 HEAD@{0}: commit: Merged in some code
f5716c8 HEAD@{1}: pull : Fast-forward
d93c27b HEAD@{2}: commit: Added some items to project
...

Now the reflog will not show exactly where the branch was deleted, but if you remember your last commit to that branch and have a detailed enough message, it should be easy to find and restore.

Restoring your branch is straight forward by checking out the HEAD you want to a new branch.

$> git checkout -b my_new_branch HEAD@{5}

You can also use the hash too to checkout the new branch.

$> git checkout -b my_new_branch d93c27b

Simple enough and now I can move on with actually merging the branch in before deletion.

To HAML or not to HAML

I have been developing in table-less HTML for the past eight years. I can say I have a pretty good grasp on its syntax, how it is handled by the browser, what it can and can’t do, and even starting to understand the current HTML5 spec as it is in transition of becoming adopted. That being said, I am always looking for helpful tools to not only make writing HTML quicker, but strengthen my knowledge of the syntax and structure.

Enter in HAML

I first came across HAML about two and half years ago working as a contract developer for Outside.in. They were using it interspersed in their app to create their HTML markup. At the time it was very foreign to myself, but I muddled through it and then ended up moving on to other projects with out using it again until now.

So what is HAML?

HAML is a markup language designed to parse finalized output to HTML in Ruby on Rails environments. It has roots in YAML in that it bases the output on tab indentions to separate its blocks. Its main principal is that “markup should be beautiful.” I would take that a step further in saying that markup should be beautiful and quick to write. HAML, to me, does just that.

Let’s take a quick look at some basic HAML markup compared to ERB:

HAML

#my_page_block
    %h1 Hello!
    %p Welcome to my page and have a look around!
    %p.date= print_date
    = link_to “Read more!”, “http://chrissloan.info”

ERB

<div id=“my_page”block”>
    <h1>Hello!</h1>
    <p>Welcome to my page and have a look around!</p>
    <p class=“date”><%= print_date %></p>
    <%= link_to “Read more!”, “http://chrissloan.info” %>
</div>

Notice how much less markup is actually needed to create the HAML file. No more do you have to worry about unclosed tags; HAML does all that for you. Of course there is a lot more verbose syntax that comes with HAML, but it is very simplistic in nature.

So what is all the hubbub?

As I stated in the intro, there seem to be two sides to using or not using HAML in projects. After combing through many a blog, I have come to find the same cases for arguments crop up. This is in by no means trying to persuade whether or not to use it in your next project, but more of an understanding to why I started to use it again.

Issue: Causes div-itis (creation of unneeded markup)

Using it actually makes me think about my markup and structure before I write it. I have found that using it and its visual hierarchal structure allows me to capitalize on the cascading ability of CSS. Also, with the adoption of HTML5 to the mix, allows for div-itis to go out the window.

Issue: Comes with a learning curve

I do agree that there is a learning curve, but that is true to anything newly learned. When I first started having to use it, I found it odd and eventually abandoned it as I didn’t need it anymore. Now, with a few projects under my belt using HAML, it almost comes second nature. Switching back and forth from HTML to HAML seems a little cumbersome because HAML is much cleaner and less code writing.

Now I know someone will clamor about how HAML is not HTML markup and thus completely pointless to knowing HTML or loss there of. As I mentioned above, I have been working with HTML for a while and am very comfortable writing in it. I am not losing that ability by using HAML; just gaining a tool to excel my code writing process. It’s like riding a bike.

Issue: Team members must know how to use it and adopt it to their work flow

One of the hardest things adopting to HAML is to get the rest of your team to use it. If you are the only one on the project that touches view code, then no sweat off your back. If your team consists of other designer/developers, then yes, you need to present a very convincing case. Hopefully they will see the pros outweigh the cons.

I actually work with some other developers on side projects and they were very open to using it. One even told me it’s a lot easier to read.

Issue: Not typical HTML markup and syntax, but produces the same thing

True, but this can be said about just any language/syntax that is used to accomplish an end goal. PHP ends up doing the same thing as Ruby, but in a different manner. It’s a matter of choice for the developer and what they are comfortable using. If it gets the problem solved and in a timely manner and everyone is happy, I say use it.

So where do you stand?

Like I mentioned, I am not trying to persuade the developers that stumble upon this post to use it or not. This post was more for me to justify my means of adopting it and to really figure out the root cause of all the two sidedness to using HAML.

Feel free to leave how you feel about it or even if you use it in your projects how it has changed your work flow. If you don’t know about it, I challenge you to find out more and possibly try it in your next project.

A Human Milestone

The other night, I got a sense of nostalgia as I sat in front of my computer pouring over a few hours of unedited video that my wife and I had taken of our daughter since her birth. In two days, she will officially no longer be a baby, but a rambunctious one year old.

Seeing all this video—lots of which I can still vibrantly remember just happening, I couldn’t help but think back to how fast this year has gone and how much having a child and becoming a parent has changed my outlook on life and what joy she brings to my wife and I.

Changing times, easier memories

Technology certainly has changed the way we capture these memories. Gone are the days, at least to us, when the old point and shoot would be filled up with twenty-four frames to then be developed by strangers, hoping that at least a few you take will turn out and be worthy for framing. Now we click the shutter release without a care filling up a digital card that can hold upwards of hundreds of photos knowing very well that in an instant, we can delete a photo we don’t like and take another to fill its place. We now fill up a hard drive of pictures instead of a shoebox.

My parents recently lent us an old photo album that they had put together while I was growing up. It covers from my birth up till I was about two years old. The photos have an aged quality to them, browning with a touch of color fade giving them a more homely feel. Now present day, our photo albums have now turned the way to Facebook or social networking sites. Not only are they kept away from damaging light that causes the browning, but with a single click, you can share these photos with anyone.

About six months ago, I finally upgraded my cell phone to where actually taking a photo with it was worth while. I find myself having it readily available to take that in-the-moment shot of our daughter to instantly send out to my Twitter feed, which ultimately ends up on my Facebook wall post. No longer is there the awkward moment when you have company over and ask, “Do you want to see our photo album of our daughter?” Instead, in it’s place, we force feed you to see the album even if you don’t want to.

Looking back, hesitating to look forward

I always knew I wanted be a father. As I mentioned, our daughter gives us so much joy to see her grow and develop. My wife has tried so hard to get her to walk by her first birthday; she is almost there. As much as I want to see her walk, I now understand why everyone says you never want your child to grow up. I want to be able to take in every milestone that my daughter takes and treasure it forever.

As fast as this year has flown by, I can only imagine what the next years to come will be like. I will yearn for those times when all she wants to do is lay in my arms while we watch television and she falls asleep. The next thing I know, I will be walking her down the isle to start a family of her own. To me she will always be my baby girl no matter how old she gets. Luckily, I will get to enjoy another year of these precious moments with our next daughter, Addisyn — Adee for short, who is due to arrive at the end of July.

So Haidyn, my baby girl — which you will always be to me, happy first birthday!

Finally published, well sort of…

A couple of months ago, I received an email from Patrick McNeil of The Web Designer’s Idea Book inquiring if I wanted a chance to be included in his next book. I could tell it was a semi-generated email that he sent out to probably thousands of other sites, but I figured why not, it couldn’t hurt. So I proceeded to his website, filled out the necessary waiver form to be included for a chance to be a published designer with fingers crossed.

I am not exactly sure how he found my website, but I usually submit sites I design to some of the CSS galleries for hopeful inclusions in their listing. One of my posts, featured on csselite showcases just that. Either way, included or not, I was just happy to have one designer express his interest in my website and design capabilities.

After filling out the form, hitting submit, I had no idea if this would progress any further. Come to find out, it did. A couple of weeks ago, Patrick sent out another mass email stating his book was done and for the designers he contacted to email him to see if we were included. I did just that and got a response a few days later — I am sure there was a influx of emails from other designers. To my surprise, his response was that my site was included.

Now I am not overly excited about being in the book — don’t take me wrong, it does feel good to have something put in print, but I did some research on his volume one book he printed. Apparently, the book is split into different categories with each category consisting of a one page write up explaining a design technique and then following pages of screen shots of websites portraying this aformentioned technique. There aren’t any interviews with the designers on their methodologies and I do not believe there are any in this book.

I do believe his book will definitely be useful to designers to gain inspiration for their next design. It will also allow for us to see what else is out there and what is considered good web design and what is in.

Something else that I just ran across with this book, my site was chosen to be one of the many on the cover. Click on the image and zoom in to the top right corner. Too bad that he chose to use the one part of my site that my wife doesn't care for too much, the footer, but that's another story.

Book has been pre-ordered, but have to wait until November. While waiting, maybe you should pick up a copy.

iPad, maybe there is a use case

The iPad hubaloo has somewhat died down and it has finally sank in to what it is and isn't or even could possibly be. Twitter trending topics on the subject matter have also slowed to a mere crawl. Finally, the feminine product jokes can finally be flushed out of our fourteen year old minds and we can focus on what iPad truly is.

I have to admit, when Apple first announced the product, I was quite disappointed. In the back of my mind leading up to the keynote, I was half expecting, yet knowing it wouldn't happen, a touch screen computer that runs my Mac OS X. The name aside, I was wanting a revolutionary product that I could take with me and do my CSS/HTML work, create a Rails project, or even do some light design work. Granted this did not happen, I am actually falling into the category now where I could see how the true iPad will be very beneficial.

Reading on it? Probably not so much...

Just recently, I purchased a Kindle because of all the rave reviews I had heard from friends and reading online about it. Growing up, I used to read all the time, but since graduating from college five years ago, joining the work force, and starting a family, reading fell by the wayside. The Kindle has allowed me to jump back into reading and makes it very enjoyable to wind down a day. The e-ink screen is amazing and is very easy on the eyes, especially since there isn't a backlit screen. This is where I think the iPad may fall short.

I work on and look at a computer at least ten to twelve hours a day. The glaring LED screens of my MacBook Pro and my 24in iMac don't bother me too much — although I do have to say, I have gotten a few migraines over the years from staring at them. Working so long on a computer and then wanting to wind down the day with a good read, I don't think I would want to stare at another backlit screen. My eyes are bad as it is and more eye strain just doesn't seem fun.

I do have to say the aesthetics of the built in reader Apple provides is very intuitive and fluid. It makes it seem like you are actually reading a book, minus the tactile ability. Animated turning of pages is neat, but could be overkill as a simple one touch of a button on the Kindle is all I need.

So who could use it?

I am not completely on the boat just yet into jumping in line and purchasing one the day it goes on sale. My parents on the other hand, possibly.

My father is a recent convert to Mac from the ill worlds of the PC. Almost every time I talk to him now, he has to tell me how much he loves his Mac I gave him. He still can't believe how much more intuitive it is over the PC and it just works.

A few days ago, he called me up excited because he just watched the iPad demo reel on the Apple website. He had a few questions about the wifi vs. 3G capability which I gladly helped him understand, including the obscurity of a file system it provides. I had to interject and ask why he was so inquisitive about it. Apparently, he thinks it would be very ideal for my mother. After he explained how she could use it, I definitely could see it working to her favor with how she likes to play her games, check email, browse the web, etc. while sitting on the couch.

Basically, the iPad is less for the geeks and more for the average user who doesn't care how it works, but instead just wants it to work.

Is it for me?

Like I mentioned, I am not too sure I will get one right away. There is also the factor of my wife who thinks I have way too many Mac gadgets to begin with. At last count, I think we have a total of five Mac computers in this house — granted two of them are probably paper weights since the batteries are dead.

I definitely can see it as a shareable device that sits on the coffee table that either my wife or I could pick up to check email, browse the web, or update our Facebooks — I still have yet to get her onto Twitter. I think I will stick to my Kindle for actual reading though.

One dream app I would love to see is if a developer in someway could create a way to control the lights, TV, and temperature of the house straight from the iPad.

I can dream, right?

Note to self: Use git clean sparingly

The other day, I had some merge conflicts to resolve on a project with another team member. Prior to this, I had been developing on the working branch and had created new files. Being lazy, I never added those untracked files in my commit previously, so I jumped right in and did a pull.

Because of the resulting merge conflicts, git loves to leave around .orig files on my system. If you are a neat freak like I am, I hate having extraneous useless files in my file system. Remember, I still had untracked files in my working directory that git had no idea about yet. I decided to continue on and remove the .orig files so git would stop showing them to me.

git clean -f
# I use the -f parameter for a failsafe requireForce
# is set to true in my git config

Unbeknownst to me, doing this wiped out all my new files that I had created. Panicking, as there were quite a few new files, I tried to figure out how to get these back. Doing a reset of the head to a certain hash didn't help one bit. Looking into the reflog had no luck either. Luckily, my previous commit before the pull had some trace of these new files and I decided to popup gitX — an awesome GUI for git those that can't stand terminal output, me included.

Quickly going back through my history, I found the files. Not completely sure how they were still there, but I found them and was able to get them back to a working point.

Now I know that using git clean will also wipe out your untracked-unstashed files.

Semantic xHTML Forms

Working with Ruby on Rails for the past four years has been great. Switching over from the PHP world was pretty easy, yet I do do some coding in that area from time to time. One great thing about Rails is its simplicity when it comes to creating a quick scaffold dump. In simple terms, it takes a database table and outputs a form element for each column into HTML. This is a quick way to visually start inputing data, but if you look at the source code, it is not very useful for designers.

The typical output for a scaffold dump is as follows:

<form>
<label for="email">Email</label><br/>
<input name="email" type="text" />
...
</form>

Pretty simple right? Now put on your CSS and designer hat. What do you think you could do with that output? Probably not a whole lot. That br tag is just horrendous.

This form is semi-accessible too, but we could make it even more accessible and also give more elements to work with for the CSS.

Enter the definition list

For all the forms I create and/or need to style I resort to using a definition list. By definition it fits perfectly with the use of forms. Typical forms come with two elements per column: a label and a corresponding entry field. The same thing comes with a definition list: a term (the label) and a definition (the entry field). Semantically this produces a double benefit — a more structured form for accessibility and just a few more elements to access through use of CSS.

<form>
<dl>
<dt><label for="email">Email</label></dt>
<dd><input name="email" type="text" /></dd>
...
</dl>
</form>

Granted we are introducing more markup, but I believe that is perfectly fine. The form now is ready for better CSS styling and defaults well when CSS is turned off or used by screen readers.

Top 6 annoying types of Facebook status posters

Facebook. It's the social network that blew away other competition such as MySpace or even the then early-to-the-party-but-forgot-the-gift Friendster. It utilizes it's simplicity and clean design to connect with old friends or strangers just to add to your ever growing ego enhancing friend list.

Don't get me wrong, I am an avid user of Facebook myself, I just find its place in this world and the way people interact and/or use it very interesting. This is why I have compiled a short list of what might be considered annoying categories of status postings.

6. The "I had a typo, so let me post the same status again" status

You all have done it; relied on the smart spelling of a T9 enabled phone to get your status message out. Maybe you have a smartphone with an actual QWERTY keyboard, but you still misspell words. Either way, you don't want people to know you can't spell, so you post the same status again with the corrections. Proofreading is key; now to figure out how to delete the first post.

5. The "Let's stir up some controversy with my status" status

Does your status message have a twenty comment deep thread? Maybe even fifteen? With all the discussion around one simple sentence, there has to be some sort of polarized controversy. Of course you have a right to an opinion, but so do all of your friends. Facebook is not a debate platform.

4. The "Lyricist" status

Everyone listens to music; I get that. I love music myself. Why do you feel the need to post the lyrics to a song that you are currently listening to? No matter how you construe the lyrics to fit to what is currently going on in your personal life, I really don't care too much about how Lil' Wayne's rap ballads fulfill this.

3. The "My kid is cuter than your kid" status

I have fallen into this category a few times since my daughter was born. Now that I have a HTC Hero, I can definitely say I do more often than not. Posting multiple photos of your kid eating, sleeping, or just being cute gives you props to be in this category. Status updates about how you just changed one of the stinkiest diapers count too.

2. The "I think my life rocks and so should you" status

You all have seen them. Those that post status messages every five minutes of exactly what they are doing at that very given second in time. Going to see the reunited Spice Girls on their world, name dropping who you saw in the grocery store, what you are eating for dinner or even telling everyone that you just woke up.

I actually fell into this category seven months ago when my daughter was born. I made it a personal goal to tweet status updates — I have my twitter account tied to my Facebook status, letting family and friends know how my wife's labor was going. When I told her I was going to do a play by play, she looked at me with disdain and told me to focus on her.

And my number one annoying category is...

1. The "ALL CAPSTER" status

Why do you need to YELL AT ME about what you currently are doing? Is your caps lock key broken because your cat decided to rip it off and use it as a toy? Not only does it make it hard to read — don't get me started on a typography lesson, but I really don't care that YOU ARE BRUSHING YOUR TEETH really loudly. Tone it down.

Have more categories that your friends could fall in? Post them in the comments and I will add it to the list.

Sanity saved by Google

No, this post is not about how I drank the Kool-aid that Google hands out on a regular basis to all those that like the taste of development tools. This post is about how easy it was to finally sync and manage all my email addresses and contacts, including getting my wife in sync with our busy family calendar.

Finally.

Let me first start off by stating, I am finally away from the cell phones of old and have entered the age of the smartphone. No, I did not get an iPhone — even though I would have definitely opted for it, but that is a completely different story in how AT&T service is virtually non-existent where we live.

Instead, I got rid of my long standing contract with US Cellular and after strong convincing from my sister to go with Sprint. I am now the proud owner of an HTC Hero. My main reason for going with this phone was because of the Google Android OS. Since I was completely out of luck getting the iPhone and I didn't want to pay the exuberant prices that come with a Verizon plan, I knew Sprint was my next choice to get on the boat with Android.

Linking other email accounts

With Gmail, it is a breeze to link your other email addresses into a main hub (your Gmail email) by using their POP3 importer. Of course you will need a Gmail account to do this. You are allowed up to five addresses for import, luckily I only needed to use three of those.

Masking as other emails in Gmail

Now if you are one to not care where your email comes from when you send to recipients, you probably will not need to change the Send as options. If you want to be professional and not let everyone know that you are using Google as the master hub for your email, then you will need to setup the email masking.

The steps you took to get to this point can vary, but if you already linked your accounts via POP3 importer, then those email addresses should show up under the Send mail as section.

Key points to this section to keep things as professional as possible is to make sure that Reply from the same address the message was sent to is selected and you edit the settings to make sure that you send mail through the specified SMTP server of your other email address. This setting relies on the fact that you know your email outgoing server settings.

If you do not know your outgoing server options and just want Gmail to send on behalf of, you can select the "Send through Gmail" option.

Masking as other emails in your mail app

This is all good through Gmail, but what if you still want to check and send your email on your computer through your resident mail application? You can set up your Gmail account on the app just like normal, but to make sure you can send as your other email addresses through masking, just chain your other email addresses together separated by commas in addition to your Gmail address. For example:

Email Address: me@gmail.com, me@aol.com, me@yahoo.com, etc.  

Google push (and pull)

I have been running this setup for about a week now, but one thing that kept bothering me was how random Google was checking my other email accounts. Sometimes it would be an hour for an email to come in, others it would be instant. This can get annoying when you are on a deadline and waiting to hear about changes needed.

After a quick search on Google, I found a simple workaround until the Google push system actually gets its act together.

If you have access to your email settings on your server, all you need to do is setup forwarding from your host to your Gmail account and whalla, emails instantly. Those of you that understand forwarding may be asking, "Wait a minute, doesn't forwarding also leave a copy of my email on my other server so I will have duplicate emails?" True, it does, but if you setup the POP3 importer to not leave messages on your other server, Gmail is smart enough to ignore the duplicate emails and delete the messages from your other server.

Labels as organization

As mentioned before, I am an organization neat freak. I'll be the first to tell you that I hate email to begin with and can't stand a cluttered inbox. I am very notorious for deleting emails. Thankfully, I do not have to worry about that anymore because of the ample space Gmail gives you and the use of it's label system.

I can setup labels that end up acting like folders on my mail app and through IMAP, they will always be synced. It actually took me a while to get my head around this as I had never used power categorization since I always just deleted emails after a given time. Now, I can stash emails for future or send emails directly to a folder so that my inbox is always clean with what is important.

Setting up filters to do all this is a breeze. With IMAP setup, you don't have to worry about doing your own custom filters directly in your mail app.

Contacts and calendars across the board

Since I was already on track with getting Google to manage my emails, I figured I would continue onto having it manage my contacts and calendars. I already have a .Me account, so I was a little apprehensive of doing this. I still use it to sync my bookmarks and the hosting space, but we shall see how long I keep it.

Only the contacts I want

Getting the contacts synced up is pretty simple, but with my phone, I didn't want the plethora of email addresses I don't contact, IM contact names without real names, etc. on my phone. The initial import actually put everything in my address book on my phone. I had to stop this real quick as scrolling through to get to one contact was a bear.

Gmail has two categories of contacts, well actually, one is a sub product of the other. The parent category of All Contacts is what I did not want on my phone. The child category called My Contacts is what is actually synced onto the phone so a quick edit to that list to whittle down to a more manageable list was done. This also was a great process because it allowed me to delete and edit those contacts that were a little hairy or un-needed.

Family calendars

With the addition of our daughter seven months ago, life has gotten pretty crazy. Our schedules seem to lead us to having things to do every weekend or doctor appointments during the week. My wife is one to write things down on a paper calendar, but I lean towards using the computer and phone. With the addition of getting a smartphone, I was able to get my wife one also.

The Google calendar system is great in that I can share a calendar directly with her Gmail address. With Apple Calendar, I could not do this very easily without purchasing a 3rd party app. Now she can edit and view the calendar as she pleases — I just have to get her used to not doing so on paper.

The only drawback I have found with the Google calendar system is the strange grouping that shows up in the Apple Calendar app. The grouping of delegates seems very convoluted and having a separate calendar in the list for just Google is kind of overboard. Not sure if this is an Apple Calendar or Google thing, but would be nice to condense into one without all the twirlies.

Week one down

So after using this system for about a week now, I find it working out very well. Gmail is pretty smart to sort out spam quickly and keep it out of view to not distract. It has definitely allowed me to feel more organized when it comes to having everything in sync, especially when I am on the go.

Git remote branching made easy

The branching strategy using Git we have adopted at Real Travel allows us to share code branches back and forth, while maintaining a clean master. This also allows for us to develop code that we know will not be released until a later date. A brief overview of it was covered in this post. The tough part was remembering the commands to get local copies of our code out to other team members, but luckily there is a great gem plugin to do just that.

Shortened and less effort

To create a branch on the remote from a local branch that resides on your computer, no less than four lines of terminal commands are needed:

git push [remote_server] master:refs/heads/my_branch
git fetch [remote_server]
git branch --track my_branch [remote_server]/my_branch
git checkout my_branch

Granted this is only needed to be done once per remote branch creation, memorizing the correct steps can be a burden. Git already has a few extra steps to wrap your head around when it comes to adding, committing and pushing, so having an all-in-one command makes it that much better.

A few great developers have created an awesome gem that takes those four commands and compresses them into one simple line.

grb publish branch_name [origin_server]

This gem is called gitremotebranch and can be found here on RubyForge.

The above example relates to an already created branch on your local, but not currently found on the remote. If you are starting out knowing you will eventually want to share the code and want to create a new remote and local branch to be tracked at the same time, a quick create can be done:

grb create branch_name [origin_server]

There are other commands for delete, track and renaming branches which can be found on the page. When you run each command, it also outputs the steps to aid in memorization for the possibility of future use without the gem.

Installing the gem

All documentation can be found on the RubyForge page, but here is the gem install command.

To install the gem:

sudo gem install git_remote_branch --include-dependencies

Enjoy!

A tried and true practice

First starting out in the design world coming directly out of school, I was constantly testing the waters on what the quickest, but most efficient way was to getting a project from initial idea to completion. The program I graduated from didn't specifically tell me a certain direction to take when planning out a project, but instead just wanted a completed project. The task of figuring out how to layout a website for best usability, for example, was ultimately up to me to convey my ideas to a client. How to go about this was always key to keeping a project from over running a deadline.

I toyed around with starting out on paper doing simple mockups, jumping into Illustrator for a little more robust mockup, or even diving straight into photoshop where it was almost a completed design. Being an artist, I still love to doodle on a piece of paper, but overtime have found that I am a lot more proficient when I utilize the computer to help create a mock up. Unfortunately, Illustrator doesn't translate well into the web world for me as I do not look at it like a layout program more so an art board. Photoshop is ultimately where I end up to create the final designs for production, but for initial layout, it's very cumbersome. This is where doing very simple black and white wireframes are key.

Word of caution

One word of caution I will say is that the rest of the team, be not the designers, should be able to have a decent visual imagination on how the final product might look. I say this because the wireframes I typically rely on to produce are very crude. They consist of boxes outlining content sections, simple textual headings, and multiple note tags explaining what could be in certain areas. To me, these rudimentary wireframes are more so for layout of content focusing less of exactly what this content will end up being. Hopefully at this point, the team has a visual concept of how a page would be laid out.

A step further

Sometimes these crude wireframes have gotten to a point where the layout and "content" will be, but some more visual cues are needed. As a designer, I have found that it is best practice to not introduce a product that could be considered final. This is to protect you from shooting yourself in the foot to a point where there is no return. Also, considering your client or the rest of your team, this will prevent them from being caught up in the visuals to a point where all the do is focus on the color or how big the logo should be.

Just this past week, Real Travel] had the opportunity to sit down with a past product manager of Netflix. I won't get into too much detail on why we met with her, but I will say that good new things are in store for us at Real Travel. She went on to tell us how her past endeavors and where she is currently at CoolIris have gone about product development and their best practices. In her talk, she mentioned creating Lo-Fi mockups which they would use for usability testing to groups of people.

Lo-Fi mockups are similar to wireframes, yet they go one step further. They are are completely black and white, use little to no imagery — use of logo, symbolic areas for photos, simple icons, etc. They allow for more messaging and actual content to be designed in. When realizing this, it reminded me of my wireframes I do on a regular basis for product development. Occasionally I use icons and symbolic imagery with minor messaging, but only to a point where I need to then jump into Photoshop to complete the design for more visual representation.

In the past at Real Travel, we had relied on the internal team to make the decisions for content and design. Now, we are moving into a realm where we will need to be doing usability testing to groups of users to make sure they get what we are trying to do. Using Lo-Fi mockup mentality will definitely go a long way in this next step so that we do not blind the importance of the test group with pretty colors on a site that could be considered a final product.

My Tool of the trade

As mentioned above, I toyed around using tools from paper and pencil to Illustrator to finally Photoshop. As comfortable as I am using these tools for other types of workflow, I have not found a better tool than the use of Omigraffle. I find it very simple create nice wireframes on the fly and there is a big developer community who have created free stencils for use in the app that coincide with wireframe making. To find a good selection of free stencils, please be sure to check out Graffletopia.com. Another resource for a great selection of stencils for wireframes comes from Konigi.

Of course there are other apps out there that do this same thing that do not cost as much as Omnigraffle, but I found that this application best suited my workflow needs.

Other apps of recognition

Omnigraffle is great for simple wireframes, but what if you had multiple designers on the team with their own opinions of how things are laid out. Of course you can share the graffle file between each other, but that can get cumbersome making revisions and seeing what is current. If this is the case, I have found a few online web app options.

Hotgloo

[Hotgloo](http://hotgloo.comis a pretty good tool for this purpose. It allows you to share multiple projects across a team and allows the ability to set roles on a team such as publishers, editors, etc. to control who can change what.

Seeing that I am more comfortable doing my wireframes on Omnigraffle, I found doing this web based was a little cumbersome —there were many more clicks to get the outcome I needed. Another draw back that could be considered is that is it Flash based utilizing Flex technology. If you are one to shy away from using Flash, this is probably not a consideration.

Mockingbird

Mockingbird currently in Beta, very similar to Hotgloo in functionality and options, but this is the cool cousin of Hotgloo. I say this because it uses Cappuccino to render and control everything on the art board so it is Flash free. Only draw back to this is if your team is still in the dark ages of Internet Explorer, it's about time to upgrade to something better.

Let the ideas flow

These wireframes are key to getting your project out and running. Everyone has his or her own ideas on how a web project or even a print brochure should be laid out. Why waste the time to put blood, sweat and tears into a design that is ultimately ripped apart by the client. Start out small, but always have final visual ideas in the back of your head.

Git tag it like it’s hott

At Real Travel we practice SCRUM which allows us to release a new code base to the live server roughly every two weeks. Since moving to Git we now are able to track our releases in a more methodical manner using the git tag command.

The idea behind tagging

Take this scenario: your development team has just released to the live server what they thought was a bug free code base, but your QA team raises a red flag on a bug they just found. After they had released, the development team jumped onto the next project, building on top of the current code. Luckily, the development team tagged the release and are able to "go back in time" and find that bug without affecting their current work.

Tagging is like a sticky note in a text book that you can easily turn to for future reference. Whether it is to fix a bug or maybe even branch off a known stable release, it's like the DeLorean for git.

The tagging solution

The following is an example how the development team above was able to fix their bug and release it with out any problems. Please note: the following code is examples on how to tag your local branches. Tagging directly on a remote branch is covered later below.

After the team released, they tagged the master branch:

$ > git tag release_3 master

Note: a tag name cannot contain spaces, ~ ^ : ? * [ ] or ASCII

Doing a git tag command without any parameters will list out all the current tags found:

$ > git tag
$ > release_1
       release_2
       release_3
       ...

The team now wants to make a separate branch of the tagged code so that they can fix the bug. Naming conventions is totally up to your team, but the more descriptive on what is going on the better.

$ > git checkout -b from-release_3 release_3

What this does is creates a new branch ( -b ) from the tagged branch ( release3 ) and renames the branch ( from-release3 ) and checks it out. The team would then proceed like normal doing their typical workflow of development, adding, commit, etc.

Once they are certain the bug is fixed, they then merge the branch back into the current master, push to the remote and tag the new release:

$ > git tag release_3.1 master
$ > git branch -D from-release_3

The second option is to delete the bug branch as it typically is not needed. You can also delete the first tag, but I recommend to keep it around until you know for certain your code works properly.

Remote tagging

As mentioned above, this strategy dealt around tagging local branches. In order for your entire team to have access to the tag, the tag must reside also on the remote. To make sure your local tag goes to the remote, you need to push its reference:

$ > git push origin :tag_name
$ > git push origin --tags # only use this if you want all local tags on the remote

Deleting a remote tag is simple too; just delete the tag from your local repository:

$ > git tag -d tag_name
$ > git push origin :refs/tags/tag_name # --tags will not delete tags on the remote

Keep your code (and team) sane

I know when emergency code fixes happen, things get pretty hectic. Luckily with the right tools in Git, hopefully they will become less. I am sure there are other strategies when it comes to releasing code, but this method is very straight forward and has helped out the Real Travel team a few times.

“Git” your branching straight

A couple of years ago, a buddy of mine, Jerrod Blavos, turned me onto using Subversion (svn) for our projects that we would work on together. At the time, I was eating up any new technology I came across, wanting to learn more and try to become somewhat knowledgeable about the subject. Svn was a great tool to use, I still use it on some projects, but for some reason I never got the urge to want to dive into it. This may partly be due to the developers I worked with took the harder tasks of branching and merging out of my hands which allowed me to focus on my code knowing whole heatedly, my code was backed up.

That being said, about a year and a half ago, Jerrod told me about Git and I asked what it was and he said something cooler than svn. At the time we were deep in using svn and never really researched how Git could help us as a team. That was until I started developing my own JavaScript tool sets and hosting them on Github. Going by only the short tutorials found on Github to push and pull my code, I could already tell how much simpler and easier to understand Git was over svn.

Complexities overcome

As I mentioned, any developer I worked with on projects usually took the reins and created branches and fixed any merge conflicts that arose, leaving me out of the process. About a couple of months ago, I mentioned to Paul Hepworth at Real Travel that I did not think svn was working well for our workflow.

Like most development cycles, we had two branches in svn: trunk and development. This is where the complexity came in. Some of us would develop on development and while others would develop on trunk. When it came time to merge our code, Paul would take on the daunting task to get everything synced up. Just about every time, Paul would run into merge conflicts and sometimes we would end up with a regression of our code base. To add to the brokenness of this workflow, half the time we would dump one of the branches that we merged out of and then create/merge back into the fresh branch. We had to try something different so we could put the ownership of the merges and branching into every developer on the team hands. Git was going to allow us to do just that.

When I first brought up the subject about using Git to the Real Travel team, I wanted to make sure that I could be an valuable resource. I wanted to learn the ins and outs of Git (still learning as I write) so that the team could come to me with questions and I could answer them. This would also help alleviate Paul as the only go to person with the answers. So I purchased a book and started creating, branching, committing, pushing, pulling, etc until I understood the new workflow process we were about to take on.

Drawn out, yet 100 times better workflow

For those not familiar with Git commands, I suggest going here to get a brief overview to understand what I will be talking about.

Git goes one step further than svn and offers a "local" repository directly on your working machine. I know some may clamor that Git and svn can not be compared because of their mechanics, but truly this is one of the greatest things that comes with Git. Not to mention that it also only tracks changes within a file, not the whole file itself.

Having this local repository allows for you to do all your branching, commits and merging directly on your machine without affecting the remote. Using this to your advantage is key when dealing with your own branching strategy.

The strategy

The rule of thumb when doing a branching strategy is never work directly on the remote branch on your local. When ever you have a certain task on a project, always create a local branch off of the remote branch. This will aid in keeping merge conflicts out of the master code. Another good rule of thumb is to agree on what remote branch everyone should be working on. An example workflow below, assuming you are developing on the "master" branch:

$ > git checkout -b foo_from_master
...Do some coding...
$ > git commit -a -m "Some message here"
... Do some more coding...
$ > git commit  -a --amend

Now we have a local branch that has strayed from the head of the master branch. It is important to note in your branch what you branched from, hence "frommaster" in the branch name. We now want to update our new local branch with the remote, because we know there is new code we need to use from it.

$ > git checkout master
$ > git pull
$ > git checkout foo_from_master
$ > git rebase master
...Resolve any conflicts...

Rebase is the key term here. What that does is fast-forward and merge your local branch with the new code from the remote master you pulled while preserving all your history in both branches. Of course you can do a "git fetch" too, but that doesn't actually merge the code or history, just makes it "available."

Once all conflicts have been resolved and you are done with your coding on your local branch, it is time to merge it into your master. If you did this workflow properly, you should not have any trouble merging code upstream.

$ > git checkout master
$ > git pull # just in case there might be new code, then you would need to repeat steps above
$ > git merge foo_from_master
$ > git push

If all goes well, then you have successfully managed your own branches and merging without having to look to help from another developer.

Of course there are plenty of other great things that can be done with Git, including creating remote branches directly from local branches and tagging releases, but that shall be saved for a later post.

Srsly? Pay for followers?

Checking my Twitter profile this morning, I happened to click on one of the links in the sidebar that showcase all the great sister websites that have cropped up from the explosion of the twitter-sphere. The link took me to a site called WeFollow which this blog post is not about. This post is more directed at the advertisement that was front and center on the site. I was dumbfounded from what I saw:

Pay for followers. Has it really come to this? I can't help but compare this to joining a fraternity or sorority (I will probably get flames from stating this, which I honestly don't care). I say this because the joke when back at school was these societies were pay for your friends — yes, I never bought into that hype. I know the basis around them is brotherhood/sisterhood and keeping connections later in life, but I could never grasp why someone would pay to be in a social circle. Technically, if you were social and outgoing enough yourself, you could easily gain those connections and friendships without paying a dime.

This is why I find it very interesting that there is a service out there now to pay for followers of your twitter account. Crazy and dumb. It's like making yourself popular without being popular to begin with to basically pull the wool over the eyes of potential followers. Granted the web can produce anything imaginable, but this seems to have taken it pretty far. I wonder who the bright minds behind this snake oil scheme is, maybe those fraternity brothers who are trying to keep on their legacy, but jump on the band wagon of Twitter? I'll say it again, more power to them, but come on, that is ludicrous.

Am I the only one that sees the bad side of this?

A fresh look on travel.

Note: In a previous blog entry, I talked about step one of reworking the Real Travel UI. Here is the completion entry.

We are looking for someone to take ownership of the Real Travel website UI. That is what Paul Hepworth said to me when he initially interviewed me for the front-end UI position back in July 2008. I can now say that I have officially taken ownership of the front-end skin of RealTravel.com.

You've come a long way

Real Travel has made leaps and bounds over the past couple of months. First, we officially moved over to using Ruby on Rails in January, freeing ourselves from the scalability and development restraints that come with using .Net. Second, after the switch, Paul created a method to tie into the back end of the Rails system to cache our abundant pages to decrease our page load time immensely. Finally, the front-end interface has been completely revamped to bring a fresh new look to the well performing site — it currently is considered a top forty Rails site and it has only been running on Rails for only four months.

Of course we are continuing to iterate on many items for the site, including cleaning up our data system to make it more efficient, but we have hit major milestones in a very short time. We partly owe this to the implementation of SCRUM, an agile form of project management and of course the great pigs and chickens.

So fresh and so clean clean

The old or "retro" skin as we call it in the office, served its purpose well, but as a designer I am always looking for ways to improve it. The heavy dark blue background seemed to compress the content of the site making for a more cluttered look. Overall, the colors were just too heavy. I mentioned this to Ken Leeder, the CEO of Real Travel, but before so, created a mockup of what the site could look like to help strengthen my point. I wanted to take the site in a whole new direction, to lighten it up and bring it more to life than current. I find it very helpful to bring a mockup into a meeting where you are trying to convince the boss to let you take on a monumental task, luckily it worked and Ken gave me the go ahead instilling full confidence.

Beforehand, I browsed around competitor websites to see what they were doing and how they were conveying the plethora of information that these sites infuse. I was bound and determined to surpass any of these that I stumbled across in not only design, but also usability. So many of them that I found were nothing but jumbled masses of content and advertisement. Of course Real Travel uses advertisement, but luckily we are allowed to make it look like content, which is a win win situation for both users and Real Travel. My goal was now set.

Oh the colors

Choosing colors for some of my designs can be haphazard at times, but end up being for a purpose. Jenica, the managing editor at Real Travel, asked me how I came up with the color scheme and I told her I find a base color and roll with it to create it's compliments. The main Real Travel colors were a gold and dark blue and were very prevalent on the retro skin being very heavy colored. I wanted to go in the opposite direction and introduce lighter feeling colors, but at times using the bright colors for the items we wanted to draw attention to, hence the eye candy implementation. Thus a citrus color scheme was created to give it a very fresh and clean feel. Each time I look at the site now, it gives a sense of refreshment from the skin that used to hold its place.

Lightening up the background color solved two things right off the bat. It allowed for the site to once again not look so heavy and two not visually compress the content. Sometimes having the eye drawn straight to the middle of the page is good, but when there is so much content on a page, reading can be somewhat of a drag.

Owning the UI

Needless to say, before Real Travel pulled me aboard, they had gone through many designers and freelancers that put in their own markup building on the previous. As a code junky, sometimes jumping into someone else's code base can produce a big learning curve and messy outcome. Over the years working with CSS and xHTML, I have honed in my code to be reusable and lean and really wanted to introduce it into Real Travel's UI. Being able to re-skin the site allowed for this to happen as I ripped out most of the old markup and started afresh, building on top of the Blueprint CSS structure.

We also are utilizing the jQuery javascript library. The site has been through three different libraries, starting with YUI (very bloated in my opinion) then onto Prototype (good library, but losing developer steam) and finally jQuery. Let me just say, I have never been happier to be able to use jQuery. Granted it doesn't come prepackaged with Rails to produce the helpers, but there are great plugins such as jRails. I personally have used and created plugins now for MooTools, Prototype and jQuery. To me, jQuery just makes sense.

What is next?

The web is ever evolving and so is Real Travel. We have plenty more ideas up our sleeves for what we will roll out next. Now that the UI is there, with exceptions of a few tweaks here and there and some layout changes to be made, I will be focusing some of my energy on to more Rails programming within the site. I am very stoked to be working on the next project that will involve intertwining Twitter.

Trying on a hat for a while

I have been working indirectly with Ruby on Rails for the past four years. I say indirectly as I have focused more on the UI side (views and sometimes the controllers) when it comes to working on projects. Typically, I work with another Rails developer who handles all the heavy lifting in the models and controllers. This time, I figured it was time to create a simple project on my own to feed the urge to program beyond my comfort level.

The spark

Talking with Paul Hepworth, the lead developer at Real Travel, instilled a challenge in myself. Normal workflow at Real Travel when it comes to Ruby development is I work on the views while Paul gets things setup in the models and controllers. Rarely I move past the view work as he is typically quicker on setting up the glue. Eventually, I want to gain more confidence in that area and be able to help out more on his end.

One of the projects in the queue for Real Travel is to integrate Twitter into our blogging system. On top of that, with the limitation of 140 characters per tweet, we would need our own short url service to keep our link weight instead of outsourcing to sites such as bit.ly. This is where I figured I would take charge and see if I could develop something that Real Travel could end up using.

Reverse engineering, sort of

After looking around at the services that currently offer URL shortening, I figured I would look to Bit.ly for inspiration and as a model on how its accomplished.

These services that have popped up all over the place due to the explosion of Twitter into the mainstream are nothing more than a basic look up table disguised by a semi-bookmarking system that redirect you to a URL you provide. Taking a long URL and condensing it depending on the number of URL's previously shortened to about 1-8 characters after the name of the web server. For example:

http://chrissloan.info/blog/sprites_a_not_just_a_css_fantasy/
to
http://bitly.com/OVK02

So how does that long url get to be shortened? I knew it would be a basic incremented counter based off of the previous entered URL, but how would I get that character string? Not knowing a whole lot of Ruby methods, I figured I would start researching and initially came across the Ruby string method of

.succ

This seemed to do exactly what I wanted by incrementing whatever string I throw to it, except there was one problem. If I gave it a numerical string, such as "1" it would always increment numerically. If I gave it an alphabetical string, such as "a" it would always increment alphabetically. This was a problem because ultimately, it would limit the number of characters I would be allowed before the string got very long. I was looking for a solution that was alphanumeric — 0-9, a-z, A-Z. This would give me enough combinations of characters to keep the url's short, 62x62x62...

I took a step back and knew that any database already increments the key id field, so there wasn't any need to create my own special field. I could work off of this key id by converting it to Base62.

You are probably asking Base62? Don't you mean, Base64? Well, sort of. Base64 is probably the best method and a true conversion number, but the last two numbers, no one can agree on. Ruby's Base64 conversion throws in "=" signs for place holders and that didn't look right and could pose problems down the line in URL handling. A quick Google search provided me with a base62 gem. I quickly installed it and it was exactly what I was looking for.

Programming hunger satisfied

After getting over the hump of figuring out how to shorten our URLs, in about 3 days I was able to create a simple Rails app including user authentication and tying it to Twitter. It felt good to be challenged and ultimately create a small simple app that will set the base for Real Travel's Twitter integration.

Interested in trying out the app yourself and maybe building off it? Head on over to GitHub and download shortweet or clone it git://github.com/chrissloan/shortweet.git

Please be warned that it is very basic and surely can be cleaned up some. I didn't spend any time on the UI, it is complete scaffold output. It is what it is.

Sprites, not just a CSS fantasy

Most designs of sites found on the web verge on the graphical overload to grab the attention of the viewer — if you can accomplish it, do it. I am one myself to do this from time to time in my designs as I draw from inspiration from many of the CSS gallery sites. I am not saying this is a bad thing, but from the technical side, a heavy graphic looking site can definitely slow down page load time. Luckily there are a few tricks of the trade that make it possible to combat this through using pure CSS.

Sprites to the rescue

No, this is not your typical mythical creature found in most fantasy books, but instead, it is a single graphic file that is used as a CSS background image, which can be applied to elements found throughout a given site. I say one graphic file, but it really is one composed of many images. This image is then in turn referenced in your stylesheet using background positioning. A quick example:

.sprite{ background: url(sprite.png) no-repeat 0 0; }
.sprite.image1 { background-position: 0 -50px}
.sprite.image2 { background-position: 0 -70px}
.sprite.image2 { background-position: 0 -100px}

With this basic example, we are just moving the image in space — granted we must assume that the container object of the image has a set height and width, otherwise the other images in the sprite image file could possibly show.

One file != slower page load

You are probably saying to yourself, "Hold on, does that not make the file size bigger by using one image?" In most cases it could possibly, but if you look at it from the side of the browser and page load time, it actually makes things faster! The way a browser accepts data is by serialization. This means that it can only process one item of information at a time before it gets to the next. If you use FireFox, download and install the YSlow add-on to see this in action.

As an example, a given web page may have 2-3 stylesheets, 2-3 javascript files, multiple images, some 3rd party statistical code and of course the rendering of the page. Each one of those files has to be processed and then rendered by the browser. Putting those images into on file, not only removes those extra calls, but nine times out of ten, the end user has their cache mechanism setup on their browser so that file doesn't need called on the next page refresh or call.

Heavy lifting done for you

So, hopefully you are thinking this is a great method for us designers and want to try it out yourself. If so, great! Now crack open Photoshop, place your images in a specific grid, write down the x and y coordinates from the top left corner of each, create your stylesheet... wait, there has to be an easier way. You know what, there is! Luckily, the guys over at Website-Performance have created a handy app that will generate your sprites for you. Check out the CSS Sprite Generator.

Just collect all your images into one folder, zip them up, and fill out the form found on the page. It will spit out the CSS for you and allow you to download the new sprite file it created. If you are really adventurous and know a little bit about your system, you can download the app and install it on your machine. All you need is a graphics library, such as GD or ImageMagick, and to be running a PHP server.

Looking for some icon sprites? You can generate your own from the sprite generator or you can find the Silk Sprites handy that utilize the awesome FamFamFam icon set.

Experiment till your hearts content

Now not all images you use will be able to fit into a single file or be created as a sprite. There are some draw backs with this method, but with experimentation some can be overcome. For example, having elements that need repeating graphics probably should all be grouped together in one sprite or similar sized objects in one sprite. You may also want actual embedded images in the page and not to be used in the stylesheet. If that's the case, then by all means, don't use them in sprite format.

Have fun and enjoy taking CSS to another level.

What is “this”?

Just recently, Real Travel started to run into an issue with Internet Explorer alone when it came to Javascript calls. Unfortunately, this issue had been going on for about a week hidden to us with the exception that we were losing some important revenue from our "Check Rates Boxes" (CPCs) found through out the site. A little diagnosis and it turns out that IE users were not getting click throughs from our forms to go to our partners. Luckily, good ol' IE threw a nice cryptic Javascript error — sarcasm, but I had seen this issue before and went right to the source.

A common programming method

There is a big movement to making Javascript unobtrusive which I am completely for. This makes pages degrade nicely when end users have Javascript turned off, which is usually a very low occurrence unless you are a uber-geek and want to miss out on the cool features a site may have to offer.

When Real Travel noticed the revenue loss issue, we were still currently converting over from the Prototype library to using jQuery, which is a huge advocate of unobtrusive js. Some of our forms were still using the "onSubmit" method to submit data and come to find out this was part of the problem.

To run some our Classes we created for the CPCs, we were using this on our form tag:

onSubmit="new TravelService(this).go()"

Now this worked in every other browser out there besides Internet Explorer. The this keyword was throwing IE completely off giving us the error that "This object can not perform this method..." Now this is a very commonly used programming method to signify that we want the target (the form) to be the actuator or owner of the event. So in our TravelService Class we would run methods on elements contained in the form by way of the target.

Unfortunately, IE is not very intuitive and didn't understand that we were telling it to use the form object as the target. Apparently the way IE thinks, which is completely not what you would expect, this refers to the window object. In other words, IE thought we were telling it to run the methods on all the elements in the window, not the form. This threw up the red flag for IE as it could not find some of the objects we were requesting because they were in other parts of the DOM.

The solution

Like I mentioned, the current code was not unobtrusive, but in the process to be converted, so we had to make a quick patch to the live site to regain our clicks. The quick way to do this was to pass in the id of the form element to the Class.

onSubmit="new TravelService($('form_id')).go()"

This allowed IE to understand that we were wanting the target to be the form not the window.

Kind of a bummer that IE had to be the only one to not understand this very simple idea, but when it's about 90% of the traffic to the site, you have to make sacrifices.

The wonders of jQuery

Internet Explorer. Those two words are the dread of all web designers who have ever had to throw in CSS hacks to make their pages look correct or even to try and debug erroneous javascript errors. As much as I dread IE myself, unfortunately, with the amount of traffic that comes to Real Travel, we still have to support it as it is still the winner, if you can call it that, of browsers used. Because of testing for IE, we found out that, even though it already has a slower javascript engine to begin with, some of our pages were loading slower than normal in IE. That is when the research started to find out why this was happening.

The Selector System

On RT, we use a lot of class selectors to gather all the correct DOM nodes that we want to run and build javascript items on. As one would figure, this is one of the slowest methods when it comes to javascript because of the frequency that these could show up on a given page. Googling why IE had such a slow render of some of our pages using heavy javascript, I stumbled across Slick Speed. We ran this on all the browsers and noticed that IE performed poorly when using Prototype, which RT was currently using, only second worst to that of YUI. Doing so also showed us that besides Dojo, jQuery had very fast response time. That's when we decided to drop kick Prototype to the curb and convert over everything to jQuery.

The new library

When comparing javascript libraries, they all seem to boil down to accomplish the same thing, but in different manners. I started out using MooTools because of the excellent plugins that were packaged with the core system and also dabbled in Prototype because of the Rails projects I worked on. I have used each in creating my own set of control suites as I wanted things to be dead simple and couldn't find ones that fit my needs at the time. Please see MooKissControls for MooTools and Oyoyo for Prototype.

jQuery was a dream come true. Not only was it packaged lighter than that of Prototype or MooTools — mostly due to the core not being bundled with multiple plugins, but the syntax seemed so much more intuitive.

$('.item > li')
    .find($(a).attr("href"))
    .css({color:#ff0000})
    .click(
        function(){
            $(this).hide()
    });

Look at that chaining ability! jQuery even lets you go back to the initial selector on the chain by adding a end() and then continuing on the chain.

Of course, being new to jQuery, there was a bit of a learning curve to how the syntax worked and the best practices. I purchased a book, jQuery in Action, read it over a weekend, and started converting my control suites. I was able to compress most of my functions by about 60% using the jQuery library. It's that more intuitive and better reuse of code!

jQuery and Real Travel

Like I mentioned above, we needed to convert over all the functions currently using Prototype to jQuery. Before I came on board at Real Travel, the old site was actually using the YUI library. I find that library to have a bad case of code bloat and quickly made the suggestion to moving to Prototype since we were converting to Rails. Now, another conversion was in need to jQuery.

We quickly diagnosed what was on our site and what plugins we needed to be fully compatible with what we currently had. Because Rails has RJS built in, we needed new Rails helpers to be compatible with jQuery. Thus, we installed the jRails plugin and worked like a charm.

Since we were midstream of conversion, Prototype still needed to be in the app to function. Luckily, jQuery plays nice with other libraries by offering an awesome function that needs to be included just once in the head.

jQuery.noConflict()

Now, all the $ symbols as selector functions used by Prototype would be skipped over by jQuery and it would only look for the jQuery selector method. This saved so much time in development and the headaches of javascript errors.

A breath of fresh air

Now that we have finally converted over the old library and added the new plugins to coincide with what we had, I am so glad we went this route. The client side of the site, once we launch the new code, seems so much faster with rendering time. Not only does the site seem faster, but I feel like the chains have dropped off with the ability to develop new things. jQuery, even though its been around for a while, seems to be coming along strongly with more development backing than Prototype over the past year or so.

If you are looking to dive into a new javascript library, I definitely suggest giving jQuery a spin.

Featured on CSSelite

I submitted the site a while ago after contacting the developer over there about an issue with their submission form and my email address, who graciously asked for the URLs I was submitting. I continually checked the site day after day to see if it would end up on the site to no avail.

Then, this morning as I did my usual routine of checking email, reading up on the geek blogs I commonly peruse, seeing what the daily deal is on Woot.com and then finally ending up at my Google Analytics page. To my amazement, my traffic for yesterday jumped nearly four times than typical traffic.

I decided to dig into the stats and see where that jump came from. Low and behold, there was an extra 61 new visits from CSSelite. Now I know that is nothing compared to many other sites out there, but it's always nice to have that new traffic looking over my artwork.

Thanks CSSelite!

An intentional lens flaw.

I've had Adobe Lightroom installed on my iMac for the past two years . Since I never really had the urge to get back into digital photography, it pretty much sat there with the occasional one off quick photo touchups that I didn't want to do in Photoshop. I had bought a book before on how to use it, breezed through it, but never really applied what I learned. That mindset has totally changed now.

Since getting bit by the photography bug again after my purchase of a Speedlite Flash — something I have been missing from my equipment for sometime, I have been using Lightroom non-stop to enhance and change the photos I take. Granted, setting the correct ISO, aperture, and shutter speed should give me the best exposure every time, I find that my art side comes out when I manipulate the photos beyond what the camera initially gives me.

One feature that I have fallen in love with using in Lightroom is a photographer's nightmare when it comes to their lenses. I am talking about lens vignetting. Vignette happens in a lens when light falls more on the center of the image and less so on the outer edges. This creates a more underexposed look to the corners of the frame.

Lightroom allows you to change the vignette of the image you are developing, either in the positive (lighter corners) or negative (darker corners) direction. It's more for use to help correct images if this occurs in the photograph, but I like to intentionally add a negative vignette to some of my photos. This purposely adds the dark rim around the edge of the photo.

The reason I do this is because I feel that it brings the eye into to the photo. It also tends to add a sense of dramatics to the scene that otherwise would not be there. Now, like I mentioned, some photographers would hate to have their lens do this to their photograph, luckily my Canon lenses do not do this, I just choose to give the impression that they do. I also find that adding a higher saturation of color — if my final product is to be color, adds an even more range of emotion to the photograph.

A facelift for travel. Part I.

Note: Since this segment of my career has been pretty involved over the past half a year, I am going to have to cut these entries into two parts. There is so much I want to say about what has been going on, I feel that it's only best to make them somewhat like chapters and also to make it more enjoyable to read. By no means am I wanting to write a novel.

A blast from the somewhat past

Back in July of last year, I was contacted out of the blue by a Ruby on Rails head hunter company called mirRoR Placement. I had actually dealt with them four months prior with another project, but the work didn't pan out so I was back to sole freelance and contract work for about a month until my old boss at IMP Designs asked if I wanted to come back. That is why I said, this contact was out of the blue, as I wasn't expecting to hear from miRoR again, but was definitely glad I did.

Anyways, Brian Mariani at mirRoR told me about an opportunity with a startup company called Real Travel out of Los Altos, CA. They were looking for someone to head their front-end development and believed I was the prime candidate. I was torn between wanting to find out more and also what IMP Designs might think. After being wisked out to California with Kristen and interviewing with them and they liking me and I liking them, I was sold on the job. So I decided to take the plunge and join up with Real Travel.

Let ties be untied

So, Real Travel. Real Travel was started up back in 2005 probably more so 2004 with the pilot program, all riding on the base of ASP.net. Actually, let me step back and explain real quick what Real Travel is and does.

Real Travel can be considered a research tool website. Want to go traveling? Great. You probably are asking yourself, where do I start or where should I go? That is where Real Travel comes in. It is a site full of useful travel information for over 27,000 destinations world wide with a very devout blogger community to aid in your travel planning.

Back to the code base. Paul Hepworth initially developed the pilot site in PHP as a proof of concept for Ken Leeder, Real Travel CEO. After the concept being proven, long story short, people were hired and a decision was made to make the site into what it currently is (as of this writing, we are actually launching the new site) by way of ASP.net.

Now I am not very verbose in .net myself. I had dabbled in it some back in college when my coding skills were budding, but quickly turned over to using PHP as I felt that was a more flexible language. I have heard many horror stories from others on how hairy a .net site can turn out and how unforgiving it can be when you want to expound on features.

About a year and a half ago, Paul noticed the need to change over the code base of Real Travel. Features had been requested and he knew at the state the site was in at the time, they could never have been done. He had been trying to hint to others that something needed to happen fast, otherwise, Real Travel would be stagnant and not be able to grow like everyone hoped. In comes Ruby on Rails. For those not familiar with RoR, I suggest taking a gander at their website to find out more. Basically, it's a web application framework that is based off of the Ruby programming language that allows for better scaling of applications which is exactly what Real Travel needed.

Thus, Paul started his research and started figuring out a way to start the conversion process.

Brand new site if new_language?

So the process started. The Real Travel team started the task of generating the new framework and also taking on a new project management tool called SCRUM. Both of these tools would help aid in getting their project accomplished.

During this process, the look of the site was in flux. The .net pages were skinnier in width than the Rails pages, the headings sometimes didn't match, the navigation seemed difficult to follow, but the team to their best ability tried to keep everything together so the site and traffic would still flow. Over the course of the conversion process, Real Travel enlisted some outside design help to bring the site together, but ultimately, they saw a need for a full-time front-end developer to take ownership of the look, feel and functionality of the site.

That is when they contacted mirRoR who eventually contacted me.

...to be continued

Yes, that is my signature.

The other day, my wife and I made a trip to Walmart to do some grocery shopping. Granted the closest current Walmart is about 20 minutes away — I say “current” because if our town ever gets their water situation figured out, we too will have one eventually, just like every other city in this nation. Needless to say, we rarely go there because of how crowded the parking lot is, so we typically go to our local Kroger even though Walmart usually has lower prices.

Anyways, I digress from the reason I am writing this post. After gathering all the food we needed for the week, just like everyone else, we made our way to the checkout lines. In typical Walmart fashion, we wait there with the crowd as it slowly moves forward for our turn.

The cashier rings everything up and I swipe my credit card after it politely asking if the store was clean. Don’t ask my wife as she would have another opinion on how they keep their bathrooms. Let’s just say we avoid those at all costs. So I ignore the message and swipe away. It processes and then asks me for my signature. I scrawl in my signature as best as I can on the touch screen — who doesn’t have a hard time of creating a nice signature on those things, and move my stylus to the bottom right corner and hit the button.

Now here is the kicker, I am immediately taken back to the screen asking for my signature again. I stop to think, uh, did it not like my chicken scratch? I look down at where I pressed the button and to my amazement, it says “Cancel.” Now don’t get me wrong, if I would have read the button to begin with, I would have probably noticed the “Accept” button is on the left side. My gripe is, who the hell would put a “Cancel” button in the exact area as a person living in a left to right society and is very comfortable and used to an “Accept” button in the bottom right?

From using these machines ever since I got my first credit card at age of 18, the button has ALWAYS been in the lower right corner. According to usability laws, motion goes from left to right in a zig zag pattern top to bottom. Now you may be saying, if that’s true, then the “Accept” button was in the correct spot, but I beg to differ on this situation. Try it for yourself. After you finish your signature, where does your hand naturally end up? My point exactly. Sometimes the rules are broken to aid in the ease of use especially when motions are done.

Needless to say, I was just taken back how it asked me to redo my signature, even though in my mind I thought I was done. Maybe the people who engineered these machines should have taken the time to study their demographic.

Font love

I am probably going to sound like a fan-boy jumping on the band wagon from writing this post, but I have to say I don't really care. For the past year or so, I have been making sure that all my website designs are set in Helvetica, or even Helvetica Neue when possible. I went through phases of using Trebuchet, which is a decent font, but honestly, too me it never looked professional. I will have to say I have tried to stay away from using Arial, as I feel that it is the "poor man's" Helvetica.

The challenge

When I was in school, during one of the lectures my professor was giving — I believe it was one of the print design classes, he mentioned another student who had graduated a few years ago. He went on saying how this student tried for a year to use nothing but one font out of his library to compose his projects. I do not remember the exact font, but apparently he was not only successful in doing so, but also gained a greater knowledge for utilizing his font of choice. I wanted to take on that challenge, but at the time was not ready or knew how to do so since it was early in my design career.

If you are a designer and are like me, I am sure you have a ton of fonts in your library that you didn't know existed or not sure how or why you would ever apply them to a design. To this date, I currently have over 3,500 individual font files on my machine. They are from past projects I had worked on, system fonts and of course the free fonts that I have downloaded over the years at the time being a naive designer. I can honestly say, I probably have only touched or worked with less than five percent of those said font files.

This is why I have decided to give up on those plethora of fonts and stick to my guns with Helvetica.

The font

Helvetica is one of the most widely known and used fonts found in today's society. It was originally designed in 1957 by Max Miedinger, a Swiss typeface designer. For more information, visit its Wikipedia page. If you have looked at any signage for modern store fronts or even rode the New York subway system as of late, you have had the pleasure of being in front of Helvetica.

About a year ago, I added and viewed the movie Helvetica from my Netflix. I had heard rave reviews about this documentary and needed to check it out myself. Not only was it enlightening, but it also sparked in me to start using it more. From those that know me and have seen my design work, my work can be classified as very modern and professional. Helvetica seemed to fit right in.

Browsers and font definition

Just recently, the Safari — the default browser for Mac OS and also available for Windows, had been updated to v.3 which included many enhancements, especially to their CSS 3 standards. Now, if you are running Safari 3, as a developer, I can specify fonts found on a system that are not considered standard. Most machines include Helvetica as a default font, but I have started to define my sheets to include Helvetica Neue Light, ultimately defaulting to Helvetica, then Arial, sans-serif. If you are one of the lucky ones to have Helvetica Neue Light installed and running Safari 3, you will be able to see the font on this blog; otherwise you are just out of luck.

I chose to define Helvetica Neue as I believe, not that I don't think regular Helvetica is good for web, it has a nicer line height and better default letter spacing. The light version is just for an added bonus.

Now, I can only hope that other modern browsers such as Firefox will adopt this method of CSS 3 that Safari has. Unfortunately, I am not keeping my fingers crossed for Internet Explorer. That browser is so far behind on everything, even with the new IE8 slated to come out sometime this year. I'll probably end up entering a post about that browser too.

Basically, that is why I am classifying myself as a Helvetica fan-boy. Take it as you will, but I have to say, Helvetica has definitely brought me great inspiration for my designs.

Quick, down and dirty layout

Since I started using CSS, I have been trying to refine my skills and creating a base set of styles that I would apply to every site I created. Basically they would reset the whole page, give me some basic clearing and floating classes and then of course some very generic structure elements for header, footers and sometimes columns. I've even gone through the motions of splitting up the sheets into groups of styles that resided each in a predetermined file, which in time I have strayed from because this hurts optimization. Needless to say, I have been itching for a good solid layout structure where in that all the heavy lifting was done for me. In comes Blueprint.

Semantic schmantics

Now I am sure there are many people out there, probably most of the heavy CSS supporters, that are saying Blueprint is in by no means semantic, which is part of the premises behind CSS. This is where I have to agree and disagree to a degree. Yes, the class names for the grid structure of Blueprint are very arbitrary. Take in a code sample below:

.span-3  { width: 110px; }

Span-3? What does that mean? Well, to Blueprint, that means for the "column" you are defining on the page to span three columns. A three column width can be any set size and a page can be any number of columns fit into a set width. Currently, Blueprint is based on a 24-grid layout in a 950px wide area. The great developers at kematzy have developed an ingenious way to build your own custom grid based off of Blueprint. It can be found at http://kematzy.com/blueprint-generator/. Currently it only does the grid file, you will still need the other files from Blueprint if you choose to use them.

Now I agree that Blueprint can be very arbitrary when it comes to their grid layout, but remember I also disagree when people clamor about it being so. As code artists and designers, we each have our own artistic freedom on how to code the actual xHTML page. I don't mind putting in an id parameter on a div to help solidify a meaning or even putting in a comment here and there. To me, saving me time on a project is a much better cost to benefit ratio than to worry about semantics. Including the id or comments are just as beneficial as a specific class name.

But wait, there is more!

Speaking of other files, Blueprint does come with a few extras. I only dabble with the grid, reset and typography files myself, but there is also a form set. Of course, I have tailored all these files to suit my needs, but they have definitely saved me time in defining the same styles over and over again. There are also some great Internet Explorer hacks for those of you that have to deal with conforming your design to a browser that is behind in standards. I can't count how many times I have had to write my own just so it would render in one of the most hated browsers in the design community. Luckily, Blueprint takes care of all that.

Take it as you will

You can take this post with a grain of salt. Either you will see the benefits of using Blueprint or you will shove it to the side and keep making your own base structure. Trust me, once you've tried it once, I am sure you won't want to write your own column structure again.

Interaction with Facebook UI

As a web designer, I find it very interesting how the end user interacts with a web application. From simple management sites such as Backpack or Basecamp by 37 Signals to the feature rich sites like that of many social networking websites. I mention social networking websites as I made a very astute observation as my wife tonight interacted with Facebook.

My wife, who I will say is very computer savvy, but does not spend as much time browsing the distant corners of the web as I do, had logged into Facebook for the first time in over two and half years. As a side story, I mentioned to her that one of her friends who is a photographer was offering a deal through her group for her studio and looking for maternity models. Seeing how we are having a daughter soon, this would be a great opportunity to get pictures done.

A Facebook user myself, I log into it everyday just to check up on what my friends and family are up to. As many have noticed, and rose up in disagreement, Facebook has changed drastically just recently - I personally think it’s great, aside from. It has gone to not only a wider layout, but items such as friends lists and messaging has changed - some for the good and some for the bad. Don’t get me started on the way the viral applications have become abundant throughout the site. I find myself constantly clicking the ignore button. I digress.

Back to my observation of my wife. Since she hadn’t logged into Facebook in over two years, there was a plethora of friend and application requests. Watching her interact with the site for the first time in a long time was interesting. I have found Facebook offers four different quick ways in the main navigation to get to your “profile” which is displayed differently depending on which one is clicked. She asked me multiple times how to get back to her profile as she didn’t understand what way was best. I have noticed that clicking the Facebook logo and the “home” link takes you to the same page, but looking closer, the URL has a variable set depending on what is clicked. I can only assume that the Facebook engineers and product owners use this for statistical reference to see what is clicked the most. My bet is the logo as it is the top most left item on the site. Studies have shown that anchored items that are not only recognizable, but visual are always easier to click than that of text. Why else does Apple put their logo at the very top left of their OS desktop? We are a left to right society in the western world.

After watching my wife for a while, I noticed something. She used the site in a completely different manner than I did. This was not a shocker as we are all individuals and each interact with an object to what we feel comfortable. In the book “Designing the Obvious” by Robert Hoekman, Jr. (great read for all UI freaks) he mentions that an end user gets into a comfortable state of using an application. After figuring out an application, they stick to what they know and rarely venture out to other items of a site. I myself have found this to be true with my interaction of Facebook. I use it for certain things, but once in a while, if one of those dreaded applications intrigue me enough, I venture out from my comfort zone. Watching my wife find her comfort zone on Facebook was definitely interesting.

Needless to say, my wife spent about an hour and half just browsing around the site and catching up with old friends from her high school. I lost count of how many times she exclaimed, “Awww, I miss them…”