好用的Javascipt工具-- Variable Dump

一直以來我都是用alert來找javascript的bug
但是有時連變數的型態都不知道的時候
真的是叫天天不應，叫地地不靈
還好找到了一個好用的工具
可以將javascript的變數Dump出來

參考網址如下:

http://plog.longwin.com.tw/post/1/492

官方的網站:
http://www.netgrow.com.au/files/javascript_dump.cfm

雖然他有jquery的版本
不過我只有測試成功javascript的版本
dump出來的範例如下:


(圖一)它會開啟一個新的視窗，並且可以清楚的知道變數的型態。

(圖二)甚至是物件中的array也可以看得出來，相當的有用。

Jquery livequery應用

我覺得livequery是Jquery的外掛中，最值得使用的一個外掛，
有了livequery，我們可以在DOM元件尚未生成之前就先將其綁定，
這樣就可以操作"未來的DOM元件"，
對於常常使用Ajax動態載入頁面的朋友，
無疑是一項很重要的工具。

在底下這個範例中可以清楚的知道livequery的優點：

http://www.cssrain.cn/article.asp?id=964

不過如果是要操作未來的未來的DOM元件，
千萬不要livequery兩層，
這樣會導致相同的DOM元件操作兩次，
並且會發生不可預期的問題。

錯誤示範:

$('#first_data').livequery(function(){
    $('#first_link').click(function(){
        var $new_data = $(['click me',''].join(''));
        $(first_data).append($new_data);
    });

    $('#second_data').livequery('click',funcont(){
        alert($('#first_data').find('#first_subdata').html());
        
    });
});

由上面的這個範例中，我們可以清楚的知道，#first_data是一塊尚未出現的DOM元件。
為了要將其綁定，我們使用了livequery將整個DOM元件預先保留起來，
其中還包括一個#first_link，它的作用是新增一個id為second_data連結。
這裡的second_data連結就是我所謂的"未來的未來的DOM元件"。

現在如果我們想要按下#second_data時，跑起一個警告視窗，內容為#first_data中的#first_subdata的資料，
很自然的，會在和程式的下方多加一個livequery去執行這個動作。
但是這樣的寫法，會導致#second_data連結，被啟動兩次，所以會造成不可預期之動作。

那要怎麼處理未來的未來的DOM元件呢??
其實不用把它想的太難，我只要用livequery綁定一次就OK了。
只是如果livequery之中的function如果有需要用到其他未來的DOM元件，
就必須另外寫一個livequery來處理其他的DOM元件。

所以正確的寫法如下

var first_subdata;
//Part 1
$('#first_data').livequery(function(){
    first_subdata = $(this).find('#first_subdata');
    $('#first_link').click(function(){
        var $new_data = $(['click me',''].join(''));
        $(first_data).append($new_data);
    });
});
//Part 2
$('#second_data').livequery('click',funcont(){
    alert(first_subdata.html());
});

因此，我們必須在Part 1之前，就事先宣告一個first_subdata變數去保留了#first_subdata的資料，然後在Part 2的時候才能使用first_subdata的資料。

Crossbow TelosB 硬體測試 by using Oscilloscope

很久沒有紀錄和TinyOS相關的文章了
上個星期收到了幾顆Crossbow的mote
所以一時手癢拿來跑Oscilloscope的範例程式
順便復習一下TinyOS
不然人老了,很容易忘東忘西的

首先要跑Oscilloscope
可以先到官網的wiki看一下說明
http://docs.tinyos.net/index.php/Sensing

底下為大家一一介紹燒錄和觀看結果的步驟:

Step1 燒錄程式
要燒錄的程式有兩種:
1.BaseStation
2.Oscilloscope
第一份BaseStation主要是將收到的封包,透過serialforwarder傳回PC端
第二份Oscilloscope是將mote上收集的sensing data 傳送出去

由此可見,至少要二個mote才能跑起這個範例
所以我準備了兩個mote
在第一個mote上燒BaseStation

cd /opt/tinyos-2.1.0/BaseStation/
make telosb install,1 bsl,/dev/ttyUSB0

