前陣子一些因緣際會的關係，讓我有機會跟miiicasa的Awoo深入的聊天，看到他的努力與成就，深深地佩服不已，多跟高手切磋，果然會有更深的體悟，並瞭解自己的渺小。回頭看看自己走進資訊這條路也走了好幾年，工作之後的這幾年，讓我的經驗值增加不少，不敢說自己多有成就，但至少在這條路上，我還抱持著一股熱血想要為這個領域付出心血。「分享才是王道」。在這個領域上，分享的精神在網路上蔓延開來，有多少次我想分享的動力，是因為我在網路上遍尋不到（或是自己腦殘不知道怎麼找）平常取用於網路資源，偶爾也該貢獻一下，這樣的精神，讓我在Awoo與他的團隊身上找到令人感動且熱血沸騰的血液。

其實技術本身是不值錢的，技術一定需要實踐與應用才會彰顯他的價值，然而工作中，有時後會遇到某些人，也許技術能力很強，但卻很容易對某些人因為不懂得某些技術而嗤之以鼻，例如：「拜託，什麼時代了還在用Table切版」、「某國立大學的連相對路徑和絕對路徑都搞不懂？」。事實上「聞道有先後，術業有專攻」，你會這些知識，也許只是因為你活在這個時代罷了，你敢保證你會得這些技術，到了十年後還會再用嗎？沒有人能保證。事實上很多技術只是「知道」或「不知道」而已，就像食譜，為什麼師父很在意食譜被偷走，因為某個配方被偷走就會被模仿開來。（除了日本人很注重的「用心」沒辦法偷走之外）但技術這種東西，你知道了，沒有應用、沒有分享是不會有價值的。programer的價值不在於懂多少，而是在於解決問題的能力，當遇到問題時是否能找到最合適的方法來解決。

前陣子看到一個很棒的小故事：出自哪我已經忘了，上網搜尋到處都是轉貼，我想來源已經不可考了，所幸直接貼上了：

話說有二個和尚，他們分別在相鄰的二座山上的廟裡。

這二座山之間有一條溪於是這二個和尚，每天都會在同一時間下山去溪邊挑水，久而久之，他們便成為好朋友了。就這樣，時間在每天挑水中，不知不覺己經過了五年。

突然有一天，左邊這座山的和尚沒有下山挑水 ，右邊那座山的和尚心想:「他大概睡過頭了。」便不以為意。

哪知第二天，左邊這座山的和尚，還是沒有下山挑水，第三天也一樣，過了一個星期，還是一樣直到過了一個月，右邊那座山的和尚，終於受不了了。

他心想:「我的朋友可能生病了,我要過去拜訪他，「看看能幫上什麼忙。」

於是他便爬上了左邊這座山， 去探望他的老朋友等他到達左邊這座山的廟，看到他的老友之後，大吃一驚 因為他的老友，正在廟前打太極拳，一點也不像一個月沒喝水的人。

他好奇地問:「你巳經一個月，沒有下山挑水了，難道你可以不用喝水嗎?」

左邊這座山的和尚說:「來來來，我帶你去看。」 於是，他帶著右邊那座山的和尚走到廟的後院指著一口井說:「這五年來，我每天做完功課後，都會抽空挖這口井。即使有時很忙，能挖多少就算多少。

如今，終於讓我挖出井水，我就不必再下山挑水，我可以有更多時間，練我喜歡的太極拳。」

看完這個故事很有感觸，其實各行各業，都需要保持著這樣的心態，為自己的未來而努力，每天為自己的井多挖深一點，哪怕有一天，你就可以挖出井水；與其每天都在抱怨懷才不遇、工作無聊，不如換個心態，轉個心境讓自己隨時都為了下一步而準備。我常常在深夜裡，還在為某個問題而思考、搜尋，或者survey新的技術，工作固然重要，撥點時間保持自己的頭腦運轉也是很重要的。除了思考工作遇到的問題之外，從日常生活中找出想解決的事情，保持熱忱，保持實做的力量，將會是無比的競爭力。

賈伯斯告訴大家：「保持著又笨又餓吧」。Stay Hungry, Stay Foolish

那些年最近好像賣得嚇嚇叫，不過我還是沒去看XD，而且這篇文章跟那些年沒有關係。。。

