本書評由othree評論於2008/08/15，評分為5分（滿分5分），採創用 CC 姓名標示-相同方式分享 授權條款釋出。

而這幾天在日本舉辦的東京電玩展上更是有了驚人的發表，CAPCOM官方要免費提供洛克人九的素材給人二次創作，而且發表當天就可以在ニコニ・コモンズ（niconi commons）上抓到了，標籤都設為【ロックマン公式】，除了遊戲中的人物各種動作圖形、高解析度宣傳圖之外，還有關卡背景音樂等，這應該是日本遊戲史上第一次吧，之前雖然也有些作品的官方網站會提供些素材，不過素材品質和使用範圍的授權和洛克人九這次的程度相比之下根本都是雜魚而已，目前這些素材都是不限範圍的非商業使用，和創用CC不同，他有自己的授權條款，如果有興趣使用的人可能需要自己去看一下。

這次會有8bit洛克人九和官方的素材公開，和ニコニコ上的二次創作關係很大，像是打不倒的空氣人和億千萬等等的洛克人二次創作，都在ACG社群內造成很大的迴響，歌曲不知不覺中也成為家諭戶曉的名曲，我個人是認為因為這些二次創作的關係，稲船敬二才會決定迴歸傳統還只用到8bit的等級，甚至是開放使用這些素材，如果這次的洛克人九能夠產生一個正循環，開放素材讓更多的二次創作產生，而這些二次創作所產生的效應也能對CAPCOM產生益處，不論是經濟收益還是知名度，或許都會吸引其他作品和公司也開放素材的使用，要是真的產生這樣的趨勢的話，在日本長年以來都位於灰色地帶的同仁市場會有個嶄新的局面也說不定。

SET PP=D:\tools\yuicompressor\
java -jar %PP%yuicompressor.jar --charset utf-8 %1 %2 %3 %4 %5 %6 %7 %8 %9

確定檔案路徑和基本的選項之後，把這個batch檔丟到path下的目錄，以後就可以用這個指令來壓縮js和css檔了，不過在我自己的電腦上還有遇到別的問題，就是.bat檔不會真的執行，不知道做了什麼事才變成這樣，總之又去找了bat2exec把bat檔轉成com檔，不過這個小程式出處不明，希望沒有什麼木馬在裡面@@。

事後感想是windows的命令列能不能好用一點啊Q_Q。

我一定是コードギアス的劇情討論看太多才會看錯成這樣 囧 。

var subHeads = document.getElementsByTagName('h2');
for (var i=0; i<subHeads.length; i++) {
    subHeads[i].onclick = function () {
        alert(i);
    };
}

這個case中，使用非常直觀的想法，不過他的結果是每個h2 click下去都會alert "3"出來，實際上每個click都是執行一個function，這個function會執行alert function，並且送 i 這個變數作為輸入值，不過實際上使用者click動作發生時，迴圈已經跑過一遍，而且 i 的值已經變成3了，所以你不管click哪一個h2，實際上都是做 alert(3) 這個動作。

var subHeads = document.getElementsByTagName('h2');
for (var i=0; i<subHeads.length; i++) {
    (function () {
        var ii = i;
        subHeads[i].onclick = function () {
            alert(ii);
        };
    })();
}

這個方法是用匿名function把 ii 這個變數的scope獨立起來，而 ii 的值就是在這個匿名function執行時 i 的值，這樣每個click function裡面的 ii 就都各自獨立，不會互相影響到。再來看第二個作法：

var subHeads = document.getElementsByTagName('h2');
for (var i=0; i<subHeads.length; i++) {
    eval("subHeads[i].onclick = function () {" +
         "    alert("+i+");" +
         "};");
}

可以看到整個event function的指派都是用eval來達成的，比較特別的是要用 i 時，我是跳脫字串，直接用 i變數 的值，這個作法其實是讓每個click function的內容都不太一樣（alert的輸入值不同）。而除了這兩個方法之外，我還蠻喜歡把屬性加到DOM的elementNode上的，所以來看看我習慣的作法：

