熱血漢誌 - Question about myself.

[回顧] 2011 永不放棄單車全系列

noreply@blogger.com (Caesar Chi) — Thu, 26 Jan 2012 09:17:06 PST

2011 對我來說是一個單車生崖嶄新的開始，自從2010 單車環島之後就開啟了自己的單車生活，也讓自己對單車這項運動有了更深一層認識，對於這項運動更為熱愛。在這一年當中，完成了許多的不可能，真正的完成了永不放棄。

2011 這一年，回顧起來是自我運動的全新開始，一開始只希望有一台自己的單車，與朋友一同參與挑戰賽事，最後卻演變成一同完成永不放棄全系列單車賽事，回頭看看是自己挖了一個坑給自己，還是真的想要挑戰自己?!

2011 ，初次體會到什麼叫做【永不放棄】，從身體的疼痛，氣候的考驗，耐力的極限，每每都是挑戰自我的最大極限，過程中幾乎痛苦萬分，最後的結果不一定是甜美的，卻是踏實的。

2011，挑戰自我賽事，

2011/04 洄瀾300KM
2011/05 第三屆武嶺盃
2011/05 探索新中橫(塔塔加)
2011/06 鹿場新視界(苗栗鹿場)
2011/06 冬三河鐵人三項(半程體人三項)
2011/07 阿里山極限挑戰王
2011/08 挑戰巔峰武嶺(南投武嶺)
2011/11 西濱極限(200KM)
2011/12 陽金P字道

最後，當然還是要感謝所有一同參與的夥伴以及支援的朋友，因為有你們，才有辦法支撐到最後，也因為有你們，這一路走起來並不孤單，2011這一年的單車生活，特別感謝單車家族，給予我第一台自己的單車也讓我實踐了夢想的第一步，2012 相信有許多挑戰等著我去面對。

挑戰極限，永不放棄!!!

[分享] Git 簡單介紹

noreply@blogger.com (Caesar Chi) — Thu, 22 Dec 2011 08:54:07 PST

上次在PHP 讀書會裡面分享的一個主題，Git 一個經常使用，卻不太熟得版本控制工具，上面資料如果有錯歡迎各位指正。

simple Git

View more presentations from Caesar Chi

裡面有介紹到幾個工具，

這些工具及資料要特別感謝hSATAC提供。

[分享] javascript RegExp.$1 正規表示法理論與範例

noreply@blogger.com (Caesar Chi) — Tue, 20 Dec 2011 10:54:24 PST

javascript 裡面正規表示法其實蠻多元的，參考ECMAScript 15.5.2 當中提到，

""When String is called as part of a new expression, it is a constructor: it initialises the newly created object.

原文網址

意謂著當String 出現的時候，同時也會產生RegExp 這個物件，表示String 也同時帶有RegExp 屬性。因此可以瞭解為何javascript String 可以match, exec, replace 等function 當中使用正規表示法。

RegExp 如同前面提到是一個javascript object.該如何建構？

var reg = new RegExp(/text/, "gims");

var reg = /text/gims;

兩者的宣告方式是相同的，如此就宣告一個完整的正規表示法物件。實際應用幾乎使用第二種宣告方式，今天要討論的就是RegExp.$ 這個變數到底是怎麼產生。

在這邊就不討論深入正規表示法內部使用規則及原理，回到本文重點，實際上看一下在javascript 正規表示法的另外一種用法RegExp.$1.....$xx

當我們使用正規表示法時，使用分群就會可以將不同分群，視為不同的變數，就可以直接使用RexExp.$1,RexExp.$2...以此類推。

一個很爛的舉例來說，

var str = "abcdefghij";
var reg = new RegExp(/(\w)(\w)(\w)(\w)(\w)(\w)(\w)(\w)/);

for (var i=1; i< 99; i++) {
console.log(RegExp["$" + i]);
}

會看到結果為，

live demo
實例上活用起來也蠻有趣的，例如

var str = "tel:(02)2888-8888";
var reg = new RegExp(/^tel:[(](\d\d)[)]+(\d+)-(\d+)/);
str.match(reg);
console.log("tel number is : " + str);
console.log("tel country number is : " + RegExp.$1);
console.log("tel front 4 number are : " + RegExp.$2);
console.log("tel last 4 nuber are : " + RegExp.$3);

結果如下

live demo

結語
RegExp 這個物件之前有稍微接觸過，不過並不是十分瞭解，這次因為工作的關係又有機會碰到，實際找了一下ECMA-262之後，對於這個物件為何會產生也稍微有點瞭解。

正規表示法實際上在javascript 的使用上十分廣泛，不只是String 的過濾，例如其他DOM選取，js-template 正規表示法都是增加實做速度的實際應用。

相關連結
http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
http://www.regular-expressions.info/javascript.html
http://blog.roodo.com/rocksaying/archives/2670695.html

[閒談] 產品開發對於瀏覽器支援度之取捨

noreply@blogger.com (Caesar Chi) — Tue, 13 Dec 2011 09:58:01 PST

最近以前的學弟有提到關於Html5支援的問題，總覺得對於某些技術在某些瀏覽器之下無法運作，就放棄實做的可行性，個人真的覺得十分可惜，因此以下是我回覆的內容，當然也是在實務開發流程所會遇到的狀況，分享給大家。

---------------------------------------------------------------------

對於html5 的整體規格來說，目前已經是趨向於瀏覽器先行，目前的狀況幾乎是先實做，後規範，W3C，WhatWG所有相關單位的規格書幾乎趨向於邊看邊修的地步，因此如果要實做這些新規範（新標準）自然會有所取捨，在前期也需要花費一番功夫。

文中提到的東西是實際存在的問題，在我們實際產品開發上幾乎會碰到html5 支援度問題，而我們的規劃會是：

1. 瀏覽器支援的底限為何

2. 其他瀏覽器支援度

3. 其他瀏覽器可替代方案

首先，查詢需要的規格有哪些，接著訂定出瀏覽器支援度的底限，例如本產品只能支援到IE8 ，IE6.7 完全無法支援（但是用IE6.7 會跳出警告視窗）

接著，當然以瀏覽器基本支援為最佳，再者於瀏覽器上開始尋找替代方案，例如安裝外掛程式、安裝Flash等方式進行調整。

通常會先建議使用的瀏覽器，以及其他支援的瀏覽器，當然會附註哪些瀏覽器效能會比較差，請升級或安裝他牌瀏覽器。（畢竟使用者希望用美工刀切西瓜，我們還是要讓他這麼做。）

例如像網站的圓角，在Chrome, firefox, Opera, Safari 都可以使用CSS語法自然呈現，不過對於IE 7.8.9 就會使用SVG圖形描繪的方式（目前是使用CSS-PIE3）達到相同的目的，當然不可否認，IE 7.8.9 自然呈現的效率就是慢，而另外一種選擇方式就採用，IE 7.8.9不會有圓角效果，只會出現正正方方的邊角。

當然這只是其中一個例子，在跨瀏覽器的實做上還有許多解決方式和許多有趣的套件庫可以參考。

這當中有一種例外，就是對於新技術的展現，就像目前只有Chrome，Opera支援Device這種tag，而你當中就是希望使用原生Tag 支援多媒體裝置的展現，當然就不需要考慮到瀏覽器支援度的問題，這個時候是屬於呈現新技術，展現新方向，跟一般產品開發上是截然不同。

insertAdjacentHTML和 innerHTML 的差異

noreply@blogger.com (Caesar Chi) — Thu, 10 Nov 2011 05:12:33 PST

