Video.js：開放原始碼 HTML5 影片撥放函示庫

Video.js 是一個開放原始碼的 HTML5 影片撥放函示庫，提供一個統一且跨瀏覽器的 API，並且可以在瀏覽器不支援 HTML5 時自動使用其他的替代方案。

在最新的 HTML5 標準中，已經可以直接撥放影片檔了，如果您想要有更完整的功能，可以使用 Video.js 這個函示庫，他是以既有的 HTML5 為基礎所發展的影片撥放工具，並且添加了更多的功能，提供不同瀏覽器統一的 JavaScript API，在瀏覽器不支援時也可以使用 Flash 等替代方案。

Color Thief：取得圖片中的主要顏色與色盤（Palette）

Color Thief 是一個有趣的網頁小工具，透過 JavaScript 將圖片的主要顏色整理出來，顯示其色盤（palette）。

Color Thief 是一個開放原始碼的網頁小工具，它可以透過簡單的 JavaScript 就取得圖片中的主要顏色與色盤，您可以直接透過其官方網站的範例，來了解它的功能。

Timesheet.js：在網頁上繪製甘特圖（Gantt Plot）的 JavaScript 工具

這裡介紹一個可以在網頁上繪製甘特圖（Gantt Plot）的 JavaScript 工具，畫面簡潔，使用上也很簡單。

甘特圖是一種用來顯示專案進度或是其他時間相關資訊的條狀圖，一般的專案管理軟體（例如 Microsoft Project 或 Mr. Project）也都可以繪製這樣的圖形。

Timesheet.js 是一個開放原始碼的 JavaScript 小工具，它可以讓您直接在網頁中製作甘特圖，而且不需要 jQuery 或是其他的工具，畫面看起來簡潔又清爽，重點是使用起來很簡單，以下介紹如何使用它來繪製自己需要的甘特圖。

YUI Compressor： JavaScript 與 CSS 壓縮工具，產生最小化的網頁

YUI Compressor 是由 Yahoo 所發展的一套 JavaScript 與 CSS 壓縮工具，可以協助網頁開發者產生最小化的網頁。

網頁大小跟載入的速度有很大的關係，如果要降低網頁的大小，除了可以使用 Google Closure Compiler 編譯器將 JavaScript 最小化之外，也可以使用 Yahoo 所發展的 YUI Compressor，它除了可以處理 JavaScript 之外，也可以一併將 CSS 檔最小化。

Google Closure Compiler 編譯器：產生最佳化（最小化）JavaScript 程式碼

Closure Compiler 是由 Google 所發展的一套 JavaScript 編譯器，可以編譯 JavaScript，產生最佳化（最小化）JavaScript 程式碼。

Closure Tools 是由 Google 所發展的一套網頁應用程式工具組，可以幫助網頁開發者快速發展大型的網頁應用程式。Closure Compiler 是 Closure Tools 的其中一項工具，它可以編譯 JavaScript 的程式碼，經過最佳化處理後，產生高效能且最小化的 JavaScript，讓網頁的載入速度與執行效能都可以提高。

加速 JavaScript 執行效率的 DOM 操作技巧（降低瀏覽器回流）

在開發 RIA 的過程中，會常常使用到 JavaScript 來變更網頁元素，甚至增加新的網頁元素，而不同的操作方式也會對執行效能有所影響。

瀏覽器在顯示網頁時，會需要計算每一個網頁元素應該放置在哪個位置，這個計算過程就稱為瀏覽器回流（browser reflow）。當我們對 DOM 進行操作（例如更改元素的 CSS 樣式、大小等）或是改變視窗大小時，也會造成瀏覽器的回流，由於瀏覽器的流回需要耗費時間，所以如果可以盡量減少回流，就可以增加整個網頁應用程式的效率。

修正中國大陸看不到 Blogger 部落格圖片的問題（Picasa 空間）

這裡介紹如何使用簡單的 jQuery 程式，自動修正中國大陸地區無法看到 Picasa 圖片的問題。

Image Credit: Chris UK

