Cache issue when upgrading the twitter-bootstrap-gem

There was an issue I ran into after upgrading the twitter-bootstrap-gem. When running the application in development mode, Rails would still serve up the old Twitter Bootstrap stylesheets.  This was because the old stylesheets were still stuck in the {Rails_Root}/tmp/cache directory. Deleting  the cache directory solved this problem. I do not know why the cache files were not updated, but hopefully this quick solution will help someone else out.

Ruby on Rails Client Side Validation with Validation Helpers and Twitter Bootstrap

[Edit: March 3, 2013 – The script I have below to get client side validations working with Twitter Bootstrap is no longer need with a recent version of the client_side_validations-simple_form gem. The following gem configuration should work just fine (later versions should be fine too):

gem ‘simple_form’, ‘2.0.4’
gem ‘client_side_validations’, ‘3.2.1’
gem ‘client_side_validations-simple_form’, ‘2.0.1’

Be sure to preserver the order. You’ll also need to add “//= require rails.validations.simple_form” right after “//= require rails.validations” in your appication.js file. See gem’s github page for more info. Thanks to Chris Beck for the heads up on this. – Darren  Smith]

I’ve been keeping an eye for a good client side validation gem that works with Twitter Bootstrap and allows you to use Rail’s model validation helpers. While I haven’t found a gem that combines those things, I have found a solution. You’ll need Twitter Bootstrap 2, SimpleForm 2.0, and Client Side Validations 3.2.0.beta.3. The versions are important. It is possible that this solution will work with different versions, but the versions stated have been tested. I’ll assume you already have Twitter Bootstrap installed or at least know how it to. If not, please visit or install via a gem which you can find here. Next, add the following two lines to your gem file and run bundle install.

gem 'client_side_validations', '3.2.0.beta.3', :git => ''
gem 'simple_form', '2.0'

You’ll now need to run generator commands for both gems:

Simple Form (the bootstrap option refers to Twitter Bootstrap)

rails generate simple_form:install --bootstrap

Client Side Validations

rails g client_side_validations:install

Next you’ll want to add validations script to the application.js file so that it can be loaded. Do this before the //= require_tree . entry.

//= require rails.validations

Now you’ll need to add a special script to get Client Side Validations to work with Twitter Bootstrap. I got this script from some comments on an issue of Client Side Validations on Github. You can add this script to your javascripts folder and name it whatever you like. The script does use jQuery, so that’ll be required to use the script as-is. For different application.js setups, just make sure that this script will get executed after rails.validations.

Now you should be all set up to start creating forms using SimpleForm, Twitter Bootstrap, and Client Side Validations. When creating a form you need to pass in :validate => true to the simple_form_helper.

<%= simple_form_for @car, :validate => true  do |f| %>

To see all of this in action clone my example project on github.

I hope this helps anyone who was in the same predicament as me… wanting to do client-side validations using Rails model validators with Twitter Bootstrap. The information from this post was pulled together from comments on an issue from the Client Side Validations Github site. I know this isn’t the perfect solution, but it does work, contributes to a good user experience, and keeps code DRY.

Attract and Retain Users with Intuitive Products

Apple products always amaze me. They just work without any effort. Product design that provides an intuitive user experience will always be a winner. People are too busy and have too many other products to be content with time spent figuring out things needlessly.

An approach I take to creating a seemless user experience in my websites is to leverage the power of the user interface as much as possible and then have rounds of user testing. I try to avoid literal instructions to the users. Instead I rely more on colors, boldness, and placement to guide the user.  That is huge part of web design and graphic design which deserve time to study. A good book to read is The Principles of Beautiful Web Design by Jason Beaird. The visual is much more than just creating something that is pleasing to the eye.

User testing is a huge part in creating an intuitive product. I prefer to think of it as more of a learning process than testing. You’re not just testing for bugs… you’re learning how users interact with your product. The best way to do the user testing is to let a person who is unfamiliar with your product try it out for the first time. Watch them as they use your product. Watching them is very crucial. It allows you to see any friction points the user may have. Make note of these points. Do not try to aid the user, unless they simply cannot continue. Once they do continue, go back to being a silent observer. Watch everything they do. How they navigate around the screen to their body language.

Once the testing is complete, go back and try remove all the friction points from your product. Show the product to a new tester who is unfamiliar with the product in its current state as well its previous state(s). Continue this cycle until all friction points have been removed.

At the end of this process, you’ll hopefully turn out a very intuitive product. A product that is easy to use will not only not scare away potential users, but it will also make the users thankful to you for creating something that is so frictionless… unlike many of the products and services they are used to.

First Blog Post…

Hi all. Welcome to my very first blog post. I started this blog to provide useful content for Internet entrepreneurs and programmers who have an entrepreneurial spirit. I’m very much the latter. I’ve been programming most of my life, but I always held a keen interest in business and entrepreneurship. Holding software developer jobs for most of my professional career, I am now involving myself heavily in creating my own products with a technology base… mostly websites as of this posting. In doing so, I’ve been learning a great deal  that I was just not learning in my 9-5 jobs. The knowledge I’m gaining is something I will share with you on this blog.