在 Android 原生瀏覽器上特別模糊的 SVG 圖片與 workaround

最近在執行的手機版網頁專案，針對其中許多 icons，我都使用了 SVG 圖片來取代高解析裝置下表現地慘不忍睹的 PNG 圖片，銳利的向量圖片放大縮小也不怕，真棒。

但在進行不同裝置的測試時，發現在某些 Android 上用原生瀏覽器瀏覽時，某些 SVG 圖片特別模糊，毛邊都相當明顯，但又不是每張 SVG 圖片都是如此，相當詭異。

舉個例子：

（可點圖放大）

左方是正常的情況，SVG 圖檔相當清晰
（Chrome for Android v36）
右方則是在 Android 原生瀏覽器上的情況
可以注意圖片的邊緣都相當模糊、不銳利

經過比較發現，在我這個專案的情境中，只有被套上 transform: rotate 或 position: fixed，且是 background-image 方式使用的 SVG 圖片會有這個問題。

上 stackoverflow 搜尋看看，果然有類似的問題被提出（雖然提問者的情境與我不同），而也有人提出了 workaround 來暫時解決這個問題。

根據討論串，這應是 Android 原生瀏覽器及 Chrome for Android 25 版之前的 issue，這個 issue 會使符合上述情境的 SVG 圖片，以 CSS 像素的密度（density）被繪製出來，但多數高階 Android 手機中，CSS 的 1px 並不等於裝置的 1px，所以會讓它看起來很模糊。

而討論串中被提到的 workaround 雖然也沒有對為何可以這樣解決的原理做太多解釋，但也滿有意思的，是在 SVG 檔案中嵌入一個透明（opacity=0）的文字物件：

<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="'MyriadPro-Regular'" font-size="12">a</text>

就可讓 Android 原生瀏覽器/Chrome for Android 正常地繪製符合上述情境的 SVG 圖片，就連 zoom in 也一樣清楚噢。

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

近日在解票時，遇到一張關於 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 屬性值都一模一樣，當然選不到預期對應的項目囉。

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

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

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

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

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

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

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

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

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

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

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

主機搬遷至雲端 VPS – DigitalOcean

網站架在房間的自組伺服器主機上差不多 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

繼續觀察與學習中。

JSDC.tw 2013 議程與投影片連結

2013/06/06更新：JSDC Youtube 頻道出爐了！

第一日

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

上週 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 與冒修改系統檔案的風險，就留給讀者自己評估囉。

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

今天幫一位朋友去撈某線上資料庫的資料，該線上資料庫有 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 中無法顯示的解法

上週在做個活動案時，有個需求是希望使用者必須是某個 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 的外掛元件得以重新被解析一次。

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

Partner Studio

patw 的技術筆記