My Ruby on Rails experiences

Rails Best Way To Highlight Current Tab

2014-04-12T12:23:00.000+05:30

This post is about finding the better way to highlight the current tab on page refresh.

Many times we have the requirement where we have different tabs either in the side bar or top navigation bar and we want to apply a CSS class to highlight the current tab.

So how to do it ? Here you go -

Usual Way:

_sidebar.html.erb

 <ul id="sidenav" class="nav nav-sidebar">  
   <li id="dashboard_lnk" class="<%= controller_name == 'dashboard' ? 'active' : '' %>">  
    <%= link_to (content_tag(:span, '', class: "glyphicon glyphicon-home") + ' ' + t('sidebar.dashboard', scope: @locale_scope )).html_safe, dashboard_index_path %>  
   </li>  
   <li id="business_profile_lnk" class="<%= controller_name == 'business_profiles' ? 'active' : '' %>">  
    <%= link_to (content_tag(:span, '', class: "glyphicon glyphicon-user") + ' ' + t('sidebar.business_profile', scope: @locale_scope)).html_safe, building_business_profiles_path(@business_id) %>  
   </li>  
  </ul>

Better Way:

app/helpers/application_helper.rb

 def active_tab_class(*paths)  
    active = false  
    paths.each { |path| active ||= current_page?(path) }  
    active ? 'active' : ''  
 end

_sidebar.html.erb

 <ul id="sidenav" class="nav nav-sidebar">  
   <li id="dashboard_lnk" class="<%= active_tab_class(dashboard_index_path, root_path) %>">  
    <%= link_to (content_tag(:span, '', class: "glyphicon glyphicon-home") + ' ' + t('sidebar.dashboard', scope: @locale_scope )).html_safe, dashboard_index_path %>  
   </li>  
   <li id="business_profile_lnk" class="<%= active_tab_class(building_business_profiles_path(@business_id)) %>">  
    <%= link_to (content_tag(:span, '', class: "glyphicon glyphicon-user") + ' ' + t('sidebar.business_profile', scope: @locale_scope)).html_safe, building_business_profiles_path(@business_id) %>  
   </li>  
  </ul>

Rails 3 and Leaflet Maps

2013-07-06T19:22:00.000+05:30

Now a days maps speak thousand words. So what is the easy way to integrate map with your web application ?

Leaflet library(http://leafletjs.com/) is one of the option. It is an open-source JavaScript library for mobile-friendly interactive maps with just 28kb of JS code.

Leaflet is not under MIT licence but it has comparatively liberal licence.

This is a sample leaflet map -

Map terminology:

1. Pin shaped icons are called markers

2. Bubble containing a text over the icon is called popup

3. Map is made up of small small images, they are called tiles.

4. +/- signs in top left corner is called zoom control

5. "Powered by Leaflet" text in the right bottom corner is called attribution

How to integrate leaflet library with your rails application ?

Step 1: Download Leaflet and put it into your rails application

Download latest version of leaflet from http://leafletjs.com/download.html.
Extract the tar ball.
Copy the "/Leaflet-Leaflet-0deed73/src/Leaflet.js" file form it and put it under "vendor/assets/javascripts/leaflet/" folder in your rails application
Update your application.js.erb to require leaflet.js

Step 2: Code your view to show map

Create a div in the page. E.g. <div id="map"></div>
Add following javascript code in the view page

 $(document).ready(function(){  
   var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png',  
   cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 FirstFuel',  
   cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution, key: 'xxxxxxxxxxxx'  
   }),  
   latlng = new L.LatLng(<%= raw @lat.to_json %>,<%= raw @lng.to_json %>);  
   fsMap = new L.Map('map', {center: latlng, zoom:15, zoomControl:false, layers: [cloudmade], scrollWheelZoom : false});     
 });

Step 3: Render the page and you should see the map.

How do map gets rendered ?

Map is rendered in form of map tiles. Map tiles comes from the tile provider. There are many tile providers available in the market. Google is also a map tile provider.

Default map tile provider for leaflet is cloudmade. You have to mention the map tile provider URL when you create map. See the code snippet in the above section in step 3.

 var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png'

Map tiles can also have different styles, the example map picture above shows colorful map. Now if you want to show grey(Black&White) map then you can use the different map style. The number 997 in above URL is an identifier for a map style. Use 22677 instead of 997 to see a grey black and white map.

What all cool things you can do with leaflet maps?

1. You can show cluster of markers using a beautiful plugin called https://github.com/Leaflet/Leaflet.markercluster

To use this plugin, put https://github.com/Leaflet/Leaflet.markercluster/blob/master/src/MarkerCluster.js to your <RAILS_ROOT>/vendor/assets/javascripts/leaflet and add following code -

 var markers = new L.MarkerClusterGroup();  
 var m = new L.Marker(new L.LatLng(123,456), {        
       icon : L.icon({  
         iconUrl: http://abc.com/marker-icon.jpg,  
         iconSize: [40, 40]  
       })  
     }).bindLabel("Hey I am marker");  
 markers.addLayer(m);  
 map.addLayer(markers);

What is you want to change the icon for the cluster, say you don't like the circle. Then use the followong code and use CSS to do the magic for you.

 var markers = new L.MarkerClusterGroup({  
   iconCreateFunction: function(cluster) {  
     return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });  
   }  
 });

Now what if you want to see your map in full screen the use this plugin https://github.com/elidupuis/leaflet.zoomfs and add https://github.com/elidupuis/leaflet.zoomfs/blob/master/leaflet.zoomfs.js to your <RAILS_ROOT>/vendor/assets/javascripts/leaflet folder and add following code -

 map = new L.Map('map', {center: latlng, zoom:15, zoomControl:false, layers: [cloudmade], scrollWheelZoom : false});  
 var zoomFS = new L.Control.ZoomFS({position : 'bottomleft'});  
 map.addControl(zoomFS);  
 map.on('enterFullscreen', function() {  
    $('#my-box').css({  
     'position' : "fixed",  
     "top" : "40px",  
     "left" : "0px"  
    })     
 });  
 map.on('exitFullscreen', function() {  
    $('#my-box').css({  
     'position' : "absolute",  
     "top" : "0px"  
    })  
 });

