Kaie's Blog: 2006

[AJAX] AJAX Labels Cloud

今天在 Blogger Hacked 發現一個超棒的東西叫作AJAX Labels，也就是之前 [Blog] Peek-A-Boo view of posts in label pages 的改良版，利用 AJAX/JSON 的技術，大幅提升Blog的更新速度，效果就像此圖中所表現的(建議還是試著點圖中的"AJAX Tas Cloud"才能親身體驗「真的快、好厲害」)，感謝作者Deepak分享(very Awesome!)資料來源： Blogger Hacked: AJAX Labels接下來開始翻譯(...XD)安裝步驟：

Step1:若要此hack能夠正常運作的話，你必需在你的Blog裡使用"Prototype Javascript Library"，你可以到官網自行抓一份，放到你的空間中或者懶得話拿我的去用也無妨..^^(畢竟是Google提供的空費空間)，所以到必需在你的Template中新增底下code (放置於<head>...</head>裡頭)<script src='http://chenkaie.googlepages.com/prototype.js' type='text/javascript'> </script> <script src='http://chenkaie.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>
Step2:接著新增核心部份程式碼，將底下連結中的程式碼仿Step1.同樣加到<head>...</head>裡頭，裡頭CSS請依照您個人喜好修改，細項說明，請參考原著解說!CSS Code & Javascript code: http://bloggerhacked.googlepages.com/ajaxlabelsscript
Step3:在你的Template中找到底下片段，有一樣的全都要修改(若不改的話，就是原本Blogger提供的效果)

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

將上面紅色部份，取代成底下：

<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>

Step4:若你原先有裝Labels Cloud的話(沒有請跳到Step5.)

資料來源：
phydeaux3: Blogger Beta Label Cloud Update
phydeaux3: Code for Beta Blogger Label Cloud

若要將點擊Labesl Cloud所呈現出的效果也修改成AJAX Labels的樣式的話，請將底下：<a expr:href='data:label.url'><data:label.name/></a>修改成底下的樣子<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'><data:label.name/></a>
Step5:新增一個"HTML/Javascript" Page Element放置於"Blog Posts" Element的上面(可隨個人喜好修改)，裡頭的code如下(和原作不一樣，原作的似乎有些小Bug，我作了一點修改，若你作完不行的話，請參考原著)：

<div id="indicator" style="display: none;">
<img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...
</div>
<div id="search-result" style="display: none;"></div>

Step6. 存檔離開就好囉....^^ 快去試試看呈現出來的驚人效果吧!!

※此AJAX Labels Cloud是抓取Blogger提供的feed中summary類別(比較精簡，為了追求更佳的速度感^^)，作為文章預覽，所以呈現出來只有一小段!
※還有預設，點選每一個Label只有呈現5篇文章，若要增加的話，請將Step2裡頭程式碼"?max-results=5"中的5改為您想要的數字即可!

[Update 2007-03-14]
原作者，發表了新版本的AJAX Labels了，請參照此處

．Tags: AJAX all blog blogger hack computer javascript JSON WTF

．Comment counts: 20 Comments

[+/-]

[Javascript] Selectable Post Font Size for your best view!

之前有看到許多網站或討論區，有可以自行選擇顯示字型大小的功能，對於視力好的人來說或許字型小了些沒什麼影響，但有些老人家..(是我嗎..XD)，有時就會覺得看得有些吃力，若能迅速的讓字型放大，不用再花時間ReLoad頁面的話，將會是個很不賴的工具!!

※當然藉由按 Ctrl++/ Ctrl+- (for Firefox)，或者是Browser提供的放大縮小功能，不然就是通用的「Ctrl+滾輪上下滾」來達到放大縮小的功能，但我這個人比較龜毛，因為這兩種功能所表現出來的文字常常是破碎或是很醜，個人無法接受...時常因為這樣不逛那個站了…囧rz，並且透過上述的方式縮放頁面字型時，是所有版面的字型都會放大，也就連帶影響到Sibebar、Header...及其它非本文章內容的部份，整個網站當初設計好的版型都變了樣，喪失美感! 因此，我在此Blog中提供三種用於縮放文章內容的合適字型讓大家選擇(位於此處)!!

至於在Yahoo Taiwan的新聞裡點進每一篇新聞之後，也有提供類似這樣子的工具，But...他每次點換字級大小之後，都必需要 Reload 部份的頁面，明明可以不用Reload的，為啥他這麼作…後來發現，廣告部份也隨著Reload換新的了...囧rz，想必這是最主要的原因吧，那是他們吃飯的工具，就給他reload一下吧...XD!!

參考資料來源：懒人图库 LAYABOUT'S GALLERY我根據上面所提供的的簡易版本，再修改成較適合於New Blogger版本 ^_^(當然再作適當的修改之後，其它Blog也都是可以套用的)。

在修改的過程中，又遇到某個語法getElementsByName在IE中的話只對表單的物件有作用...OMG..IE sux again!!還好有底下這位大哥的教學，解救了我...感恩!!
參考資料來源： IE vs. FireFox 系列 - getElementsByName問題於是，最後完整版的Javascript code (IE & Firefox 都正常) 就變成底下：

[Updated 2006-12-26] 針對留言中Benjamin網友所遇到的問題，在這裡提醒大家，貼底下code時應注意的事項：

由於Blogger在parse template語法有無錯誤時，他會檢查是否存在相對應的左括: <及右括: >，若不存在便會跟你說你的template語法沒有正確的close，導致儲存失敗。不幸的是，你若將Javascript嵌入template檔中，並且又很巧的，用到compare operator，例如：「小於:<」，如此一來他便會產生上述所提的，少了相對應的右括: >，而導語法錯誤啦! 因此，大家若要將底下這段javascript嵌入template中的話，記得將裡頭的<置換成<

<script type='text/javascript'>
function getElementsByName_iefix(tag, name) {
var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) {
 att = elem[i].getAttribute("name");
 if(att == name) {
    arr[iarr] = elem[i];
    iarr++;
 }
}
return arr;
}

function doZoom(size)
{
var zooms = getElementsByName_iefix("span", "zoom")
for (var i = 0; i < zooms.length; i++) {
  zooms[i].style.fontSize = size+'px';
}
}
</script>

之後，因為我只讓本文內容(Post.body)的字型大小可供縮放，因此編緝template內容，將裡頭找到的所有

<p><data:post.body/></p>

都置換成底下的樣子

<span name='zoom'><p><data:post.body/></p></span>

如此，就可以將被 name='zoom' 的span tag包住的那些內容，賦予字型縮放的功能!!

最後在將你要提供此項功能的界面，填入此段程式碼即可，裡頭的數字以px為單位：

<a href="javascript:doZoom(16)">大</a>
<a href="javascript:doZoom(14)">中</a>
<a href="javascript:doZoom(12)">小</a>

※展示出來的功能，請參照此圖，並加以操作看看…

．Tags: all blog blogger hack computer IE javascript WTF

．Comment counts: 58 Comments

[+/-]

[Blog] A not only Awesome but Lightning Fast Blog

．Tags: AJAX all blog computer Design JSON template

．Comment counts: 0 Comments

[+/-]

