Julio Capote

Thinkings and Codings

Useful Rails Routing tips

Even though I have been using Rails for fun and profit for about 2 years now, I felt I never really used it’s routing engine to its full potential. So I checked out new Rails Routing from the outside in guide and discovered bunch of useful tricks that I (and maybe you) had no idea you could do. Here they are:

Multiple resource definitions on a single line

map.resources :photos, :books, :videos

Impose a certain format for resource identifiers

map.resources :photos, :requirements => { :id => /[A-Z][A-Z][0-9]+/ }


This way, /photos/3 would not work, but /photos/DA321 would.

Friendlier action names

Say for your application ‘create’ and ‘change’ make more sense than the default ‘new’ and ‘edit’ you can do

map.resources :photos, :path_names => { :new => 'make', :edit => 'change' }

You can also do this site-wide also, in your environment.rb

config.action_controller.resources_path_names = { :new => 'make', :edit => 'change' }

Trim the fat off resources with :only and :except

When you use map.resources, rails generates 7 restful routes for that resource; But what if that resource only needed to be seen and listed, never edited or created?

map.resources :photos, :only => [:index, :show]

If your application uses alot of map.resources calls but not neccesarily all its generated routes, you can save memory this way.

Adding extra routes to your resources

Instead of fighting the map.resources generator by placing a horror like this atop your routes.rb

map.connect '/photos/:id/preview', { :controller => 'photos', :action => 'preview' }


You can do this to your already mapped resource

map.resources :photos, :member => { :preview => :get }


This will map all GET’s to /photos/3 to the preview action of your photos controller

This can also be  used in collections instead of singular members, just change :member to :collection

map.resources :photos, :collection => { :search => :get }

This will give you /photos/search and hit the search action within the photos controller

So you want to click that button?

I stumbled upon http://clickthatbutton.com during my routine lurking of hacker news. After being amused for about 10 seconds,  I decided to take it to the next level; I wanted to click on it really, really fast. After going through a few solutions (simple js while loop in firebug, then curl/wget) and failing, the idea of using selenium popped into my head. So I went off to their site and installed the extension. I figured a simple recording of the mouse event, then wrapping it around a loop in selenium would do the trick, but I quickly found that selenium doesn’t support loops. Not to be stopped, I searched google and ended up with this. After installing the plugin for selenium (a plugin for a plugin!?) and restarting firefox, I tried it again and to my surprise it worked! The click counter was going up steadily on its own (18k clicks and counting). Here is my selenium test case for those of you following along:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://clickthatbutton.com/" />
<title>haha</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">haha</td></tr>
</thead><tbody>
<tr>
    <td>open</td>
    <td>/</td>
    <td></td>
</tr>
<tr>
    <td>store</td>
    <td>x</td>
    <td>1</td>
</tr>
<tr>
    <td>while</td>
    <td>storedVars['x'] == storedVars['x']</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>submit</td>
    <td></td>
</tr>
<tr>
    <td>endWhile</td>
    <td></td>
    <td></td>
</tr>

</tbody></table>
</body>
</html>

Just paste that into a file, open it with selenium ide, hit play and you should be good to go.

Arrow key navigation for text fields

Here is a class for enabling the use of arrow keys to navigate through a grid of input fields: (using mootools)

var FocusMover = new Class({

        initialize: function(sel, col_num){

                this.sel = sel
                this.col_num = col_num
                this.inputs = $$(this.sel)
                this.current_focus = 0

                var self = this

                this.inputs.each(function(item, index){
                        item.addEvent('keydown',function(key){
                                $try(function(){
                                        self[key.key]()
                                })
                        })
                        item.addEvent('focus',function(e){
                                self.refresh(e)
                        })

                        item.set('myid', index)
                })

                this.inputs[0].focus()

        },


        refresh: function(e){
                this.current_focus = e.target.get('myid')
        },

        down: function(){
                i = parseInt(this.current_focus) + parseInt(this.col_num)
                this.inputs[i].focus()
        },

        up: function(){
                i = parseInt(this.current_focus) - parseInt(this.col_num)
                this.inputs[i].focus()
        },

        left: function(){
                i = parseInt(this.current_focus) - 1
                this.inputs[i].focus()
        },

        right: function(){
                i = parseInt(this.current_focus) + 1
                this.inputs[i].focus()
        }

})

