Practice makes perfect

Past two weeks, i have studied some useful gems in rails. Here are the summary and tips.

Cucumber

Cucumber is the Behavior Driven Development(BDD). Writing testing is the most important in software development. Without testing case it’s hard to refactor any code in the future.

For instance: my site provide REST API with JSON and require devise login to use. How to test?
Add to Gemfile. Suggest to use rspec and factory_gril gems together.

1
2
3
4
5
6
7
8
9

group :test do
  gem "rspec-rails"
  gem 'cucumber-rails', :require => false
  gem "factory_girl_rails"
  gem 'database_cleaner'
end
group :development do
  gem "rspec-rails"
end

Run rails g cucumber:install to initial features/ structure.

I see a post animated on media query today. It’s very interest to put CSS transition on media query changed. It’s a simple skill and i just try it on my blog. You could resize my blog to check it.
For example: add width transition to my avatar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.myheader-avatar > img{
  height: 60px;
  width: 60px;
  float: left;
  border-radius: 30px;
  @include high_z_index;

  /* New line. */
  transition: width 1.5s;
}

@media screen and (max-width: 700px) {
  .myheader-avatar > img {
    /* When devie max-width under 700px, change width to 0 */
    height: 0;
    width: 0;

    /* transition can't put on display. So i change it to set width=0 */
    /* display: none; */
  }
}

Originally i use display:none to hide avatar but it doesn’t work with transition. I use width=0 insteadly.

I change octopress theme to slash. I also do a little modification. like
1. Add avatar
2. Show site’s subtitle
3. Add About page and remove Blog page in the navigation header.
4. Modify CSS to fit mobile browing.
I feel whole site becomes beatiful and clear.

String alternatives in ruby

%Q

Alternative for double-quoted strings. Below are equivalent

1
2
3

name_of_object = "John"
puts %Q(Hello World #{name_of_object})
puts "Hello World John"

You could replace ( and ) with non-alphanumeric characters.

1
2
3
4

puts %Q!Hello World!
puts %Q[Hello World]
puts %Q+Hello World+
puts %/Hello World/ # you can use also.

Recently i created two emberjs-rails projects.(money,food-ntpc). Everytime i have to create a new rails project and add gems(ember-rails,twitter-bootstrap,thin…) repeatedly. Based on DRY principle i try to write a gem to solve trivials.
Finally, my first gem railsone is out and push to RubyGems. There are many Rail proper nouns like Generator,Template,Plugins,Engine. In the beginning it’s very confuse to me but i have solved them luckly :)

How to make gem and generator?

Async Routing

Reference to ember guide.
If you want to make sure model is ready before entering the target route. You could use async routing. How?
Make your model as Promise object in route’s model function. For example: In year route i return a model that comes from ModelMgr.listMonth(params.year_id). Because model is Promise object, i add a then method to set id attribute to model(resolve will be model here)

1
2
3
4
5

model: (params) ->
  model = ModelMgr.listMonth(params.year_id)
    model.then (resolve, reject)->
      resolve.set 'id', params.year_id
  return model

In ModelMgr.listMonth method, use Ember.RSVP.Promise to wrap your function. Because i don’t return anything in the last line of function. CoffeeScript will return the promise object automatically. months will be the real model object.

1
2
3
4
5
6
7
8
9
10
11
12

listMonth: (year) ->
  months = Ember.ArrayProxy.create({content:[]})
  new Ember.RSVP.Promise (resolve) ->
    $.ajax '/api/list',
    type: 'GET'
    dataType: 'json'
    data: 'y='+year
    success: (data, textStatus, jqXHR) ->
      for raw in data
        months.addObject raw
      months.set 'isReady', true
      resolve(months)

Wait multiple function call ready

Sometimes you will use 3rd party library and it requires element existed in the DOM tree. For example: I use highchartJS to draw diagram.
In the route it queries two models to finish the whole scenarios. model is the result from ModelMgr.listMonth and modelForTrend is the result from ModelMgr.queryTrend. The models all have attributes called isReady with false default. After ModelMgr get the data, it will set to true.

1
2
3
4
5
6
7
8

  model: (params)->
    model = ModelMgr.listMonth(params.year_id)
    model.year = params.year_id #For queryTrend needs year as parameter
    return model
  setupController: (controller, model)->
    modelForTrend = ModelMgr.queryTrend(model.year)
    controller.set 'model', model
    controller.set 'modelForTrend', modelForTrend

We have two attribute bindings to model’s attributes in controller.

1
2
3

SummaryController = Ember.ObjectController.extend
  dataReadyBinding: 'model.isReady'
  trendDataReadyBinding: 'modelForTrend.isReady'

Create a method to observe all attributes we care about. View shouldn’t connect to Model directly. So i make drawLineChart method to observe controller’s attribute.

1
2
3
4
5
6
7
8
9
10
11

SummaryView = Ember.View.extend
  elementReady: false
  drawLineChart: ( ->
    if @get('controller.dataReady') and @get('controller.trendDataReady') and @get('elementReady')
      content = @get 'controller.model.content' # content is ready
      contentForTrend = @get 'controller.modelForTrend.content' # contentForTrend is ready
      $('#myTrend').highcharts( ... ) # element is ready.
      # do something here...
  ).observes('controller.dataReady', 'elementReady', 'controller.trendDataReady')
  didInsertElement: ->
    @set 'elementReady', true

I just push a new project to github and heroku. This project is derived from my iOS App Monny. The App I used it to record my daily expense. The free version doesn’t have visual graph to show summary data. So i use EmberJS,HighchartJS and Rails to build this simple web app. I always learned new knowledge during coding.

I take few snaphots of this probject.

Continue ActionSupport useful record

Extensions to Numeric

Defined in active_support/core_ext/numeric/bytes.rb.

Bytes

All number respond to these methods

1
2
3
4

2.kilobytes   # => 2048
3.megabytes   # => 3145728
3.5.gigabytes # => 3758096384
-4.exabytes   # => -4611686018427387904

Recently i study documents in ruby edgeguides. There are a lot of methods in ActionSupport chapter. I record something useful here and for reference in the future.

Extensions to All Objects

Defined in active_support/core_ext/object/blank.rb.

blank?

Following vlaues are considered to be blank.
* nil and false
* strings composed only of whitespace (see note below)
* empty arrays and hashes
In particular, 0 and 0.0 are not blank.

I push rails101_groupme to heroku today. The project doesn’t have access control and i18n. I use cancan gem to do access authorization and default i18n mechanism. Besides, i also upgrade twitter bootstrap to 3.0.0.