[WordPress] Theme : Vistered Little 1.6

．Tags: all blog computer Design theme WordPress

．Comment counts: 4 Comments

[+/-]

[AJAX] Web-based BBS : gaaan.com

．Tags: AJAX all BBS

．Comment counts: 4 Comments

[+/-]

[Browser] Browser Compatibility Notes

．Tags: all blog computer css firefox IE javascript

．Comment counts: 0 Comments

[+/-]

[Template] Kubrick style for Blogger beta

由於個人很喜歡Kubrick這個源自於WordPress裡預設的"簡單中又不失美感"的一個版型 ^_^，於是將他移植到Blogger Beta的平台上 ^_^，並且加上了一些個人自認為還還不錯的功能...，只不過對於IE的親和力可能要說聲抱歉了...XD，IE實在很討人厭..囧rz，可能有一些些小bug就是了，但不會有什麼太大的影響!!

．底下為預覽圖：

這裡有示範網站 Demo / Example
以按右鍵->另存新檔的方式下載此 Template 或 Template (二選一)
(※注意事項：請把原先的作好備份，以備不時之需!!套用時，要先把沒用的widget清空，再小心將你原本的widget搬到此新 template，不然到時不見了，你會愈哭無淚的!)

．額外附加功能：

Expandable posts with Peekaboo view(Blogger Beta 摘要/全文切換之"繼續閱讀功能) [Figure]
Peek-A-Boo view of posts in label/archive pages (在Label/Archive頁面加入擴展功能 ) [Figure]
Author comment highlighting and notification (特別標示出，原Blog作者註解，用於和非Blog作者作區別) [Figure]
Comments with profile photos (顯示註解者的個人圖像) [Figure]

若你想換成自己的Banner的話，底下有一個簡單又快速的方法...really Awesome!!

Website: http://redalt.com/Tools/Kubrickr
此Kubrickr就是利用強大的 Flickr 所提供的超大圖庫，然後由裡頭的圖片產生你所想要的Banner，實在是個非常棒的應用!! 真是造福了不少人群..

所以說，你若看煩了Kubrick預設的Banner，或想要多點變化，你可以隨時輕鬆的從Kubrickr產生你所喜歡的 ^_^

若有問題，歡迎隨時留言討論...

[Updated 2006/12/13]
修正背景色的色差，與原始的Kubrick不太一樣，導致用Kubrickr所產生出來的Banner和舊版本的不一樣!! < 感謝 Orion 提供 >

[Updated 2007/07/14] 由於原作者hosting的javascript file(hackosphere.js)空間，已經無法承受愈來愈多人的存取，請繼續看底下code框框中的更新作法

將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> 
拿掉，置換成底下這一段程式碼
<script type="text/javascript">
function toggleIt(id) {
	post = document.getElementById(id);
	if (post.style.display != 'none') {
		post.style.display = 'none';
	} else {
		post.style.display = '';
	}
}

function showFullPost(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "readmore")
                 spans[i].style.display = 'none';
        }
}

var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>

．Tags: all blog Design template WTF

．Comment counts: 108 Comments

[+/-]

[AJAX] What is AJAX (2)

接續上一篇[AJAX] What is AJAX(1)，是否覺得很有趣...二話不說，繼續往第二篇前進吧...
．原文出處：堯@部落格 -> AJAX漫談(2)
※文章內容：
說了那麼多，ajax可以運用在什麼地方，可能還是有很多人不太清楚，這邊我再稍微的說明一下Ajax的運用範例。

需要伺服器大量處理的網站：由於ajax可以依據使用者的要求來供給資料，所以服務器和瀏覽器中間可以透過ajax來不斷的供給正確的資料，而無需一開始就把全部的資料一次處裡完。這樣不但可以省下伺服器處理的時間，用戶端的瀏覽器也只需要載入他所需要的資料就可以了。所以能夠處理的規模也變的大的許多，例如Google Map，Google Earth，如果後端一次把所有的資料都運算給你，那一台服務器能夠提供多少人使用?規模自然大不起來。
需要多用戶互動頻繁的網站：例如聊天室，很多不同的用戶透過xml把訊息送出去，然後透過ajax讓其他在聊天室裡面的人都可以只抓到更新的那一部分資料，這樣也可以減少伺服器端的重新發送重複資料，同時也可以加快傳輸的時間，讓網路浪費減到最低，效能自然達到最高。
需要保存大量使用者操作介面資料的網站：例如google的spreadsheet，讓使用者直接在web上面操作類似excel的功能，而這部分使用者很多資料都存在local端的電腦，如果不用ajax，那每次資料都要重新載入，這樣的excel根本用不下去。
資料的驗證：例如現在很多網站都有提供檢查用戶名稱是否可用的功能，如果在傳統的web application都是整頁reload，然後告訴你這個不行，那個不行....但是現在只要點一下，馬上就可以檢查資料的正確性，這點的確非常方便。

※原作者工作經驗談：
說到這，又讓我想起那時候為了生活接案子(悲慘的日子)，用Microsoft.NET做了很多案子，可是.NET的很多基本元件，都是用戶填了資料，網頁直接refresh，然後整頁在不知不覺中(根本就是有感覺~~)做了更動。這部分一直讓我很不諒解，這根本只是讓程式開發者用很簡單的方式來開發程式，但是對於伺服器資源及網路流量做了最壞的示範啊。當初在做案子的時後，我心理都會問，這樣的架構最多能夠負擔到多少人？但是由於案子是別人給的，錢也是別人給的，又指定要用.NET開發，所以只好默默的結案了事。也許像這樣的web application根本不需要用到ajax的架構，但如果有一天用戶的老闆大發奇想要擴大運用.....Oops....

．Tags: AJAX all computer

．Comment counts: 0 Comments

[+/-]

[AJAX] What is AJAX (1)

之前在堯@部落格中看到了一系列的「AJAX」的文章，筆者以簡易明瞭的條列式方式，一一解說，對於原本半知半解的我，受益良多...透過CC的授權，將文章內容轉戴於底下：
．原文出處：堯@部落格 -> AJAX漫談 ※文章內容：

Ajax(Asynchronous JavaScript + XML)是在2005年二月由Jesse James Garrett在一篇名為Ajax: A New Approach to Web Applications所大力推廣。當時很快就獲得了很大的迴響。但是ajax並不是一項新的技術，而只是運用了過去原本就有的技巧所混合出來的一項概念。早在Garrett提出之前，就有很多人運用這樣的技術，例如Google Map。javascript 和xml的技術混用，我在2000年的一個CMS專案中就曾經運用過(我那時候根本沒聽過什麼ajax)，而且其優點就如同Garrett所提，可以充分改善Web Pages的不足之處。只是早期並沒有這個名詞，很多進階的web developer默默的在運用這部分的技術而已。

在傳統的web架構上面，有很多缺點限制了web application的發展：