中國大陸因為防火長城（Great Firewall）的限制，導致許多網站在大陸都無法被瀏覽，其中也包含很多知名的部落格與社群網站（如 Blogger、facebook、twitter 等），對於中文網站而言，無法讓大陸的網友閱覽其實是很可惜的。

JSHint：自動檢查 JavaScript 程式碼，偵測錯誤的線上工具

JSHint 是一個可以自動檢查 JavaScript 程式碼的工具，讓程式設計者在專案開發初期就可以即時修正潛在的錯誤。

由於 JavaScript 這個程式語言的語法與結構非常彈性，不像 Java 或 C 語言那樣嚴謹，對於程式設計者而言，一開始會感覺很方便，不管怎麼寫都可以執行，但是當整個程式發展到一定規模的大小之後，JavaScript 這樣鬆散的結構會讓程式很容易出現一些 bugs，而且除錯與修正的工作也會變得非常困難。

定義 JavaScript 函數（Functions）的各種方式

這裡介紹各種 JavaScript 函數的定義方式，有些方式很常見，但是有一些你可能沒看過。

以下是在 JavaScript 中四種建立函數的方式：

// 四種建立函數的方法
function declaration () {};
var funcExpression = function () {};
var namedFuncExpression = function named() {};
var fnConstructor = new Function ();

這些都是可以用來建立函數（Function）物件的方法，但是其中有些差異，以下我們將討論這些作法之間有什麼差別。

網頁應用程式架構（Web Application Architectures）的發展趨勢

這裡簡單介紹過去網頁應用程式所使用的技術與架構，以及未來發展的趨勢。

網頁技術一直以來都不斷地在演進，從一開始的靜態 HTML 演變為動態的各種技術（如 PHP、ASP、Java 與 Ruby on Rails 等），不管是在網頁本身或是開發工具上都有很多革命性的突破與進步，而在最近一兩年中，在網頁技術上又出現了新的一波新的風潮，改變了整個網頁應用程式的設計型態。

這一項新的技術主流不像以前的 RIA 或 AJAX 有特定明確的名稱，目前只能稱作為 MV* client-side 架構，這樣的架構主要的特色在於伺服器不再像以往那樣在伺服器端產生完整的 HTML 網頁，而是將原始的資料直接傳送至 client 端，由瀏覽器負責處理所有網頁的產生、使用者的互動等各項工作。

使用 Node.js 與 Socket.IO 建立即時性（Realtime）網頁應用程式 App

這裡介紹如何使用 Node.js 與 Socket.IO 建立一個即時性（realtime）的網頁應用程式 App，讓瀏覽器與伺服器之間具備雙向溝通的能力。

Socket.IO 是一個用於建立即時性通訊網頁應用程式（realtime web applications）的跨平台 JavaScript 函式庫，可以消除不同平台上傳輸方式的差異性，讓開發者更容易發展即時性的網頁應用程式。

EJS：Client 端嵌入式（Embedded）JavaScript

EJS 是一個 client 端的 JavaScript template library，可以讓整個網頁程式碼結構更清楚、更整潔。

一般的網頁程式設計師在開發網頁時，多多少少都會遇到這樣的 JavaScript 程式：

var html = "<h1>"+data.title+"</h1>"
html += "<ul>"
for(var i=0; i<data.supplies.length; i++) {
    html += "<li><a href='supplies/"+data.supplies[i]+"'>"
    html += data.supplies[i]+"</a></li>"
}
html += "</ul>"

這裡為了動態產生網頁內容，所以使用 JavaScript 來產生 HTML 程式碼，在傳統上如果是要在 client 產生這樣的動態內容都是這樣做的，但這樣的缺點就是程式碼架構比較雜亂，而且這樣的程式在修改上也比較不容易。

各種產生圓形圖表的 JavaScript 工具

這裡介紹一些可以在網頁上產生圓形圖表的 JavaScript 工具，透過這樣的設計可以讓網頁在呈現數值資料時更生動活潑。

circliful

circliful 是一個以 HTML5 canvas 與 jQuery 為基礎的 JavaScript 工具，可以在不需要使用圖檔的情況下，產生圓形圖表。