接著在第二個mote上燒Oscilloscope

cd /opt/tinyos-2.1.0/Oscilloscope/
make telosb install,2 bsl,/dev/ttyUSB1

在install之後的2是用來設定mote id用的,單純為了待會辨視之用

Step2 顯示資料結果
我們透過內建的java程式,觀測感測的資料

export MOTECOM=serial@/dev/ttyUSB0:telosb
cd /opt/tinyos-2.1.0/Oscilloscope/java/
./run

這樣就可以看到感測資料的結果了

[Mac] Macbook air 大降價~~

好像是從去Berkeley那年開始，我都會注意Apple的產品發表會。
一來是自己從那個時候開始注意Apple的產品，二來是每次的演講都是很讓人期待。
從iPhone到Macbook air，這兩年來，Apple的新產品線都讓人衝動的想買一台回家。

而今年的WWDC 2009，個人感覺對於產品線而言，並沒有太大的突破。
不過，Macbook air的價錢真的是降到我認為合理的價碼，讓人很心動的想去買一台回來。
尤其是其它的產品線對我而言都太重了，超過1.5公斤以上的NB，對我來說都是不合格。
所以，Macbook air ssd版降了這麼多，真的是佛心來的。
當然，台灣要上市大概還要等大約一個月，這一個月就可以讓我好好的評估是否要自己買一台。
買之前當然要先做功課啦，先把硬體規格列一下：


2.13GHz，128GB 固態磁碟
13.3 吋 (實際顯示範圍) LED 背光鏡面寬螢幕顯示器
1280 x 800 像素
Intel Core 2 Duo
1066MHz 前端匯流排
6MB 容量 L2 快取記憶體
NVIDIA GeForce 9400M 繪圖晶片，與主記憶體共享 256MB 容量 DDR3 SDRAM 記憶體
2GB 的 1066MHz DDR3 SDRAM (位於主機板上)
內建鋰聚合物電池
可提供長達 5 小時的高效率無線網路連線
1 個 USB 2.0 連接埠
耳機輸出、麥克風、揚聲器
Apple USB Ethernet Adapter
全尺寸，具備環境光線感應器的發光式鍵盤
Multi-Touch 軌跡板
1.36 公斤

參考網址:
http://en.wikipedia.org/wiki/MacBook_Air
http://store.apple.com/tw/browse/home/shop_mac/family/macbook_air?afid=p202|GOTWE&cid=AOS-AP-TW-GOOGLE-AA5000082926
http://forums.whirlpool.net.au/forum-replies-archive.cfm/1225888.html

原則上，記憶體是沒辦法擴充啦，因為是銲在主機版上的。
不過我的X31好像也是4年之後才加了1G的ram，所以不影響。
可能可以換的，我猜只有ssd硬碟，可能過幾年會出256G的吧。
當然，如果可以等9月雪豹一起出來，一次到位那是最好啦。
就不會再花錢更新作業系統。

目前在MAC Rumor其實有傳出一些災情：

1.顯示器有線條跑出來，而且顯示器其實跟2代一樣，希望有線條的NB只是個案><
(目前已經有三四篇在討論這個問題了，真的要買的話要好好注意)
http://forums.macrumors.com/showthread.php?t=715107


一些個人覺得有用的評價：
1.跑windows 7很順(沒辦法一定要跑一下雙系統的丫)
http://forums.macrumors.com/showthread.php?t=719163
2.不會過熱，這個很重要
http://forums.macrumors.com/showthread.php?t=717958
3.跑windows 7 電池可以撐4個多小時
4.跟第一代比起來，風扇比較靜

大致上就是這樣啦
就等9月啦

[PHP] Pear - HTTP_Upload使用心得

如果有在使用Pear的人
相信對HTTP_Upload一定不默生
他是一套相當好用的檔案上傳套件
不過我最近發現一件事
不知道是他原本就有的問題
還是我程式沒有寫好

我們都知道HTTP_Upload支援多檔案上傳
只要使用

require_once 'HTTP/Upload.php';

$upload = new http_upload();
$files = $upload->getFiles();

foreach($files as $key => $value)
{
  //處理每一個file
}