互動性不足：傳統的網路架構，是讓使用者在網頁上面點透過連結，跟遠端產生的頁面一頁一頁的重新載入(Reload)，所以每當使用者點了一個連結，就必須呆呆的等待右上方的地球(以前的netscape)或是IE的 Microsoft那面旗子飄玩，然後用戶才知道互動的結果是怎樣。這樣的互動其實在90年代就讓人覺得很方便了，但是在現今一切都要求快狠準的年代，這樣的互動性很明顯的就達不到我們的標準(這句話可以借給卓榮泰說明一下什麼是動態道德標準)。
校能不足：也由於傳統的web架構，使用者都必須每次把頁面重新的載入一次，所以對於系統的資源就很浪費。通常我們在讀取一個頁面的時候，資料讀進來都還得要經過處裡一下，就像是在我的部落格裡面，右方的side bar每次讀進來都必須要跑過一次javascript去抓del.icio.us的tag然後轉成看到的樣子。這樣當然很愚蠢啊，因為幾乎都是相同的東西，只是當初制定web架購，為了讓每一頁的資源都成功的獲得釋放，所以相對的就造成現在的狀況。也就是因為這個先天不良，所以Ajax架構出來的程式，幾乎都捨棄了下一頁的功能。甚至有些比較狠的，連上一頁也一併拿掉了(javascript就能做到)。這樣一但進到網頁裡面，所有在網頁內做的事情，都在彈指之間做到了，使用者只覺得網站的互動性很強。不過這點其實也有點trade off，提升互動性的後果，就是離線閱讀(offline mode)會讀不到東西，網站會變的很怪。不過在比例上，現在好像沒看過有人還在用離線閱讀了，畢竟今日的網路價格很便宜，已經不是當初撥接每分鐘計價的時代了。
介面太過簡單：在傳統的web post的模式，實在做不了太複雜的工作，一個表單的Form要填寫的資料沒辦法太複雜，如果要填寫的頁面資料超過一頁，那往往都是透過post的方式把資料一頁頁的存在server端，這就很討厭啦，因為為了要能照顧user資料不用白填，所以就必須要追蹤user之前填過的所有資料，session cookie的什麼技術都用上了，為的只是要打破當初制定的那個能提供離線閱讀的架構，囧rz~~~~。
資源浪費：在傳統的web pages上面，你會看到大部分的人都會把相關可以點的東西，越放越多在同一個頁面上，而每次做了一個連結，頁面重讀後，為了讓使用者不知道什麼時候才會點的功能能夠一覽無遺的準備在那邊讓用戶可以隨時點下去，所以只好再重新送了一次。網路的資源就在這樣的一頁一頁的翻動中，重複著送出一些相同的東西。 (Google在剛出來的時候因為介面相當乾淨，反而獲得了大部分的人的認同，製造出一種很有效率的印象)

在Ajax之前，一份由當時MicroSoft提出的IE4架構裡面(沒錯，就是IE4，1997年)，介紹了IE4提供的XML物件，並讓使用者可以透過javaScript來操作xml物件。記得那時候的瀏覽器Netscape必須要使用object的方式load xml object進來才能進行操作，這點其實非常的不方便，所以我後來做的專案都指定要求客戶的web application架構必須使用IE作為標準瀏覽器，說起來我也算是當時殘害netscape的一個幫兇~~~。而現在ajax所用的技術，再當時就都有提供了。當時流行的概念是soap，但是由於soap需要大量的伺服器端的協助，所以好像也沒有紅起來。 ajax之所以會大紅大紫，原因還是來自於blog和web 2.0的概念大量的被複製，相對於javascript本身架構並沒有太大的變化，但是web的技術門檻由於提供服務的服務性網站變多，很多服務也都相對的提供xml做為data source，這點讓有programing能力的blogger趨之若鶩，紛紛的透過ajax技術把服務網站的資料整合到blog裡面。總而言之，就是整個網路消費市場習慣的改變，才讓ajax因此傳播開來，而這一項沒有發明的發明，隨著web 2.0的散佈，慢慢的在網路界變成一個神話。(沒有發明的發明在90年代指的是SOAP，當時還有很多人出來指稱soap會變成影響網路發展的一個重要指標，但是呢...，或許現在還沒到檢驗的時候吧，we will see...)

．Tags: AJAX all computer

．Comment counts: 0 Comments

[+/-]

[Programming] Quake3's Fast InvSqrt()

．Tags: all computer programming

．Comment counts: 2 Comments

[+/-]

[AJAX] CanvasPaint (AJAX MS Paint) and "MS Paint God"

．Tags: AJAX all computer

．Comment counts: 0 Comments

[+/-]

[CSS] A Cool blockquote for "Code style" and some blogging tips

資料來源：
良人的大秘寶 -> [筆記]在文章裡顯示優質的程式碼區

個人覺得蠻有質感的 ^_^ a nice css design!! 感謝「良人的大秘寶」的分享!! 樣式就如同下面的code block所示。

code  {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #f0f0f0 url(http://chenkaie.googlepages.com/Code_BG.gif) left top     repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 5px 0 15px;
}

個人依樣畫葫蘆地新增一個比較常用的參考資料來源(Reference Block，記得若要用code .ref{}這個語法的話，上面的code{...}也是不可或缺的...必需有這個code{..}存在的前提，code .ref{...}才會生效)，如下：

[Updated 2006-11-29]IE sucks again..囧rz! 最近發現用IE開的話，用我自訂的<reference> tag的話，在IE會失效，後來又換了<citation>這個字，沒想到還是sux...真無言，IE幹麼鎖死這麼多Keyword呀，真不知微軟在惡搞啥，給user的自由度這麼低!!
於是參考了synnwang的作法(感恩^^)，將原本底下這段

reference {
display: block; /* fixes a strange ie margin bug */
overflow:auto;
background: #fff url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px dashed #333;
padding: 10px 5px 10px 20px;
margin: 5px 5px 0 15px;
}

換成下面這段，在IE才能work!!

code.ref{
display: block; /* fixes a strange ie margin bug */
background: #fff url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px dashed #333;
padding: 10px 5px 10px 20px;
margin: 5px 0 0 15px;
font-size: 13px;
font: $bodyfont;
line-height: 1.6em;
}

因此若要使用<code.ref> tag，方法便如下：
<code class="ref"> 引用文字的部份 </code>

※因為常在Blog上post一些教學，把在Blog貼"html code"的一些tips記錄在底下：

將 < 以 < 取代
將 > 以 > 取代
將 & 以 & 取代

如此一來，所貼出來的html code便不會被Browser給解讀為掉，而造成貼出來的code都看不到..!!

[Updated 2006-12-26]若是自行一個一個取代的話，似乎也是有些麻煩，因此個人常用的方法是：透過Nopaste之類的站，像是：http://phpfi.com/ 使用的步驟如下：