As you can see, the constructor takes two arguments: a selector (which should return a list of all your input fields), and the number of input field columns. So for a 4x2 table, you would set it up like this:

var FM = new FocusMover('#mytable input', 4)

Tabbing through fields vertically

Sometimes it’s useful to switch the browser’s default tabbing behavior (left to right) to the opposite (top to bottom) when your input fields are in a grid layout instead the of the usual single column layout. Having to do this manually is a real pain, especially for large grids; So here is a solution in javascript, using mootools: 

window.addEvent('domready', function(){
    var trs = $$('#mytable tr')
    var accum = 0
    trs.each(function(tr, trindex){
        accum = trindex + 1
        tr.getChildren().each(function(td, tdindex){
            td.getChildren('input')[0].tabIndex = accum
            accum = accum + trs.length
        })            
    })
})

Why MooTools (or Why not JQuery)

I’ve been toying around with MooTools a bit lately, and I’ve found the experience quite enjoyable and refreshing. Naturally, I twittered about it and went along my merry way. Moments later (and much to my surprise), I had a direct message from John Resig himself asking “Why, what’s wrong with jQuery?”. I was pretty taken aback that he would take time from his surely busy day to message a total stranger in an effort to improve his project or at least gain an insight in the everyday life of a js developer (it’s not like DHH would personally message people that are dumping rails to use merb). I figured he deserved a straight, honest answer; One that at least would be longer than 140 characters (even though I managed to use every single one). So it begs the question, Why MooTools?

  1. Class support.
    JQuery’s SQL-like syntax is fine for quick and dirty javascripting, but eventually you’ll want real classes to structure your UI logic.
  2. It smells, feels and tastes like regular javascript.
    JQuery doesn’t even look like javascript, which isn’t necessarily a bad thing, since that’s kind of their goal. MooTools however, feels like just an extension of the language (more on this at point #9).
  3. Faster.
    ‘Nuff Said EDIT: This was pointed out to be false; It is only faster in certain cases (such as mine, WebKit nightly on OS X).
  4. Robert Penner’s easing equations baked right in.
    This could just be me, but I find the animations that mootools creates are alot smoother than JQuery’s (especially the easing).
  5. Creating new DOM elements is a snap.
    Need to create a dom element? var el = new Element(‘a’, { ‘href’: ‘juliocapote.com’}); Done.
  6. Modular.
    I like that I can just build and pull down a moo.js that only contains the functionality I need.
  7. Better Documented.
    Or at least, its faster to find what you need.
  8. Easier to hack on and extend.
    While I haven’t personally delved into the internals of either system, the consensus seems to be that jquery is an unintelligible mess when it comes to modifying how it works.
  9. Prototype Approach (versus a namespaced approach)
    This is really just matter of preference; MooTools achieves it’s magic by just extending the prototypes of common objects (Array, String, etc); While this is obstrusive, it makes for shorter, more natural code. JQuery does its thing via a main object (which you can name, hence the namespace), that you wrap around whatever you want to make magical; This is unobstrusive, but you pay for that by having to wrap anything you want to use (which ends up being everything). It basically boils down to arr.each(fn) vs $.each(arr, fn)
  10. It’s not a revolution.
    It feels as if JQuery is trying to take on the world (it seems like it too, since its now included with visual studio and the nokia sdk). However, I’m not; I’m just trying to write some javascript here.

It’s not like I’m never going to use JQuery again; It simply isn’t my default js framework any longer.

Highlight link based on current page in rails

This is common pattern in website navigation, where it highlights the link (usually by setting class=”active”) that took you to the current page while you are on that page.

First, define a helper:

def is_active?(page_name)
    "active" if params[:action] == page_name
  end

Then call it in your link_to’s in your layout as such:

link_to 'Home', '/', :class => is_active?("index")
link_to 'About', '/about', :class => is_active?("about")
link_to 'contact', '/contact', :class => is_active?("contact")

This effect is achieved due to how link_to handles being passed nil for its :class, so when is_active? returns nil (because its not the current page), link_to outputs nothing as its class (not class=”” as you might expect).