在Html document 方法當中，在W3C Html5 裡面有提到幾個DOM create 方法，今天來探討一下insertAdjacentHTML()這個方法。

insertAdjacentHTML(position, text)，使用上類似於之前的append()，多加上了位置選擇，因此可以做到類似於jQuery DOM Insertion這些方式。

另外值得一提的部份就是text ，是可以直接以文字帶入，由insertAdjacentHTML產生為DOM Object，不需要類似之前先Create DOM，再執行append的方式。

// document.getElementById("insert-method").insertAdjacentHTML("beforeend", "bar");

除了提一下insertAdjacentHTML這個方法之外，同時也探討一下innerHTML，到底跟insertAdjacentHTML有什麼差異。

在insertAdjacentHTML() Enables Faster HTML Snippet Injection 這篇文章當中裡面有點出innerHTML的異同，如果只是需要使用append DOM的方式，強烈建議採用insertAdjacentHTML，而不要再使用innerHTML，怎麼說呢？

通常會看到一種簡化append 的方式

// document.getElementById("inner-method").innerHTML += "bar";

執行上當然沒有任何問題，不過在執行效率上會有差異，innerHTML會先將取得內部所有DOM tree，接著再將DOM object 執行serialize，最後才會bar這段文字接上。

可以在這邊直接看一下線上範例。

測試

在不同瀏覽器經過實際測試效果，可以看一下底下數據（經過500次loop）:

Chrome

Firefox

Safari

Opera

結論

當然也不會要大家都捨棄innerHTML，但是使用時機可能要在多加注意，如果只是取得單純DOM to string ，用innerHTML是個不錯的方式，一行搞定，而且取得資料符合需求，但是如果要append 可以考慮一下insertAdjacentHTML。

HTML5 裡面提供許多新型態的DOM selector 和 insert method, 各位開發網站的時候，如果不考慮支援IE 之類網站，其實就可以大方使用這些瀏覽器，畢竟支援度佳速度效率上也提高很多，歡迎來到HTML5 的世界。

[教學] hubot install. hubot 機器人安裝

noreply@blogger.com (Caesar Chi) — Wed, 26 Oct 2011 19:30:00 PDT

source: https://github.com/blog/968-say-hello-to-hubot

hubot 機器人，可以自己寫script 代替人工作業，也可以用來做代替工人智慧產物。目前這個專案已經使用Coffee script 和node.js重新編寫，並且Open source於github，詳細內容就不多介紹，本篇主要教學如何安裝hubot 。

查了很久，對於這套專案的安裝說明實在很少，做個簡單教學紀錄。

安裝前提，以下幾個項目需要事先安裝

安裝步驟

git clone https://github.com/github/hubot.git
cd hubot
bin/hubot

注意：
中間可能遇到某些module 尚未安裝，請使用npm install 安裝其他module執行指令

注意：

執行hubot 之前，請先切換到hubot 目錄下
執行hubot 之前，請先啟動redis server -> redis-server

常用指令

hubot help

範例指令

搜尋圖片

hubot image me <query>

搜尋youtube

hubot youtube me <query>

加載script

指令就是將整個script 專案下載之後，將src/scripts 的資料整個複製到hubot 裡面執行。

git clone https://github.com/github/hubot-scripts
cd ~/hubot
cp -r ~/hubot-scripts/src/scripts ~/hubot/src/scripts

參考網址

[教學] nodeJS - npm install on linux and windows

noreply@blogger.com (Caesar Chi) — Tue, 18 Oct 2011 22:33:57 PDT

修改紀錄：

2011/10/19  node.exe 經過努力之後，child_process 已經可以支援npm cli.js安裝指令，npm github 網站資料安裝說明也進行同步更新，因此本篇資料經過調整後，簡化linux 部份，增加windows 安裝說明！

node.JS 就已經夠麻煩了，還需要什麼nmp，看這三個字就覺得沒有意義，npm (NodeJS package management) ，許多擴充功能都可以藉由此套件快速安裝，例如express, HTTP-connect, template，藉由第三方套件可以大大縮短開發時程。

nodejs 主要程式安裝完後，其實還有一大區塊，就是直接使用module ，使用現成的模組來開發，以下教學如何安裝npm，主要分為linux 、 windows 安裝教學說明：

PS. 記得別使用root權限安裝

Linux npm 安裝

curl http://npmjs.org/install.sh | sh

linux npm 安裝完成！

windows npm安裝

下載node.exe Windows executable，預設放至於

curl http://npmjs.org/install.sh | sh

1. 設定環境變數
將node 路徑設定環境變數%PATH%，指令模式(command line)下輸入以下指令

cd c:\node\bin\
set path=%PATH%;%CD%
setx path "%PATH%"

2. 安裝npm
安裝npm 前請先確認已經 Git 1.7.6 以上版本

git config --system http.sslcainfo /bin/curl-ca-bundle.crt
git clone --recursive git://github.com/isaacs/npm.git
cd npm
node cli.js install npm -gf

恭喜，npm 安裝完成。

完成

試試看安裝npm 套件

npm install socket.io

[工商服務]

NodeJS Taiwan期待更多人的支持，希望能夠聽到你的回應及分享。

參考資料：
https://github.com/isaacs/npm

[教學]Node.js 安裝教學. node.JS install

noreply@blogger.com (Caesar Chi) — Mon, 17 Oct 2011 20:01:53 PDT

修改紀錄：

2011/10/18
目前nodeJS 已提供windows 執行版本，以及linux 自行編譯的步驟，程序上也都大為降低錯誤率，因此本篇文章將內容縮減為Linux、Windows 兩種版本安裝說明。

所有的nodeJS文章，通常一開始的簡介，之後就是環境安裝介紹，當然也不免俗的來介紹一下，隨著時間的演進與發展，在各種環境都已經有自己一套node repository ，這邊就介紹最基本的unix 底下compile，和windows 兩種方式

Linux

執行以下指令

git clone --depth 1 git://github.com/joyent/node.git   
./configure  
make -j2  
make install # 如果出現權限問題，再加上sudo 試試看

以下事項提醒，安裝前先行確認環境中已安裝：

git
gcc
python

同時不要使用root權限安裝，否則會導致node module 因為權限問題，執行出現錯誤。

Windows

http://nodejs.org/#download

至此網址，下載node.exe Windows executable，下載完後預設放入C:\node\node.exe，同時設定環境變數：

NODE_PATH="c:\node\"

設定完後可以將其他module 放置此目錄底下，執行node 程式時，將會引用此目錄中module，如不存在才會尋找相對路徑。

測試hello.js

將底下檔案儲存為hello.js

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello Node.js\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

在console 切換到hello.js 目錄底下執行以下指令。

node hello_node.js

會顯示以下結果。

Server running at http://127.0.0.1:8124/

接著開啟瀏覽器輸入http://127.0.0.1:8124/，會顯示以下訊息

Hello Node.js

恭喜安裝成功!

會顯示正確訊息表示 node.js.安裝成功。

[工商服務]

NodeJS Taiwan期待更多人的支持，希望能夠聽到你的回應及分享。

無法取代的原生 - Javascript

noreply@blogger.com (Caesar Chi) — Sat, 15 Oct 2011 06:00:49 PDT

最近幾年javascript 實在是一門進步神速的語言，從基本瀏覽器腳本語言，到HTML5 使用canvas、video、websocket、worker等，甚至是後端編譯腳本nodeJS / ringoJS，當然還有許多從javascript 編寫出來的套件庫，整體來說javascript 發展的速度比我想像的還要快得多。

回顧javascript 歷史