將該填的欄位填完之後，(其實只要填source這個框框即可，其餘可以略過)
接下來，依照個人喜好(若選特定的某種語言，還會有美美的關鍵字highlighting唷!)，選擇位於右下角的"-auto detect"這個選單，選好後押save鈕!
然後便會產生你所貼的source coe於網頁上:
- 若此時你用的是Firefox的話，那恭喜你了，選對Browser，省事多了! 選取你要的source code部份，接著按右鍵->檢視選取範圍原始碼(View Selection Source)
- 若用IE的話(I am sorry...IE sucks)，無法觀看所選取的特定部份原始碼，只能直接檢示所有頁面中的原始碼，再自己找尋你剛剛貼的code!(或是是我對IE不熟，若有好的檢視原始碼方式，歡迎告知我，感謝!
接著再按右鍵->複製(Copy)，即可貼到你在Blogger中編緝文章的地方囉^^，很省事吧…這是我常用的方法! 請供大家參考....若有更棒的方式，懇求大家提供給我..XD

[Updated 2006-11-29]※有時Blogging時，因為後來有Update或是有寫錯筆誤之處，便會想要加上刪除線作為Highlight，而非直接在文章中刪除，同時也比較醒目，方便讀者閱覽..作法如下：<span style="text-decoration: line-through;"> deleted text part </span>

．Tags: all blog blogger hack computer css

．Comment counts: 25 Comments

[+/-]

[Javascript] jQuery New Wave Javascript

．Tags: all blog computer javascript

．Comment counts: 5 Comments

[+/-]

[Javascript] Put Snap Preview Anywhere™ on Your Site

．Tags: all blog computer javascript

．Comment counts: 4 Comments

[+/-]

[Security] PuTTY - SSH Tunnel Usage

之前就有使用SSH Tunnel的相關應用，只是一直偷懶沒有記錄在Blog裡頭，在網路上看到Jamyy這位仁兄的文章，整理得很棒，將文章轉載於底下。
．文章出處： Jamyy's Weblog -> PuTTY - SSH Tunnel 運用備忘．相關好文收錄： heath's Daemon Castle : sshd on win32
※文章開始：
PuTTY除了能讓 Windows 平台以 ssh 通訊協定連入 Unix-Like 作業系統之外, ssh 連線後的通道還能達成許多目的, 如: 突破防火牆封鎖、防止網路封包竊聽、遠端存取防火牆內資源等等. 例如員工出差透過 ssh 安全通道連回公司存取資料, 以確保資料安全.

常見的 SSH Tunnel 運用如下:

透過 proxy 安全上網、讓 msn 突破防火牆封鎖
連入 smtp、pop3、vnc (遠端桌面)、samba (網路上的芳鄰)

ssh server 環境:

Unix-Like 作業系統 + ssh daemon
Windows 作業系統 + cygwin with sshd
內建 sshd 的 IP 分享器

client pc 環境:

下載 PuTTY, 將 putty.exe 置於 C:\Windows\System32 目錄中, "開始"→"執行" 或 "命令提示字元模式" 中輸入 putty 即可執行

實例一: 使用 proxy (代理伺服器)

目的: 避免被監聽 URL、蒐集密碼

↓啟動 PuTTY, 輸入 sshd host 網址

↓切換到 Connection -> SSH -> Tunnels 畫面, 輸入 Source port: 8080 (自訂), Destination: proxy server 的 IP 和 Port, 輸入完畢記得按 "Add"

↓如有需要, 可回到 Session 畫面儲存 (Save) 設定值, 以後執行 PuTTY 時可直接讀取 (Load) 設定值. 在任何畫面按 "Open" 即可以目前設定進行連線.

↓登入 sshd host 後, 將視窗縮到最小, 保持 ssh 連線

↓開啟瀏覽器, 設定 proxy 為: localhost:8080 以 IE 為例: 工具→網際網路選項→連線→區域網路設定

設定完畢回到瀏覽器主畫面, 開始透過 ssh 安全通道瀏覽網頁

實例二: MSN Messenger

目的: 突破公司防火牆限制、避免被側錄聊天內容

↓PuTTY 設定: Source port: 1080; Destination: 空白, Dynamic 設定完畢記得按 "Add" (其他 PuTTY 操作同上述)

↓MSN Messenger 設定: 工具→選項→連線→進階設定→只勾選 SOCKS 5 版, 伺服器: localhost, 連接埠: 1080

實例三: Outlook Express

目的: 避免被攔截信件內容、蒐集密碼

↓PuTTY 依序設定: Source: 25, Destination: smtp.host.ip:25; Source: 110, Destination: pop3.host.ip:110 (都是 Local)

↓Outlook Express 設定: POP3: localhost; SMTP: localhost

實例四: 網路上的芳鄰

目的: 存取遠端檔案分享資源

↓新增硬體: 網路介面卡 -> Microsoft -> Microsoft Loopback Adapter

↓取消勾選 "File and Printer Sharing for Microsoft Networks", 點選 "Internet Protocol (TCP/IP)" -> "內容" 進行下一步設定

↓設定 Loopback Adapter IP 位址為: 10.0.0.1 / 255.255.255.0, 點選 "進階" 進行下一步設定

↓點選 "停用 [NetBIOS over TCP/IP]", 按確定完成所有設定後, 重新啟動電腦.

↓PuTTY 設定: Source port: 10.0.0.1:139; Destination: samba.server.ip:139 或其他 windows 分享電腦 : 埠號 139

↓連線網路磁碟機: 直接把 10.0.0.1 當成一般 Windows 分享電腦即可

後記:

若遭防火牆擋 22 port, 可將 ssh server 改成 80 port
若要防止公司內部人員使用 PuTTY + ssh 通道搞怪, 可於 Linux NAT + Layer 7 防火牆擋掉 ssh 通訊協定:
iptables -A FORWARD -m layer7 --l7proto ssh -j DROP

參考資料:

．Tags: all computer linux security

．Comment counts: 1 Comment

[+/-]

[Blog] Peek-A-Boo Navbar and Google Ajax BlogSearch box

為了使整個版面好看，但又不失支持Blogger的原則，還是要幫Blogger打個廣告，而且發現升級到Blogger beta之後，那個navbar裡頭的"Search Blog"這個功能，相當的不賴，他的Search Result會直接show在原本Blog中的#content-wrapper裡頭，也就是MainPage中，一整個就很像是WordPress所提供的「站內的全文搜尋」功能，個人相當滿意 :)。
※範例：像是搜尋Keyword "blog"的話，所呈現出來的結果就像這樣。

因此，我想要的呈現方式便是：將原本固定在版面上頭的navbar的行為設成：「隱藏在上頭看不到，一旦滑鼠移過去的時候，就會出現(還是有幫Blogger作個廣告吧 XD)」，然後將"Search Blog"的功能直接顯示在Sidebar中，方便搜尋 ^_^參考資料來源： Basang Panaginip -> Setup a Blog: hide or remove the navbar and add blog search box．動態顯示Navbar的方式如下，只要在template中加入此段css code即可(IE不適用..對於IE的愛用者感到萬分抱歉，請儘速轉移到Firefox...XD)：

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0);
}

#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}

．在Sidebar中加入Search Blog的功能，只要新增一個Page Element(HTML/JavaScript)，然後加入底下的code:

<form id="searchthis" action="http://YourID.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Search" class="blue" type="submit"/>
<br/>By Google (Show result in this Blog)
</form>

至於一些個人化語法的修改，就請參考原著，不再詳述，基本上改上面的size:"Search Box的大小"，value:"所要顯示的文字"。

※由於上面那個Blog Search「目前」對於中文字的搜尋似乎還不太準確(給Google一些時間，相信他一定會改善的)，於是便需借助"Technorati"這個站的幫忙囉，可是透過他的網站所產生的javascript code，所呈現出來的樣式，並非我想的，於是便作了一些修改，拿掉些我不想要的東西 ^^，source code如下：

