檢視 ruby 和 python 的變數型態

ruby和python這兩個script language分別有內建的函式可以讀取變數的型態，只是用法不太一樣。

自己常常搞混，特此紀錄一下：

#python
s='ww'
type(s)

#ruby
s='qq'
s.type()

將ruby script編譯成exe檔

網路上有幾個將ruby script編譯成windows可執行的exe檔的工具，常見的包括exerb、rubyscript2exe，可是我自己實際使用，這兩個工具都有一些難解的bug，用了一下就放棄了。

最後找到ocra這個工具，它其實也有bug，但很好解決。

首先，請在command line用gem安裝ocra（我是用linux系統，windows下指令可能會有點不一樣，但應該大同小異，請自己變通）

gem install ocra

接著，用ocra compile你的.rb檔

ocra example.rb

第一次使用時，可能會產生下列錯誤（因為我已經解決下列錯誤，所以以下訊息是google來的）

Invalid gemspec in [c:/Ruby187/lib/ruby/gems/1.8/specifications/ocra-1.3.0.gemspec]: invalid date format in specification: "2011-06-19 00:00:00.000000000Z "
Invalid gemspec in [c:/Ruby187/lib/ruby/gems/1.8/specifications/win32-autogui-0.5.0.gemspec]: invalid date format in specification: "2011-08-17 00:00:00.000000000Z" 1.8.8

循著錯誤訊息的路徑（c:/Ruby187/lib/ruby/gems/1.8/specifications/）找到「ocra-1.3.0.gemspec」這分檔案後，把"2011-06-19 00:00:00.000000000Z"改成"2011-06-19"即可。
第二個錯誤訊息我自己其實沒碰到，是google時發現別人有這個問題。不過依法修改它的date format應該就沒問題了。

接著，重新執行第二個指令，應該就會產生一份example.exe
這份.exe檔在沒有安裝ruby的windows上也可以執行。

ps, 我用的ruby是1.8.7

讓html中的元素隨著捲軸移動

如題，這個功能在比較動態的網頁應該都很常用，以前要用長的可怕的js code才有辦法達成，現在用jquery，幾行code就輕鬆搞定
當然，要使用這個功能，務必在html的head中讀入jquery，此處不贅言，直接切入script
以下code主要參考Keep element in view while scrolling using jQuery這篇文章

 $().ready(function() {  
  var $scrollingDiv = $("#scrollingDiv"); // #scrollingDiv請改成自己要移動的元素
 
  $(window).scroll(function(){ 
   $scrollingDiv
    .stop()
    .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );   
  });
 });

有幾行值得特別說明
2.因為捲軸一移動，就會用到這個function，假如直接把這個DOM選取的動作存成一個jquery object，可以省去每次都尋找element的運算，效率會比較好
6.捲軸轉動的幅度可能很大，在第7行調整元素位置前，要先確保上個動作停止
7.animate是jquery內建調整css的函式；scrollTop是計算捲軸位置的函式。此處讓選取到的div的top margin隨著捲軸位置增加30px，即可確保這個div永遠距離頁面頂端30px

取消iframe的scroll bar

在iframe的tag中加上scrolling="no"這個attribute即可
簡潔有力！

js計算某字元出現的次數

假設有個字串 s="abbbbc" 我們要用js計算這個字串中b出現了幾次，可以用 s.split("b").length-1 其他語言也大同小異

在RoR架構上自動導入手機版網頁

行動裝置的成長趨勢有目共睹，針對螢幕較小的行動裝置設計版型也因而變成重要學問。

一般做行動裝置版的網頁有三種方法：
1. 直接做兩套系統，偵測到user是用行動裝置連上網頁時，自動轉址到行動裝置系統的url
2. 同一套系統，但提供不同的url和html，行動裝置登入時轉址到該url。
3. 同一套系統，但做兩套css，使用者用行動裝置進入時，套用行動裝置版的css


這篇文章針對RoR架構，討論第二種方法的實做方式。

