天工開物-研發之旅

2011年9月21日星期三

2011年9月18日星期日

VIM Plugin

快速註解功能
首先下載該外掛

sudo apt-get install vim-addon-manager vim-scripts

下載後執行安裝

vim-addons install enhanced-commentify

操作方式為選取要註解的範圍，輸入\x。便可以自動註解。選取後再輸入一次便可還原

Function List功能

首先下載該外掛

http://vim-taglist.sourceforge.net/

下載後執行安裝

vim-addons install taglist

在.vimrc加入快速鍵設定

map <f9>:Tlist<cr>

按Tab鍵自動完成［supertab］

Ref:

http://www.vim.org/scripts/script.php?script_id=182

透過關鍵字輸出預設內容[snippetsEmu]

Ref:

http://blog.lauct.org/archives/874

Vim 的 JavaScript 縮排格式最佳化外掛

http://blog.longwin.com.tw/2009/11/vim-javascript-indent-formatter-plugin-2009/

CTag

http://edt1023.sayya.org/vim/node13.html

http://stenlyho.blogspot.com/2008/11/ubuntuvim-plugin-ctagstaglist.html

Ref: http://blog.othree.net/log/2008/03/23/auto-complete-on-vim/http://blog.othree.net/log/2008/03/23/auto-complete-on-vim/

2011年9月9日星期五

常用FBAPI 資料取得方式-取得user info & friend list & friends

在這記錄一些常的FB資料取得方式。

首先先宣告告queryFQL Function 簡介呼叫程序

  function queryFQL(sql , callBack){
    FB.api({method:'fql.query',query:sql}, callBack);
  }

取得所有群組名稱

queryFQL('select flid , name from friendlist where owner=me()' ,
  function(response){
    console.log(response);
  });

取得好友與所在群組資料

queryFQL('SELECT uid, flid FROM friendlist_member WHERE flid IN (SELECT flid FROM friendlist WHERE owner=me())' ,
  function(response){
    console.log(response);
  });

取得好友的詳細資料

queryFQL('SELECT name,pic_square, uid from user where uid in (SELECT uid2 FROM friend WHERE uid1 = me())', 
  function(response){                                                 
    console.log('user-data',response);                                
})

如果要確知道要取得那些資料，可以使用multiquery。減少request的發送次數
先宣告multiQueryFQL Function

var multiQueryFQL = function(sql , callBack){
  FB.api({method:'fql.multiquery',queries:sql} , callBack);
}

同時取得好友與分類名稱