<script type="text/javascript">
<!--
drawTREmbed( '<div id="technorati">' +
'<form id="te_s" method="post" action="http://www.technorati.com/search.php">' +
'<input id="te_search" type="text" size="15" name="s" maxlength="255" /> <label for="te_search"> </label> ' +
'<input type=\"submit\" class=\"btn\" value=\"Search\" /> <input type=\"hidden\" name=\"sub\" value=\"searchlet\" /> <input type=\"hidden\" name=\"from\" value=\"http://chenkaie.blogspot.com\" /> <input type=\"hidden\" name=\"cc\" value=\"8hq5ubtxcg\" /> </form>' +
'Powered by <a href="http://www.technorati.com/?cc=8hq5ubtxcg"><img border="0" src="http://static.technorati.com/pix/tn-tiny.gif" alt="Powered by Technorati" /></a>'+
'<br/><a href="http://www.technorati.com/search/http://chenkaie.blogspot.com?cc=8hq5ubtxcg" id="te_lh" target="_blank" >» Blogs that link here</a>' +
'</div>'
);

function drawTREmbed(s){ document.write(s); }
// -->

</script>

．Tags: AJAX all blog blogger hack computer css google javascript search

．Comment counts: 9 Comments

[+/-]

[Javascript] show screenshot of a webpage by WebSnapr

．Tags: all blog computer javascript

．Comment counts: 1 Comment

[+/-]

[Blog] Random Rotating Banner Hack

這個Hack相當的棒，可以隨機在你所指定的「圖片集」中，隨機Show一張圖，用在Blog的Banner上..那就更Cool啦 ^_^，所展現的效果就在我的Blog，直接多試幾次「重新整理 F5」，就清楚了!

此功能在WordPress中已經是預設的plug-in了，藉由這個簡易的javascript，可以達成很多其它功能，像是：產生「隨機Discription」、「隨機 Background」....等等...想到什麼，就自己加吧!
以隨機Banner來說明的話，主要的作法就是利用javascript修改css style，例如原來template裡面的#header-wrapper的style:

#header-wrapper{
   margin: 0;
   padding: 0;
   font: $pagetitlefont;
   background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat 0px 0px;
}

基本上，我們的主要作法就是在每次Browser要讀取你的Blog的HTML原碼時，先利用一段javascript code，產生一個同樣的background定義，用以覆寫<body>裡頭的wrapper-header的background定義，所以記得要把底下這段code「放置在<body>之後」，就行了：

<script type="text/javascript">
var banner= new Array()

banner[0]="http://photos1.blogger.com/blogger2/4171/1279/1600/kubrickheader.jpg"
banner[1]="http://chenkaie.googlepages.com/kubrickheader_1.png"
banner[2]="http://chenkaie.googlepages.com/kubrickheader_2.png"
banner[3]="http://chenkaie.googlepages.com/kubrickheader_3.png"
banner[4]="http://chenkaie.googlepages.com/kubrickheader_4.png"

var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>

※記得上頭的"4"要一致，因為他的random產生器，填4的話，就是產生0~4這5種值!假設你只有0,1,2三張圖的話，那麼Math.round()裡頭的4就要改成2...that's all!! 若你還要隨機變換字型產色之類的動作，就再加新的document.write(...)的語法進去就ok囉!!

重要參考文獻： Freeyasoul Adventure -> Random Rotating Banner Hack

．Tags: all blog blogger hack computer

．Comment counts: 34 Comments

[+/-]

[Blog] Peek-A-Boo view of posts in label/archive pages

很棒的 Blogger Hack，不僅具有和 [Blog] only show "Post Title" at Lable and Archive Page 這篇同樣的功能，更可以支援直接擴展(Expandable)，可以加速網頁的開啟的速度... Very Cool !!

例如：[Blog]所展現出來的行為。
實作方法如下：

Step1:將底下這行加到你的template的<head>裡頭(也就是在</head>之前就對了)。
[Updated 2007/07/14] 由於原作者hosting這個javascript file的空間，已經無法承受，請繼續看底下code框框中的更新作法

將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> 
拿掉，置換成底下這一段程式碼
<script type="text/javascript">
function toggleIt(id) {
	post = document.getElementById(id);
	if (post.style.display != 'none') {
		post.style.display = 'none';
	} else {
		post.style.display = '';
	}
}

function showFullPost(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "readmore")
                 spans[i].style.display = 'none';
        }
}

var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>

Step2:修改成如下，新增紅色字所顯示的部份 (記得把 Expand Widget Templates 選項打勾，才可以看到完整的code)

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
      <b:include data='post' name='post'/>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

※若要改變樣式，請自行更改上頭程式碼裡頭的"[+/-]"這個符號...

Step3: 沒有了，就這樣子而已...快去測試看看你的Label和Archive頁面吧...^^

．參考文獻：Hackosphere -> Peek-A-Boo view of posts in label/archive pages

．Tags: all blog blogger hack computer WTF

．Comment counts: 33 Comments

[+/-]

[Blog] Expandable posts with Peekaboo view (blogger beta)

這個功能，個人覺得比起之前的「"...Read More"篇」的更為實用，因為不需要重新載入新的頁面，直接就打開來...反應速度更快，閱讀完畢時，又可馬上縮起來，不占版面空間，相當的方便 ^_^

．實作方法如下：

Step1:將底下這行加到你的template的<head>裡頭(也就是在</head>之前就對了)。
[Updated 2007/07/14] 由於原作者hosting這個javascript file的空間，已經無法承受，請繼續看底下code框框中的更新作法

將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> 
拿掉，置換成底下這一段程式碼，若你沒有加過以上那一行的，就略過，直接加以下這段code...
<script type="text/javascript">
function toggleIt(id) {
	post = document.getElementById(id);
	if (post.style.display != 'none') {
		post.style.display = 'none';
	} else {
		post.style.display = '';
	}
}

function showFullPost(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "readmore")
                 spans[i].style.display = 'none';
        }
}

var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>

Step2:找到底下這段，加入紅色的部份

<b:includable id='post' var='post'>
<div class='post'  expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>

Step3:找到底下這段，同樣加入紅色的部份

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'>[+/-] Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'>[+/-] Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats --></div>

※若要更改"顯示文字"，請自行更改上頭程式碼裡頭的"[+/-] Read More..."和"[+/-] Summary only..." 這兩個文字標籤...
Step4:基本上這樣就完成了! 最後，先登入Blogger，再到「Settings->Formatting」，將<span id="fullpost"> 想要隱藏的部分 </span>填入Formatting的框框裡即可，如此一來，每次編輯新文章時，即會自動填入所需的程式碼囉 ^_^ oh ya!!
※注意是span，並非如同之前這篇「"...Read More"篇」所提到的，是用div...請小心!!

※參考文獻：
．Hackosphere -> Expandable posts with Peekaboo view
．How can I make show/hide links for my posts?

．Tags: all blog blogger hack computer css WTF

．Comment counts: 108 Comments

[+/-]

[Blog] adding "...Read More" tag in Blogger beta