從Netscape 發展此種語言開始，壓根不會想到javascript 會演變成現在的局面，因此在當初訂定javascript 來說，就是毫無標準可言。Javascript 對於沒有接觸過程式開發的人來說，是一種好的開始，畢竟它的容錯性高，出錯率低，簡單來說就是，開心宣告就宣告，不用宣告也可以寫出能動的程式碼！這也造就了javascript 初期開始，可以直接複製、貼上、接專案的映像。

因此由Douglas Crockford 也開始提倡起javascript: Good parts(javascript :優良部份)，也發展出jslint ，提供大家作為javascript 程式碼驗證工具，會這樣子做不是沒有原因，畢竟javascript 實在是『太方便寫』，自己寫自己的，當然獨自開發這不是太大的問題，但是如果遇到大型專案時，這種充滿『重構味道』的程式碼，自然是一場不可抹滅的惡夢。

套件庫掘起

在AJAX 崛起之後，javascript 的發展就變得相當吃重，也漸漸的讓開發人員體會到前端開發的重要性。當然javascript 開發，對於前端來說還是有很多問題，光是跨瀏覽器就是個很令人頭大的問題。

因此各家開發出自己的套件、工具庫，例如YUI，dojo，jQuery等。當然這是個很不錯得方向，專家們開發出套件，而開發者可以利用套件組裝出自己所需要的效果，瑣碎的問題交由套件處理掉，讓開發者減少開發時間與降低開發門檻。

Javascript 還是沒這麼簡單

前面的套件其實只解決了『前端開發的問題』，但是此時的javascript 已經不再是原本的javascript ，從前端到後端，甚至是指令等都可以利用javascript 來處理，例如nodeJS ，要怎麼利用javascript 寫出易讀，讓開發者容易瞭解、再利用的程式這是個難題。

coffeescript、Dart兩者都屬於基於javascript 之上的產物，其目的就是為了解決『javascript 物件化』的問題，對於我來說，這兩種語言都不算是新的產物，頂多算是開發javascript 簡化工具，開發的程式結構越來越有『物件導向』的感覺，閱讀程式碼也更加簡單、優雅。

潛在的問題

萬變不離其宗，以上這幾種『工具』都是基於javascript 的變化型，根據使用套件及簡化作業的經驗來說，最終的最終還是會遇到許多不可解的問題，想要解決這些問題，或者是瞭解問題的所在，還是要去瞭解javascript ，只有根本的瞭解底層基礎運作，才是根本。

當然也許有開發者都不會碰到『地雷』，或者是『將地雷視而不見』，選擇繞路而行，雖然問題看似被解決了，事實上就變成了某種『經驗談』，或者是『它就是這樣子處理』，根本的問題還是存在著。

結語

javascript 演變至今，已經有一種越來越強大的局面，不可否認它是一種『非常糟糕的語言』，任何一種寫法都可以執行。當然隨著規範的更動，以及開發者的努力，這些問題都會漸漸被限制，規範也會越來越清楚。

當然利用套件開始自己的javascript 之路其實是不錯的事情，不管是從前端的jQuery 開始，或者是直接撰寫coffeescript 、Dart開始，都是一個不錯的方向，從門檻最低的平路開始，在一路上中後段還是會發現 - 『越不想碰的，最終還是要面對』

但至少你已經開始了這條，『不歸路』

[分享] livereload 設定及原理分析, livereload project analysis

noreply@blogger.com (Caesar Chi) — Sat, 24 Sep 2011 04:28:26 PDT

之前介紹過livereload ，深深覺得他是個好東西，用過之後開發網站就不能缺少他，我真的回不去了。可是就會想要探討到底livereload 是怎麼做到修改檔案之後，就即時做頁面重新讀取呢？

分析
livereload 當程式執行之後就會開啟一個websocket server，如果檔案有任何變動，會發送訊息給瀏覽器，瀏覽器就會依據檔案不同執行不同程序。

Server端其實做的事情就是監聽檔案變化，發送訊息給client！

而預設的網站port號會採用35729，如果想要變更port號，在自己的家目錄底下有一個.livereload 檔案，去底下修改這個檔案，例如35729 修改為 88887。

~/.livereload

config.port = 88887

如此就可以將預設的port號修改，那到底還有哪些config 可以使用呢？還有哪些不為人知的秘密呢？接下來直接https://github.com/mockko/livereload一探究竟。

伺服器端檔案
livereload / server / lib / livereload.rb

host, 
:port, 
:exts, 
:exts_overwrite, 
:exclusions, 
:debug, 
:apply_js_live, 
:apply_css_live, 
:apply_images_live, 
:grace_period

原來可以使用的設定有這麼多種，至於每一個變數的功能為何，就不一一闡述，但是要置換的話，其實可以直接修改~/.livereload 這個檔案就可以了。

同時可以從原始碼中得知是採用em-dir-watcher（也是同一個作者），做IO 監控只要檔案有變動，立即就會得知同時做檔名比對發送資料到前端。

在linux 環境底下，底層檔案變更監控是採用Inotify機制，如此一來檔案變更的時候就可以即時知道哪些檔案變更了。

接著看到example 裡面有兩個檔案xbrowser.html, xbrowser.css，看到這個檔名應該跟跨瀏覽器有關係，讓我們來看一下。

    <script src="../src/content.js"></script>
    <script src="../src/background.js"></script>
    <script src="../src/xbrowser/livereload.js"></script>
    <script>
    window.onload = function(){
        livereload.run();
    };
    </script>

xbrowser.html就是直接使用livereload client 的連接，直接載入javascript，因此不需要加載任何外掛，測試一下也的確可以正常使用。

設定ip, port
/src/background.js

host: ('ip'),
port: 35729,

直接在這個檔案修改即可。

既然都有前端source code ，那就來找一下到底是怎麼換至javascript, css, img是不需要整頁重載，而只有載入局部資料的呢？整個頁面怎麼處理呢？
/src/content.js

html 重新載入

handleHTML: function(path) {

                this.document.location.reload();
}

頁面變動的部份其實很簡單，只要頁面檔案有變動，就直接reload page。

javascript 載入

handleJS: function(path, options) {
// 省略
            if (script.src && this.equals(script.src, path)) {
                this.reloadScript(script);
                reloaded++;
            }
// 省略

        return reloaded;
    }

css 載入

handleCSS: function(path, options) {

        var links = this.document.querySelectorAll('link[rel="stylesheet"]');

            if (this.equals(link.href, path)) {
                reloaded += this.reattachStylesheetLink(link);
            } 
}

可以看到是讀取script, style 節點，取得src 資料之後進行比對，在做重新載入的動作，可以得知只要任何一個.js 檔案變動之後，就會直接將script 的資料重新載入執行。

另外比較值得一提，css部份，為了重新載入不要有畫面一閃的問題出現，因此會先clone style 節點，在真正得到新的資料之後，再將利用reattachStylesheetLink這個方法將檔案重新載入，如此解決掉畫面閃爍的問題。

Image 載入

    handleImages: function(path, options) {
        var reloaded = 0;


        var stylesheets = this.document.styleSheets;
        var imgs = this.document.images;
        var expando = this.generateExpando();
        for (var i = 0; i < imgs.length; i++) {
            var img = imgs[i];
            if (this.equals(img.src, path)) {
                img.src = this.generateNextUrl(img.src, expando);
                reloaded++;
            }
        }
        var src;
        imgs = this.document.querySelectorAll('[style*=background]');
        for (i = 0; i < imgs.length; i++) {
            img = imgs[i];
            if (!img.style.backgroundImage) {
                continue;
            }
            src = this.extractURL(img.style.backgroundImage);
            if (src && this.equals(src, path)) {
                img.style.backgroundImage = 'url(' + this.generateNextUrl(src, expando) + ')';
                reloaded++;
            }
        }

        imgs = this.document.querySelectorAll('[style*=border]');
        for (i = 0; i < imgs.length; i++) {
            img = imgs[i];
            if (!img.style.borderImage) {
                continue;
            }
            src = this.extractURL(img.style.borderImage);
            if (src && this.equals(src, path)) {
                img.style.borderImage = 'url(' + this.generateNextUrl(src, expando) + ')';
                reloaded++;
            }
        }

        for (i = 0; i < stylesheets.length; i++) {
            reloaded += this.reloadStylesheetImages(stylesheets[i], path, expando).length;
        }

        return reloaded;
    },