var subHeads = document.getElementsByTagName('h2');
for (var i=0; i<subHeads.length; i++) {
    subHeads[i].attr_i = i;
    subHeads[i].onclick = function () {
        alert(this.attr_i);
    };
}

在這個範例理，我先在 h2 node 下面加上 attr_i 這個屬性，值就是 i 當時的值，而click function內就是送 attr_i 給alert function，這樣結果也可以如我們所預期。不過如果是用jQuery的話就要注意了，來看看最後這個jQuery的例子：

var subHeads = $('h2');
for (var i=0; i<subHeads.length; i++) {
    subHeads.eq(i).attr_i = i;
    subHeads.eq(i).click(function () {
        alert($(this).attr_i);
    });
}

因為jQuery沒有cache機制，所以上面這個例子會發生錯誤， $(this).attr_i 會不存在，會alert出 'undefined' ，要新增屬性的話要直接加到最基本的 DOM Node 上，不可以放在jQuery物件上，要存取DOM Node可以用 subHead.get(0) 或是 subHead[0] ，後者我沒測試過就是。

這有名的秘技相信大家都有印象，前陣子Google Reader還拿了這個指令來用，最近突然很想把它寫出來，今天下午終於花了些時間弄出來，在這個js檔案裡面定義了一個konami的自定函式，只要把輸入命令後想要做的動作寫成function作為參數來呼叫這個函式即可，以執行一個alert動作為例：

konami(function(){alert('You got 30 lifes.')});

• Konami Command Script
• Konami Code(Command)

首先，我有一個固定寬高的頁首區塊，也就是我接下來要介紹的CSS TIP所可以應用的地方，這種頁首區塊內的文字通常只有一行，其他類似的物件還有各種標題（h1~h6）、導覽列清單（li）等。這些區塊物件在還沒有任何設定的時候，裡面的文字通常都是貼齊左上角的，這邊舉一個 h1標題 的例子，它的 CSS Code 如下：

h1 {
    font-size: 200%;
    color: #fff;
    background: #000;
    height: 100px;
}

顯示結果如下：

如果想要文字水平也置中，只要加上 text-align: center; 就可以了，不過我比較喜歡讓文字靠左，然後留一點邊距，讓文字不要這麼貼齊邊緣，這時可以用text-indent（首行縮排）這個屬性，因為內文只有一行，所以可以偷偷用這個屬性來做出padding-left的效果，如果文字是多行的話，大概上個行高設定就讓你的內文爆炸了吧XD。加上15px縮排的結果如下圖：

text-indent除了可以製造內距的效果之外，還可以用來把文字隱藏，免得檔到背景圖，只要把值設成負的，例如-1000000px，文字就會跑到視窗可視範圍之外，要保險一點還可以加上 overflow: hidden; 的設定，讓超出區塊範圍的東西隱藏起來。以上就是本次的CSS TIP內容，希望能幫到大家，下篇應該會說javascript的東西吧。

補充：考量到親和力的情況下，還是比較推薦使用img標籤配合alt屬性的替代文字的，這樣在圖片讀取不到的狀況下，也還是看得到文字內容。

本來查文件是說直接用$_SESSION這個變數就可以，不過測試過後還是要用session_register註冊一下變數名稱，不然會沒辦法把session傳到其他頁面。

Firefox 3我不管怎樣弄大概吃到500多MB就最多了，當然我的測試不是開無限多圖，無限多分頁啦，基本上是開一個數百張圖的網頁，然後我發現Google Chrome只要我一直卷上卷下，那個記憶體就會越吃越多XD。

再來講講優點，其實就是，使用者介面的效果很棒，而且很流暢，我最喜歡的就是書籤工具列的切換，有兩種，第一種是平常看網頁的時候，直接Ctrl+B，就會有類似slide out感覺的動畫效果，另外一種則是隱藏書籤列時開空白新分頁，那個預設的頁面上也有個書籤工具列，如果這時候按下Ctrl + B，就會看到網頁上的書籤工具列往上移動和視窗的介面部分接在一起，感覺棒，而且效果很流暢。

