主要是修改自 blakmatrix 的 CoffeeScript_notepad_UDL 以及 thomsmits 的 markdown_npp，這兩個都是以預設的白色背景為主。

最近這幾個月看習慣黑底白字之後，以 Notepad++ 內建的 Zenburn 樣式做為參考，修改過背景和文字顏色。

CoffeeScript Dark Style Syntax for Notepad++

Markdown Dark Style Syntax for Notepad++

放入 Notepad++ 底下的 userDefineLang.xml 就可以了。

2012/4/28 更新：修改顏色設定，看起來比較順眼一點了。

所以稍微整理了一下目前已知的參數和功能。

一張 Picasa 的相片外連網址如下：

https://lh5.googleusercontent.com/-ttvP4PQqAeg/T2lr_RM-0YI/AAAAAAAADiU/tcP0ahLmJz4/w419-h236-k/20%2B-%2B1.jpg

其中最後檔名前面的「w419-h236-k」就是可自訂的參數：

縮放圖片

w, h

指定圖片的寬度（w）和高度（h），後面接任意整數值。Picasa 會自動等比例縮放。
若設為 0 則會拿到原始上傳時的圖片大小。

【例】取得寬度為 360px 的圖片。

https://lh5.googleusercontent.com/-ttvP4PQqAeg/T2lr_RM-0YI/AAAAAAAADiU/tcP0ahLmJz4/w360/20%2B-%2B1.jpg

【例】取得高度為 80px 的圖片。

https://lh5.googleusercontent.com/-ttvP4PQqAeg/T2lr_RM-0YI/AAAAAAAADiU/tcP0ahLmJz4/h80/20%2B-%2B1.jpg

sXXX-c、sXXX-p

指定圖片的寬度，後面接任意整數值。Picasa 會自動等比例縮放。
若設為 0 則會拿到原始上傳時的圖片大小。
後面可接「-c」或「-p」，會得到正方形裁切後的照片。
（「-c」和「-p」似乎在裁切的基準點上有點不一樣。）

【例】取得 180 x 180 正方形圖片。

https://lh5.googleusercontent.com/-ttvP4PQqAeg/T2lr_RM-0YI/AAAAAAAADiU/tcP0ahLmJz4/s180-c/20%2B-%2B1.jpg

加點效果

-r90、-r180、-r270

翻轉圖片。後面接翻轉的度數（90、180、270）。

【例】取得寬高都是 180px、翻轉 180 度的圖片。

https://lh5.googleusercontent.com/-ttvP4PQqAeg/T2lr_RM-0YI/AAAAAAAADiU/tcP0ahLmJz4/s180-c-r180/20%2B-%2B1.jpg

-o

加個播放按鈕在圖片上，應該是給影片縮圖用的。

【例】取得寬度是 360px、有個播放按鈕的圖片。

https://lh5.googleusercontent.com/-ttvP4PQqAeg/T2lr_RM-0YI/AAAAAAAADiU/tcP0ahLmJz4/w360-o/20%2B-%2B1.jpg

輸出圖片

-d

直接下載圖片，而不是用瀏覽器顯示。

【例】下載原始大小的圖片。
https://lh5.googleusercontent.com/-ttvP4PQqAeg/T2lr_RM-0YI/AAAAAAAADiU/tcP0ahLmJz4/s0-d/20%2B-%2B1.jpg
（點連結會直接跳出下載視窗。）

-h

輸出成 HTML 格式。

https://lh5.googleusercontent.com/-ttvP4PQqAeg/T2lr_RM-0YI/AAAAAAAADiU/tcP0ahLmJz4/s0-h/20%2B-%2B1.jpg

還有像是「-k」、「-b」這種看不出個所以然，所以似乎有很多未知的參數…

在佈景主題的 functions.php 內：