Image 就分成幾個部份來實做重新載入

css重新載入之後，會讀取相關css image
img 節點，路徑比對之後，重新載入影像

結語
事實上其他瀏覽器外掛，也是載入javascript 的方式來執行。如果直接自行載入javascript ，就可以免除掉各個瀏覽器安裝外掛的問題發生。只要瀏覽器支援websocket 就可以直接執行。

從原始碼來看，其實livereload 在前端(javascript )做了許多小地方調整，例如為了保證載入的檔案不會有cache 問題，因此加載的uri 都會加上一組亂數，在頁面重新讀取也考慮到css, javascript 的問題等。

目前比較可惜的是IE無法支援websocket，似乎可以使用socket.io 替換掉 websocket，如此就可以直接跨瀏覽器支援了，但是目前沒有這個版本！殘念（有人想要一起寫嗎？livereload rewrite）

[分享] livereload 安裝及使用 (linux). livereload install and tutorial

noreply@blogger.com (Caesar Chi) — Sat, 24 Sep 2011 05:10:07 PDT

livereload 就跟名字一樣，『立即重新讀取』，主要用途為當編輯檔案修改後，會讓監聽頁面自動重新讀取。這樣子好處在於網站開發者不需要一直重新執行瀏覽器、編輯器切換，按下F5 重新讀取頁面等繁雜的手續。

本篇文章將講解livereload ，快速導覽！
livereload 原理說明請參考！

安裝

需要先安裝ruby, gem
參考ruby, rvm, gem 安裝文章

sudo gem install livereload

使用
在需要監控的資料夾底下輸入

livereload

完成伺服端的操控。

接著開啟chrome 瀏覽器，安裝livereload extension，

會看到瀏覽器右上角多一個圖示

接著對著按鈕按下滑鼠左鍵，選項

輸入IP，或者監聽的Domain name，按下按鈕之後，就開始監聽

網站就開始會自行進行頁面更新。

結語
livereload 可以替網站開發者帶來很多好處，雖然只有減少開發者重新讀取頁面的時間，不過對於重複動作來說其實縮短很多，只需要專注於程式的開發，如果以缺點來說的話，應該就是會發現，需要兩顆螢幕才夠使用。

[筆記] nodeJS VM module使用方法

noreply@blogger.com (Caesar Chi) — Wed, 21 Sep 2011 05:57:18 PDT

在node 裡面通常比較少寫到怎麼使用vm module，今天看了這則require() files that do not use module structure，才曉得原來vm 可以這樣子使用。可以參考一下source code ，裡面的程式就是實際vm 運作的方式。

時機
官方解說

JavaScript code can be compiled and run immediately or compiled, saved, and run later.

當我們需要執行一段程式，但是又不想寫成module 的模式（使用require），這個時候可以採取vm 來執行片段程式，簡單來說可以達到兩個目的：

部份程式片段抽離。
不使用全域變數污染環境。

example.js

var vm = require('vm');

globalVar = 0;

var script = vm.createScript('globalVar += 1', 'myfile.vm');

for (var i = 0; i < 1000 ; i += 1) {
  script.runInThisContext();
}

console.log(globalVar);

程式碼產生之後，使用runInThisContext，重複執行1000次之前產生的程式，實際得到的結果為：

範例中得知，其實vm 的執行方式類似於javascript eval，雖然前端是不喜歡這種eval （evil）作法，不過對於後端來說，似乎是一種將程式分離的方法之一。

進階
如果想要從外部寫檔案，又不想要使用require，那該怎麼做呢？比較好得選擇可以採取file system，直接將檔案讀取回來之後，再使用一個參數下去接收，比較理想的function 在範例裡面來看，推薦使用vm.runInNewContext()，實際來個範例。

testVm.js，要抽離的javascript

count += 200;
k += 100;

vm.js

var vm = require('vm'),
    fs = require('fs'),
    sandbox = {
        id    : '123',
        count : 0,
        k     : 0
    },
    jsCode;

jsCode = fs.readFileSync('./testVm.js');

vm.runInNewContext(jsCode, sandbox, 'myfile.vm');

console.dir(sandbox);

實際結果

將需要的變數全部包裝於sanbox，讀取程式之後，參數會存回sanbox中，就可以不用使用全域變數(Global variable)，如此可以達到將程式抽離，變數封裝。

結語
之前還真沒有碰過vm，只知道node 裡面有這個模組，實際到底要怎麼使用卻不太清楚，經過討論串提出之後，配合著實例重新閱讀API，就可以明白到底VM的產生是為了什麼，要怎麼去使用這個模組，也許大家會有更好得用法，歡迎提出！

[工商服務]
nodeJS 華文資料需要你的支持，希望能夠聽到你的回應及分享，歡迎加入。

Document.write 塞入script 會如何？

noreply@blogger.com (Caesar Chi) — Tue, 13 Sep 2011 07:31:37 PDT

今天看到一則噗浪討論串，感覺很有趣，便花點時間研究一下這個課題，問題如果使用document.write塞入script會有什麼優缺點？

在實做上大部分都是使用非同步載入，主要都是為了讓頁面載入時間能夠重疊，感覺上讀取時間就會縮短，幾乎使用document.createElement('script')，塞入head當中，這樣子執行上就不會有阻塞的問題。

如果頁面上是使用document.write？

這個問題還真的沒有研究過，稍微Google一下之後，發現有一篇討論串解決心中的疑惑，不過還是隨手寫一下sample page藉由瀏覽器來驗證。

測試1

sample.html

<body>
<!--javascript-->
<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript' src='after.js'><\x2Fscript>");
document.write("<script language='javascript' type='text/javascript' src='before.js'><\x2Fscript>");
</script> 
</body>

before.js

alert("Before");

after.js

alert("After");

為了讓容量上有些差異因此，使用javascript 混淆器，將after.js 內容調整為

$=~[];$={___:++$,$$$$:(![]+"")[$],__$:++$,$_$_:(![]+"")[$],_$_:++$,$_$$:({}+"")[$],$$_$:($[$]+"")[$],_$$:++$,$$$_:(!""+"")[$],$__:++$,$_$:++$,$$__:({}+"")[$],$$_:++$,$$$:++$,$___:++$,$__$:++$};$.$_=($.$_=$+"")[$.$_$]+($._$=$.$_[$.__$])+($.$$=($.$+"")[$.__$])+((!$)+"")[$._$$]+($.__=$.$_[$.$$_])+($.$=(!""+"")[$.__$])+($._=(!""+"")[$._$_])+$.$_[$.$_$]+$.__+$._$+$.$;$.$$=$.$+(!""+"")[$._$$]+$.__+$._+$.$+$.$$;$.$=($.___)[$.$_][$.$_];$.$($.$($.$$+"\""+$.$_$_+(![]+"")[$._$_]+$.$$$_+"\\"+$.__$+$.$$_+$._$_+$.__+"(\\\"\\"+$.__$+$.___+$.__$+$.$$$$+$.__+$.$$$_+"\\"+$.__$+$.$$_+$._$_+"\\\");"+"\"")())();

