十個行動版網頁(Mobile Web)開發輔助工具

Standard

近期筆者執行了滿多行動版網頁(Mobile Web),同時也是 RWD 設計的專案。光測不同的瀏覽器(IE 8-11、Chrome、Firefox、Safari)就夠忙了,而行動平台上的各種尺寸、瀏覽器與其他變因更是耗費不少前端工程師的青春…XD

而有時候光用桌面瀏覽器模擬手機瀏覽器,並無法完全真實呈現在行動裝置的情況,所以在開發的過程中使用了許多工具來輔助,在開發期就力求盡量測到(並進而解決)不同裝置的「近似」真實的情況。

以下列出十項,個人覺得還不錯的行動網頁開發輔助工具:

Continue reading

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

Standard

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

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

舉個例子:


(可點圖放大)

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

經過比較發現,在我這個專案的情境中,只有被套上 transform: rotateposition: 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 對應的錯誤

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 用法相似,簡單上手。