．參考資料來源：有關 Blogger in Beta-水瓶子 Hackosphere轉錄文章來源： Blogger Beta 繼續閱讀功能改良
一般在blogger上使用繼續閱讀功能的方式都是在想要隱藏的文章上放上tag，然後再利用css的display:none來隱藏該篇文章，由於display:none所隱藏的部份，不論是在IE或是Firefox下瀏覽，一樣都會把隱藏部份下載到cache，所以如果首頁的文章過長或是圖片過多，一樣會影響到首頁的瀏覽速度。

所以這篇利用Javascipt，把想要隱藏的文章直接remove掉，提高首頁的讀取效率，並且還具有Read More標籤適時才出現的功能。
首先進入編輯html，請記得把Expand Widget Templates打勾，然後在<head>間放入Javascript code
<script type="text/Javascript"> function hidePost(postUrl) { var label=document.getElementById("fullpost"); if(label!=null){ eA = document.createElement("a"); eA.setAttribute("href",postUrl); eA.setAttribute("title","Read More"); eA.appendChild(document.createTextNode("...Read More")); eB = document.createElement("p"); eB.setAttribute("id","read-more"); eB.appendChild(eA); label.parentNode.appendChild(eB); label.parentNode.removeChild(label);} } </script>

接下來找到
<p><data:post.body/></p>
用下面的code取代它
<p><data:post.body/></p> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.url'> <script type='text/javascript'>hidePost('<data:post.url/>');</script> </b:if> </b:if>
最後，把想要隱藏文章部份的tag中，加入id="fullpost"就完成了，即
<div id="fullpost"> //隱藏部分的文章 </div>
※註：Chagg says:「目前測試，在IE下確實有提升讀取效率，不過在Firefox下好像沒什麼用，照樣還是把隱藏部份下載到cache 囧rz，目前還在想有什麼方法可以對付Firefox」

．手動加id="fullpost"的動作如何自動化呢：

很簡單，只要利用Blogger提供的功能，先登入之後，到「Settings->Formatting」，將<div id="fullpost"> //隱藏部分的文章 </div>填入Formatting那邊即可，如此一來，每次編輯新文章時，即會自動填入所需的程式碼囉 ^_^ oh ya!!

．Tags: all blog blogger hack computer css

．Comment counts: 48 Comments

[+/-]

[Blog] only show "Post Title" at Lable and Archive Page

．Tags: all blog blogger hack computer css

．Comment counts: 3 Comments

[+/-]

[Blog] Overflow problems in IE (sidebar appears at bottom of blog)

．Tags: all blog blogger hack computer css

．Comment counts: 5 Comments

[+/-]

[Blog] IE底下一片空白的UTF-8網頁...囧

．Tags: all blog computer

．Comment counts: 1 Comment

[+/-]

[Blog] Backlink tags usage

．Tags: all blog blogger hack computer

．Comment counts: 0 Comments

[+/-]

[CSS] Opacity in Mozilla and IE

最近在玩CSS語法中的opacity(不透明度)屬性，發現在Browser之間的相容性有很大的問題...囧rz，真是煩人的問題，W3C的標準似乎是以"opacity: 0~1"即可，但是在Internet Explorer 6/7 之中似乎要用 "filter: alpha(opacity=0~100)"才行，而Firefox雖有支援標準，但好像也有自家定義的"-moz-opacity: 0~1"...真是一大堆無意義的東東。

知道了以上三種CSS語法，但是真正在改我的Blog時，卻還是遇到「Firefox works, IE sucks」的問題...心頭浮現出無限多個...囧囧囧...真想揍人，偏偏IE的占有率還是比較高的，為了讓Blog展現出來的效果能夠一致，還是得想辦法弄好這個鳥問題：「在 :hover 的處理上， IE 要在滑鼠移到文字上面時，才會觸發 :hover 運作，而 mozilla firefox 只要移到設定 :hover 的 element 上面，還沒有碰到文字，就可以觸發 :hover 的 CSS 變化。」

於是就去問了一下孤狗大神，孤到了底下這篇好文，寫得很棒...解決了我的問題。

Mandarin Design: CSS Opacity and Transparency

解決方法大致上如下，作者有講到如此一來，IE、Fx、Opera都可以work囉 ^_^，主要就是利用onmouseover的屬性，解決IE中「:hover」的問題，只要在想要產生透明化效果的tag裡頭動些手腳即可 ^^，快往下看吧：

．text/css code：
.transOFF {width: 100%; opacity:1;filter: alpha( opacity=100 ); -moz-opacity: 1;}
.trans25 {width: 100%; opacity:.25;filter: alpha( opacity=25 ); -moz-opacity: 0.25;}
.transON {width: 100%; opacity:.50;filter: alpha( opacity=50 ); -moz-opacity: 0.5;}
.trans75 {width: 100%; opacity:.75;filter: alpha( opacity=75 ); -moz-opacity: 0.75;}

．html code：
<div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'">
<p style="padding:5px;width:75%;">Hover here. The Filter Opacity works in Mozilla and IE. It also works in current versions of Opera.</p></div>

※注意上頭的「width: 100%;」，發現若這行沒加的話 ->「IE sucks again」...囧rz，透明效果便又無作用。

還有「html>body」這個"child selector"，原本的用意是在IE 6中隱藏CSS定義，也就是Non-IE的Browser都可以認得，IE 6自動 skip，But...在 IE 7好像已經支援了，所以...令人感覺非常 suck... Orz

．Tags: all computer css

．Comment counts: 0 Comments

[+/-]

[Programming] 你是專業程式設計師嗎?

．Tags: all computer programming

．Comment counts: 0 Comments

[+/-]

[Programming] Voodoo Programming

．Tags: all computer programming

．Comment counts: 0 Comments

[+/-]

[Google] Google Reader

．Tags: all computer google

．Comment counts: 0 Comments

[+/-]

[Programming] 邪惡的 Hello World

．Tags: all computer programming

．Comment counts: 0 Comments

[+/-]

[HOWTO] 如何準備軟件工程師的面試

轉錄自「Google（谷歌）中国的博客网志」

發表者：王忻，Google 工程師

（作者簡介: 王忻，Google 工程師。北京出生，五歲時跟隨父母移居美國。中學期間跳了三級，十五歲進入了加州理工大學，加入 Google 前曾在微軟等公司工作。）

六月份的時候，我曾經在黑板報上介紹過「如何寫一份好的工程師簡歷」，今天想跟大家來談談如何準備軟件工程師的面試？假設，現在您的殺手簡歷 (killer resume)已經吸引了某大公司的注意並約你面試。那麼接下來該如何準備呢？

我在 Google（以前是微軟）工作期間面試了不下 300人，其中某些應聘者確實表現非凡，但有些卻顯得準備不足。當然許多面試準備不足的人最後依然獲得了錄用通知，因為他們本身確實才華出眾。但如果應聘者能提前準備妥當，那麼面試過程將更為保險和輕鬆。以下所列出的就是我根據多年經驗總結得出的建議：

1．使用相同的工具（如鉛筆和紙張）和時間限制（例如半個小時）模擬面試訓練