話說前幾天我跟我家女王去看「真愛挑日子」，導演用的是倒敘法，並且很強調時間的描述，有過去與未來時間的交錯，於是在劇中會不斷地出現時間，並且用滾動的時間代表時間往前或往後，比方說，從2001滾動到1963，從1966滾動到1970，而不是很普通的只是顯示現在時間是1963、1970。

這讓我手癢了，覺得一個小特效就可以讓生硬的描述變得生動起來，於是我就開始構思這個特效該怎麼在web上呈現。考慮到多位數的呈現而且還有效能的問題，我先不考慮直接用CSS來做定位，直接試試看用canvas的效果如何。

首先，數字只有0~9，要讓數字做循環的滾動並且無縫隙的接起來，我先準備一張圖片，這張圖片是從0~9再循環到0，之所以要循環到0，是因為要讓滾動時不會產生空隙，當然再計算時就需要take care一點。照慣例，廢話不多說，先來看看DEMO。

之前寫了一篇Tetris Game(javascript 俄羅斯方塊)，在render頁面時用html字串的方式重新塞進畫面當中，雖然效能堪用，但若嘗試著將更新時間變短，就會很明顯看到效能的問題，尤其在IE上更加明顯，因此我將render的部份改用canvas來做，果然效能突飛猛進，而IE雖然不吃canvas，也可以透過explorercanvas project 套件來做到，原本在IE 中 render HTML的效果有限，改成canvas來繪圖看起來好多了。往後在頁面的呈現效果，也許可以朝這個方向來解決。廢話少說，先看一下DEMO。

DEMO: http://blog.blackbing.net/demo/Tetris/canvas.html

你可以看到跟之前的方法呈現出來的效果一模一樣，差別在於render 的動態效果移到canvas上做了，看不出來嗎？讓我們來看剖面圖：

See? 看剖面圖應該比較清楚一點，底下的Grid，我還是用HTML來處理，會變動的只有在上面的Canvas圖層，每次畫面更新時，都是清掉重新繪製。用這樣的方法來提昇場景的更新，效能當然更快速。不過你可能會想，這樣程式要改多少？非常的少，我把修改的部份抓出來說明：

1. 加上explorercanvas

記得IE9以上就支援canvas囉 ，所以只要針對IE9以下來include即可。

1
2
3

<!--[if lt IE 9]>
<script src="excanvas.js" type="text/javascript"></script>
<![endif]-->

2. 初始化canvas

初始化的時候，用G_vmlCanvasManager來做IE的對應處理，就是執行excanvas的處理函式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

plineCanvas = document.createElement('canvas');
 if(!plineCanvas.getContext && typeof G_vmlCanvasManager!='undefined'){
  plineCanvas = G_vmlCanvasManager.initElement(plineCanvas);
}
 plineCanvas.width = blockXCount * blockWidth;
 plineCanvas.height = blockYCount * blockWidth;
 plineCanvas.style.cssText = 'position:absolute; z-index:10;';

 stageElm.append(plineCanvas);
 if(plineCanvas.getContext) {
  plineCtx = plineCanvas.getContext('2d');
  plineCtx.lineCap = 'round';
  plineCtx.lineJoin = 'round';
}

3. 重新繪製canvas

由於之前的架構還算單純，因此重新繪製場景的部份改成canvas繪製，處理起來也很簡單。只要使用fillRect就可以輕鬆繪製。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//清除畫布
plineCtx.clearRect(0, 0, plineCanvas.width, plineCanvas.height);
for(var i=0; i<metrixLen; i++){
        var color = metrix[i].color;
        if(color){
                var ycount = Math.floor(i/_self.blockXCount);
                var y =  ycount * _self.blockWidth + 1;
                var x = Math.floor(i%_self.blockXCount) * _self.blockWidth +1;
                plineCtx.fillStyle = color; //設定塗滿顏色
                plineCtx.fillRect(x, y, _self.blockWidth-2, _self.blockWidth-2); //塗滿這個grid
                //stop condition
                if(ycount === 0 && metrix[i].stacked){
                        stop = true;
                }
        }
}

canvas是個非常棒的東西，可以處理到一些更細節的部份，尤其針對動態的處理，繪製的效能比網頁render的效果好上太多，如果你的動態效果遇到效能瓶頸，嘗試著用canvas畫布來思考，也許會有更驚人的提昇。大家一起快快樂樂做網頁。ㄎㄎ～