接著可以看到sample.html，程式內部先使用document.write載入，after.js，再載入before.js，先預期一下結果：

非同步，先執行before.js，再執行after.js
同步載入，執行after.js，再執行before.js

結果1
結果看到，先執行after，再執行before ，因此可以判斷如果採用document.write，頁面的script 是會同步載入資料。

測試2
接著測試看看，如果頁面上資料跟載入的頁面有相關性會是什麼情況呢？

sample.html

    document.write("<script language='javascript' type='text/javascript' src='after.js'><\x2Fscript>");
    document.write("<script language='javascript' type='text/javascript' src='before.js'><\x2Fscript>");
    document.write("<script language='javascript' type='text/javascript'>function during() { alert('during'); }<\x2Fscript>");

多寫入一個function callContent。

before.js

alert("Before");
during();

呼叫sample頁面上的during函式，如果正確的話，應該是before之後就會執行during 。

after.js

$=~[];$={___:++$,$$$$:(![]+"")[$],__$:++$,$_$_:(![]+"")[$],_$_:++$,$_$$:({}+"")[$],$$_$:($[$]+"")[$],_$$:++$,$$$_:(!""+"")[$],$__:++$,$_$:++$,$$__:({}+"")[$],$$_:++$,$$$:++$,$___:++$,$__$:++$};$.$_=($.$_=$+"")[$.$_$]+($._$=$.$_[$.__$])+($.$$=($.$+"")[$.__$])+((!$)+"")[$._$$]+($.__=$.$_[$.$$_])+($.$=(!""+"")[$.__$])+($._=(!""+"")[$._$_])+$.$_[$.$_$]+$.__+$._$+$.$;$.$$=$.$+(!""+"")[$._$$]+$.__+$._+$.$+$.$$;$.$=($.___)[$.$_][$.$_];$.$($.$($.$$+"\""+$.$_$_+(![]+"")[$._$_]+$.$$$_+"\\"+$.__$+$.$$_+$._$_+$.__+"(\\\"\\"+$.__$+$.___+$.__$+$.$$$$+$.__+$.$$$_+"\\"+$.__$+$.$$_+$._$_+"\\\");"+"\"")())();

混淆碼，內容不變。

依據上面的順序，預測輸出結果應該是after, before, during。

結果2
透過瀏覽器測試，發現during 執行時會顯示錯誤。

測試3
修改一下，sample.html 順序


    document.write("<script language='javascript' type='text/javascript' src='after.js'><\x2Fscript>");
    document.write("<script language='javascript' type='text/javascript'>function during() { alert('during'); }<\x2Fscript>"); 
    document.write("<script language='javascript' type='text/javascript' src='before.js'><\x2Fscript>");

其餘程式不變，測試之後發現，順序果然如預期after, before, during，正常執行。

線上測試頁面 online demo

結論
使用document.write方式，確定可以使script節點同步載入，會等待資料載入結束後才會繼續執行後續程式，與javascript 載入有相同問題，必須要注意宣告先後順序，需要優先執行的函式盡量在最開始就宣告完畢，以避免錯誤發生。

[分享] Google API Oauth 2.0 教程範例

noreply@blogger.com (Caesar Chi) — Thu, 08 Sep 2011 02:47:57 PDT

Oauth 2.0 開始需要事先註冊project。
http://code.google.com/apis/console#access

專案開啟完之後，接著需要參考文件
http://code.google.com/intl/zh-TW/apis/accounts/docs/OAuth2.html

接著需要些基本的Sample code
http://code.google.com/intl/zh-TW/apis/accounts/docs/OAuth2.html#ClientLibraries

以PHP client 為例，需要修改 google-api-php-client/src/config.php

    // The application_name is included in the User-Agent HTTP header.
    'application_name' => '',

    // OAuth2 Settings, you can get these keys at https://code.google.com/apis/console
    'oauth2_client_id' => '',
    'oauth2_client_secret' => '',
    'oauth2_redirect_uri' => '',

    // The developer key, you get this at https://code.google.com/apis/console
    'developer_key' => '',

這些資訊都必須填入，注意！oauth2_redirect_uri必須和project 填寫資訊相同。

相關
在找相關資訊的時候也找到這個不錯的文章介紹
http://sudocode.net/article/430/get-a-users-google-email-address-via-oauth2-in-php/

LIVE DEMO

要求使用者授權。

取得所有聯絡人資訊

後記

發現網路上的資料大部分都以Oauth 1.0居多，2.0的資料十分少量，可能是因為Google api 目前Oauth 1.0, 2.0 並行授權的關係吧！筆記一下這些資料，希望下次進行撰寫API會有些幫助。

[教學] git submodule 移除，合併不同git

noreply@blogger.com (Caesar Chi) — Wed, 07 Sep 2011 22:59:24 PDT

Git submodule 移除的方法。找到相關資料，做一下筆記！

假設要移除的Git submodule 名稱為foo！

修改.gitmodules檔案，將foo相關資訊行數刪除。
修改.git/config 檔案，將foo相關資訊行數刪除。
git rm foo，把foo資料夾移除。

完成！

如果要從其他git 將資料合併怎麼做？

切換 git 目錄底下
執行 git clone git://example.com example，將資料複製下來
接著進入exmaple目錄，將目錄底下的 .git , .gitignore移除

完成！

文章有寫得不詳盡之處，再麻煩底下留言以方便資料改進，感謝！

[分享] XMLHttpRequest執行AJAX 跨網域存取

noreply@blogger.com (Caesar Chi) — Mon, 29 Aug 2011 05:57:21 PDT

跟大家在介紹Socket.io 的時候，意外發現居然Socket.io 可以執行跨網域的存取，為什麼？這個時候問題就已經埋下，挖掘之後發現！居然是平凡無奇的XMLHttpRequest，還有針對IE做的奇怪處理，到底是怎麼辦到的？

分析
W3C 提案Cross-Origin Resource Sharing(CORS)，這份文件裡面提到，可以透過文件Header 設定可存取網域限制，以及存取方法、時間等，限制的部份有幾個：

必須為http, https
傳送資料方式為GET, POST
資料格式為application/xml

透過剛才的CORS，發展出更高層級XMLHttpRequest，W3C裡面也有實現方式XMLHttpRequest Level 2草案，裡面的這一段介紹:

The XMLHttpRequest Level 2 specification enhances the XMLHttpRequest object with new features, such as cross-origin requests, progress events, and the handling of byte streams for both sending and receiving.

XMLHttpRequest Level 2，可以支援cross-domain 請求，這個部份符合我們的需求。與CORS結合之後，似乎就可以ajax 跨網域存取，感覺不賴。

IE呢？

IE8以上有類似XMLHttpRequest Level 2的物件，稱為XDomainRequest，在
XDomainRequest - Restrictions, Limitations and Workarounds這篇文章裡面仔細描述如何搭配CORS原則完成跨網域的實做。

實做

準備請求網頁，header 就遵守CORS的規範編寫，範例為cross.php

<?php
header("Access-Control-Allow-Origin: http://clonn.info");
echo "hello cross domain.";
?>

Header 的部份宣告Access-Control-Allow-Origin，並且限制可存取網域為http://clonn.info，如果希望所有網站都可以存取可以使用"*"

接著準備一個十分基本的html 網頁，裡面的Javascript 就是這場重頭戲。


function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

var request = createCORSRequest("get", "http://60.248.47.246/demo/crossDomain/cross.php");
if (request){
    request.onload = function(){
        alert(request.responseText);
    };
    request.send();
}