function my_pagination() {
    global $wp_query, $wp_rewrite;

    $pagination = array(
        'base' => @add_query_arg( 'paged', '%#%' ),
        'format' => '',
        'total' => $wp_query->max_num_pages,
        'current' => $wp_query->query_vars['paged'] > 1 ? $wp_query->query_vars['paged'] : 1,
        'show_all' => false,
        'type' => 'plain',
        'prev_text' => '«',
        'next_text' => '»',
        'end_size' => 2
    );

    if ( $wp_rewrite->using_permalinks() ) {
        $pagination['base'] = untrailingslashit( trailingslashit ( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%', 'paged' );
    }

    if ( ! empty( $wp_query->query_vars['s'] ) ) {
        $pagination['add_args'] = array( 's' => get_query_var( 's' ) );
    }

    echo paginate_links( $pagination );
}

接著在要插入分頁導覽的地方呼叫 my_pagination(); 就會輸出分頁導覽的 HTML 了。

以上的函式會輸出成類似以下的 HTML：

<span class='page-numbers current'>1</span>
<a class='page-numbers' href='/page/2'>2</a>
<a class="next page-numbers" href="/page/2">&raquo;</a>

帶有 Class 名稱可以用來自訂樣式。

其中 $pagination 內可自訂的地方：

show_all

Boolean值，是否要顯示出所有的分頁。如果設為 false，中間的分頁會被省略為「…」符號。
true → [1][2][3] … [5][>]
false → [1][2][3][4][5][>]

type

輸出的 HTML 類型。有 plain（單純的超連結）、array（PHP陣列）和 list（<ul> 列表）三種模式。

prev_text 和 next_text

「上一頁」，「下一頁」的文字。

end_size

要顯示最前面和最後面幾頁的連結（當 show_all 是 false 的時候）
end_size = 2 → [1][2] … [14][15]
end_size = 3 → [1][2][3] … [13][14][15]

mid_size

要顯示目前分頁前後幾頁的連結（當 show_all 是 false 的時候）
mid_size = 1 → [1][2] … [12][13][14] … [19][20]
mid_size = 2 → [1][2] … [11][12][13][14][15] … [19][20]

實際範例可參考本部落格首頁。

參考資料：WordPress Function Reference/paginate links

Firefox 10 正在進行開發，預計在 1 月 31 日釋出。儘管在開發時已盡最大可能維持相容性，但為了與其他瀏覽器的互用、以及符合最新 Web 標準，在 10 版中做了許多有關向下相容的修正。以下整理出這些修正點，在網頁測試時可做參考。

本文僅介紹向下相容所影響的修正。其他新功能和變更請參考以下網頁：

• 針對使用者的新功能：Firefox 10 の主な新機能を紹介します（日文）
• 針對開發者的新功能和變更點：Firefox 10 for developers （英文）

UserAgent 字串的版本號改為兩位數

Firefox 10 是第一個版本號為兩位數的正式版本。若用 UserAgent 字串來判斷瀏覽器而該程式碼的版本判斷不正確，有可能導致瀏覽器判斷錯誤。因此請確認使用 UserAgent 字串判斷瀏覽器的程式碼，或是先在 Firefox 10 Beta 版中測試。

Firefox 的 UserAgent 字串在正式版或測試版中如下所示：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:10.0) Gecko/20100101 Firefox/10.0
Mozilla/5.0 (Windows NT 6.2; rv:10.0.1) Gecko/20100101 Firefox/10.0.1

正式版除了版本號為兩位數之外，之後若有安全性更新等版本，版本號會從原本由一個小數點區隔的「10.0」，變為有兩個小數點的「10.0.1」。請務必注意。

Firefox 的 Beta 版和正式版有一樣的 UA 字串，但 Nightly 版和 Aurora 版不同，如下所示：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:12.0a1) Gecko/20120122 Firefox/12.0a1
Mozilla/5.0 (Windows NT 6.2; rv:12.0a2) Gecko/20120122 Firefox/12.0a2