Started loving it?

Rails 3 Dynamically Connect With Multiple Databases

2012-08-24T01:44:00.000+05:30

If you are dealing with a sort of distributed application where you have some data sharing happening through databases then you may need to connect to more then one database at run time. It can be achieved in following simplest way.

Step 1: Add the connection method in Application controller

You can have any number connector methods which can get you connected to desired DB

 def connect_to_db_first  
   params = DBBroker::FirstDatabase.get_db_connection_params()  
   DBBroker::FirstDatabase.set_db_connection(params)  
 end

Step 2: Add a Ruby Module under lib (Responsible for getting DB connection params and do actual connection)

This module will have all the classes which can get you connected to different DB. A Database connector class will have one method to get the DB connection parameters (you can call web service for the same, line 14 below) and second method to do the actual connection

1:  module DBBroker   
2:    class FirstDatabase < ActiveRecord::Base   
3:     def self.set_db_connection(params)   
4:      establish_connection( :adapter => params[:adapter],   
5:          :host  => params[:host] ,   
6:          :username => params[:username] ,   
7:          :password => params[:password],   
8:          :database => params[:database],   
9:          :port => params[:port].to_i,   
10:          :encoding => 'utf8'   
11:         )   
12:     end   
13:     def self.get_db_connection_params(connect_to)   
14:      db_params = DBProperties.fetch(connect_to)   
15:      params = Hash.new   
16:      params[:adapter] = "mysql2"   
17:      params[:host] = db_params.server_name.to_s   
18:      params[:username] = db_params.user_name.to_s   
19:      params[:password] = db_params.password.to_s   
20:      params[:database] = db_params.schema_name.to_s   
21:      params[:port] = db_params.port.to_s   
22:      return params   
23:     end    
24:    end   
25:  end

Step 3: Add the Dynamic connection code as before filter in your controllers (wherever required)

A filter will get you connected to desired DB before the processing happens

 class ProductsController < ApplicationController  
  before_filter :login_required, :connect_to_db_first  
  def new  
   @product = Product.new   
  end  
 end

Step 4: Change your models to connect to particular DB

Model based on within which database they exist ... they inherit corresponding DB connector class

 class Product < DatabaseConnecter::FirstDatabase  
  set_table_name :products  
 end

Rails 3 and HighCharts

2012-08-22T23:50:00.000+05:30

Overview

Highcharts are interactive Javascript charts which you can use very easily with any Rails application. I used them for one of my rails project related to Analytics.

Basics

But the only difficulty which I faced is the knowledge of Highchart basics. See what are the different HighChart elements called in following image -

Get Started

Now I will share different code snippets so you can get started with highcharts.

There are 2 types of highchart APIs -

1. Highchart API - Similar to image above but it doesn't have navigator
2. HighStock API - Image as shown above

A simple Highstock code (HTML):

Line 1: A div where Highstock chart will be rendered.
Line 2, 3: Javascripts required for rendering the Highchart
Line 4: Javascript which provides data to render series on the chart

1:  <div id="container" style="height: 400px; min-width: 600px"></div>  
2:  <script src="http://code.highcharts.com/stock/highstock.js"></script>  
3:  <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>  
4:  <script type="text/javascript" src="http://www.highcharts.com/samples/data/three-series-1000-points.js"></script>

JavaScript - Responsible for rendering the chart

Line 2: Highstock initialization
Line 4: Specify the div where you want to place the highchart
Line 6-16: To show the legend as shown in the image above
Line 17-19: To show range selector as shown in the image above
Line 20-26: Data series for the chart. (You can have more then one series on the chart)

1:  $(function() {  
2:    var chart = new Highcharts.StockChart({  
3:      chart: {  
4:        renderTo: 'container'  
5:      },  
6:      legend: {  
7:        enabled: true,  
8:        align: 'right',  
9:        backgroundColor: '#FCFFC5',  
10:        borderColor: 'black',  
11:        borderWidth: 2,  
12:        layout: 'vertical',  
13:        verticalAlign: 'top',  
14:        y: 100,  
15:        shadow: true  
16:      },  
17:      rangeSelector: {  
18:        selected: 1  
19:      },  
20:      series: [{  
21:        name: 'ADBE',  
22:        data: ADBE  
23:      }, {  
24:        name: 'MSFT',  
25:        data: MSFT  
26:      }]  
27:    });  
28:  });

See it in action

Refer to this JS Fiddle to play with the chart mentioned above. JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript.

Experimenting with HighCharts

1. Fetching the chart series JSON data from the remote URL

 $.getJSON("/analytics/chart/monthly_data?site_id=12345", function(data) {  
   var chart = new Highcharts.StockChart({  
     chart: {  
       renderTo: 'container'  
     },          
     series: [{  
       type: 'line',   
       name: 'MSFT',  
       data: data  
     }]  
   });  
 });

2. Modify the default chart tooltip

Line 2: Only if it is true, then you will get tooltip from all the series
Line 7: this.x gives you the value on the selected xAxis point

1:  tooltip: {  
2:       shared: true,  
3:       formatter: function(){  
4:        var p = '';  
5:        var actual = '';  
6:        var predicted = 0;  
7:        p += '<b>'+ this.x +'</b><br/>';  
8:        $.each(this.points, function(i, series){  
9:         if(this.series.name == Decrease' && this.y > 0){  
10:          p += '<span style="font-weight:bold;color:'+ this.series.color +'">' + this.series.name + ':</span>';  
11:         }  
12:         if(this.series.name == Increase' && this.y < 0){  
13:          p += '<span style="font-weight:bold;color:'+ this.series.color +'">' + this.series.name + ':</span>';  
14:         }  
15:         if(this.series.name == 'Actual'){  
16:          p += '<span style="font-weight:bold;color:'+ this.series.color +'">' + this.series.name + ':</span>';  
17:          p += '<b>' + Highcharts.numberFormat(actual, 0) + ' kWh</b><br/>';  
18:         }  
19:         if(this.series.name == 'Predicted'){  
20:          p += '<span style="font-weight:bold;color:'+ this.series.color +'">' + this.series.name + ':</span>';         p += '<b>' + Highcharts.numberFormat(predicted, 0) + ' kWh</b><br/>';  
21:         }  
22:        });        
23:        return p;  
24:       }  
25:      }