一、
設計行動版網頁url時，在網域前加上「m」（mobile）算是很常見的習慣，例如m.facebook.com
但使用免費的平台，例如heroku，不太可能這樣做
所以這邊設定的網址是在主網址後加上m，例如ptttranspost.heroku.com/m

假設user用電腦登入時的頁面，對應的controller是「home」，那我們就在app/views/home下新增"m.html.erb"。
接著，請到config/routes.rb 新增路徑

match 'm' => 'home#m'

二、
編輯app/controllers/home_controller.rb

class HomeController < ApplicationController
        layout 'application', :except =>"m" #avoid applying layout config to m.html.erb 
    def index
        platform=request.env["HTTP_USER_AGENT"] #get user agent to check users' platform
        if /android/i =~ platform or /iPhone/i =~ platform #if users' platforms are phones, redirect it
            redirect_to m_path
        end 
    end 

    def m
    end 
end

第二行的用意是防止layouts/application.html.erb 裡的設定干擾行動版網頁
假如也要將layouts的設定套用到行動版網頁，則不用加上這行，甚至也不用做第一步驟和新增一個「m」action，因為上述兩動作都是為了避免m.html.erb被layouts影響而做。 不考慮會被layouts影響的話，第六行直接「render "m.html.erb"」即可

ps.應該也可以針對行動版網頁設計layouts，不過我用不到，所以還沒研究
要這樣用的話，可以參考這個語法：
layout false, :only => :your_action_name
三、
編輯m.html.erb，將其編輯成想要的版型
剩下的就依此類推！

研究了好一陣子，希望能幫上忙

vimrc的好用設定

set number  "顯示行數"
set autoindent  "自動縮排"
set shiftwidth=4  "使用'>'或'<'調整縮排時，一次調4格"
set tabstop=4  "讓每個tab空4格，而非預設的8格"

autocmd FileType python set tabstop=4|set shiftwidth=4|set expandtab
"假如檔案為.py檔，則讓tab=空白。因為python視tab和space為不同的東西，這個設定可以避免不必要的困擾"

syntax on  "依檔案副檔名顯示色碼"
filetype on
filetype plugin on  "開啟plug in"

nnoremap <c-n> :NERDTree <cr>  "以ctrl+n開啟NERDTree這個plugin"

nmap <silent> <c-l> :tabnext<cr>  "以ctrl+l 切到下一個vim tab"
nmap <silent> <c-k> :tabprev<cr>  "以ctrl+k 切到上一個vim tab"

以上中文解說皆是註解，可以直接複製貼上到.vimrc中

讓div並排

div大概是當今html最常用的element，不過div會換行的特性也常常造成排版的困擾。要解決這個問題讓div並排有不少方法，一般最常見的是用float這個attribute：
<div id="1" style="float:left;">aaa</div>
<div id="2" style="float:left;">bbb</div>

需要特別注意的是，如果把position設成absolute，這招就沒用了，詳見這串討論。

關於float：

• 設定標籤元素與文字間的相對位置float屬性 ：
• float : right; /*標籤元素向右靠.文字圍繞在左邊*/
• float : left; /*標籤元素向左靠.文字圍繞在右邊*/
• float : none; /*以預設位置顯示*/

打亂javascript

因為各種不同的考量，有時候會希望別人看不到自己網頁上的javascript
目前並沒有任何方法可以防止他人看到你的js code
但是可以打亂你的code，在不影響code正常運作的前提下，讓別人無法肉眼辨識你在寫什麼
以下網頁提供這樣的功能：
http://dean.edwards.name/packer/
http://javascriptcompressor.com/

終端機的編碼方式會影響檔案的讀取

今天發現我用vim開某些檔案時，會陷入像是bug的情境，無法正常顯示、編輯該檔案
在terminal中下"cat"指令讀這些檔案，也不會顯示任何東西。更怪的是，這些code還是可以正常執行！
困擾好一陣子，終於得知是編碼問題：
有這些問題的檔案，裡面都有用utf8編碼的中文，可是我昨天為了一些原因，把我的終端機編碼方式改為big5，因此產生這個問題。
改回utf8就ok了