JavaScript 記憶體洩漏（Memory Leak）問題

這裡我們將解釋為什麼 JavaScript 會產生記憶體洩漏的問題，並示範會產生這個問題的程式寫法，讓大家知道該如何處理這類的問題。

JavaScript 是一種功能強大的語言，在現今許多的網頁中都扮演著重要的角色，雖然其語法簡單、撰寫容易，但是在某些瀏覽器上會產生記憶體洩漏（memory leak）的問題，卻很讓人頭痛。

本文是假設讀者已經對於 JavaScript 與 DOM 都非常熟悉，如果你是使用 JavaScript 撰寫網頁應用程式的開發者，這篇文章應該會很有用。

Google AdSense 廣告 A/B 測試程式碼產生工具 1.0.1 beta 版

這裡針對 Google AdSense 廣告，提供一個可以產生 A/B 測試程式碼的線上工具，讓你在加入 AdSense 廣告時可以更省事，不用老是在改 JavaScript 程式碼。

A/B 測試（A/B Testing）是一般網站最佳化常用的方式，而 Google AdSense 本身也可以讓你修改它的 JavaScript 以進行 A/B 測試，雖然 AdSense 提供這樣的功能很有用，但如果你有好多廣告要測試，老是要修改程式碼也是挺麻煩的。

浮動的網頁表單欄位名稱（Floating Form Label）製作教學

這裡介紹製作浮動的網頁表單欄位名稱（Floating Form Label）的幾種方式，讓網頁上的表單看起來更美觀。

傳統網頁上的表單都是以靜態的方式呈現，而現在隨著網頁技術的發展與新的設計概念不斷演進，現在你可以使用一些工具讓網頁的表單看起來更漂亮，更具有設計感。

Grunt：自動化網頁應用程式開發流程的 Node.js 工具

Grunt 是一個以 Node.js 為基礎所開發的命令列工具，在經過適當的設定之後，它可以幫助程式開發者將一些重複性的工作自動化，減輕開發者與開發團隊的負擔。

Grunt 可以處理的事情很多，例如精簡 CSS 程式或網頁的大小、編譯 CoffeeScript、unit test、linting 等，舉凡一般性的重複動作多半都可以使用這個工具來處理。

Grunt 背後有一個很大的生態系統（ecosystem），包含了大量的 plugins，使用者可以藉由這些 plugins 將自己的工作自動化，而使用者也可以很容易的把自己開發的 plugin 上傳到 npm 上面分享給其他人使用，也因為這樣的分享機制，這個生態系統目前也持續在成長。

Vim.js：一個使用 JavaScript 實作的 Vim 編輯器（尚在發展階段）

Vim.js 是一個使用 JavaScript 實作的 Vim 編輯器，不過實用性不高，只適合學習與研究使用。

Vim.js 是把傳統 Linux 上的 Vim 編輯器以 JavaScript 實作在一般的瀏覽器中，不過目前還在發展當中，還不是很穩定，而且這種編輯器大概只適合比較資深的 UNIX/Linux 使用者作為「娛樂」使用。

讓你的 Blogger 部落格到了聖誕節也跟著下雪！

這裡教大家如何讓你的 Blogger 部落格到了聖誕節也跟著下雪，這樣更有過節氣氛！

首先不要太訝異這篇文章的配色跟其他的文章不同，這是為了要有聖誕節的氣氛，所以特別設計的。以下教大家如何讓自己的 Blogger 部落格也可以在聖誕節下雪。

RulersGuides.js：讓網頁顯示尺規，輔助版面設計的 JavaScript 工具

RulersGuides.js 是一個可以讓網頁顯示尺規，輔助版面設計的 JavaScript 工具，適用於各種常用的瀏覽器。

在設計網頁版面時，常常會需要量測網頁中各個組件的位置與大小，這裡我們介紹一個好用的網頁量測工具 RulersGuides.js，它可以在網頁中加入類似 Photoshop 的尺規，還可以拉出參考線，這個功能對於網頁設計者而言非常實用。