這邊會向cross.php頁面請求，主要的請求在createCORSRequest 裡面，要檢查瀏覽器是否支援XMLHttpRequest Level 2 ，可藉由檢查物件裡是否預設有withCredentials屬性做為判斷，IE的部份檢查是否有XDomainRequest object。

藉由這個方法就能夠達到跨網域的存取。

線上模擬
Live demo

請求的頁面，回應畫面如下

跨網域存取要求發送之後，會顯示網頁如下

的確，我們做出跨網域請求，同時也將頁面的資料完成呈現，成功！

後記
很多時候都是站在前人的肩膀上看世界，才發現自己如此的渺小，跨網域存取的方式之前只知道iframe 或者是使用flash，如果不考慮IE 7的話，實際上以CORS原則的Ajax 跨網域存取是個不錯的解決方案。

參考資料

[分享] elementFromPoint() 模擬 Google feedback 效果

noreply@blogger.com (Caesar Chi) — Fri, 26 Aug 2011 03:22:11 PDT

最近很熱門的Google +，其中最讓自己感覺最深刻的部份就是feedback system，整個的回饋機制十分貼心，運作上也是十分流暢。不過最讓人好奇的地方就是，為什麼進入feedback system 之後，會發現更神奇的地方。

為何在最上層有個 iframe mask，可是當我滑鼠移動的時候卻可以取得底下的物件！？這到底是怎麼回事呢？

經過幾番尋找之後，透過Flyworld 得知，原來可以使用elementFromPoint 的方式，利用滑鼠座標取得目前指到的元素(Element)。

似乎看到了一點署光，可以試著用elementFromPoint 來取得目前的物件。

作法：

HTML

&lt;!--//many HTML element--&gt;
&lt;!--iframe is a mask.--&gt;
&lt;iframe id="mask" src="inner.html" style="border: 1px solid red; position: absolute; background: #000;width:100%; height: 100%;opacity: 0.5;filter:alpha(opacity=50);"&gt;&lt;/iframe&gt;

接著在HTML裡面的Javascript code ，建立一個getElement的方法，在滑鼠移動座標的同時，會將mask iframe 移開，再瞬間移動回來，回傳目前得知的元素(element)

Javascript

function getElement(e) {
    $("#mask").css("top", "-9999px");
    ele = document.elementFromPoint(e.clientX, e.clientY);
    $("#mask").css("top", "0");
    return ele;
}

接著maks iframe裡面我們也要做些手腳，當滑鼠移動的同時，事件觸發主要還是在mask上面產生，因此mask 的頁面中只需要加上javascript code.

Mask ifram javascript

function eventHandle(e){
    e.cancelBubble=true;
    // this is the element from Top view.
    var elm = top.getElement(e);
    // do something  
}

document.onmousemove=eventHandle;

如此完成Mask跟主要頁面的溝通，並且可以藉由滑鼠移動取得目前元素，感覺還蠻實用的。

實例：
Live demo link

一開始進入頁面會是這樣子，灰色效果為Mask遮罩，底下元素全部都被覆蓋

滑鼠移動之後，會出現物件黃色框框，乍看之下好像是在元素上加上border，實際上呢？

實際上是取得頁面物件後，將此元素的座標大小（寬高）重製一個放在在Mask iframe裡面

完成隔著mask卻可以實際取得元素的方法！

後記：
主要感謝協助的各位，提供這麼好用的方法，之前根本就不曉得elementFromPoint 這個方法，而且幾乎目前主流瀏覽器都支援，真是大大感動。

[教學] nginx 設定 virtual host.

noreply@blogger.com (Caesar Chi) — Wed, 03 Aug 2011 23:53:38 PDT

很多時候會用到不同子域名(sub domain)，這邊講解如何使用nginx 設定不同網域名稱及設定成不同資料夾。

設定
DNS server 設定好名稱之後，修改檔案default

sudo vim /etc/nginx/sites-available/default

假設目前要增加nodejs.clonn.info，資料夾為/usr/share/nginx/www/nodejs

#    其他設定資料

server {
        listen 80;
        server_name nodejs.clonn.info;
        root /usr/share/nginx/www/nodejs;
        index index.html index.htm index.php;

        location / {
                try_files $uri $uri/ /index.html;
        }
}

#     其他設定資料

實測
在/usr/share/nginx/www，/usr/share/nginx/www/nodejs各增加不同的index.html，測試一下結果，的確如我們所想像。

結語
目前測試起來nginx和apache的設定方式雖然不大相同，不過能做到的功能大多可及，想要嘗試看看nginx的人可以一起來測試看看，另外歡迎加入NodeJS的行列。

分享的習慣造就了Google +

noreply@blogger.com (Caesar Chi) — Tue, 02 Aug 2011 23:33:07 PDT

從2006年開始就進入到social network的時代，沈迷當中卻不知道為何而沈迷，當時最興盛的『無名小站』，每天生態就是看看好友動態，看看大家照片，分享照片，寫寫自己遊記分享心情故事，同時在底下與大家留言、討論、激戰，同時與『PTT』新聞同步聯播，這就是當時最興盛的social network in Taiwan.

之後網路上有了些變動，開始紅起來『twitter』『plurk』『facebook』...好多人開始進入微型網誌的時代，一開始進入網站之後大家還不瞭解，這些東西能夠幫你做什麼，而今天這些不能夠幫你做什麼的網站，卻一點一點的深入每個人的生活當中。

2011年，Google +的崛起，為什麼Google +能夠真的快速崛起？個人認為這都是習慣的養成，一個新的服務形成，大家第一步會做些什麼？

註冊
編輯個人資料
隨處亂點
在其他social website分享此訊息給我的好友
分享資料給其他人
加更多人為好友

為什麼會這樣子？
可以從Social network歷史看出一點端倪，從一開始twitter，plurk來說，當時進入這個網站，能夠張貼些簡短的話，給大家看到，許多人還以為這只有白痴會做的事情，沒事情為什麼要讓大家知道你在碎碎念什麼。另外一個問題就是，你要碎碎念給誰聽啊？

接著模式形成了，大家發現，咦！？一堆網友七嘴八舌，可以同時即時得到回饋的感覺還真不賴，每個人都有機會成為萬人注目的焦點，而其中主要的關鍵就是『好友』。

沒錯！只要好友一多，分享的事情又能夠令人關注，就能夠成為這個小圈圈的王，哪怕只是雞毛蒜皮小事情。帶動了『分享』，『線上互動』的習慣開始生成。

Google + 做了什麼？
Google + 在2011年這個已經被 Facebook，Twitter所河蟹的龐大網路世界中，大家已經習慣加入好友，而Google +帶來的就是簡便的介面，其他Social network所缺少的部份，Google + 做到的部份就是：
朋友分群
特定分享
群組關注
隨意分享

這些點在其他Social network上雖然都有，但不是全部都有，而Google + 將這些缺少的部份整合了起來，也讓更多人能夠接受，簡單的介面，乾淨的版面，更是其他版面所沒有，另外一個優勢就是Google + 可以透過Chrome 結合更多extension做到更多事情。

結語
Google + 做到其他Social network定位所缺少的部份，雖然並不是最好，但至少是個突破，也許Google +是另外一種工具也不一定，至少對筆者來說分群就是一種很棒的機制，對於不同分群分享不同話題，用著不同的概念來描述事情，都是一種不同的體驗。

有興趣歡迎大家加入我的Google +

[分享] node.exe 利用child_process做些事情

noreply@blogger.com (Caesar Chi) — Tue, 02 Aug 2011 23:34:55 PDT