要注意的是 Gecko/yyyymmdd 的部分並非固定是 20100101、版本號尾端的也會加上 a1 或 a2 。有關 Firefox 的 UserAgent 字串的更多詳細資訊請參考 MDN 文件。

此外，Internet Explorer 的版本號也即將邁入兩位數。因此建議一並做好相對應的解決方案。

<table> 元素的邊界（margin）會正確抵銷

在 CSS 樣式內，前後元素的垂直方向邊界會發生「摺疊（margin collapse）」。也就是說，在兩個元素的垂直方向間的邊界會互相抵銷，只會顯示兩個元素中較大的邊界。

但在 Firefox 9 以前，在 ‘<table>’ 元素前後的元素邊界並不會抵銷，而是和 ‘<table>’ 本身的邊界相加。在 Firefox 10 已經修正為和其他元素一樣正確顯示。若 ‘<table>’ 和前後元素都設定了邊界，邊界會比舊版來得小。在倚賴縱向大小的版面配置上特別要注意 ‘<table>’ 的邊界設定。

例如以下的原始碼，在 Firefox 9 以前 ‘<table>’ 的上下邊界為 1+2=3em、2+3=5em，但在 Firefox 10 之後會變成 Max(1,2) = 2em、Max(2,3) = 3em。

<p style="margin: 1em;">具有 margin-bottom 的元素</p>
<table style="margin: 2em;"><tr><td>table 元素</td></tr></table>
<p style="margin: 3em;">具有 margin-top 的元素</p>

在非靜態位置的 <table> 內的絕對位置基準位置修正

在 CSS 樣式內，指定為絕對位置(position: absolute) 的元素，會以母元素中最靠近的非靜態 (position: static) 的元素(position: relative or absolute or fixed)為基準來設定位置 (top, bottom, left, right) 。

但在 Firefox 9 以前，就算母元素之中的 ‘<table>’ 元素不是靜態位置，子元素的位置會以更上層的非靜態元素為準。在絕對位置、相對位置或是固定位置的 ‘<table>’ 元素內指定絕對位置元素的情況，在新版會改變原先的版面配置。

例如以下的原始碼，在 Firefox 9 以前 ‘<table>’ 內的 ‘<div>’ 元素為以更上層的 ‘<div>’ 元素為基準，因此會出現在上方 0+50 = 50px、左 100+50 = 150px 的位置。在 Firefox 10 之後會改以 ‘<table>’ 元素為基準，出現在上方 100+50 = 150px，左方 100+50 = 150px 的位置。

<div style="position: absolute; left: 100px;">絕對位置的母元素
<table style="position: absolute; top: 100px;"><tr><td>
  table 內的靜態位置元素
  <div style="position: absolute; top: 50px; left: 50px;">table 內的絕對位置元素</div>
</td></tr></table>
</div>

以上兩項絕對誤置和邊界抵銷的問題都是針對 CSS 樣式的修正。其他瀏覽器也會做出相同的修正，因此以後不必為 Firefox 特別設計版面，只要讓版面相容於各大瀏覽器即可。詳細資訊請參考這篇文章。

此外，這裡為了簡化所以寫成 ‘<table>’ 元素，事實上只要是設定為 ‘display:table’ 的元素都有修正。

Strict 模式的 E4X 不再適用

Firefox 的 JavaScript 引擎過去支援簡單處理 XML 的語法，稱為「E4X」。但在導入 ECMAScript 5th 的 Strict 模式下，將不能再使用 E4X 語法。

若同時使用 E4X 和 Strict 模式，請放棄 Strict 模式，或是重新改寫原先 E4X 的原始碼。

刪除 DOM4 下不建議的屬性

在 DOM4 中不再建議使用以下的屬性，因此從 Firefox 10 之後刪除。

• document.xmlVersion 屬性
• document.xmlStandalone 屬性
• document.xmlEncoding 屬性
• text.isElementContentWhiteSpace 屬性
• text.replaceWholeText() 方法
• node.isSameNode() 方法

