[Rails] 修正 simple_form 2.1 中 input value 使用英文之外的多語系字元,導致無法正常產生 label for, input id 對應的錯誤

Standard

近日在解票時,遇到一張關於 simple_form 表單問題的 ticket。
(註:該專案使用的 SimpleForm 是 v2.1.1 版本)

# 先聲明小弟是前端工程師,完全的 Rails 生手,有說明錯誤的地方請多多包涵哦 :$

情況是這樣子的,在這個專案裡,使用者個人資料的表單中有個這樣的欄位:

它是以群組核取框(checkboxes)呈現,使用者同時可以核取多個項目。

但奇怪的是,用 SimpleForm 產生的這個欄位,在點選「科技」、「網路」、「手機」的文字(label)時,預期行為應是「讓點選的 label 文字左方的核取框作用(勾選或取消勾選)」,但無論按哪個文字,都是第一項「科技」的核取框有反應而已。

這是因為產生的 HTML 語法有誤導致:

<div class="input check_boxes optional">
  <label class="check_boxes optional" for="user_profile_attributes_preferred_info">喜歡哪類資訊</label>
  <span>
    <input name="user[profile_attributes][preferred_info][]" type="hidden" value="">
    <input class="check_boxes optional" id="user_profile_attributes_preferred_info_" name="user[profile_attributes][preferred_info][]" type="checkbox" value="科技">
    <label class="collection_check_boxes" for="user_profile_attributes_preferred_info_">科技
    </label>
  </span>
  <span>
    <input name="user[profile_attributes][preferred_info][]" type="hidden" value="">
    <input class="check_boxes optional" id="user_profile_attributes_preferred_info_" name="user[profile_attributes][preferred_info][]" type="checkbox" value="網路">
    <label class="collection_check_boxes" for="user_profile_attributes_preferred_info_">網路
    </label>
  </span>
  <span>
    <input name="user[profile_attributes][preferred_info][]" type="hidden" value="">
    <input class="check_boxes optional" id="user_profile_attributes_preferred_info_" name="user[profile_attributes][preferred_info][]" type="checkbox" value="手機">
    <label class="collection_check_boxes" for="user_profile_attributes_preferred_info_">手機
    </label>
  </span>
</div>

不大正常,每個 input 的 id 以及 label 的 for 屬性值都一模一樣,當然選不到預期對應的項目囉。

Continue reading

將 DigitalOcean 主機地點從 San Francisco 搬遷至 Singapore 小記

Standard

之前有提到我的主機從家裡的舊主機搬到 DigitalOcean 了,而前陣子(差不多 2014 年 2 月初),DigitalOcean 官方宣布了即將在近期增設新加坡機房的消息

就地理位置而言,對亞洲用戶來說新加坡理論上應該會比舊金山的機房連線來的快。

但經過 traceroute 觀察的結果(我使用 HiNet 光世代),連到新加坡主機的過程似乎會先去香港再繞去日本 NTT 再過去啊…
不過單純就 ping 值來說,舊金山主機的延遲時間在 155ms 上下,而新加坡主機則是 60~80ms 間,雖仍不理想但還是稍快一些(要是有日本機房就好啦),嗯…反正是個人使用的小站,就來試試看囉。

不過搬家 IP 會變,找個比較不忙的時候來一一處理。
以下就簡單記錄一下搬家過程。

Continue reading

淺談第三方 script cache 與自動升級的作法

Standard

最近工作上遇到了「實作一段類似廣告嵌入的 JavaScript 程式碼(有點拗口,實際上就像是加入 Google Analytics 的追蹤碼那樣,動態產生 script tag,然後指定其 src 是某一段網址。),而該 script 於 server 端打了 expire max 的 cache,但又希望安裝該段 js 的網站不必更動 js 檔名(或 querystring)的原則下,能夠自動吃到最新修改版本的程式碼」的 issue,解票過程中嘗試了幾種方案,雖最後未採用此篇提到的「自動升級法」解決,不過覺得此解滿有意思的,特此記錄。

