目前日期文章:201108 (5)

瀏覽方式: 標題列表 簡短摘要

有些時候需要撈資料,找出重複的記錄,但 Ruby Array 本身沒有這種功能的 method ,所以就自己打開 class Array 加進去吧!

class Array

  def find_dups
    uniq.map {|v| (self - [v]).size < (self.size - 1) ? v : nil}.compact
  end

end

參考資料:http://snippets.dzone.com/posts/show/4148

笨笨小蟹 發表在 痞客邦 PIXNET 留言(0) 人氣()

會使用到 Jammit gem 的原因是,我發現網站在 6 月改版後,就常常會發生網站脫衣服(吃不到 css)的狀況,而且都是在上班時間。

翻 log 查到原因後發現,原來是因為原本網站的伺服器只有一台,改版時調整成兩台並且做 HA ,問題就出在多台伺服器上。

Rails 的 layout 中, stylesheet_link_tag 我有設定 :cache => :merge_index ,因此看原始碼時會發現,網站只有讀取 merge_index.css ,這段設定就是請 Rails 幫忙把數隻 css 壓成一隻,減少 http request 的數量。

 

問題來了,這隻 merge_index 會在瀏覽器訪問頁面時檢查是否存在 /public/stylesheets 資料夾,如果不存在就先產生它,因此在 production 環境的目錄內你會找到 merge_index.css 這個 development 環境沒有、也不在 repository 內的檔案。

以上的狀況,當你只有一台伺服器時,一切都正常;當有多台伺服器時,就會發生瀏覽器問到還沒產生 merge_index.css  的伺服器,因而吃不到 css 造成脫衣服的問題。

這個問題同樣也出現在T客邦網站,因此 xdite 寫了一篇文章介紹 Jammit 來解決這個問題,解決就是 preheat CSS/JS。但實際套用後發現,並不能照著 xdite 的文章實作,那要怎麼寫呢?

 

首先要編輯 config/assets.yml ,這個 yml 檔案的最前面是關於 Jammit 的設定,詳細的設定清單比方說壓縮方式、gzip、路徑等等可以去看參考文件

注意,設定中記得要有加入這行,否則在 Jammit package 時,會告訴你無法產生 css (IE7 以下 MHTML issue)。

embed_assets: datauri

 

接著是設定 stylesheets 和 javascripts ,範例如下

stylesheets:
  commons:
    - public/stylesheets/reset.css
    - public/stylesheets/common-use.css
    - public/stylesheets/hf.css
    - public/stylesheets/right-column.css
  merge_diary:
    - public/stylesheets/diary.css
    - public/stylesheets/openid-comment.css

javascripts:
  commons:
    - public/javascripts/pop.js
    - public/javascripts/facebox.js
    - public/javascripts/jquery.timers-1.2.js
  merge_index:
    - public/javascripts/jquery.scrollTo-1.4.2-min.js
    - public/javascripts/jquery.easing.1.3.js
    - public/javascripts/jquery.serialScroll-1.2.2-min.js
    - public/javascripts/slideshow.js

以範例來說,到時候產生出來的就會有 commons.css, merge_diary.css, commons.js, merge_index.js ,每隻檔案要包含哪些 css/js 就是在 yml 內設定,相當直觀。

ps. 實際上,因為有設定 datauri ,所以檔案名稱還會後綴 -data-uri ,此處為了直觀故省略了後綴字。

 

接著,要去修改 layout 中使用 stylesheets 和 javascrpits 的方法,寫法是

<%= include_stylesheets :commons, :merge_diary %>
<%= include_javascripts :merge_index, :commons %>

 

最後,因為網站需要 preheat stylesheets 和 javascripts ,在 capistrano recrips 內需要加上

before("deploy:symlink") do
  run "cd #{release_path} && bundle exec jammit"
end

 

做完 preheat CSS/JS 之後,就不會在出現網站脫衣服的狀況囉!

