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

Standard

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

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

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

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

繼續閱讀…

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

Standard

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

繼續閱讀…

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 的方法。

繼續閱讀…

主機搬遷至雲端 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 與冒修改系統檔案的風險,就留給讀者自己評估囉。

繼續閱讀…

[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 的外掛元件得以重新被解析一次。

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

繼續閱讀…

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

Standard

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

WebConf Taiwan 2013

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

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

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

Day 1 (01/12)

繼續閱讀…

[SignalR][ASP.NET] 使用 SignalR 來達成電腦網頁與手機網頁即時互動

Standard

之前寫過一篇 [Node.js] 使用 Node.js 來達成電腦網頁與手機網頁即時互動,當時是用 Node.js,最近看到了 .NET 也提供了相似的解決方案 ── SignalR。

官方的介紹是:Async signaling library for .NET to help build real-time, multi-user interactive web applications.
SignalR 一樣可以做即時跟多使用者的互動網路應用程式。
在製作案件時,有時候是無法在客戶的主機上動手腳的,為了不要被技術跟環境侷限,多會一種解決方案也不賴呀。
而且寫的時候覺得 SignalR 寫起來更簡單,很多事都在背後偷偷幫你做完了(.NET 似乎都這樣封裝得好好的,但還是要搞懂其中原理比較好呀)。

廢話不多說,來看一下怎麼實作此次的需求囉。

繼續閱讀…