Google 和微軟都會讓應聘者在白板上手工解答編程問題，但通常大部分的應聘者都是習慣於在電腦上利用編程工具系統編寫程序。因此面試的時候，某些應聘者離開了熟悉的電腦光標，站在白板前感覺手足無措不知該如何起行。又或者他們不習慣在編程之時旁邊有人觀看，這會讓他們感到緊張而無法正常思考。

在現實生活中，如果你想要橫渡英吉利海峽，自然不能總是在室內游泳池練習。你必須投身於大海在波濤之中訓練，在準備面試的時候也是如此。:)

在面試開始之前你最好向招聘單位詢問面試形式和麵試問題。如果招聘單位讓你在某個房間考試且僅提供沒有彙編程序的編輯器，那麼就應該在家中按照這種情景進行練習。如果招聘公司單位讓你在白板上回答問題並會安排考官在旁監督，那麼你就要找一位軟件工程師來扮演考官配合你練習。即使找來的考官經驗不如你也沒有關係，他們依然能幫助你消除在他人面前出錯所帶來的緊張感，這樣可以讓你適應有人在旁邊盯著看的面試氛圍。

如果你恰巧認識我並希望由我來幫你聯繫，那我的條件就是必須請我吃飯：如果你已經工作了就吃日本壽司大餐；如果你還是學生，那麼吃比薩餅也可以。:)

2．在面試過程中不要對細小錯誤耿耿於懷

我曾不止一次的在面試過程中碰到這種情況：當應聘者知道編程問題後，他馬上就想到了最佳的方案、確定了邊界條件，然後開始編寫程序。但在編寫過程中，應聘者犯了諸如首先檢查是不是操作順序錯誤或忘記設定某變量等無關大局的小錯誤，當我指出其錯誤之後，應聘者立刻變得十分緊張，這種焦慮情緒影響了他在後面環節的正常發揮。

其實這種恐懼心理完全不必要。一名優秀的程序員在編程過程中出現錯誤也是很正常的，就像是小提琴手在演奏高難度的巴赫交響樂時也會偶爾失誤。音樂會的聽眾可能會覺察到這些錯誤，但是聽眾絕對不會因為這種細小失誤就把出色的小提琴手看作是門外漢。

即便應聘者徹底搞砸了某個編程問題，面試考官也可能會提出不同的問題並會容忍應聘者在某個問題上的失誤。再退一步說，就算某次面試徹底失敗，你也有機會在其它面試上補救。

我的一位同事（一個項目的技術負責人）最近面試了一個人，在開始面試時他覺得面試者的交流方式存在問題，因此開始表現的相當不友好。但經過了整個面試過程後，面試者證明了自身的能力，而我的那位同事也成了那位面試者最堅定的支持者。在過去的一年中，我從未見過這位同事如此強烈的支持哪位面試者。

所以，因此就算面試進展不順，也務必堅持到底不要放棄。

3．在面試過程中不要失禮

這似乎是不用說的問題，但在面試過程中我確實碰到過影響很不好的失禮行為。曾有一位前來應聘軟件工程師的人看到我就說：「哇，我真不敢相信你這麼年輕！你看上去好小！！我覺得你才 18 歲！」

面試者的這種言行實在要不得。

面試者也要注意不要說出諸如此類的話：「哇，你真的就是考官嗎？你看上去好老！」「哇，你真的是來面試我的，你看上去好胖！」（相信應該不會有人說這樣的話）。

在我的另外一次面試中，應聘者的手機在面試開始 15 分鐘之後就響了，她沒有理會，手機連續響了 20 秒，這樣不免會對面試造成影響。5 分鐘之後，她的手機又響了，她依然沒有理會；5分鐘之後，手機第三次響起。最後她終於抓過手提包在裡面翻出了手機。我想：「是時候關掉手機了，她在進來之前就應該把手機關掉。」但是她在手提包中拿出手機之後卻旁若無人的打起電話來，而且就在面試過程中間！

這種情況唯一可接受的理由就是他有什麼非常緊急的事，但是即便情況如此，那麼他也應該在面試開始之時就講清楚，讓面試官有所準備。

4．不要在面試中喧賓奪主

我曾經面試過幾個應聘者，他們好像鐵了心腸一定要告訴我他們最近的「超級項目」。當我開始發話他們就立刻打斷：「我想讓你瞭解我們近期處理的超級項目，10年之前當這個項目開始之時還默默無聞……」，然後接下來的5分鐘時間都在那裡滔滔不絕唾沫橫飛。

有時應聘者好像打定主意要給每個考官詳細描述其引以為豪的項目，然後一整天都在那裡翻來覆去的說這個項目。

記住：面試官在面試過程中有具體的問題需要詢問。但是如果應聘者喧賓奪主，那麼考官就可能無法獲得充分的信息來做出判斷，同時這種行為也會讓考官覺得應聘者很難共事。

如果你確實想談論自己的項目，那麼就應詢問面試官：「我覺得最近的某某項目能充分體現我的能力，我能不能用 10分鐘的時間來描述一下具體情況？」這樣就會給面試官空間來調整面試過程，由此也避免毫無徵兆就讓面試離題萬里。

5．在回答需要具體答案的問題之時，記得首先要有總括性的發言

有時我會問一個答案可以很簡練的問題，例如：「在你的那個成功項目中總共有多少人參與？」但應聘者往往會就此打開話匣：「嗯，張三參與了這個項目，他負責 UI部分，當然我也會給他一些指導。李四也在項目中，她在賓州遠程工作，負責後端服務器。兩年之後我們又有新人王五加入……」

在應聘者滔滔不絕的講了三分鐘之後，我還是不知道這個項目到底有多少人參與。

因此首先要簡練的回答問題，然後再展開描述：「在我接手項目時有三個人，但當我離開項目時人數已經增加到12人。」

當然如果能簡練的回答問題，然後徵詢意見之後再展開論述那就更好了：「在我接手項目時有三個人，但當我離開項目時人數已經增加到 12 人。我可以講一下各人在項目中的具體分工嗎？」

6．（不是特別重要）在面試中要衣著得體，舒適的商務便裝是最佳的選擇

人們有時候會為衣著犯愁。但是最重要的是要讓自己感覺舒適。如果需要具體的建議，那麼我建議穿襯衫甚至T恤衫。對於某些公司（例如 Google），西裝革履顯然是太隆重了。

這條建議不必太看中，因為面試官不會管應聘者穿什麼。最好應該詢問人事招聘部門穿什麼合適，因為不同國家有不同習俗，就算美國東海岸和西海岸的公司著裝文化也會有差別。像 Google 這樣的公司在著裝方面更加隨意，因此如果你穿著「三件套」的經典西服去 Google 面試，考官可能會有異樣的感覺。因此如果你真的具備軟件工程的本領，穿什麼其實並不重要。某個應聘者曾經穿著皺巴巴髒兮兮的T恤就跑來面試，他的T恤衫上還有著許多破洞。但最後他還是拿到了錄取通知（當然我絕不建議如此穿著）。

最後的一個小故事

最後我想講一場極為尷尬的面試。在看完之後，我希望你能這樣想：無論你的面試如何糟糕，你至少要比這位應聘者幸運。