由於 document.xmlVersion 總是回傳 "1.0″ ，因此以往只能用來判斷 document 是 XML 或 HTML。現在其判斷方法如下：

if (document.createElement("foo").tagName == "FOO") {
  /* 在HTML 模式下 tagName 屬性會轉為大寫 */
}

若使用 node.isSameNode() 方法，請改用同值運算符號 (===) 來比較。

setAttribute() 設定為整數時，尾端的非數字會被省略

在 HTML 定義下，設定屬性為整數時，所設定的字串尾端的非數字會被省略。即 "100fox" 會被當作 "100″。

Firefox 9 以前若屬性值不是數字，會被當成錯誤。但在 Firefox 10 之後修正為讀取字串的數字部分。

例如以下的原始碼，在 Firefox 9 以前 ‘<canvas>’ 的寬度會回到預設值 (300) ，而在 Firefox 10 之後設定為 100 。

document.getElementById("canvasid").setAttribute("width", "100em");

ESC 鍵不再觸發 oninput 事件

在 HTML 定義下，只有元素的值改變時才會觸發 oninput 事件，但在 Firefox 4 到 Firefox 9 為止，使用者按下 ESC 鍵時也會觸發 oninput 事件。

Firefox 10 之後將遵照標準，ESC 鍵不會再觸發事件。

IndexedDB 的實作配合最新標準

Firefox 4 起開始支援當初起草的 IndexedDB 其中一部份 API，但之後支援的 API 經過多次的新增和標準修改。Firefox 10 起 IndexedDB 進行了較多的變更，其中要注意的是版本的指定方式。

以往連接到資料庫之後是用 setVersion() 方法指定版本，但 setVersion() 已經被刪除，改為在連結資料庫時用參數的方式來指定版本。

有關此項 IndexedDB 的更改，可參考由 mzsm 在上個月所撰寫的日文文章「IndexedDBに関する覚書 (2011年12月版)」。

一張基本的 HTML5 網頁

首先從最基本的 HTML 檔案開始看起。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="utf-8">

    <title></title>

    <!-- META -->
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- 行動裝置顯示設定 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS 樣式表 -->
    <link rel="stylesheet" href="css/style.css">

    <!-- Modernizr 函式庫 -->
    <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>

<body>

    <!-- 網頁內容 -->
    <div id="container">
        <header>
        </header>

        <div id="main" role="main">
        </div>

        <footer>
        </footer>
    </div>

    <!-- JavaScript -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>

    <script src="js/plugins.js"></script>
    <script src="js/script.js"></script>

    <!-- Google Analytics 追蹤程式碼 -->
    <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
    </script>

    <!-- 針對 IE6 使用者顯示 Chrome Frame 安裝提示 -->
    <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
    <![endif]-->

</body>
</html>

以下開始將這張網頁從頭開始一行一行解說起。

Doctype

以往在 XHTML 的標準下，需要寫的 Doctype 可能是 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 等等一長串的文件類型宣告，而在 HTML5 底下，只需要 <!DOCTYPE html>’，15個字元，簡潔有力。

要注意的是 Doctype 前面不能有任何字元，包含空格或是換行符號，否則某些瀏覽器可能會無視這個 Doctype。

<html lang="zh-TW">

在 HTML 的根元素下，可以指定網頁的語言，如 ‘en’、’zh-TW’ 等。至於以前 XHTML 的 ‘xmlns="http://www.w3.org/1999/xhtml"‘ 屬性當然也不再需要了。

網頁編碼

<meta charset="utf-8">

這一行指定了這個網頁的編碼是 UTF-8。事實上這是從 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8″ /> 這種寫法簡化而來的。這在所有瀏覽器內都行得通。

編碼的指定最好放在 <head> 裡的第一行，甚至在 <title> 之上。

META 資訊