今天遇到一個客戶提出的需求，需要在前端做中文的筆劃排序，雖然已經跟客戶提出說UTF8很難做筆劃排序，但他們還是要求要依照筆劃來做排序。於是我就開始陷入編碼的世界而無法自拔（汗）。搜尋google大神的結果幾乎都是從資料庫端來解決，然而這次遇到的問題並不是單純將資料庫資料撈出來排序就可以搞定，而是要顯示在前端做動態的分群並且排序。因為實在是花了太多時間在找資料，而且大部分的解決方式都是N年前的解法，不適合現在的應用環境（UTF-8編碼），本篇文章是希望後續有人遇到類似的問題可以省點力氣，整理一些解決的方式。重點如下：

1. 用javascript做中文排序至目前為止不可能，原因是UTF-8不是以筆劃排序，類似的方式可以用big5編碼轉成ASCII code做排序，但還是有缺點：
2. Big-5 碼是按筆劃排，但是次常用字會排在後面，也就是說筆劃少的次常用字，反而會排在筆劃多的常用字後面，例如『万』會排在『籲』後面去。
3. 現在已經沒有人在用big5編碼了，javascript UTF-8轉big5編碼沒有更好的支援函式，就算有也要load進一個大的table來做比對，因此在前端做排序幾乎是不可能。
4. localCompare 如果一定要在前端做排序，這個方法是最簡單的用法，但是實際使用的結果也不是依照筆劃排序，看起來應該跟系統的實做有關，如果能夠用這個方法安撫客戶，那就用這個吧。

5. cht_strokesort.php：我自製的排序 API，sourcecode 放在https://gist.github.com/1150937，具體實現如下：

   1. 將UTF-8轉成big5編碼。
   2. 用big5碼反查筆劃，筆劃資料來源為倚天中文字型筆劃順序內碼對照表，不是單純以ASCII Code來決定筆劃順序。
   3. 做了一個http接口，可利用AJAX來做到中文排序。

DEMO :

http://blackbing.net/lab/CHTSort/cht_strokesort.html

原始碼：

https://gist.github.com/1150937

參考資料：

1. Big5 碼名稱的由來
2. 中文排序的問題
3. 如何用javascript做中文排序
4. 讓資料按照中文筆劃排序

暫時解決這個問題，但眼睛好痛，編碼這種事真不是人幹的。收工！

[caption id=”” align=”alignleft” width=”128” caption=”Auto play in Facebook Theater Mode”][/caption]

家中的女王又來給我出題目了，這次的題目不算難，他想要在看朋友的FB相簿時自動播放，用chromeExtension可以很輕易的做到，有了之前開發的經驗，要做這種注入式攻擊增強功能算是小事一樁。雖然如此，還是紀錄一下開發心得。

1.　由於是Page Action，需要的資源如圖片等必須額外host，我不想為了這個小功能而要找host放圖片，因此我用Binary File to base64 encoder來將圖片轉成base64 直接嵌入。

2.　使用 getComputedStyle 來查找「真正的」計算樣式(computed style)：

如果你只用Element 的style屬性來取得該Element設定，一定會吃鱉，因為style 屬性只包含該元素之inline樣式資訊，而不包含該元素的CSS階層樣式，因此你需要用 getComputedStyle來查找真正的style屬性。只是要注意的是這個方式不見得都能取得想要的資訊，例如：當元素不是絕對定位，透過computed style取得left 和top時，只會得到”auto”，這是完全合法的CSS值，但這可能不是你要得結果。因此在使用時，必須要謹慎。另外一點需要注意的是IE並不存在這個用法，而是要使用currentStyle 來做查詢。不過我開發的平台在chrome，因此就可以忽略這個問題，大心。

地點

掃描QR Code

安裝APK

遊戲開始

閱讀全文 »

• 中文字體：http://www.ct-box.net/fonts/


• 英文字體：http://www.google.com/webfonts#ChoosePlace:select

科技 始終「跟隨著」人性

Home Page

MSN Status

BLOG

Twitter

Plurk

Facebook

Google+