但是，如果<input type="file" name ="XXXX">這段tag是單純是由jQuery產生的
檔案就不會post給下一個頁面，只會出現error
不過如果網頁本身就有<input type="file" name ="XXXX">
混合jQuery產生的tag就可以將每個檔案傳出去

所以，目前我的解決方法就是不管有沒有要傳資料
那一段tag都要寫在網頁裡，然後display設為none
眼不見為淨，這樣就不會有file error的問題


參考文章:
http://andy.diimii.com/2008/12/pear%E6%AA%94%E6%A1%88%E4%B8%8A%E5%82%B3http_upload%E7%AF%84%E4%BE%8B%E8%A3%9C%E5%85%85/#more-149
http://phpeye.com/bbs/thread-310-1-1.html

在Google Blogger為程式碼上色的方法--使用SyntaxHighlighter 2.0(高亮度語法)

之前我在Blog寫程式的教學都只有單純的將code包起來
現在我可以幫我的程式碼上色了 ^Q^
其實是使用了SyntaxHighlighter 2.0
它主要是使用javascript幫你把code塗上顏色
看了很多人的教學文件
但是我目前只有下列方法跑的起來

Step1
在Blogger的"版面配置" 中點選 "修改HTML"

Step2
將下列程式碼貼在</head>之前

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/>

這裡包含了所需要的CSS和Javascript

Step 3

一樣把下列javascript程式碼貼在剛才貼上的路徑之後

<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf&#39;;
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Step4
最後為了讓所有的瀏覽器可以支援
必須在CSS之中加入下面這段

pre {
 overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 /* width: 99%; */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}

貼完之後儲存設定,之後就可以使用下列方法將程式碼寫在Blogger中

<pre class="brush:html">
<pre >

最後要注意的是
所有的tag符號,如<
都必須轉換成HTML碼&lt;
這樣才不會出問題

如果懶自己改
可以到下列網址轉換

http://www.functions-online.com/htmlentities.html

主要參考來源:
http://blog.webunusual.com/2009/02/enlight-your-blogger-with.html

其它參考來源:
http://kkbruce.blogspot.com/2009/03/bloggoogle-bloggersyntaxhighlighter.html

http://keikoblog.blogspot.com/2009/03/blog.html

http://kkbruce.blogspot.com/2009/03/bloggoogle-bloggersyntaxhighlighter.html

http://code.google.com/p/syntaxhighlighter/


http://nio127.blogspot.com/2008/11/syntexhighlighter.html

[Mac] 清理Mighty Mouse

Mighty Mouse 用久了裡面都會卡一些髒東西
導致滾輪卡住而無法使用
所以，網路上有許多清理的方法

目前我有看到的方法如下：

1. 拿出一張白紙，把滑鼠反過來，讓軌跡球在白紙上用力的滾一滾。



2. 拿布沾液體（有看到漂白水、擦鏡頭的水）把它擦一擦。

參考：http://www.oikos.com.tw/v4/viewtopic.php?id=48985

3. 細膠帶深入清潔
請見：http://www.brendanfenn.com/cleanmouse.html

4. 大決！拆開來清。
分解篇：http://www.applestyle.com/mac/product_info.php?info=p722
保養篇：http://www.applestyle.com/mac/product_info.php?info=p725

另一篇有關拆解的文章：http://tw.myblog.yahoo.com/jw!goh8r3aWGRh1Mxfx_auxerOJj8H2/article?mid=146

＝＝＝＝＝＝
其中
我試了第1，第3和第4種方法

第4種方法我拆到一半就放棄了

第3種方法 用細膠帶的確清出了一些髒髒的東西出來
不過我的滾輪還是只能往上滾，不能往下滾

就在我快要放棄它的時候
我試了第1個最簡單的方法
沒錯，如影片上所播放的
就是拿一張白紙出來
把mighty mouse 反過來用力給它在白紙上面滾來滾去
一定要用點力
這樣才能讓那些髒東西掉出來

很神奇的事情發生了
滾輪又正常的運作了
所以，還是最簡單的方法最有效
提供給大家參考