笨笨小蟹 發表在 痞客邦 PIXNET 留言(0) 人氣()

update: 2011/08/31

Rails 3.1.0 釋出後,迅速的在 Guide 網站補上 Asset Pipeline 教學!

http://guides.rubyonrails.org/asset_pipeline.html

 

文章內教學的非常清楚,但我還沒空嘗試,因此僅留下 link 記錄。

http://blog.envylabs.com/2011/08/using-the-asset-pipeline-outside-of-rails-serving-and-running-coffeescript-2/

笨笨小蟹 發表在 痞客邦 PIXNET 留言(1) 人氣()

css3buttons_rails_helpers gem 是幫助你將網站套上精美的 github style button 。

https://github.com/thetron/css3buttons_rails_helpers

 

注意 3.0.x 只能使用 0.9.5 版, 3.1 之後就沒有問題可以使用最新版本,因此要記得在 3.0.x 時使用

gem 'css3buttons', '0.9.5'

裝好之後需要跑 generator ,所以請下

$rails g css3buttons

然後將 layouts 裡面的 stylesheet_link_tag 換成

<%= css3buttons_stylesheets %>

 

這個 helper 是將 CSS3 GitHub Buttons 這個網站提供的 css and html 將他包裝成 rails 的 helper 。

http://nicolasgallagher.com/lab/css3-github-buttons/

 

其實用法很簡單,如果沒有用 rails helper gem ,那就是自己將需要變成 button 的 html tag 加上 class。

加上 class="button" 就會變成按鈕,加上 class="button pill" 就會變成圓角按鈕,加上 class="button primary" 按鈕內的文字就會粗體顯示。

有 button 的 class 配合各種 icon 圖案,例如 class="button icon add" ,就可以完成精美的按鈕。

 

如果使用 rails helper gem ,那麼就可以很直覺的使用定義好的 helper 來套上漂亮的按鈕。

規則很簡單,就是將原本的 link_to method 改成 button_link_to ,然後把你要的效果(大小、重要、顏色、圖案)向前疊加,來看範例吧。

原本是

<%= link_to("Search", search_path) %>

改成 helper 寫法是

<%= big_search_button_link_to("Search", search_path) %>

大按鈕+搜尋圖案,看起來就非常的直覺!

 

如果需要變色也可以,例如原本是

<%= link_to("Delete", delete_path) %>

改成 helper 寫法是

<%= danger_remove_button_link_to("Delete", delete_path) %>

危險紅色+移除按鈕,非常完美!

 

如果你想用 Button Group 也沒問題,寫法是

<%= button_group do %>
  <%= button_link_to "Show", @post %>
  <%= button_link_to "Edit", edit_post_path(@post) %>
  <%= negative_trash_button_link_to "Delete", @post, :confirm => "Are you sure? %>
<% end %>

這樣就會出現連在一起的按鈕群組啦!

笨笨小蟹 發表在 痞客邦 PIXNET 留言(0) 人氣()

記錄幾個好用的 tmbundle ,可以幫助整理 coding style 。

首先是小技巧,要設定 TextMate 使用 tab 時的對應字元,就在視窗的最下方,有個顯示 Soft Tabs: 2 或是 Tab Size: 4

我的團隊是使用 space 2 做為 indent ,所以是設定 Soft Tabs: 2 。

 

其次是,常常會發現有些檔案拉下來排版亂掉,可能是來自美術,或是手誤沒排好等等,可以裝 code-beautifier.tmbundle

操作方法是按 alt+cmd+b 你就會看到亂掉的程式碼,被重新整理好 indent 啦!

 

最後,你常常會不小心在行尾多了一些空白,可以裝 whitespace-tmbundle

用法完全無痛,因為他取代了存檔熱鍵 cmd+s ,只要存檔就會自動清潔所有的 trail whitespace ,讚!

笨笨小蟹 發表在 痞客邦 PIXNET 留言(0) 人氣()