另外就是用的訊息蠻有趣的，除了讓一堆人重病的「是不是我講錯什麼話讓你不開心了？」以外，確定反安裝後，還可以回他說「我沒有不高興（I am not unhappy）。」不過這些訊息在日文版似乎都修掉了，感覺有點可惜，又不過反正我也不會去用日文版，也覺得也沒差啦。

新功能在Youtube的影片都介紹的很詳細了，所以我要介紹的就是比較其他的東西，首先是Picasa Web的人臉辨識可以抓到Mii的大頭，其實不只Mii的大頭，還有一堆有的沒的遊戲角色都抓的到XD。

另外一個則是Picasa 3內新附的圖片瀏覽器Picasa Photo Viewer，功能和設定選項還不多，不過介面實在蠻漂亮的，有裝Picasa 3的人可以順便玩玩。

• Introducing Picasa 3.0

我比較驚訝的是Google Chrome沒有工具列，之前已經有一個IE7這樣做失敗了，不知道Google表現會怎樣就是，總之，明天就可以下載測試版了\A_A/。

• A fresh take on the browser

上個週末去高雄參加了結構工程研討會（所以沒去COSCUP），順便參加了工程參觀的捷運美麗島站，所以有機會看到還沒開放的光之穹頂，這大概是我這次高雄行印象最深刻的一個景點了，高雄捷運美麗島站將會是兩條線的交會處，也是唯一的轉乘站，捷運站也座落在高雄交通要到的中正路和中山路路口，我想等正式開放後，一定會成為新的高雄地標，不過絕對不只是因為他交通要衝的關係，站內的光之穹頂實在令人印象深刻。高雄捷運站體在設計階段就已經把公共藝術放進來，之前已經很有名的像是中央公園站的那個天花板(?)，不過中央公園站更有名的應該是意外成為許願池的許願池吧，而這樣的規劃讓高雄捷運站整個感覺表現就是很出色，不過也不是說台北捷運站比較爛，台北捷運站當初設計階段還沒有公共藝術品的需求，而是法案通過後才加上的。不扯別的，美麗島站有四個主要出口，進到地下一樓後，就會直接到這個廣場，廣場的天花板就是光之穹頂，實在是很漂亮，我的照片拍的不夠好，曝光好像不太夠，希望大家未來都可以親自去看看。

1. 保持CSS簡單乾淨 - Peter-Paul Koch

少用CSS hack。

2. CSS宣告盡量放進一行 - Jonathan Snook

舉例來說：

body {margin: 0; padding: 0; background: #fff;}

不過這工作我覺得交給機器來做比較好。

3.使用簡化的寫法 - Roger Johansson

使用如下的簡化寫法：

border-width: 0 1px 2px 3px;

而不是用border-top-width、border-right-width、border-bottom-width、border-left-width分開設訂定。

4.讓區塊元素自己填滿空間 - Jonathan

設定width的話，就不設定margin、padding，設定margin、padding的話，就不設定width，這樣可以迴避掉IE的box model錯誤。

5.用float元素自己clear float - Trevor Davis

其實是利用 :after { clear: both; }來做啦。

6.使用負的邊界直 - Dan Cederholm

讓物件突出更顯眼。

7.使用CSS把版面置中 - Dan Cederholm

固定寬度的版面配置，盡量使用CSS把內容置中。

8.使用正確的DOCTYPE - Jeffrey Zeldman

好處多多。

9.使用CSS把物件置中 - Wolfgang Bartelme

雖然不是指整個版面而是指所有想要置中的東西，不過原文的例子還是把網頁主內容來置中，結果和第七點蠻容易混淆的。

10.善用大小寫轉換 - Trenton Moss

和中文語系使用者關係不大。

最後看下來，扣掉第10點，9點中我有7點有做到吧...

ECMAScript 4則是包含太多新功能，有一些被認為對網路不好，畢竟主導的是幾家大企業，裡面會有這些東西也不太讓人意外就是，總之目前制定到一半的ECMAScript 4就先被放棄了。

• ECMAScript Harmony