jQuery Tools：純粹的網頁內容展示型 UI

jQuery Tools 是一套非常優秀的 Web UI 庫，包括 Tab 容器，可摺疊容器，工具提示，浮動層以及可滾動容器等等，可以為你的站點帶來非同尋常的桌面般體驗，這套工具的主要作用是顯示內容，這是絕多多數站點最需要的東西。這套令人驚異的 UI 庫只有 5.59K 大小，基於 MIT 和 GPL 兩種許可模式。

和 別的 Web UI 庫不同，別的 UI 庫很多是面向行為的，如拖放，滾動，表格排序，可拖放窗口等等，它們更適合於 富 Web 應用，如 Email 客戶端，任務管理，圖片組織整理等。而 jQuery Tools 主要面向內容展示，因此更適用於單純的內容型網站。

jQuery Tools 使用也很簡便，只需幾行調用代碼即可，其官方站點包含大量演示和調用代碼可以參考。以下是該 UI 庫中包含的主要 UI 工具介紹。

jQuery Tools / Overlay
Overlay （浮動層）可以用來浮動在任何 HTML 對象的上方，在現代 Web 設計中，浮動層是一種非常有效的 UI 概念，可以用來

著重顯示你的產品。
顯示警示信息。
提示用戶輸入。
以燈箱風格瀏覽圖片庫。
jQuery Tools / Overlay 可以很輕鬆地處理上述各種情形和各種效果。

jQuery Tools / Tooltip
工具提示是 Web 上最實用的工具，Web 默認的提示工具太簡陋，jQuery Tools / Tooltip 會以一種非常漂亮的視覺效果顯示提示內容。

jQuery Tools / Tabs
Web 上最受歡迎的 UI 部件當屬 Tab 容器，如果沒有 Tab，我們的很多網頁不知要多麼混亂，所有用戶都熟悉 Tab 這種用戶友好的部件，jQuery Tools / Tab 非常好用，甚至可以使用瀏覽器的前進後退導航按鈕在 Tab 間前進或後退。

jQuery Tools / Scrollable
jQuery Tools / Scrollable 可以在網頁中實行定製的，局部的滾動，在現代 Web 設計中，這幾乎是最受歡迎的一種技術，可以用在下面這些場合：

產品目錄
滾動新聞
在表單中實現定製選擇框
瀏覽圖片庫
視頻播放列表
各種站點導航

jQuery Tools / Flashembed
如今 JavaScript 真是越來越快了，所有瀏覽器都在 JavaScript 引擎上較量，我們會看到越來越多的基於 JavaScript 的 Web 部件面世，然而至少在當下， Flash 仍有其用武之地，比如播放視頻。

jQuery Tools / Flashembed 可以用來在網頁中加載 Flash 對象，雖然類似的工具比比皆是，但 Flashembed 絕對是其中最好用的一個。

demo演示地址：http://flowplayer.org/tools/demos/

本文來源：
中文翻譯來源：COMSHARP CMS 官方網站

CSS 3.0 參考手冊 (中文版)

公司的頁面同學們，利用業餘時間整理出了一份比較完整的CSS 3.0 參考手冊，非常不容易。手冊是根據W3C的CSS3草案翻譯，並且結合實際的示範結合而成。每一頁都傾注了每一個同學的心血。

下載網址 http://webteam.tencent.com/css3/

介紹 jQuery Tools 與 jQuery UI 這兩套好用的 jQuery 套件

我想家喻戶曉的 jQuery UI 套件應該不用特別介紹了，但我最近又看到一套不錯的 jQuery Tools 套件，相較於知名且多功能的 jQuery UI 套件，jQuery Tools 提供一種額外的選擇，他只提供幾種網站上最常用的功能，包括 Tabs、Tooltips、Expose、Overlay、Scrollable、Flashembed 等，其中的 Flashembed 就可以取代我們之前常用的 swfobject 套件，他還支援 SIFR 功能喔。光聽我說還不夠，最好立即看看線上展示，你就知道有哪些酷炫實用的效果了。

整個套件在透過 gzip 壓縮過僅 5.8KB 除了下載快，JavaScript 的執行速度也號稱相當快，而且還提供 CDN (Content Delivery Network) 下載連結如下：

當然在載入 jQuery Tools 還是必須先載入 jQuery 的，目前的 1.0.2 版相容於 jQuery 1.3.2 版。若要透過 Google 的 CDN 網路下載 jQuery 可以參考我這篇文章的說明，或直接用以下語法載入 jQuery：

相關連結
jQuery Tools
jQuery Tools - Demo
jQuery Tools Release Note
jQuery Tools vs jQuery UI
SIFR
轉載自 http://blog.miniasp.com/post/2009/06/Introduce-jQuery-UI-and-jQuery-Tools.aspx

自動同步多台電腦檔案、單檔4G、無限容量：Windows Live Sync – MSN推出的同步服務

Windows Live Sync是微軟Live(也就是MSN)推出來的同步服務。讓您可以有多台不同的電腦，然而讓指定的資料匣的檔案都保持一致。類似dropbox，不過也算是進階版本，需要比較多的設定。有下列特色：

單檔限制最大4g
總容量無限(其實沒寫)
可自訂20個資料匣做同步(當然資料匣裡面要放多少東西都可以)
最多同步20000個檔案
線上存取
使用MSN的帳號
使用放式大致如下：

下載sync軟體，並安裝
以msn帳號登入
前往http://sync.live.com/
設定您想要同步的資料匣(例如：我的文件、我的圖片)