3. Load the chart with animation

 $(function() {  
   var chart = new Highcharts.Chart({  
     chart: {  
       renderTo: 'container',  
       defaultSeriesType: 'area'  
     },  
     legend: {  
       enabled: true,  
       align: 'right',  
       backgroundColor: '#FCFFC5',  
       borderColor: 'black',  
       borderWidth: 2,  
       layout: 'vertical',  
       verticalAlign: 'top',  
       y: 100,  
       shadow: true  
     },  
     rangeSelector: {  
       selected: 1  
     },  
     series: []  
   });  
   $("#container").queue("chartQueue",  
     function(next) {  
       chart.showLoading("ADBE");  
       chart.addSeries(  
       {  
         name: 'ADBE',  
         marker: {  
           enabled: false  
         },  
         data: ADBE  
       });  
       setTimeout(function() {  
         chart.hideLoading();  
       }, 3000);  
       next();  
     });  
   $("#container").delay(3000, "chartQueue");  
   $("#container").queue("chartQueue",  
     function(next) {  
       chart.showLoading("MSFT");  
       chart.addSeries(  
       {  
         name: 'MSFT',  
         marker: {  
           enabled: false  
         },  
         data: MSFT  
       });  
       setTimeout(function() {  
         chart.hideLoading();  
       }, 3000);  
       next();  
     });  
   $("#container").delay(3000, "chartQueue");  
   $("#container").dequeue("chartQueue");  
 });

References

http://www.highcharts.com/

Standard Toolbox for Ruby on Rails projects

2012-06-24T12:06:00.000+05:30

IDEs:

Nice but Paid for all operating systems - Rubymine (http://www.jetbrains.com/ruby/)
For Mac users - TextMate ( http://macromates.com/)
Good for all operating systems - NetBeans 6.9 ml Ruby (http://netbeans.org/features/ruby/index.html)

Authentication:

Devise (http://github.com/plataformatec/devise)
authlogic (http://github.com/binarylogic/authlogic)
Restful Authentication (http://github.com/technoweenie/restful-authentication)

Authorization:

CanCan (http://github.com/ryanb/cancan)
Declarative Authorization (http://github.com/stffn/declarative_authorization)
Authlogic (http://github.com/binarylogic/authlogic)

Search:

Thinking Sphinx (http://github.com/freelancing-god/thinking-sphinx)
Sunspot for Solr (http://github.com/outoftime/sunspot)
Search Logic (http://github.com/railsdog/searchlogic)

Caching:

Memcached (http://memcached.org/)
High performance Memached client - Dalli (https://github.com/mperham/dalli)
Ruby library for accessing memcached - memcache-client (https://github.com/mperham/memcache-client)

File upload:

Paper clip (http://github.com/thoughtbot/paperclip)
Carrierwave (http://github.com/jnicklas/carrierwave)
attachment_fu (http://github.com/technoweenie/attachment_fu)

In-line Text Editor:

TinyMCE (https://github.com/spohlenz/tinymce-rails)
Rails ckeditor (https://github.com/galetahub/rails-ckeditor)
Mercury (https://github.com/jejacks0n/mercury)

CMS:

Refinery CMS (http://github.com/resolve/refinerycms)
Locomotive (http://github.com/locomotivecms/engine)
Browser CMS (http://github.com/browsermedia/browsercms)

Development servers:

Webrick (http://www.ruby-doc.org/stdlib-1.9.3/libdoc/webrick/rdoc/index.html)
Mongrel (http://rubyforge.org/projects/mongrel/)
thin (http://code.macournoyer.com/thin/)

Code profiling:

NewRelic (http://www.newrelic.com/ruby)
Rails Analyzer (http://rails-analyzer.rubyforge.org/)
Rack Bug (http://github.com/brynary/rack-bug)

Code review:

reek (https://github.com/troessner/reek)
Rails best pracises ( https://github.com/railsbp/rails_best_practices)
rcov ( https://github.com/relevance/rcov)

Database:

MySQL ( http://www.mysql.com/)
PostgreSQL ( http://www.postgresql.org/)
No SQL Database - MongoDB ( http://www.mongodb.org/) with mongoid or data mapper

XML Parser and Mapper:

libxml-Ruby ( https://github.com/xml4r/libxml-ruby)
Nokogiri ( http://nokogiri.org/)
Happymapper

nokogiri-happymapper ( https://github.com/dam5s/happymapper)
libxml-ruby happymapper ( https://github.com/jnunemaker/happymapper )

Background Jobs:

rescue (http://github.com/defunkt/resque)
delayed_job (https://github.com/collectiveidea/delayed_job/)
beanstalkd and stalker (http://railscasts.com/episodes/243-beanstalkd-and-stalker)

Test Frameworks:

BDD - Cucumber (http://cukes.info/)
TDD - Rspec (http://rspec.info/)
UAT - Selenium (http://github.com/paytonrules/selenium-on-rails)

Web Services:

httpparty (http://httparty.rubyforge.org/)
SOAP client - savon (http://github.com/rubiii/savon)
For testing REST APIs - VCR (http://github.com/myronmarston/vcr)

Production servers:

Apache + Mongrel cluster (https://github.com/kyusik/mongrel_cluster)
Nginx passenger ( http://www.modrails.com/)
Apache Passenger (http://www.modrails.com/)

Deployment Scripts:

Capistrano (https://github.com/capistrano/capistrano/wiki)
Rubber (http://github.com/wr0ngway/rubber)
Inploy (https://github.com/dcrec1/inploy/)

Continues Integration:

Integrity (https://github.com/integrity/integrity)
Cruisecontrol.rb (http://cruisecontrolrb.thoughtworks.com/)
Teamcity (http://www.jetbrains.com/teamcity/)

Exceptions Tracker:

Exception Notifier (http://github.com/smartinez87/exception_notification)
Exceptional (http://github.com/exceptional/exceptional)
Exception Logger (http://github.com/QuBiT/exception_logger)

Performance monitoring:

Cloud:

Rails 3 and Nesting Layouts

2012-06-21T01:19:00.000+05:30

Layout plays crucial role in making your pages look beautiful and well connected on the site by holding them together. It acts as central theme and hence it is important to learn what you can do with layouts in rails, one of the most common is nesting the layouts -

Nesting layouts:

First (top) level layout (app/views/layouts/application.html.erb)

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  
   "http://www.w3.org/TR/html4/strict.dtd">  
 <html lang="en">  
 <head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  <title><%= raw @page_title %><%= Setting.app_name %></title>  
  <%= stylesheet_link_tag "application","users","asks","front","facebox" %>  
  <%= csrf_meta_tag %>  
  <%= javascript_include_tag "application","asks","topics","users","inbox" %>  
 </head>  
 <body>  
  <div id="header">  
   <div class="container">  
    <div class="sidebar">  
      ...  
    </div>  
   </div>  
  </div>  
  <div id="main">  
     <%= content_for?(:second_level_layout) ? yield(:second_level_layout) : yield %>  
  </div>  
  <div id="footer">  
     ...  
  </div>  
 </body>  
 </html>

Second Level Layout (app/views/layouts/consumer.html.erb)

 <% content_for :second_level_layout do %>  
   ...  
   ...  
 <% end %>  
 <div id="third_level_container">  
  <%= content_for?(:third_level_layout) ? yield(:third_level_layout) : yield %>  
 </div>  
 <%= render :template => 'layouts/application' %>

Third Level Layout (app/views/layouts/billing.html.erb)

 <% content_for :third_level_layout do %>  
   ...  
   ...  
 <% end %>  
 <div id="fourth_level_container">  
  <%= content_for?(:fourth_level_layout) ? yield(:fourth_level_layout) : yield %>  
 </div>  
 <%= render :template => 'layouts/consumer' %>

This can go upto the nth level and you can continue nesting one layout inside another.

Rails 3 and JQuery Accordion

2012-05-31T01:49:00.003+05:30

I got a chance to integrate JQuery accordion pane with one of my Rails 3 project. Here are my learnings -

Why accordion pane?

You can create a menu. Normally you see accordion menus in left panel of the web page.
Can be used when you want to show the list of items one expanded at a time. For e.g. product listing, forums etc...
You can even use it to make photo album.

How to go about implementing it ?

Step 1: Make sure you have required JQuery included in layout of your rails project.
Add following lines in layout of your Rails project

 <%= javascript_include_tag "jquery.ui.core.min" %>  
 <%= javascript_include_tag "jquery.ui.widget.min" %>  
 <%= javascript_include_tag "jquery.effects.core" %>

Also in your application.js you should have following line in the top section where you find other include.

 //= require jquery-ui

I spent 2 hours fixing this one. It was giving me and error "accordion is not a function". A good way to check whether all required JavaScript is loaded or not is to try following in the Firebug console

 > $.widget  
 function

 > $().accordion()  
 []

Step 2: Dynamically convert make your div to an accordion.

In your js.erb file add following JavaScript code

 $(function() {   
      $( "#menu" ).accordion({header : '.menu_header'});  
 });

JQuery looks for all the divs with class 'menu-header' inside the div with id "menu" and makes them all the expandable sections of the accordion. You can put any JQuery selector to define headers. By default only one section is expandable and others are closed.

Step 3: Dynamically load content into accordion section when created or changed.

 var loadContent = function (clicked) {  
     $.ajax({  
       type: 'GET',  
       url: '/catalogue/' + clicked + '/items',  
       data: 'category_id=<%= @category.id %>'  
     })  
   };  
 $(function () {  
   $("#menu").accordion({  
     autoHeight: false,  
     header: '.menu_header',  
     /* create gets called after accordion is created .. means first time.*/  
     create: function (event, ui) {  
      /* Following line is used to find id of a selected catalogue. Catalogue id is set as id of the "menu_header" div.  
        Accordion appends 'ui-state-active' class to selected(aka currently active) accordion section.*/  
       var clicked = $(this).find('.ui-state-active').attr('id');  
      /* Sometime accordion keeps the class 'ui-state-default' even after making it active and   
        appending 'ui-state-active' class so need to remove it if its active. Following line does that thing */  
       $(this).find('.ui-state-active').removeClass('ui-state-default');  
       loadContent(clicked);  
     },  
     /* chage gets called every time you click the other expandable section to open it.*/  
     change: function (event, ui) {  
       var clicked = $(this).find('.ui-state-active').attr('id');  
       loadContent(clicked);  
     }  
   });  
 });

Step 4: Remove the section from the accordion.

If you are using ajax to remove the expandable section from the accordion then following can be one way to do that -

 $("#catalogue_<%= @catalogue.id %>").remove();  
 /* Following line expands the first section from accordion */  
 $( "#menu" ).accordion({ active: $('#menu div:first-child') });  
 /* Show message if no sections present in the accordion */  
 if($('div.ui-state-default,div.ui-state-active').size() == 0) {  
   $( "#menu" ).html('No catalogues found!').css('text-align','center');  
 }

Step 5: Update the section in the accordion.

Give id to the divs where you write the section title and content so you are not required to replace the entire accordion section instead you can just update the content using JQuery.

 $('#catalogue_<%= @catalogue.id %>_desc').html("<%= @catalogue.description %>");

Step 6: Activate specific section of accordion based on the parameters passed in the URL

Use this JavaScript and

 function getAccordionIndex(accordion,matched_element_id){  
   var index = 0;  
   if(matched_element_id != '' && matched_element_id != 'undefined' && matched_element_id!= null){  
     var matched_element = document.getElementById(matched_element_id);  
     index = $('#' + accordion + ' .ui-accordion-header').index(matched_element);  
   }  
   return index;  
 }

Look at the line no. 13 in following code snippet. It expands the specific section in the accordion provided that you have provided item id as div id for the header divs

1:  var loadContent = function(clicked){  
2:  $.ajax({  
3:          type: 'GET',  
4:          url: '/catalogue/' + clicked + '/items',  
5:          data: 'category_id=<%= @category.id %>'  
6:       })  
7:  };  
8:  $(function() {  
9:  $( "#menu" ).accordion({ autoHeight: false,  
10:  header : '.menu_header',  
11:  /* create gets called after accordion is created .. means first time.*/  
12:  create: function(event, ui){  
13:  $( "#menu" ).accordion({active: getAccordionIndex('menu','<%=params[:catalogue_id]%>')});  
14:  /* Following line is used to find id of a selected catalogue. Catalogue id is set as id of the "menu_header" div.  
15:  Accordion appends 'ui-state-active' class to selected(aka currently active) accordion section.   
16:   */  
17:  var clicked = $(this).find('.ui-state-active').attr('id');  
18:  /* Sometime accordion keeps the class 'ui-state-default' even after making it active and appending 'ui-state-active' class so need to remove it if its active. Following line does that thing */  
19:  $(this).find('.ui-state-active').removeClass('ui-state-default');  
20:  loadContent (clicked);  
21:  },  
22:  /* chage gets called every time you click the other expandable section to open it.*/  
23:  change: function(event, ui){  
24:  var clicked = $(this).find('.ui-state-active').attr('id');  
25:  loadContent (clicked);  
26:  }  
27:  });  
28:  });

Other Interesting Resources

Free Private Source Code Repository For Ruby on Rails

2012-04-10T00:30:00.001+05:30

There are many people who want to try out their new project idea in Ruby On Rails. Usually they are a team of 2-3 people, sometimes geographically apart. When you start over, first thing that you need is source code repository where you can put your code so that it is secure and shared effectively across. And off course private.

At start, most of the time you have no money and you start looking for something free and easy. First name comes to the mind is github(github.com). Its indeed the best one but it asks you to pay money if you want to make your repository private. The micro plan is also about $7 per month. Which might not be affordable on inception. So I did a little check and sharing my findings with you -

Assembla ( http://www.assembla.com)- Its gives one free private repository with 1GB space (SVN or Git) For unlimited users.
Bitbucket (https://bitbucket.org) - It gives unlimited public & private repositories for 5 users. (Git or Mercurial).
Beanstalk ( http://beanstalkapp.com/ ) - It gives 100 MB Storage, 1 User, 1 Repository.
ProjectLocker ( http://www.projectlocker.com/) - It gives free SVN or Git for 3 users , 300 MB
Unfuddle ( http://unfuddle.com) - It gives free SVN 2 people 200 MB

Though I have listed 5 repositories I recommend Assembla and Bitbucket. They are very professional and quite straight forward. I have used Bitbucket my self and I do not see any problem with it. If you have money then github is the best and most popular choice.

If you want to opensource your code then you need not worry about anything, almost all the online code repository allows to create opensource projects for free.

The raw and h() in the Rails

2012-03-04T21:08:00.002+05:30

We always want to secure our Rails application to protect it from the attacks. The most basic thing which we do is to make the content html safe so nobody can inject malicious code or JavaScript into it.

But what is exactly meant by making the content html safe ?

Normally we all use h() method in Rails 2.x to do this. But hardly we bother to look into the method definition to find what is does exactly.

h() is like shorthand for the method html_escape. Look at the snippet from -

rails/activesupport/lib/active_support/core_ext/string/output_safety.rb

class ERB
module Util
HTML_ESCAPE = { '&' => '&', '>' => '>', '<' => '<', '"' => '"' }
remove_method(:h)
alias h html_escape

def html_escape(s) #:nodoc:
s = s.to_s
if s.html_safe?
s
else
s.gsub(/[&"><]/n) { |special| HTML_ESCAPE[special] }.html_safe
end
end

end
end

The important thing to notice here is that the characters are replaced based on the HTML_ESCAPE hash provided above. This way those characters will not be rendered as HTML but still they look same on web page.

E.g. If you write "<div>Hello!</div>" in a file and save it with .html extension. Open the same with your browser. And you will see that the browser will print it as "<div>Hello!</div>" instead of creating a div or printing it as "<div>Hello!</div>". This is the magic of h() method. These replacement character sequences (e.g. < etc...) are called HTML named special entity references. There are only few of them. You can find it here.

This behaviour of making the content html safe is changed a little bit in Rails 3. Previously everything was unsafe by default and we had to use h() to make it safe. But with Rails 3 everything is safe by default and we are required to use "raw" if we want to get it rendered as HTML on browser instead of plain text.

One interesting problem related to this:
In Rails 3, render the user comment in such a way that any script or code entered by user should be rendered as text but links should be rendered as HTML.

Quick Solution:
<% display_comment=@user.comment.gsub(/<([^a])/,'<\1').gsub(/<\/([^a])/,'</\1')%>
<%= raw display_comment %>

Some simple design patterns in Ruby with examples

2012-02-28T16:41:00.000+05:30

1. Singleton pattern

Returns the same object every time. Can be used to represent

Printer Object in your application (classic example)
Application wide counter to keep track of your records (Common Serial No. for different type of assets)

General idea is to make the initializer/constructor private so no body can call it directly. And then rewrite it to create the object only if it doesn't exist otherwise return the existing object. Normally the instance is stored in some instance variable.

 require 'singleton'  
 class Base  
  include Singleton  
 end  
 Base.new # Error => private method `new' called for Base:Class (NoMethodError)  
 b1 = Base.instance  
 p b1.object_id # Output => 21128892  
 b2 = Base.instance  
 p b2.object_id # Output => 21128892

2. Decorator pattern

Allows you to freely choose the decoration and add it on to your base. Can be used to represent

Subscription based model where there are lot of add-ons
Products with lot of add on features. e.g. Mobile phones have many additional features like camera, headset etc..

Generic idea is to store the decorated object as instance variable and use method missing to provide generic interface to call the methods which are common on the decorated object like cost, quantity, size etc..

 module Decorator  
  def initialize decorated  
   @decorated = decorated  
  end   
  def method_missing(method, *args)  
   @decorated.send(method, *args) if @decorated.respond_to?(method)  
  end  
 end  
 class BaseSubscriptionPlan    
  def features  
   [:free_talktime,:free_sms]  
  end   
 end  
 class ISDAddOnPack  
  include Decorator   
  def features  
   @decorated.features + [:free_isd_time]  
  end   
 end  
 p BaseSubscriptionPlan.new.features # Output => [:free_talktime, :free_sms]  
 p ISDAddOnPack.new(BaseSubscriptionPlan.new).features # Output => [:free_talktime, :free_sms, :free_isd_time]

3. Builder pattern

Allows you to apply series of actions in specific sequence on your class instances and it is completely independent of method implementation. Normally have two main entities. Director is responsible for defining the sequence and actions here and builders implements those actions. Can be used to represent

Web service response building process e.g. JSON, XML

 class EventDirector  
  def initialize  
   @subevents = [:welcome, :intermediary,:closing]  
  end  
  def organize event  
   @subevents.each { |se| event.send(se) if event.respond_to? se }    
  end  
 end  
 class Wedding  
  def welcome  
   p 'give welcome drink'  
  end   
  def intermediary  
   p 'Exchange of vows,Exchange of rings'  
  end   
  def closing  
   p 'closing prayer'  
  end  
 end  
 class TeamParty  
  def welcome  
   p 'give complementry mocktail or beer :)'  
  end  
  def intermediary  
   p 'Team building activities'  
  end  
  def closing  
   p 'team photo'  
  end   
 end  
 ed = EventDirector.new  
 ed.organize(TeamParty.new)  
 # Output => "give complementry mocktail or beer :)"  
 # "Team building activities"  
 # "team photo"  
 ed.organize(Wedding.new)  
 # Output => "give welcome drink"  
 # "Exchange of vows,Exchange of rings"  
 # "closing prayer"

Little known methods from Object class in Ruby

2012-02-25T02:08:00.000+05:30

object#tap

Sometimes we want to insert debugging code in the middle of an statement or expression. For e.g. If you want to print the intermediate output of the following expression in order to see whether sorting works fine or not then how will you do ?

Expression: [1,3,2,5].sort.map {|x| x * 2}

One way is to use temporary variable... like

sorted_arr = [1,3,2,5].sort
p sorted_arr
sorted_arr.map {|x| x * 2}

But using tap you can simply do it like

[1,3,2,5].sort.tap {|sa| p sa}.map {|x| x * 2}

tap method doesn't disturb method chaining and still allows you to debug intermediate values.

Object#clone and Object#dup

Both dup & clone are used to create shallow copy of an object. CLONE is used to duplicate an object, including its internal state, DUP typically uses the class of the descendent object to create the new instance.

1. clone copies both FROZEN and TAINTED state of an object along with instance variables, where as dup only copies TAINTED state of an object.
2. With clone you can copy any singleton methods of an object but DUP does not support this.

Object#taint

Consider a case where in you are writing a program in Ruby which takes input from user and evaluates it using "Object#eval" method. If some user gives "system('rm *') as input then think of the consequences. How insecure it is to allow this type of data to be processed.

To prevent this, there should be some mechanism to tell your ruby program that the data is insecure and should only be processed after some check. The concept of "taint" is exactly used to achieve this thing.

home = ENV["Path"]
p home.tainted? # Output => true
home =~ /([a-z])/
p $1.tainted? # Output => true

Object#public_send

"send" method in Ruby can be used to call public, private and protected methods in Ruby. But what if your class have "send" method defined and you want to call that. How will you avoid the conflict between the "send" in the Object class and "send" in your class. Simplest solution is to use "public_send" method.

class A
def send
p 'my send'
end
end
A.new.public_send(:send) # Output => "my send"
A.new.send(:send) # Error => in `send': wrong number of arguments (1 for 0) (ArgumentError)

class_eval and instance_eval in Ruby Meta programming

2012-02-24T00:27:00.000+05:30

I did some experiment with meta programming keywords "class_eval" and "instance_eval'. Sharing some of the examples with you all -

1. class_eval opens the existing class and adds the methods as defined in an ordinary class, hence they work as instance methods of that class

String.class_eval do
def quack
p 'quack method'
end
end

"any string".quack

2. A method defined for class A using class_eval will work as instance method of A

class A
end

A.class_eval do
def some_method
p 'some_method'
end
end

A.new.some_method

3. instance_eval on a class will open the class as an instance of class Class. Any method defined will be treated as the method of this instance which is the class. Hence the methods work like class methods

class A
end

A.instance_eval do
def other_method
p 'other_method'
end
end

A.other_method

4. instance_eval on an instance of a class will open that instance of the class. Thus it works like a singleton method that is specific to the instance and wont work for other instances of the class

class A
end

a = A.new
a.instance_eval do
def a_method
p 'a_method'
end
end

a.a_method # works for 'a' on which the instance_eval is defined
b = A.new
b.a_method # doesn't work for 'b'

5. This is the same as calling instance_eval on the instance 'a' of class A. This again will define a singleton method on the instance

class << a
def show
p 'this is a method'
end
end
a = A.new
a.show
b.show # doesn't work for 'b'

6. Can not call 'class_eval' on an instance. class_eval can only be called on classes (which are instances of class Class)

class A
end

a.class_eval do
def show_other
p 'this is another method'
end
end

a = A.new
a.show
b.show

Error: in `<main>': undefined method `class_eval' for #<A:0x455340> (NoMethodError)

Method scope in Ruby

2012-02-23T00:53:00.000+05:30

Refer to the table below to understand, what will happen on calling different type of methods in different scopes.





Behavior	Code block	Public	Private	Protected
Calling methods from outside class (using class instance)	class Base def public_method p 'public method' end def private_method p 'private method' end def protected_method p 'protected method' end private :private_method protected :protected_method end Base.new.public_method # Output => "public method" Base.new.private_method # Output => private method `private_method' called for #<A:0x2855250> (NoMethodError) Base.new.protected_method # Output => protected method `protected_method' called for #<A:0x28552c8> (NoMethodError)	Y	N	N
Calling methods from inside class through public method (without using any implicit, explicit,self receiver)	class Base def public_method p 'public method' end def private_method p 'private method' end def protected_method p 'protected method' end def calling_method public_method # Output => "public method" private_method # Outuput => "private method" protected_method # Output => "protected method" end private :private_method protected :protected_method end Base.new.calling_method	Y	Y	Y
Calling methods from within class through public method (using self)	class Base def public_method p 'public method' end def private_method p 'private method' end def protected_method p 'protected method' end def calling_method self.public_method # Output => "public method" self.private_method # Error => private method `private_method' called for #<Base:0x28551f0> (NoMethodError) self.protected_method # Output => "protected method" end private :private_method protected :protected_method end Base.new.calling_method	Y	N	Y
Calling methods from within class through public method (using instance of class)	class Base def public_method p 'public method' end def private_method p 'private method' end def protected_method p 'protected method' end def calling_method Base.new.public_method # Output => "public method" Base.new.private_method # Error => private method `private_method' called for #<Base:0x28551f0> (NoMethodError) Base.new.protected_method # Output => "protected method" end private :private_method protected :protected_method end Base.new.calling_method	Y	N	Y
Calling methods from within derived class through public method (without using any implicit, explicit or self receiver)	class Base def public_method p 'public method' end def private_method p 'private method' end def protected_method p 'protected method' end def calling_method Base.new.public_method Base.new.private_method Base.new.protected_method end private :private_method protected :protected_method end class Derived < Base def calling_method public_method # Output => "public method" private_method # Outuput => "private method" protected_method # Output => "protected method" end end Derived.new.calling_method	Y	Y	Y
Calling methods from within derived class through public method using an instance of derived class)	class Base def public_method p 'public method' end def private_method p 'private method' end def protected_method p 'protected method' end def calling_method Base.new.public_method Base.new.private_method Base.new.protected_method end private :private_method protected :protected_method end class Derived < Base def calling_method Derived.new.public_method Derived.new.private_method Derived.new.protected_method end end Derived.new.calling_method	Y	N	Y
Calling methods from within Other class through public method using an instance of Other class)	class Base def public_method p 'public method' end def private_method p 'private method' end def protected_method p 'protected method' end def calling_method Base.new.public_method Base.new.private_method Base.new.protected_method end private :private_method protected :protected_method end class Other def calling_method Base.new.public_method Base.new.private_method Base.new.protected_method end end Other.new.calling_method	Y	N	N

Why the name Rails

2012-02-22T00:55:00.000+05:30

the page isn't redirecting properly

2012-02-18T12:09:00.000+05:30

Error on: Hitting the HTTPS rails app url in the browser:

Error Message: "the page isn't redirecting properly. Firefox has detected that the server is redirecting the request for this address in a way that will never complete."

Server configuration (Erroneous):

Rails: v3.0
Web server - Nginx
Application server - Phusion passenger
SSL plugin - ssl_requirement
Nginx configuration(inside nginx.conf):

server {
             listen       80;
             ...
            passenger_enabled on;
...
}
    server {
         listen 443;
         ...
         ssl on;
         ssl_certificate /opt/nginx/conf/certificate.pem;
         ssl_certificate_key /opt/nginx/conf/server.key;
         proxy_set_headers X-Forwarded-Proto, https;
         passenger_enabled on;
         ...
}

Debugging steps:

1. Checked the nginx.conf file present in my /opt/nginx/conf directory - Everything looked fine at first glance.

2. Checked the nginx access log file in /opt/nginx/logs directory - Found that there were lot of redirects(302)

3. Looked at rails application log - Found that the URL was being hit but ssl was required for the action mapped to the request so Rails app was redirecting it back to Nginx for HTTPS. Plugin used: ssl_requirement

4. After digging it deeper I found that problem was something like -

Hit the URL in Browser(HTTPS) -> Request got mapped to Nginx server block 443 -> Request redirected to Rails app (but could not find request headers required to define request as HTTPS) -> Rails app sent the request back to Nginx (server block 443) -> Nginx again redirected it to Rails app (but Rails app could not find request headers required to define request as HTTPS ) -> Hence again redirected back to Nginx (server block 443) -> So On (Infinite loop)

5. So I thought, the problem is on Rails application side and I looked at how Rails app decides whether the request is HTTPS or not. Found that the following snippet in ssl_requirement plugin is doing it -

def ensure_proper_protocol

return true if ssl_allowed?

if ssl_required? && !request.ssl?

redirect_to "https://" + request.host + request.request_uri

flash.keep

return false

elsif request.ssl? && !ssl_required?

redirect_to "http://" + request.host + request.request_uri

flash.keep

return false

end

end

6. It was request.ssl? which was deciding the type of request. Source code for the same is -

Module: ActionDispatch::Http::URL

def ssl?
  @env['HTTPS'] == 'on' || @env['HTTP_X_FORWARDED_PROTO'] == 'https'
end

7. Finally figured out that its the values of request headers "HTTPS" and "HTTP_X_FORWARDED_PROTO" are used to define request as HTTPS.

Now the question was why Nginx was not setting this request headers properly. The fault was default headers module, I had to use Nginx Headers more module to solve it. But that was not the complete solution. Actually headers as passed along as given below

Nginx(Set and pass the header to) -> Phusion Passenger(Set and pass header to) -> Rails app

Now the second thing was to force the phusion passenger to pass the request header set by Nginx to Rails app and it can be done using passenger_pass_header directive. Finally I could get the entire thing working by using following configuration -

    server {
             listen       80;
             root <path to your rails app public folder>
             rails_env production;
passenger_enabled on;
    }
    server {
             listen 443;
             root <path to your rails app public folder>
            rails_env production_backup;
            ssl on;
            ssl_certificate /opt/nginx/conf/certificate.pem;
            ssl_certificate_key /opt/nginx/conf/server.key;

          more_set_input_headers 'X-Forwarded-Proto: https';
          passenger_pass_header X-Forwarded-Proto;
            passenger_enabled on;
    }

People and URLs which helped:
1. http://blog.assimov.net/post/4784134814/rails-on-nginx-passenger-behind-hw-ssl-load-balancer
2. (Ian Neuburt) http://pastie.org/3388963
3. http://rubydoc.info/docs/rails/3.0.0/ActionDispatch/Http/URL#ssl%3F-instance_method-

http://www.modrails.com/documentation/Users%20guide%20Nginx.html#_passenger_pass_header_lt_header_name_gt

Ruby on Rails - All cheatsheets

2012-02-13T16:16:00.002+05:30

After certain amount of experience, it is very difficult to remember syntax while coding. And cheat sheets are to rescue you at that instance. I always find it very handy so sharing with you few cheat sheets which I find useful. I myself have verified all the links (and they are all up at the time of writing this post).

1. A quick reference guide for Ruby on Rails, containing the default directory structure, predefined variables, methods, reserved words and regular expression syntax.

2. Rails 3 Cheat Sheets

3. Active Resource cheat sheet

4. Browser compatibility table

5. RESTful routes cheat sheet

6. Awesome Prototype cheat sheets. Prototype is a JavaScript library used as default with Rails.

7. Rspec cheat sheets by Dave Astels(one of the Rspec developer). RSpec is a behavior driven development (BDD) framework for the Ruby programming language, inspired by JBehave.

New useful cheat sheet will find way into my post as and when I come across them !!!

PS: Please report in case any of the links above is not working.

Learn Ruby internals and C code behind it

2012-02-10T11:52:00.000+05:30

The best way to learn Ruby is to understand the C code behind Ruby.

But it becomes very difficult for many people like me who are not very much proficient/hands on in C. Also, it is very difficult to find out what is important to understand and what is comparatively trivial to be skipped.

But do not worry, there exists an awesome Ruby Hacking Guide on the web, which is so awesome. If you really want to look into Ruby internals please have a look at it. If you feel that it looks little bit old then you can check this website.

Thanks Matz for creating Ruby and Minero AOKI for such a nice guide.

A web application written in plain Ruby

2012-02-10T11:26:00.003+05:30

require 'rubygems'
require 'rack'

class WebApp
    def call(env)
      [200, {"content-type" =>"text/html"}, "hello World"]
    end
end

Rack::Handler::Mongrel.run(WebApp.new, :port => 3000)

One possible Ruby way to convert Integer to Roman

2012-02-08T20:10:00.000+05:30

class Roman

def initialize
@romans = { 1 => 'I',5 => 'V',10 => 'X',50 => 'L',100 => 'C',500 => 'D',1000 => 'M' }
end

def romanize(num, outnum="")
digits = num.to_s.length
range_up = 10**digits
unit = range_low = range_up/10
range_mid = range_up/2
numerator = (num/unit) * unit
nextnum = num%unit
if(@romans.has_key?(numerator))
outnum += @romans[numerator]
romanize(nextnum, outnum)
elsif (numerator == range_up - unit)
outnum += @romans[unit] + @romans[range_up]
elsif(numerator == range_mid - unit)
outnum += @romans[unit] + @romans[range_mid]
elsif(numerator > range_mid)
outnum += @romans[range_mid]
romanize(num - range_mid, outnum)
else
outnum += @romans[range_low] * (numerator/range_low)
end
num == 0 ? (return num,outnum) : romanize(nextnum, outnum)
end

end

n, o = Roman.new.romanize(101)
p "101:#{o}" # => "101:CI"

n, o = Roman.new.romanize(999)
p "999:#{o}" # => "999:CMXCIX"

n, o = Roman.new.romanize(505)
p "505:#{o}" => "505:DV"

These things about Ruby1.8.7, I really don't understand

2012-02-07T18:43:00.000+05:30

1. Why Ruby allows to use instance variable as class variable ?

class A
@v_one = 1

def self.get_v_one
@v_one
end

def why_this
p @v_one
p self.class.get_v_one # @v_one behaves as class variable here
end
end
A.new.why_this

# Output
>ruby test.rb
nil
1

Questions:
1. If I can use the "@" as class variable as shown above why Ruby has "@@". Just for convenience or is there anything else to it?
2. Why Ruby allows to put instance variable into class, how does it makes sense?

2. Why Ruby allows to call private methods from derived class ?

class Base
def why_this
p 'Called from derived class, it should not have.'
end
private :why_this
end

class Derived < Base
def call_me
why_this
end
end

Derived.new.call_me

# Output
>ruby test.rb
"Called from derived class, it should not have."
>Exit code: 0

Question:
1. Aren't private methods are specific to class only ? How come they are accessed in derived class?

3. Why Ruby gives Derived class variable value even if I use the Base class instance ?

class Base
@@v_one = 1
def why_this
p @@v_one
end
end
class Derived < Base
@@v_one = 2
end
Base.new.why_this

# Output
>ruby test.rb
2
>Exit code: 0

Questions:
1. Can this cause any security risks? Anybody can subclass the Base class and redefine the value of class variables in Base.

4. Isn't the calling of private methods little bit inconsistent ?

class A
def why_this
p 'private method'
end
private :why_this
end

A.new.send(:why_this) # Output => "private method"
A.new.why_this # Out=> private method `why_this' called for #<A:0x2855688> (NoMethodError)

5. Why array subtraction is confusing ?

a = [1,2,2,3]
b = [2]
p a - b #=> [1,3]
# Ideally the result should have been [1,2,3]

Questions:
1. Why is it removing both members with value "2" ?
2. Does it internally use Set to perform subtraction?