天工開物-研發之旅: 2011

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();

訂閱：文章 (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中嵌入程式碼

2011年9月21日 星期三

2011年9月18日 星期日

2011年9月9日 星期五

2011年8月23日 星期二

2011年8月18日 星期四

2011年8月4日 星期四

2011年7月24日 星期日

2011年7月16日 星期六

2011年9月21日星期三

2011年9月18日星期日

2011年9月9日星期五

2011年8月23日星期二

2011年8月18日星期四

2011年8月4日星期四

2011年7月24日星期日

2011年7月16日星期六