Continue reading

Fire.app 安裝 extensions 的方法 – 以 compass-rgbapng 為例 (Windows & Mac)

Standard

前陣子購買了 Fire.app 這套加速前端 prototyping 的好工具,也透過它將個人作品集網站的 CSS 改寫成 SCSS 作為練習。

期間因為需要用到 compass-rgbapng 這套 Fire.app/Compass 的 exntension,它可以將 CSS 中 rgba 改為 transparent PNG 來處理,這都是為了 Internet Explorer 啊….

這邊便簡單紀錄一下 Fire.app 安裝 extensions 的方法。

Continue reading

主機搬遷至雲端 VPS – DigitalOcean

Standard

網站架在房間的自組伺服器主機上差不多 7 年(2006 開始)了,run 的是大學學長 chance 推薦的 FreeBSD,上面跑的服務有 Web, FTP, BBS (Maple-itoc), DNS, Samba 等等;除了用 Pentium-III 主機那段期間硬碟損壞造成掛站一陣子之外,也算穩穩地度過了這幾年(後來也升級至 Pentium 4 了)。

 

近年 VPS 相當熱門,一直想把主機丟到雲端上,除了可以省些電費,還可清出房間的一小角,最近剛好有些空閒就來完成這個小目標。

 

做了下不同方案的比較,由於敝站流量不大,但仍需 24 小時開著,以 Amazon EC2 的計費方式來說好像有些不划算(目前 Amazon EC2 的一年免費方案被我申請來測試 Windows IIS 主機,上面放些 .net 的案子);網上相當多人推薦的 Linode 一個月也是要 $20 美元,雖然規格很棒,但等需求比較大時再說吧;最後選擇的是 C/P 值很高的 DigitalOcean,使用最低方案 512MB RAM, 20GB SSD,每月 $5 美元

 

經過信用卡登記(花旗速度真快,剛刷完馬上就打電話來確認了 : P)與申請,上面沒有慣用的 FreeBSD,就試試 Ubuntu 囉,還有 LAMP 都幫你裝好的方案,相當省事。

 

目前已經把 BBS, Apache 等服務都架好了,等 DNS 陸續生效即可。

如果有意玩玩看 DigitalOcean 的服務,也可以點擊下面連結來註冊(此連結包含本人的推薦碼,可讓我獲得推薦金 $10,您本身並不會有任何損失)

https://www.digitalocean.com/?refcode=9db047e3ee66

 

繼續觀察與學習中。

[Android] Facebook Home 試用,以及修改裝置名稱以安裝至 SAMSUNG S2 (i9100) 的方法

Standard