multiQueryFQL([
  'select flid , name from friendlist where owner=me()', 
  'SELECT uid, flid FROM friendlist_member WHERE flid IN (SELECT flid FROM friendlist WHERE owner=me())',
  'SELECT name,pic_square, uid from user where uid in (SELECT uid2 FROM friend WHERE uid1 = me())'],
  function(response){};

第一個參數型態為Array，存放所有FQL Query指令。
回傳資料也為Array。對應各個FQL結果

至於取得的User詳細資料。可轉換為User['名稱'] ＝ UID ；的儲存陣例，方便查詢
以上面使用multiQueryFQL查詢為例，第三個FQL查詢回傳Use的詳細資料

var users      = response[2].fql_result_set ;
var userInfo   = {} ;
for(var uid in users){
  userInfo[users[uid].uid.toString()] =  users[uid].name ;  
}

取得使用者圖片，可以以透過下列網址取得
http://graph.facebook.com/［user id］/picture

如果要將每個friend加入相對應的群組，方便資料查詣。則可以做個簡單的資料轉換。

var groupInfo  = response[0].fql_result_set ;
var friendList = response[1].fql_result_set ;
if(!groupInfo && !friendList && !users) return  ;
  for (var gid in groupInfo){
    if(!groupInfo[gid].user) groupInfo[gid].user = [] ;
      for(var fid in  friendList){
         if(groupInfo[gid].flid === friendList[fid].flid){
           groupInfo[gid].user.push(users[uid].uid);                          
           delete friendList[fid]; 
       }
    }
}

//最後groupInfo的資料格式為
[{flid:'0001',name:'title-name',user:['0001','0002']},{flid:'0002',name:'title-name',user:[xxx,xxx,]}]

2011年8月23日星期二

寫程式常常需要檢查信用卡、日期、Email、IP、密碼... 等等.
下列有許多常用範例.

http://jana.bz/?site=blog&tid=32

http://lab.hsdn.net/blog/2009/09/%E5%B8%B8%E7%94%A8%E7%9A%84%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%A4%BA%E5%BC%8Fregular-expression/

也有些小工具,協助撰寫
http://www.hongkiat.com/blog/regular-expression-tools-resources/

2011年8月18日星期四

Apache ab 網站壓力測試工具

ab（Apache Benchmark）是 Apache 內建的網站壓力測試工具，
你可以用來模擬測試多人連線測試。如「如果同時有 1000 個人拜訪你的網站，每個連線平均反應時間是多少？」

1.安裝Apache


sudo  apt-get  install  apache2

2.執行 usr/bin/ab

指令


ab -c 10 -n 1000 網址/

ab -c 10 -t 30 網址/

-c 10 建立10個連線
-n 1000 每個連線發出1000個request
-t 30 時間限制30秒

其它常用參數
同時 10 個連線，連續送出 10000 個request，並且使用 Keep-Alive 方式連線


ab -n 10000 -c 10 -k 網址

將測試的效能原始資料匯出成 CSV 檔


ab -e output.csv -n 10000 -c 10 網址

測試結果
Server Software:
Server Hostname: localhost
Server Port: 3000

Document Path: /
Document Length: 277 bytes

Concurrency Level: 100
Time taken for tests: 0.203 seconds
Complete requests: 100
Failed requests: 0
Write errors: 0
Total transferred: 39900 bytes
HTML transferred: 27700 bytes
＊Requests per second: 493.74 [#/sec] (mean)
＊Time per request: 202.534 [ms] (mean)
Time per request: 2.025 [ms] (mean, across all concurrent requests)
Transfer rate: 192.39 [Kbytes/sec] received

Connection Times (ms)
min mean[+/-sd] median max
Connect: 2 3 0.7 3 4
Processing: 5 106 56.0 108 197
Waiting: 5 106 56.0 108 197
Total: 8 109 55.7 112 200

Percentage of the requests served within a certain time (ms)
50% 112
66% 136
75% 161
80% 168
90% 184
95% 193
98% 198
99% 200
100% 200 (longest request)

Server Software: Web主機的作業系統與版本(若Web主機設定關閉此資訊則無)
Server Hostname: Web主機的IP位址(Hostname)
Server Port: Web主機的連接埠(Port)
Document Path: 測試網址的路徑部分
Document Length: 測試網頁回應的網頁大小
Concurrency Level: 同時進行壓力測試的人數
Time taken for tests: 本次壓力測試所花費的總秒數
Complete requests: 完成的要求數(Requests)
Failed requests: 失敗的要求數(Requests)
Write errors: 寫入失敗的數量
Total transferred: 本次壓力測試的總數據傳輸量(包括 HTTP Header 的資料也計算在內)
HTML transferred: 本次壓力測試的總數據傳輸量(僅計算回傳的 HTML 的資料)
Requests per second: 平均每秒可回應多少要求
Time per request: 平均每個要求所花費的時間(單位: 豪秒)
Time per request: 平均每個要求所花費的時間，跨所有同時連線數的平均值(單位: 豪秒)
Transfer rate: 從 ab 到 Web Server 之間的網路傳輸速度

最後的 Connection Times (ms) 指的是壓力測試時的連線處理時間：

橫軸欄位的部分：

min: 最小值
mean: 平均值(正、負標準差)
median: 平均值(中間值)
max: 最大值
縱軸欄位的部分：

Connect: 從 ab 發出 TCP 要求到 Web 主機所花費的建立時間。
Processing: 從 TCP 連線建立後，直到 HTTP 回應(Response)的資料全部都收到所花的時間。
Waiting: 從發送 HTTP 要求完後，到 HTTP 回應(Response)第一個 Byte 所等待的時間。
Total: 等於 Connect + Processing 的時間（因為 Waiting 包含在 Processing 時間內了）

參考網站
http://blog.miniasp.com/post/2008/06/Using-ApacheBench-ab-to-to-Web-stress-test.aspx
http://httpd.apache.org/docs/2.0/programs/ab.html

2011年8月4日星期四

[Javascript]透過getBoundingClientRect method取得Div的left,top,right,bottom,height,width資訊

想想,一般當我們要取得div的樣式設定時,要如何處理.
嗯...我一時也想不到有什麼比較好的方法.腦中出現浮現的第一步,
是先透過document.getElementById()先取得object,再來找找,有沒有對應的屬性.
但,然後呢?

後來發現比較好的方法,是透過getBoundingClientRect().
透過該方法會回傳一個TextRange object, 該object包含了.left,top,right,bottom,height,width資訊

使用方式如下


<html>
    <head>
        <style type="text/css">
            #rect{
                width:200px;
                height:100px;
                margin-top:20px;
                background-color:#cccccc;
            }
        </style>
    </head>
    <body>
        <div id ='rect'>
            this is test area.
        </div>    
        <script>
            var div = document.getElementById("rect");
            if(div.getBoundingClientRect){
                var rect = div.getBoundingClientRect();
                var x = rect.left;
                var y = rect.top;
                var w = rect.right - rect.left;
                var h = rect.bottom - rect.top;
                var width = rect.width;
                var height = rect.height;
                console.log(x,y,w,h,width,height);
            }    
        </script>
    </body>
</html>

該範例輸出結果如下:


8 20 200 100 200 100

更多詳細資料可以參考下列網址
http://help.dottoro.com/ljvmcrrn.php

2011年7月24日星期日

[javascript]在chrome中使用LOGE,LOGD,LOGW除錯

一般情況在編寫javascript時,對於驗證變數的輸出.最常用的方式是alert().
數量少時.是個不錯又偷懶的處理方式.
但,編寫複雜的大型專案時.這方式可就不適用了.
如果你是在chrome的browsr上.可以有更多的選擇.

一般會用console.log()來輸出程式執行時期的結果輸出.
但除了最基礎的console.log()還有
console.info()
console.error()
console.warn()
可以使用.

開發者可以依據輸出變數的目的.來選擇合適的提示方式.

但對於每次呼叫該function 都需要輸入長長的一串console.log()的方式.
感到麻煩.
所以是不是可以模仿Android的方式,使用LOGE(),LOGD(),LOGW(),LOGI()來輸出.
來達到偷懶的目的.

有些開發者會自己撰寫function來達到此一目的.

    function LOGE(log){
      console.error(log);
 };
 function LOGD(log){
      console.debug(log);
 };

此一做法很簡單,又明了的.可以達到簡化的目的.
但存在一個很嚴重的問題.
當我每次呼叫LOGE時,在輸出的結果.所顯示的行數.
為console.error的執行行數.而不是呼叫LOGE的所在行數.

所以可以使用另一方式.來改寫上面的function

   functon LOGE(log){
       return console.__proto__.error.bind(console , log);
   };

呼叫方式為

   LOGE('this is LOGE')()

如此一來,便可以清楚的知道LOGE的程式呼叫點.

2011年7月16日星期六

在Blogger中嵌入程式碼

要如何在blogger中整齊的嵌入code呢?

目前看到最好的解決方案是使用SyntaxHighlighter .

該外掛可針對你指定的程式語言提自動進行語法高亮.

設定方式

到</head>上方加入外部引用程式碼,如下.

SyntaxHighlighter.config.bloggerMode = true;

SyntaxHighlighter.ClipboardSwf = 'http://http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';

SyntaxHighlighter.all();

</script>

使用方式


var obj = new Object();

2009年6月15日星期一

移植小鳳凰

放下筆，拿起鋤頭。
揮汗在山野間，
轉換的角色，帶著新奇的心情。
三天連假，剛好可以用來大大的整頓我的後花園。

先前種的排樹，意外的掛點了三顆，讓花園露出了個缺口。
所以這次移植幾顆小鳳凰來填補漏洞。

移植已長大的樹木，並不是把它挖起，再換位置塞入即可。
在挖起的過程要儘量小心不要傷到它的底根。
最重要的，是必需將它的綠葉剪掉，只留下根部。
不然，剛移植的樹木水份吸收速度較慢。
留著綠葉，只會加速消耗水份。
在根尚未與新位置融合時，便枯死了。

這次一口氣移植了四棵，移植後切記要馬上灌溉大量的水。
讓它喝飽飽，才會有生氣。

期待，它的長成。
當它下次再開花時，又是明年六月。

2008年9月10日星期三

BluePrint －Yahoo!奇摩行動 Widget 平台實作（一）問題說明

由於參加YAHOO HACK DAY競賽的作品需要建立手機端服務，所以花了點時間摸索BluePrint。
在研究的過程中遭遇了很多莫名奇妙的問題，投注了大量的時間在Debug，
結果發生的問題都不是問題，都是些基本試定沒搞好所產生的，真是嘔人。

（1）在開發過程中，可以透過範例了解運作模式。下載的範例裡包含二個資料匣[Server][Submission]，
[Server]資料匣需上傳至提供服務來源的伺服器，該伺服器需支援PHP。將[Server]資料匣上傳後，先修改
[Submission]資料匣中的config.xml檔案，將裡頭的設定好後，
將整個資料匣壓縮成.zip格式，在上傳到http://mobile.yahoo.com/developers/test頁面。上傳成功後，
便可以在beta.m.yahoo.com進行測試。
＊＊制作widget時[Server]資料匣所在位置，網址尾端不需要加上/，不然會讀取不到檔案。
（2）在做上傳測試時，會遇到原來測試OK，但有時會突然原設定沒更改情況下，上傳時會出現錯誤。
此時，開發者需要重新登出，再登入，此問題便能解決。

（3）Widget的檔案格式有二種：一種是透過BluePrint的Tag產生.bp檔，另一種則是透過PHP產生。
YAHOO規定提供服務的Content-Type格式為
Content-Type: application/x-ywidget+xml
Content-Type: application/x-ysnippet+xml
如果採用第二種方式用PHP檔產生的話，直接在Header()中做設定即可。
但使用第二種格式.bp時，會發生Content-type error問題，如果遇到這問題，
便需要更改apache的設定，於config設定中增加，
addtype application/x-ywidget+xml .bp
addtype application/x-ysnippet+xml .bp
即可解決問題。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
[參考資料]
BluePrint是應用於協助使用者開發YAHOO行動平台服務的格式。
透過BluePrint提供的XML Tag，可以快速、簡單的建立使用者介面。

BluePrint有以下特點
1.輕鬆的將你的內容或服務製成手機版
2.畢其功於一役：一種版本的程式支援各式手機規格（xHTML 瀏覽器, iPhone, Blackberry）及各式作業系統
3.透過 Yahoo! 奇摩的手機版首頁及 Yahoo! Go 3.0 讓使用者使用您的服務（台灣將於年底推出）

我要如何開始
下載 Blueprint SDK（http://mobile.yahoo.com/developers/download）
在 PC 瀏覽器或手機上開發及測試你的服務（http://mobile.yahoo.com/developers/test）
上傳你的widget，分享你的服務（http://mobile.yahoo.com/developers/submit）

請注意：目前的相關說明連結為英文版

更多相關資訊 (英文)
BluePrint 平台介紹：http://mobile.yahoo.com/developers/
BluePrint 開發者的討論區：http://tech.groups.yahoo.com/group/yahoomobiledevelopers/
手機開發者的 Blog：http://mobile.yahoo.net/developer/blog/
FAQ：http://mobile.yahoo.com/developers/faq

Ref:
http://tw.developer.yahoo.com/mobile/

2008年7月17日星期四

負面消息對股價的影響

今天來談談投資好了。
由於去年承接花旗銀行舉辦的小小理財達人活動程式開發工程師一職，
開始接觸投資領域，書櫃中理財書籍變多了，也選修了一堆財管的課，
從一開始是一無所知，到現在也經過了半年多的時間，一頭熱的陷入投資狂潮。

去年爆發了資級房貨危機，金融族群損失慘重，再加上台幣升值造成的匯差，情況簡值糟到不能再糟。
許多金融股的價格一波一波的挑戰歷史新低，投資人沒信心價格再低都沒人要承接。

投資要賺錢便是要懂得買在低點，賣在高點，這是人人皆知道的事。
可惜這件事聽起來簡單，做起來卻是十分困難。
人的習性總是喜歡聽正面的消息，對於負面的消息總是抱著抗拒，
這習性造就了追高殺低的投資行為。
當然並不是說要完全陌視市場負面消息，一昧的買在低價。
我將負面消息分成二種。
1.長期衝擊
2.短期影響

造成長期衝擊的負面消息可視為整體經濟的衰退或公司喪失了競爭優勢。
這類型的消息會促使股價在混沌不明的空頭格局下不斷下滑。
何時是最佳買點，難以百分百估計，但絕對不會是歷史新低，
別因為到了歷史新低就傻傻進場，以為穩賺不賠。

造成短期影響的消息有可能是市場喪失信心或一時執行策略的錯誤造成的損失。
這類型的消息會造成失望性賣壓，股價跌的快跌的重，但相對的反彈也來的快。
面對短期影響的消息不要花費太多的精力在猜測「最低點」在何處，
合理的價格便可以持續的買進，因為當利空消息來的快去的也快迅速反彈時，
你也喪失了購買機會，購買的勇氣。
二房危機是短期影響還是長期衝擊呢？
如果是短期，那金融股便是佈局買入的時候了。
別忘了，金融股還有登陸題材還沒發威啊！

《外資》投資價值浮現！
美國「房地美」、「房利美」二房風暴襲擊台股金融股，過去兩天金融指數下殺8.5%，花旗環球證券今日在最新出爐報告中表示，儘管短期台股受到二房事件影響，投資人信心不足，但他認為金融股的投資價值已經浮現。花旗環球證券金融產業分析師鄭溫煌也點名，看好中信金 (2891) 、第一金 (2892) 、國泰金 (2882) 以及元大金 (2885) ，可成為投資首選。金管會統計，國內的保險及銀行業者持有「房地美」、「房利美」的資產規模分別達到5386億元及794億元。

訂閱：文章 (Atom)

天工開物-研發之旅

2011年9月21日星期三

解決 405 Method not allowed問題

2011年9月18日星期日

VIM Plugin

2011年9月9日星期五

常用FBAPI 資料取得方式-取得user info & friend list & friends

2011年8月23日星期二

常用 Regular Expression範例

2011年8月18日星期四

Apache ab 網站壓力測試工具

2011年8月4日星期四

[Javascript]透過getBoundingClientRect method取得Div的left,top,right,bottom,height,width資訊

2011年7月24日星期日

[javascript]在chrome中使用LOGE,LOGD,LOGW除錯

2011年7月16日星期六

在Blogger中嵌入程式碼

2009年6月15日星期一

移植小鳳凰

2008年9月10日星期三

BluePrint －Yahoo!奇摩行動 Widget 平台實作（一）問題說明

2008年7月17日星期四

負面消息對股價的影響

2011年9月21日 星期三

2011年9月18日 星期日

2011年9月9日 星期五

2011年8月23日 星期二

2011年8月18日 星期四

2011年8月4日 星期四

2011年7月24日 星期日

2011年7月16日 星期六

2009年6月15日 星期一

2008年9月10日 星期三

2008年7月17日 星期四

2011年9月21日星期三

2011年9月18日星期日

2011年9月9日星期五

2011年8月23日星期二

2011年8月18日星期四

2011年8月4日星期四

2011年7月24日星期日

2011年7月16日星期六

2009年6月15日星期一

2008年9月10日星期三

2008年7月17日星期四