<meta name="description" content="">
<meta name="author" content="">

設定這個網頁的描述和作者名稱，這對於搜尋引擎或社群網站在抓取資料時非常有用。

<meta name="viewport" content="width=device-width, initial-scale=1">

設定行動裝置（手機、平板電腦）上的預設縮放大小和寬度。

Favicon

對，這裡沒有宣告 <link rel="favicon" … >’，瀏覽器也會自動去抓取網站根目錄下的 favicon.ico ，所以不需要特別寫出來。但當 favicon.ico 的位置不是在根目錄、或檔名不叫做 favicon.ico 的時候，就需要加個 <link> 標籤來告訴瀏覽器。

CSS

和以前一樣，使用 <link rel="stylesheet" href="css/style.css"> 來加入 CSS 樣式表檔案。

其中 type="css" 的屬性值已經不需要再寫了，因為目前這世上的樣式表只有一種格式，就是CSS。

Modernizr 函示庫

<script src="js/libs/modernizr-2.0.6.min.js"></script>

Modernizr 是個很好用的函示庫，原先是用來檢測瀏覽器是否支援各種 HTML5 的功能。但發展到現在已經包山包海，包進了許多好用的函示庫。

其中一個重要的功能是 HTML Shim，這能讓不支援 HTML5 標籤的瀏覽器（對，就是IE）認得新的標籤。

要下載 Modernizr，請到官方網站的下載頁面，自訂想要的功能。

Modernizr 必須在 <head> 內就先載入。其餘的 JavaScript 則放在 </body> 之前，這樣能加快網頁載入的速度。

<body>

進入網頁的主要內容。HTML5 新增了語意元素（如範例中的 <header> 等等）。這裡先跳過…。

JavaScript

將所有的 JavaScript 放在網頁最底端可以節省網頁開啟的時間。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>

第一行是 jQuery 函示庫。使用 Google CDN 上的檔案。 第二行是當 Google CDN 連不上、找不到 jQuery 時，可以改為載入放在伺服器上的檔案。 接著就是自己的 JavaScript 檔案了。 不需要 type="text/javascript 屬性值，瀏覽器也會當作是 JavaScript 來處理。

Google Analytics

<script>
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
  load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>

載入 Google Analytics 的追蹤程式碼。其中 UAXXXXXXXX1 要改為自己的 ID。

這裡使用的是 Modernizr 裡的「yepnope.js」功能來載入。

Chrome Frame

<!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->

一起來終止 IE6 吧，這幾行程式碼可以在使用 IE6 瀏覽時顯示 Google 推出的 Chrome Frame 外掛安裝提示，Chrome Frame 可以讓使用者在 IE 下直接使用 Chorme 的網頁引擎。

以上就是一個基本的 HTML5 網頁。

下載

http://userscripts.org/scripts/show/120097（Userscripts.org）

安裝

Firefox

請先確定 Firefox 上已經安裝「Greasemonkey」這個附加元件，再到上述連結內按下右上方的「Install」下載。

Google Chrome

Google Chrome 可以直接將 Userscript 安裝成擴充功能，直接到上述連結內按下右上方的「Install」下載就可以了。

使用方法

將滑鼠游標移到成員的文章上就會自動顯示出這篇文章下其他成員的留言回應，另外若是自己曾經留過言，也會一併顯示在下方。

註

• 實測過不能在 Firefox 3.6 使用。Firefox 4 以後的版本才行。
• 已知無法透過 Chrome 的 Blank Canvas Script Handler 套件安裝。
• 下拉頁面太快的時候可能會發生錯誤，請稍後一下應該就能恢復。

v1.21 更新（2012/5/8）

• 修正 Google+ 更改介面後無法使用的問題。

v1.20 更新（2012/3/28）