上週 Facebook 發表 Facebook Home,而於美國時間 04/12 已上架至 Google Play,但根據官方網頁消息,目前支援的機型僅有:HTC One X、HTC One X+、Samsung GALAXY S III 以及 Samsung GALAXY Note II 等。不過今天一早已經發現網上有 Facebook Home 的 apk 流出版,便下載來嘗鮮體驗看看。(筆者註:流出版的 apk 無法保證其安全性,請自行斟酌是否要下載安裝

 

我使用的是 Samsung GALAXY S II (i9100),並不在官方宣稱的支援機種內,故就算安裝完 Facebook Home apk 後開啟(同時也請記得從 Google Play 更新 Facebook 與 Facebook 即時通喔!),僅能看到這個畫面:

謝謝你安裝 Facebook Home。目前你的裝置尚未被支援,一旦 Facebook Home 可在你的裝置上使用,你將會收到通知。

 

還是很想試用看看的話,就得修改 Android 裝置名稱來欺騙應用程式,讓其認為這支手機是支援的機型囉!
不過必須要 root 才能進行系統檔案的修改,至於是否值得為此去 root 與冒修改系統檔案的風險,就留給讀者自己評估囉。

Continue reading

[PHP] cURL 進入需要 Basic Authentication 的網址取回資料

Standard

今天幫一位朋友去撈某線上資料庫的資料,該線上資料庫有 Basic Authentication 的帳號密碼驗證(就是會跳一個 dialog 要輸入帳號密碼那種),因此在 cURL 連過去撈資料時,必須加送帳密,以及 Cookies 的部份(少送 Cookies 就被認為未登入了)。

簡單記錄一下程式碼:

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $target_url);                     // 連接目標網址
    curl_setopt($ch, CURLOPT_COOKIEJAR,  $cookie_file);             // 儲存 Cookies
    curl_setopt($ch, CURLOPT_COOKIEFILE, $cookie_file);             // 再傳送一開始獲得的 Cookies
    curl_setopt($ch, CURLOPT_HEADER, 0);                            // 不要返回 header 資訊
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                 // 返回字串,不要直接输出
    curl_setopt($ch, CURLOPT_USERPWD, $username . ":" . $password); // Basic Authentication 帳號跟密碼
    curl_setopt($ch, CURLOPT_TIMEOUT, 30);
    curl_setopt($ch, CURLOPT_POST, true);                           // 啟用POST
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query( array( "foo" => $foo ) )); // 這邊就塞 POST 的東西囉
    $result = curl_exec($ch); 
    curl_close($ch);

    // 以下就是解析字串了,不是本篇重點,參考就好
    $html = str_get_html($result);
    $tr = $html->find('tr');
    $max = count($html->find('tr'));

    for ( $i = 1 ; $i < $max ; $i++ ) {
        echo $tr[$i]->find('td', 0)->plaintext;
    }

PS. 至於取回輸出結果並解析這塊,我是用 PHP Simple HTML DOM Parser 做的,跟 jQuery 用法相似,簡單上手。

[Facebook][Javascript] Facebook 按讚鈕預設隱藏,而後顯示卻在 IE / Firefox 中無法顯示的解法

Standard

上週在做個活動案時,有個需求是希望使用者必須是某個 Facebook 專頁的粉絲才能進行遊戲,若尚未成為粉絲,則立即用 Lightbox 方式顯示按讚鈕讓使用者按讚,「讚」完就可以進入遊戲。

是個相當單純的需求,不過有個需要特別注意的地方:若一開始用 CSS 讓放置按讚鈕的容器(如 div)為 display: none;,而後才讓其顯示(本例是透過 jQuery 的 $(element).show())的話,在 Internet Explorer 與 Firefox 上會無法讓按讚鈕顯示出來,而 Google Chrome 卻可以。

情況如圖:

可以在檢測元素工具中觀察到,Internet Explorer 與 Mozilla Firefox 瀏覽時,在容器被 show() 時,按讚元素的寬高仍為 0,但 Google Chrome 是正常的寬高。

翻閱了 Facebook Developer 文件中提到 FB.XFBML.parse() 方法可重新解析頁面(或指定)的元素,讓 Facebook 的外掛元件得以重新被解析一次。

果然,在主控台中手動呼叫該方法後,按讚框成功地顯示出來了!

Continue reading

[懶人包] WebConf Taiwan 2013 投影片連結

Standard

2013/06/20 更新: 官方 Youtube 頻道已將議程影片放上

WebConf Taiwan 2013

最近雖然公司案子也是忙到翻天,上禮拜就兩三天到凌晨,星期五晚上還等客戶確認等到星期六凌晨兩點多… >< 不過星期六(01/12)、星期天(01/13)就是期待已久的 WebConf Taiwan 2013!再怎麼睡眠不足也要去參加!(絕對不是因為付了報名費不去很可惜的關係 XD)

這兩天三軌(設計師 & 開發者)的議程,真是收穫滿滿!(雖然有些議題實在很硬… 我還是好弱啊 orz)

除了無法影分身術同時聽不同的講題外,一時也難以消化完全,於是在這篇文章中整理一下各講師佛心放出的投影片連結,待有空時再慢慢咀嚼。

Day 1 (01/12)

Continue reading