node v0.5.3 版本終於出現了，先看一下原文到底做了哪些更新。

2011.08.01, Version 0.5.3 (unstable)

Fix crypto encryption/decryption with Base64. (SAWADA Tadashi)
#243 Add an optional length argument to Buffer.write() (koichik)
#657 convert nonbuffer data to string in fs.writeFile/Sync (Daniel Pihlström)
Add process.features, remove process.useUV (Ben Noordhuis)
#324 Fix crypto hmac to accept binary keys + add test cases from rfc 2202 and 4231 (Stefan Bühler)
Add Socket::bytesRead, Socket::bytesWritten (Alexander Uvarov)
#572 Don’t print result of –eval in CLI (Ben Noordhuis)
#1223 Fix http.ClientRequest crashes if end() was called twice (koichik)
#1383 Emit ‘close’ after all connections have closed (Felix Geisendörfer)
Add sprintf-like util.format() function (Ben Noordhuis)
Add support for TLS SNI (Fedor Indutny)
New http agent implementation. Off by default the command line flag --use-http2 will enable it. make test-http2 will run the tests for the new implementation. (Mikeal Rogers)
Revert AMD compatibility. (isaacs)
Windows: improvements, child_process support.
Remove pkg-config file.
Fix startup time regressions.
doc improvements

這次更新主要的幾個重點在於，windows用戶來說最大的更動開始支援child_process，node能夠支援child_process之後，就可以做很多~~（壞）~~事情。

模組(Modules)幾乎都可以支援（目前專案上所使用的模組都可以支援），雖然幾經測試之後筆者這邊的npm還是無法安裝成功。但是根據上篇文章的windows模組加載方式，皆可以正常執行。

關於child_process
測試nodejs code，儲存為test.js

var exec = require('child_process').exec,
    ls    = exec('dir');

ls.stdout.on('data', function (data) {
  console.log('stdout: ' + data);
});

ls.stderr.on('data', function (data) {
  console.log('stderr: ' + data);
});

ls.on('exit', function (code) {
  console.log('child process exited with code ' + code);
});

使用node.exe v0.5.2以前，會造成錯誤無法執行

使用node.exe v0.5.3，可以正確執行cli指令

結語
child_process可以讓node.exe變成windows本地端服務的產出，這邊只是一個小小範例，當然各位的技術都比我強，說不定能產出些java xxxx.java之類的指令做出些~~更奇怪~~偉大的事情出來。

[教學] nodeJS直接module加載於windows native node

noreply@blogger.com (Caesar Chi) — Tue, 02 Aug 2011 23:33:54 PDT

NodeJS 終於在0.5.1(unstable) 版本提供了Windows native supprot.，但是美中不足的部份就是childprocess的功能支援不完全，因此無法透過node.exe來安裝npm。

這樣子會造成很多遺憾，例如socket.io, redis, mysql等其他外掛模組都無法加載進來，本篇文章就是講解如何直接將這些外部module加載進來，不需要經過npm或者其他腳本語言安裝module。

設定環境變數
下載node v0.5.2 native windows

將node.exe放置到自己的資料夾中（這邊預設為c:\node）

設定windows 環境變數，設定其中一個變數為NODE_PATH，值為c:\node (剛才設定的路徑)，另外變數Path，在數值後面加上;%NODE_PATH%

加載外部模組

首先準備了一個simplechat 範例程式(這是從網路上挖出來的)，下載後解開，將資料夾重新命名為simplechat，應該會看到如下圖

接下來就是我們要使用的加載模組，這邊以socket.io為例。其實原則很簡單，就是將整包模組原始檔下載之後，再解壓縮到c:\node資料夾中，應該看到的檔名會是xxxxx-socket.io----，原本名稱會加上開發者名稱、版本號碼等，只要將資料夾重新命名為模組名稱，socket.io就行了。

目前這邊所需要的東西有兩個socket.io, socket.io-client，一樣下載之後解壓縮重新命名

接著我們進入commnad line執行一下看看是否如願執行。

c:\node>cd simplechat

c:\node\simplechat>..\node.exe realtime-chat.js

結果好像出現了些錯誤，沒關係至少可以得到些提示，uglify-js，一樣下載之後解壓縮重新命名成uglify-js，再重新執行看看。

還是一樣出現錯誤，一樣下載redis，接著應該不會有問題了，吧！？

執行
果然看到了一線署光，沒錯伺服器開始運作了，接著到瀏覽器試試看

localhost:3000

沒錯，果然沒有任何問題，實在是太好了！外掛模組載入成功。

結語
目前所使用版本為node.exe v0.5.2，這個版本之後開始可以支援windows環境變數，因此可以設定NODE_PATH之後，外掛模組會自己導向到這個環境變數尋找node.exe的路徑。雖然npm還是無法在windows上完整執行，不過已經算是一個很大的邁進，之後node將會走上什麼變化，大家就拭目以待。

如果對於node抱持著一點點好奇，可以參考這邊相關文章，或者到

期待聽到大家的回饋與想法，謝謝！

本篇文章資料參考於：

Node.js on Windows: Who Needs NPM?

[分享] 解決網頁長文字破版現象

noreply@blogger.com (Caesar Chi) — Wed, 27 Jul 2011 23:42:24 PDT

網頁前端處理，最常碰到的事情就是『破版』，會因為樣式問題導致許多破版的狀況產生。這邊所提到的就是在『英數連續長字串』會發生的破版現象，並解說如何解決。

首先讓我們看一下怎麼樣的情況會破版。

前提，文字內容為英數連續長字串，在紅色div寬度限制下，會凸出來一大塊，這想必不是我們所樂見的，因此需要做些改進，這邊就介紹一下改進的方式。

後端擷取字串
預先設定好可容許字元數量，當字串超過長度的時候，就採取擷取字串的方式，只讓部份內容顯示出來，其餘內容斷字，或者是隱藏。

<?php
$str = "HelloEverybodyIamClonnThisIsATestWordWrap";
echo (mb_strlen($str) > 10) ? mb_substr($str, 0, 10, 'UTF-8') . "..." : $str;
?>

範例限制字元長度為10，超過多餘的字顯示『...』，沒有超過就直接完整字串顯示，可前後比對顯示狀態。

寬度限制，高度不限
當資料需要完成顯示，但是又要限制寬度的時候就可以採用CSS的其中一個樣式word-wrap，這邊採用的屬性為break-word，經過實測之後IE8, Chrome, Firefox , Safari, Opera都有很好的顯示效果，而文字內容會依照寬度限制，不斷地長高。

word-wrap: break-word;

高度寬度皆限制顯示
這個時候也是會將部份資料隱蔽，與上個樣式描述差異在於，需要增加高度限制，設定超過時隱蔽(overflow屬性)

border: 1px solid #f00;
overflow: hidden;
height: 2.5em;
word-wrap: break-word;

需要預設寬度和高度，又設定word-wrap之後，可以讓顯示侷限於div寬高當中，當然就會有某些資訊被隱藏，這其中還是有些取捨。

text-overflow ellipsis;

另外，text-overflow也可以用來取代word-wrap，過長之後會顯示...，唯一缺點是Firefox不支援。

範例連結

結論
文字導致破版，目前來看還是有些取捨，並沒有一定的解法，勢必要看版面如何製作而定，當然可以使用javascript搭配hover效果來達到一些不錯的機制，這邊主要拋出一個常見的問題，並且提出目前我們所採取的作法有哪些，也希望聽到大家的聲音，看看每個人對於字串的作法會是怎麼處理。

最後感謝同事提出來這個問題的解決方式，本人將資料重新編寫之後分享給各位！