目前股溝家裡充斥著宅味，大家都在評論股溝家會不會成功（我也是啦XD），自從我踏進這行之後，我就就中了google的毒，「以前的」Yahoo mail有多難用，不用我說，但踏出公司，才發現大多數人留的是yahoo mail，通訊錄上看到只有幾個人用gmail，不禁悲從中來。（這就像看到別人還在用IE6一樣的悲傷）。所以很多人被邀請進股溝家，但也不想介紹自己，放個圖片（鬼才知道你是誰咧～翻桌）。不過至少，股溝家在台灣很成功的打入阿宅的市場了，就像google大多數的產品一樣，太過工程師導向，拉了一條線讓一些輕度使用者只想隔岸觀火。何時正妹才會加入Google+呢？

Future?

此篇文章主要是紀錄Agile Uploader的用法與注意事項。

上傳圖片是個很常用到的功能，以往的上傳方式都是用HTML的file來做上傳，並在server端檢查圖片大小、檔案格式、壓縮。然而隨著現在的照片解析度越來越大，server端收到的圖檔也越來越大，然而server端的頻寬與容量也有限，加上application也不需要這麼大解析度的檔案，因此server端還需要將檔案做壓縮，隨著前端技術越來越進步，壓縮檔案這件事也開始有人從前端開始直接做掉了，事實上這個概念非常的重要，使用者依然不需要考慮我要將檔案壓縮之後再上傳，並且加快上傳的速度，對server端來講，也不需要浪費多餘的頻寬來上載檔案，真的是一舉多得，功德一件。

因此我surver到這個免費的工具，而且還蠻不錯用，客製化程度也非常高，相當滿意。Agile Uploader

直接看官方DEMO。

他的概念是這樣的，利用Flash 來取得圖片，並且直接做壓縮，並且用flash的POST方式來POST到server端。如此即可完成上傳前壓縮圖檔。

不過在實做上，需注意以下幾點：

• 指定flash路徑
  在實際專案你肯定不會用範例的路徑。


• 指定圖檔路徑：
  在實際專案你肯定不會用範例的路徑。


• 修改CSS：agile-uploader.css
  在實際專案你肯定不會用他預設的背景。


• 用firebug debug。
  不知道為什麼，chrome看不到處理的response。而用firebug，你可以看到完整的POST資訊。


• 需注意單一檔案和多檔案上傳要有不同的判斷。


• 目前最新的version是3.0，不過文件是2.0，有很多method無法正常使用。


• 將POST方式想成是AJAX POST，任何server端回傳資訊需要傳回client做判斷。

[sourcecode language=”javascript”]
/**

 * Callback after the form is submitted and data is returned from the server.
 * The data returned will vary depending on the script used, defined in the "form_action" variable.
 * If there's a "submit_reidrect" then the user will be redirected.
 *
 * @param response {mixed} The server response
*/
$.fn.agileUploaderServerResponse = function(response) {
    // If there's a div to put the return response data into, do so
    if(typeof(opts.updateDiv) == 'string') {
        $(opts.updateDiv).empty();
        $(opts.updateDiv).append(response);
    }
    // Re-direct or empty the list so another submission can be made
    if(typeof(opts.submitRedirect) == 'string') {
        window.location = opts.submitRedirect;
    } else {
        $('#agileUploaderFileList').empty();
    }
}

[/sourcecode]

如上，他做了回傳之後的的處理，不過卻沒有額外的自訂事件可以做指派，不過也還好他程式寫的蠻完整的，要修改起來也不難，你只要在這個function裡頭加入相對應的處理即可，所以你可以傳入server response callback function來處理。例如：

因此我只要在呼叫初始化時，傳如一個serverResponseCallback的函式，就可以針對回傳回來的response做處理了。打完收工。

block subtitle(Chrome Extension)

Sometimes you don’t want to see any subtitle in the video. This Extension could let you block the subtitle by dragging a div.

這其實是我自己的需求啦，有時候在youtube想要練英文聽力，想要遮住字幕，以前會用很蠢的方法，用便條紙貼在螢幕上面遮住字幕，但實在太蠢了。於是我做了一個小工具來遮住字幕。目前只有針對youtube，未來會再增加其他影音網站（如果大家有需要的話。）

開發紀錄：其實這在一年前就想做了，不過那時候沒辦法遮住flash，工作一忙也忘了這回事，最近看到Awoo大大寫了一篇【了解 embed 及 param 標籤中 wmode 屬性、並且動態修改它】，才理解這個屬性的用法，於是很快地完成了。設計是由即將畢業的北藝大美女大南西，感謝協助。