• 1.20 版參考了前幾版的意見，新增了自訂選項，可設定留言的位置、樣式、顏色等等。
• 可封鎖不想看到的成員留言。
• 可在訊息串中隱藏路人甲乙丙丁的留言。
• 可以透過個人檔案的網址來新增使用者到自訂名單。
• 成員名單按照組別（team）細分。
• 新增簡體中文介面。（當 Google+ 和瀏覽器都是簡體中文的時候）

v1.0 更新（2012/3/13）

• 修正：編輯留言的換行問題。
• 修正：美化介面。
• 修正：複製貼上時不會複製到 +1 數和留言編號。
• 新增：可取出分享文章的人。
• 移除：從社交圈讀取成員資料。
• 移除：自訂成員名單（但仍可手動增加使用者。）

v0.95 更新（2012/3/1）

• 修正：取出成員名單時的錯誤。
• 修正：無法取消取出自己留言的錯誤。
• 修正：設定按鈕位置移動到個人資料內。
• 修正：在未登入狀態下也能使用。

v0.9 更新（2012/2/8）

• 新增：與 Google 試算表上的資料同步成員名單，未來要修改成員只要我這邊試算表一改就可以了。算是一種雲端（？）。
• 新增：從社交圈內讀取成員。
• 新增：可以修改自己的留言。但是還有點換行的問題要修正。
• 新增：可透過按鈕重新載入留言。
• 新增：標示留言是第幾樓。
• 新增：標示留言的修改時間戳記。
• 新增：支援行動版，還在測試中。
• 修正：將留言的按鈕列移到最上方。

v0.85 更新

• 新增：新增成員時可使用姓名搜尋。
• 修正：「DownloadSupport for Google+」按鈕相衝的問題。
• 修正：Google+ 修改了 CSS Class name 之後的失效問題。

TODO

• 自訂選項：留言樣式、手動自動切換、時間間隔、留言位置…。
• 封鎖特定成員。
• 成員分色。

原理

（寫給看得懂的人看…）

腳本流程基本上就是利用 Google+ 的 API（不是 Developer 文件裡正規的 API）取出文章底下的所有留言，再一一比對留言的作者 ID 是不是 48 成員。

比對的模式是用正規表達式（Regular Expression），比起跑迴圈檢查 Array 速度要快上非常多。用 AJAX 取回 JSON 資料之後再拿出想要的資料顯示出來就行了。

抓回來的 JSON 也包含自己的 ID，所以可以拿來比對自己的留言。

其中 Google+ 的 JavaScript API 使用了由 Mohamed Mansour 開發的 google-plus-extension-jsapi。在此特別感謝。

這東西是 MIT License，想要拿回去研究修改的人請便。

追蹤

要追蹤更新或回報問題，可在此或 userscript.org 上留言反映。
也歡迎到我的 Google+：http://akr.tw/+。

主要的改進有：

（一）新的（更貴的）收費模式（http://www.google.com/enterprise/cloud/appengine/pricing.html）

（二）可以使用 Python 2.7 了。

其實在上一版就已經加入 2.7 的測試，但是 SDK 等到這次的 1.6.0 才開始支援本機端的 2.7。

要使用 Python 2.7 作為 runtime，首先要確認你的應用程式必須是 High Replication Datastore（HRD）模式才行。

現在建立新的應用程式的話，預設都是在 HRD 模式，如果是很古早前的程式，要先經過 Migration 程序轉換到 HRD 模式。（從後台「Application Settings」裡的「Migrate Application」）

接著在 app.yaml 中修改：

runtime: **python27**
threadsafe: **true**

URL 的對應也要修改為：

- url: /.*
  main.**app**

這樣就能在 Python 2.7 中開發你的應用程式了。（當然本機端也別忘了也要升級到 2.7。）

（三）支援各種 Python 2.7 的 Threading library。

（四）支援一些 C 語言的模組：‘ctypes, sqlite, ssl, _ssl, fcntl, spwd, pwd, grp, syslog, select, _socket’

（五）支援 Python 原生的 JSON 函示庫。