[分享] Javascript 計算字元長度, count string length by javascript

noreply@blogger.com (Caesar Chi) — Thu, 14 Jul 2011 11:31:12 PDT

今天遇到一個問題，很簡單的一個問題當有一個input box需要限制輸入長度，想當然很簡單在input 裡面加上一個maxlength屬性就可以完成限制，接著有另一個更大的問題，因為使用者從多個國家而來，我們需要接受，『中英輸入』的文字，那問題就出現了！

像是Facebook album就有這樣的問題存在，當我很開心的輸入了一連串的國，直到不能輸入為止，再按下儲存，本以為『國國國國國....國國國』相簿應該會存在，可惜...

實際上後面卻給我出現外星符號，而且我剛剛輸入的『國國國....』應該是目前數量2倍之多啊，為什麼會這樣子，搞了許久發現問題在於，在PHP認定字串長度是使用byte來計算，並不是採用字元為單位。

前端頁面的算法，input box裡面，一個字為一個長度，在Javascript裡面也是，一個字就是一個長度，所以前端所看到的字串，丟到PHP之後又變成了第三度空間，內容都會被扭曲，尤其是尾巴的部份。

介紹將字串轉換為Byte 計算長度：

"測試".length;
//　output : 2;

"ab".length;
// output : 2;

這樣子的結果似乎不是我們要得，所以我們決定轉換另一個方向，將所有字元長度都先轉換為byte code，之後再計算字元長度。

encodeURIComponent("測試");
// output "%E6%B8%AC%E8%A9%A6"

encodeURIComponent("ab");
// output "ab"

轉換成 byte之後，感覺上就可以開始計算了，一個中文可以切成3個byte，1個byte會呈現%dd，就可以計算成一個中文字，將上面得到的字串長度再除3就可以得知目前字長度。

var str = encodeURIComponent("測試");
console.log(str.length /3);
// output 6

乍看之下的確如此，但是中英文的情況會是如何！？
剛剛的結果很明顯長度為6，如果在中間穿插3個英文，會是什麼狀況？

var str = encodeURIComponent("a測b試c");
console.log(str.length /3);
// output: 7
// expect output: 6 + 3

實際輸出結果會是7，不，這並不是我們想要的答案。既然知道byte code結構為%dd，那我們就使用正規表示法，將需要的字元做取代，這樣所取得的字串長度就是實際需要的長度了。

replace(/%[A-F\d]{2}/g, 'U')

接著拿剛才的實際狀況來測試，沒錯真的是我們所需要的結果，太好啦，大功告成。

var str = encodeURIComponent("測試");
str = str.replace(/%[A-F\d]{2}/g, 'U').length;
console.log(str);
// output: 6

var str = encodeURIComponent("a測b試c");
str = str.replace(/%[A-F\d]{2}/g, 'U').length;
console.log(str);
// output: 9

後記：
正規表示法果然夠威，夠強大，令所有文字都能夠臣服於它的腳下，實在是感受到無限的威力。這次也要感謝同事的協助才能順利找到這個答案，果然在大家身上都可以學到很多很多，所以別輕易相信input maxlength這個屬性，有時候眼前所看到的不一定為真，還是要實際測試過後才會清楚得到答案。

全文資料參考Count bytes in textarea using javascript

[工商服務]

NodeJS Taiwan期待更多人的支持，希望能夠聽到你的回應及分享。

[新聞] NodeJS換新LOGO, NodeJS change a new logo.

noreply@blogger.com (Caesar Chi) — Mon, 11 Jul 2011 12:37:13 PDT

根據官方說明，NodeJS將朝向品牌，為了這個目標建立了新的LOGO，提高NodeJS的辨識度。

針對這次新設計的LOGO邀請Chris Glass，為NodeJS設計新的LOGO，利用幾何圖學結構，來強調出Node，這個字樣，是活潑、有整體結構而且與彼此關係是緊密連結的。整個Node字樣，是基於拓普網路，將各個節點結合，形成緊密的網路型態。

目前官方提供了：

四種不同顏色LOGO (EPS原始檔)
桌布(1024 x 768 | 1280 x 1024 | 1440 x 900 | 1920 x 1200 | 2560 x 1440)

歡迎到NodeJS官方網站下載！多種樣式任君挑選。

最後讓我們再看一眼早期的LOGO...

[工商服務]

NodeJS Taiwan期待更多人的支持，希望能夠聽到你的回應及分享。

[教學] CSSLint 檢查CSS 安裝及教學. How use CSSLint

noreply@blogger.com (Caesar Chi) — Wed, 06 Jul 2011 20:46:54 PDT

前端工程總是需要很多的工具搭配和經驗，Javascript 已經有套很好用的檢驗工具JSLint，而今天介紹的就是使用CSSLint，CSSLint顧名思義，就是用來檢查CSS的項目，當然裡面有許多檢查的範圍，這篇文章就不一一贅述。

CSSLint最棒的地方就是目前有直接線上網站檢查機制。這套工具是由Nicole Sullivan, Nicholas C. Zakas共同製作的工具同時也是放置Github Open source專案，CSSLint檢查工具是搭配NPM所發展的CLI檢查工具，讓開發者編寫完CSS之後可以立即檢查，透過工具檢查機制，可以讓犯錯的機會降低，這就是工具發展的願景，更也是大家共同的目標。話不多說，直接看看怎麼使用CSSLint。

CSSLint：

線上網站
CSSLint Source code
檢查標準官方有列出所有檢查機制

安裝以及執行CSSLint：

npm install csslint -global

當以上畫面完成之後，表示CSSLint已經透過npm安裝完成，如果出現錯誤訊息，請查詢是否為權限問題導致，可以試著加入sudo, chown來改變權限。

官方給的指令介紹如下

csslint file-name.css folder/

檢查單一檔案

csslint test.css ./test/

例如我們要將test 資料夾裡面的css檔案全部掃描一次，直接可以下這個指令：

csslint *.css ./test/

發現錯誤就會顯示項目，並且指出錯誤方向為何，如果檢查結果正確就會顯示No errors，恭喜你，編寫出一個漂亮的css檔案。

檢查項目：
如果不需要全部項目都檢查，可以自行加入所需要的檢查選項，假設我們只需要檢查id, box-model，可以輸入以下指令。

csslint --rules=ids,box-model test.css

檢查項目：

ID: adjoining-classes
ID: empty-rules
ID: display-property-grouping
ID: floats
ID: font-faces
ID: font-sizes
ID: ids
ID: qualified-headings
ID: unique-headings
ID: zero-units
ID: vendor-prefix
ID: gradients
ID: regex-selectors
ID: box-model
ID: import
ID: important
ID: compatible-vendor-prefixes
ID: duplicate-properties

至於每個項目詳細內容說明，請參考官方網站

更改輸出格式：
目前可以支援xml的格式，輸出格式就像jslint xml的格式。

csslint --format=lint-xml test.css

結語：
CSS是前端工程中一門很艱深的學問，例如要怎麼將CSS重新利用，或者如何將CSS架構彈性化，CSS命名方式，更不用說跨瀏覽器的問題解法，這些都屬於在前端開發中CSS會遇到的問題。

對於這麼一個好用的工具，我們是樂意看見的，所以也很開心的分享給大家，畢竟寫出有品質的CSS對於後期維護和調整都是一件好事情，利用工具將能避免的錯誤降到最低，同時提供自己的生產力，這才是共同努力的目標。

本文資料參考Introducing CSS Lint，在此特別註明。

NodeJS Taiwan期待更多人的支持，希望能夠聽到你的回應及分享。