基本資訊
作者/官網: Windows Live (MSN)
語系:多國語言(含中文版)版
授權:免費軟體
線上版本
服務連結:Windows Live Sync
下載
同步軟體:Live Sync
文件
操作教學:Windows Live Sync教學
介紹、操作教學:微軟的免費Live Sync服務，讓你輕鬆同步多台電腦的檔案！
相關軟體:自動同步多台電腦檔案、2G免費網路硬碟：dropbox

轉載自 http://software.sopili.net/post/windows-live-sync/

軟體工程師強者必備的10個特質

熱愛寫程式 Loves To Code
能把事情搞定 Gets Things Done
持續重構 Continuously Refactors Code
使用設計模式 Uses Design Patterns
寫測試程式 Writes Tests
利用既有程式碼 Leverages Existing Code
關心可用性 Focuses on Usability
寫出來的程式容易維護 Writes Maintainable Code
能用任何語言寫程式 Can Code in Any Language
了解電腦科學的基礎知識 Knows Basic Computer Science

英文來源：Top 10 Traits of a Rockstar Software Engineer

SyntaxHighlighter--可於google Blogger中顯示程式碼的JavaScript工具

複製下述程式碼，並修改 Blogger 的 //版面配置//修改HTML//(要放在head之間), 如下圖:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

使用方式如下

<pre class="brush: html">
   程式碼放在此...
</pre>

syntaxhighlighter 官網
syntaxhighlighter下載
syntaxhighlighter支援程式語言列表

今天在修改帶有JavaScript程式碼的文章時，發現SyntaxHighlighter Evolved外掛無法正確的轉換 & 與 > 等字元，原本應該是 && 的符號卻變成 &&，>則變成>，使用另一個使用GeSHi的外掛WP-Syntax則正常，開始懷疑會否是SyntaxHighlighter Evolved的問題（最後確認外掛是正確的，詳後說明），剛巧它使用的底層SyntaxHighlighter有推出3.0.83新版，就更新版本看看。只要把新版的scripts與styles資料夾複製到對應的WordPress外掛同名資料夾就可以了。

更新後發現工具列變成一個問號：


由3.0.83的What’s new in 3.0?裡看到了幾個使用介面的變動：

複製到剪貼簿的功能變更：以前是透過Flash物件，3.0已取消這種作法，只要在程式碼區域雙擊，就能標示所有的程式碼，再按Ctrl+V就能把標示內容存入剪貼簿
程式碼可以多列標示：以前做多列標示時，行號也會被標示到，3.0已經可以任意做區域標示了
程式碼開頭可以加上一列標題列，當程式碼預設是捲起狀態時，會顯示此標題，點擊即會展開

另外找了幾各版本，大家若有需要可以試用看看

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' id='shTheme' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shLegacy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushGroovy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushScala.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'></script>
<script type='text/javascript'>
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.ClipboardSwf = 'http://http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
        SyntaxHighlighter.all();
</script>

垃圾車定律

有一天，我跳上一輛計程車，打算到機場。正當我們開上正確的車道時，突然間一輛黑色轎車從停車位開出，正好擋在我們前面。我的計程車司機立即踩剎車，車子滑行了一小段路，剛好閃開來車，兩車之間的距離就只差個幾英吋！另一輛車的駕駛兇狠地甩頭，並且朝著我們大喊大叫。

我的計程車司機只是微笑，對那傢伙揮揮手。我的意思是說，他表現得很友善。於是我問：「你剛才為什麼那麼做？那傢伙差點毀了你的車，還可能害我們受傷送醫院！」這是當時我的計程車司機告訴我的話，現在我就稱呼它為「垃圾車定律」。

他解釋說：許多人就像垃圾車。他們到處跑來跑去，身上充滿了垃圾、充滿了沮喪、充滿了憤怒、和充滿了失望。

隨著垃圾堆積，他們終需找個地方傾倒；有時候，我們剛好碰上了，垃圾就往我們身上丟，所以，不要介意，只要微笑、揮揮手、祝福他們，然後繼續走我們自己的路就行；千萬別將他們的垃圾擴散給同事、家人、或其他路人。

這兒的底線是：成功的人絕對不讓垃圾車接管自己生活當中的任何一天；人生苦短，早上醒來絕對不要帶著遺憾。所以....仁愛對待與你以禮相待的人；不用去理會那群無理取閙者。

生命只有10%由自己決定，但90%看你如何利用它！

我覺得我就像那計程車司機，我會表現得很友善，但我不會跟她微笑或揮揮手

[CSS]相容IE與FireFox的對齊置中CSS寫法

IE與FireFox(FF)在CSS的屬性值上有著許多差異, 例如:center與-moz-center

以下是整理網路上的討論並測試出的兩個做法:

<html>
<head>
    <style>
        .container
        {
            text-align: center;
            border: solid 1px blue;
        }
        .container
        {
            text-align: -moz-center;
            border: solid 1px blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <table>
            <tr>
                <td>
                    Text
                </td>
            </tr>
        </table>
        <div>
</body>
</html>

寫一個項目，但IE的屬性要加上#符號(有人測試加^ ~ @ # $ % ^ & * ( ) _ +都可以)，且IE的屬性要放在FF的屬性之後：<html>

<head>
    <style>
        .container
        {
            text-align: -moz-center; 
            #text-align:center;
            border:solid1pxblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <table>
            <tr>
                <td>
                    Text
                </td>
            </tr>
        </table>
        <div>
</body>
</html>