天工開物-研發之旅

2012年4月15日星期日

apache 更改目錄位置後出現 You don't have permission to access

修改 /etc/apache2/sites-enabled/000-default 文件
將DocumentRoot，與Directory 指向新路徑。如

DocumentRoot /home/terrence/project1/
<Directory /home/terrence/project1/>
# The Options directive is both complicated and important.

Options Indexes FollowSymLinks
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
#   Options FileInfo AuthConfig Limit
AllowOverride None

# Controls who can get stuff from this server.
Order allow,deny
Allow from all
</Directory>

然後執行 sudo /etc/init.d/apache2 restart 重開

如果還是一直有問題，那想必是該目錄沒有執行的權限。
sudo chmod -R +x project1

切記。所有網頁連父目錄都要有執行的權限。

2012年3月19日星期一

如何透過Dropbox建立Git Server

如果沒有自己的Git Server可以到Github升申免費帳號。但缺點就是如果你沒付費，就必需公開你的程式碼。
不過透過Dropbox也可以建立Git Server進行協同開發。

請先記住一件事，一般在開發，Mater是指本地端的Repo預設名字。遠端則稱為Origin

1.進入Dropbox，建立你要分享的目錄。
2.進入該目錄，輸入

$git init –bare

加了--bare這參數後，這個目錄下不會有.git目錄，且在這個目錄中不會看到你的程式檔案。
所以只能透過pull同步最新程式。而不能直接進入資料匣修改。

3.進入你目前專案的目錄(非Dropbox的目錄)，設定遠端目錄的路徑。

$git remote add origin Dropbox的目錄/OurProject

［Note］建立本地端Git專案請先執行 $git init ，初始化該資料匣。

4.接下來如果有新增檔案。可以先［進行］ git add , git commit。在透過下列指令上傳更新

$git push master origin

5.如果要下載新code，可以執行

$git pull origin master

常用指令：

把所有檔案都加入staged狀態

$git add -A 或 $git add .

各別新增為

$git add [File Path]

移除版本控制，設定為unstaged狀態

git reset [File Path]

檢查目前專案狀態

git status

檢視一下這個Repo之前commit的歷史記錄

git log

復原到指定版本

git checkout xxxx .

xxxx指的是版本編號的前四碼。

＊一般有小衝突git會自動幫你判斷合併，但太複雜的情況則需要手動處理。
開啟有衝突的檔案後，可以看到下列內容。

第一個A的內容
<<<<<<<
你加的C內容
=======
第二個A的內容
後面BB的內容
>>>>>>>

<<<<<<< 跟 >>>>>>> 標記描述了產生衝突的程式碼，其間以=======作為區隔，
第一個部份就是你新加的內容，第二個是遠端的內容。

Ref:
https://github.com/
http://www.mrmu.com.tw/2011/05/06/git-tutorial-for-beginner/

2011年9月21日星期三

解決 405 Method not allowed問題

無法查看此摘要。請按這裡查看文章。

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日星期二

常用 Regular Expression範例

寫程式常常需要檢查信用卡、日期、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/

訂閱：文章 (Atom)

2012年4月15日 星期日

2012年3月19日 星期一

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日 星期三