以往要在 GAE 裡使用 JSON 得靠 Django 的 simplejson， Python 2.7 開始支援原生的 JSON library，速度會快上很多。

（六）支援許多第三方的函示庫。

在新的 Python 2.7 runtime 可以使用 Django、lxml、jinja2、MarkupSafe、NumPy、PIL、PyCrypto、setuptools、WebOb、YAML、zipimport 這些 third-party libraries。

要在應用程式裡匯入這些 libraries，得先在 app.yaml 中設定好，以 lxml 來說：

libraries:
- name: lxml
  version: "2.3"

其中 name 是 library 的名稱，version 是要使用的版本，也可以指定「latest」來使用伺服器上最新的版本。詳細的名稱和版本對應表可以在官方文件裡找到。

接著就可以在程式裡直接 ‘import lxml’ 匯入了。（當然要在本機上測試的話，也得先安裝好相對應的版本囉。）

（七）webapp 框架升級到 webapp2。

簡單的「Hello, World!」範例：

import webapp2

class MainPage(webapp2.RequestHandler):
    def get(self):
        self.response.headers['Content-Type'] = 'text/plain'
        self.response.out.write('Hello, WebApp World!')

app = webapp2.WSGIApplication([('/', MainPage)])

而現在，除了以往常見 Eric Meyer 版本、YUI 版本的 CSS Reset 之外，還有另一種選擇－ Normalize CSS

Normalize CSS 和 CSS Reset 最大的不同在於，CSS Reset 是清除所有預設的樣式；而 Normalize CSS 則是賦予各種 HTML 元素一個預設的樣式，譬如 <h1>、<h2>、<h3> 等標題字型大小、<ul> 的預設該有的 padding 等等。也增加了一些可用性（如在 <button> 元素上游標會變成手指狀，告訴使用者可以按）。有了這些預設的樣式，在寫我們自己的 CSS 時，可以減少許多屬性設定。

另外 Normalize CSS 是針對 HTML5 的 CSS 框架，所以支援 HTML5 中新的標籤，包括 video、canvas 等等。如果要做 HTML5 的網頁的話，會非常方便。Normalize CSS 的專案頁面上提供了一個 Demo 的網頁。可以看看各種元素經過 Normalize CSS 標準化之後的模樣。

Normalize CSS on GitHub：https://github.com/necolas/normalize.css/
CSS 檔案：https://github.com/necolas/normalize.css/blob/master/normalize.css

在佈景主題裡的 functions.php 裡加入這個函數。

function display_performance_admin_bar() {
    global $wp_admin_bar;

    // 只對網站管理員顯示。
    if ( !is_super_admin() || !is_admin_bar_showing() )
        return;

    // 取得資料庫查詢次數、頁面產生時間、記憶體使用狀態。
    $status = sprintf(
        '<strong>%d</strong> queries | <strong>%.2f</strong> seconds | <strong>%.2fMB</strong> memory',
        get_num_queries(),
        timer_stop( 0, 3 ),
        memory_get_peak_usage() / 1024 / 1024
    );

    // 新增到管理列上。
    $wp_admin_bar->add_menu( array(
        'id' => 'status',
        'title' => $status,
        'href' => false,
    ) );
}
add_action( 'admin_bar_menu', 'display_performance_admin_bar', 1000 );

當然也可以運用這個函數，讓這些資訊顯示在其他地方，不過我是認為一般使用者不太需要知道這些資訊，所以就放在只有管理員能看到的工具列上。

安裝

安裝腳本：http://userscripts.org/scripts/show/105735（點選右上方綠色的［Install］安裝。）

說明

原先的功能很簡單，就是把黑底變白底而已，。 Google Chrome、Opera 也可以直接使用。

PS. 其實我覺得新版黑色介面蠻好看的…。

v1.4 (2012/3/2) 更新

修改至適用新版的 Google 導覽列，還有一些問題要修正。