以前我還在微軟的時候，我們通常會為應聘者準備一些飲料，某位暫稱其為 Jeff 的應聘者要了一聽百事可樂。我們走進面試房間後，他就在桌前坐下了。接下來我們簡要的談了談他的工作經歷，然後他開始在白板上解答編程問題，此時他還沒有打開他的可樂。

我們倆站在白板前，然後傑夫開始在上面寫程序。在寫程序之時他沉浸在對整體構架的思考中，下意識的退了一步來查看整個白板。在後退時他不小心碰到了桌子，放在桌上的百事可樂掉到了地上。

因為可樂還沒有打開，因此當可樂罐落地的時候，可樂罐炸開了。

可樂罐在地上打轉，泡沫噴的到處都是。你可以想像當時的場景，可樂噴到了牆上、書架還有我電腦的鍵盤上。我倆楞在那裡，手都半伸著（根本來不及抓到可樂罐），眼睜睜的看著可樂弄得到處都是。

我們花了 5 分鐘的時間用紙巾來清理現場（雖然我的書本自那天之後都粘頁了，而牆壁也不再是干淨的了）。

隨後我們重新開始白板測試。傑夫此時已非常緊張（換了誰都會緊張吧？）。他寫了幾行程序，然後擦掉，然後再寫。他是用自己的手擦拭白板而不是用板刷。他急得額頭冒汗，然後他又用剛剛擦過白板的手擦汗。在面試過程結束之時，他的臉上佈滿了紅色、綠色和藍色的顏料。

我說：「你的手上粘了很多顏料，我帶你去衛生間洗洗吧，」然後我把他領到洗手間讓他從鏡中看到了自己的尊容。

．Tags: all computer google others

．Comment counts: 0 Comments

[+/-]

[CSS] Good Articles & Sites about CSS

．Tags: all computer css

．Comment counts: 0 Comments

[+/-]

[CSS] How to remove Ads in Wretch

[Howto] 如何以CSS語法去掉無名中討人厭的廣告呢?

．For Album

#ad_banner a{
clip:rect(500px 0px 0px 500px);
position:absolute}

#ad_banner a{
clip:rect(0px 0px 0px 0px);
position:absolute;
left:100px;
top:150px;
}

#logo,
#ad_button{
display:none}

center a img{
display:none !important}

table tr #logo{
display:none !important;
height:0 !important;
width:0 !important}

table tr ad_banner a img,
table tr td object,
table tr td embed,
td center font a,
td .small-c tr td,
table tr td div,
td#ad_banner a img,
object{
display:none !important;
height:0 !important;
width:0 !important}

table tr td{
height:0 !important;
width:0 !important}

/* Updated2006-11-16 Wretch換廣告語法，That's ok…兵來將擋、水來土淹...*/
#ad_flash{
display:none !important;
}

．For Guestbook

#logo, #logo img{ left: -1000px; position:absolute}
.pass img{ display: block !important}
div table .small-c tr td{ display: none}
div table tr td, table tr td{ height: auto !important; width: auto !important}
img, #floatlayer, #ad_top, object, embed{ display: none !important}

不知這些語法可以用多久，反正Free的就暫時用一下吧!!但是好像只有IE才有用，在Firefox有時會失效，真是奇怪...囧rz，沒有仔細研究過這兩段語法，太閒時再來Research一下啦 ^_^

[Update 2006-10-31] 原先在奇摩知識上找到的上面那段「For Album」的，用在我的相本好像有點Bug，在IE上會有位移(shift)的情形產生，造成整個版面歪了一邊囧rz ....後來，研究了一下，把原本紅色的那段修改成綠色的那段之後就OK囉 ^^

但了之後，也不算是Perfect啦...像是相簿裡頭的Banner會消失不見，而帶來的影響便是Description無法顯示出來了，還有原本「進階功能」中的「空間王」和「搬圖王」也連帶著消失了，但這都不打緊，重要的是討人厭的廣告不見啦....Song la!!

※手動進階功能啟用方法：

在某一本相本的URL之後，自行append "&space=1"即可啟動空間王，同樣地，append "&move=1"即可啟動搬圖王 ^_^
例如：http://www.wretch.cc/album/album.php?id=SambaGhost&book=3 後面接上" &move=1"=> http://www.wretch.cc/album/album.php?id=SambaGhost&book=3&move=1 就可以可啟動搬圖王啦

．Tags: all computer css wretch

．Comment counts: 0 Comments

[+/-]

[Computer] phpBB 由 BIG5 轉換到 UTF-8

為了因應台灣未來的學術趨勢->國際化...決定把我們的「討論區」把它給整個UTF-8化...^_^，哈哈…實際上是由於今年Prof. Chiu收了一名來自Indonesia的學生，所以為了他的方便，只好這麼作囉，費話不多說…直接看底下步驟：

先把我們的Forum UTF-8化，這很簡單，由於我們是使用phpBB的系統，因此…直接去官網Download最新的UTF-8版本的來Install即可 ^_^
Database的部份，這是比較麻煩的一部份，很多教學都說用ConvertZ來處理，但我弄了好久還是無法完全搞定，轉碼這部份真是 Orz...搞了許久，終於找到了底下這一篇教學，相當的棒

．Tommy碎碎念：PhpBB 由 BIG5 轉換到 UTF-8

Study-Area的討論區轉換到 UTF-8就是靠這位高手相助的^^

所以參考完那篇教學之後，所要作的事就只剩下：
1. 先把原先的Database匯出，透過phpBB Administration Panel裡的Backup即可，目的就是先Backup一份，免得到時出問題，就搓賽了!!
2. 接著，執行教學文件中「我們先使用下面的 script, 執行這個 script 後, 應該會產生一個 utf8.sql 的檔案」的一個php檔，記得修改為你適用的相關參數，執行成功後會產生一個utf8.sql的檔。
3. 再將這個檔案(utf8.sql)的內容塞入新的資料庫中，由於我們的Ver 4.0並不支援UTF-8，所以utf8.sql這個檔裡頭的第一行「SET NAMES 'utf8'」要拿掉，才能成功進行匯入...
4. 如此一來便完成轉換了，相當的Easy吧!!這都是由於這些前輩不吝惜的分享...相當感激
記得Apache要把加上「AddDefaultCharset UTF-8」這一行，才能預設跑UTF-8，如此一來便大功告成 ^_^

[Updated 2006-09-27]
．Problem：裝完新版的phpBB2 UTF-8 版本之後，在執行Search動作時，發現了一個Bug...就是預設為English語系時，執行「中文關鍵字的Search」會找不到資料，換成中文語系時才行。

．Solution：

去竹貓星球找了一下相關討論串，果然發現了解決之道^_^
．重點就是：將 "./language/lang_english/lang_admin.php"這個檔裡面的$lang['ENCODING'] = 'iso-8859-1'; 換成 $lang['ENCODING'] = 'utf-8'; 就OK啦。

※後來突然想到，既然要UTF-8化的話，那就徹底惡搞一下吧，順便把Lab的網頁也給UTF-8化囉。這就更簡單啦...因為ols3長輩有寫了一個Script，可以不費吹噓之力地便把整個目錄中的檔案轉成UTF-8編碼唷 ^_^，網址在底下：