用SyntaxHighlighter在blogger上貼美麗的code

研究了一個下午，終於研究出解法，特此和大家分享：

1.
至SyntaxHighlighter官網下載他的source，並把自己需要的部分上傳到自己的空間

其中shCore.js、shCore.css、shThemeDefault.css三份檔案是必備的
其他的則是看自己需求做選擇

噹噹！這步是讓我困擾最久的，因為我一開始不知道要上傳到哪....
不過我現在已經上傳到學校提供的空間，後文會分享連結

2.
修改blogger的html檔，在head標籤中貼上

<link href='http://homepage.ntu.edu.tw/~b97103021/shCore.css' rel='stylesheet' type='text/css'/link> <href='http://homepage.ntu.edu.tw/~b97103021/shThemeDefault.css'rel='stylesheet'type='text/css'>
<script language='javascript' src='http://homepage.ntu.edu.tw/~b97103021/shCore.js'/>

以上三者為必備

以下為選擇性
使用css
<script language='javascript' src='http://homepage.ntu.edu.tw/~b97103021/shBrushCss.js'/>
使用javascript
<script language='javascript' src='http://homepage.ntu.edu.tw/~b97103021/shBrushJScript.js'/>
使用python
<script language='javascript' src='http://homepage.ntu.edu.tw/~b97103021/shBrushPython.js'/>
使用ruby
<script language='javascript' src='http://homepage.ntu.edu.tw/~b97103021/shBrushRuby.js'/>
使用java
<script language='javascript' src='http://homepage.ntu.edu.tw/~b97103021/shBrushJava.js'/>

因為我自己通常只會用到上述5種，所以只有上傳這5種到我的空間上
見者有份，歡迎直接取用；若有自己的空間，則把src改為自己的link

4.
在同一份html檔的body tag中，記得要call SyntaxHighlighter.all() 這個function
例如
<script>
SyntaxHighlighter.all()
</script>

5.
之後寫文章時，就可以用
<pre><code class="language-html">

//code

</code></pre>
或
<pre class="brush: rb">
#your code
</pre>
之類的語法貼code，如此一來code就會被上色，且會顯示行數

以上的code依序會顯示

//your code

#your code

另外，blogger目前似乎不支援跳脫html字元的功能（有選項，但似乎沒用）
想要顯示html的tag時，分別要用跳脫字元 & l t 和 & g t取代<和> （我為了正確顯示，所以中間加了空白，使用時不需空白）

利用javascript把form的內容儲存在cookie中

有時候user會需要不斷重填某份表單，但這份表單中有些內容是不需重填的，這時候就會希望把不需重填的部份存到cookie，並且在user每次進入網頁時自動讀取，以減少user使用上的麻煩。
我們可以用jquery達到這個目標：

function remember( selector ){
    $(selector).each(
        function(){
            //if this item has been cookied, restore it
            var name = $(this).attr('name');
            if( $.cookie( name ) ){
                    $(this).val( $.cookie(name) );
            }
            //assign a change function to the item to cookie it
            $(this).change(
                function(){
                        $.cookie(name, $(this).val(), { path: '/', expires: 6 });
                }
            );
        }
    );
}
$(document).ready(
    function(){
        if($.cookie('host')=='ptt2')
            $("#host_ptt2").attr("checked","checked");
        else
            $("#host_ptt").attr("checked","checked");
        remember('[name=ptt_ID]');
        remember('[name=aid]');
        remember('[name=board]');
    }
);

本文未完成，有待補完

更改rails server的port

要在啟動rails內建server時更改port（預設為3000），可以在terminal中輸入以下語法

rails server -p xxxx #xxxx為想要的port
rails s -p xxxx #亦可用縮寫s取代server

如此一來，就可以同時測試不同版本的project！