clayliao.f2e

[教學] Nodejs 學習筆記 (4) -- express framework

noreply@blogger.com (clay liao) — Thu, 01 Mar 2012 14:09:00 +0000

續前文：

express - Nodejs MVC Framework

MVC 是多數開發者很容易上手的架構，Node.js 上也有許多 Model-View-Control 架構的 Framework，這裡我們介紹最為普及的 express。如果您需要別的網站來擔保的話， express 官方網站也列出了幾個使用 express 的成功案例，其中還包含小有名氣的新創網站 Storify！

安裝 express

若您已按照先前的教學準備好了 npm，安裝 express 只需要一行指令（如果要 global scope 則需加上參數 -g）：

$ npm install express

建立新專案

安裝成功 express 後，建立新專案也很容易，只要使用指令 express 並指定目錄位置，express 會自動產生一個基本的網站結構（以下的目錄可以自由命名更改）。第二行指令則是安裝相依檔案：

$ express /tmp/foo && cd /tmp/foo

$ npm install -d

執行 express 新專案

回到剛剛建立的新專案目錄 /tmp/foo，在裡面有一個命名為 app.js 自動產生出來的檔案，這是 express 專案的起點。我們先讓網站跑起來，待會兒再回頭研究它裡頭的細節。與其他 Node.js 執行的命令相同，使用 node 指令執行檔案 app.js：

$ node app.js

接著使用瀏覽器開啟 http://127.0.0.1:3000 ，如果一切正常的話，可以在瀏覽器裡看到新專案的長相（附註：3000 是 express 預設的 port）。為了一探 express 究竟產生了哪些內容，我們使用瀏覽器內建的開發者工具檢查 HTML 原始碼，並一步步找出 express 中對應的程式碼。

express 的運作方式

截至目前為止，我們雖然讓 express 新專案成功地跑了起來，但卻不知其所以然。現在就讓我們來看看剛剛的過程中 express 究竟做了哪些事。回到專案目錄後（本例為 /tmp/foo）列出第一層檔案：

使用文字編輯器打開剛剛執行的檔案 app.js。app.js 大致上可以拆成三個部分，首先是載入相依的模組，並建立 server：

app.js 第二個部分為設定檔，詳細的設定語法與參數可以參考官方文件。身為初學者，我們先將目光停留在兩個重點：1) Template 檔案放在 /views 目錄下，待會兒我們就要繼續追查這個目錄；2) express 預設使用的 view engine 是一個名為 jade 的樣板引擎，如果不習慣 jade 的特殊語法，別忘了這是個"設定檔"，表示我們也可以將它改成使用其他樣板引擎。

app.js 最後一個部分是 Routes，我們可以設定各種網址的 entry 並將它指定到不同的檔案。範例網站只有一頁，因此這裡就只看得到一個規則，將根目錄指到 views 目錄下的 index 檔案。

[教學] Nodejs 學習筆記 (3) -- 操作 DOM 物件

noreply@blogger.com (clay liao) — Sun, 14 Aug 2011 06:38:00 +0000

續前文：

在伺服器端操作 DOM 物件

對於有過前端開發經驗的開發者來說，在瀏覽器裡使用 JavaScript 操作 DOM 物件是非常習慣也容易理解的，但是在 Node.js 的世界中，所有 JavaScript 操作都要轉移到伺服器端執行，DOM 物件的操作也包含在內。可是，究竟如何在沒有瀏覽器的幫忙下操作 DOM 物件呢？

在 Node.js 中使用 YUI 3

在前兩篇教學（1, 2）中，我們已經安裝好了 Node.js 與 YUI 3 的開發環境，現在就直接開始撰寫程式碼。首先開啟新檔案（範例檔名為 example_dom.js），由於開發環境以經就緒，我們可以在 Node.js 中使用 require() 語法引用 yui3 模組，並且使用眼熟的 YUI().use() 撰寫程式碼。熟悉 YUI 語法的開發者完全可以在 Node.js 上使用原本就很熟悉的技巧：

小技巧：使用 Y.log() 可以很清楚地知道執行成果，方便除錯。

建立 DOM 物件

在伺服器端沒有瀏覽器建立的 DOM 物件，我們只好自己建立：

var document = Y.Browser.document;

然後就可以使用諸如 createElement() 、appendChild() 等語法操作 DOM 物件了！用起來的感覺跟以往沒什麼兩樣，真的是很快速方便上手啊！
以下的程式碼建立了一個新的 <div> 元素，並且添加一些文字內容，最後把它放回 <body> 裡面，這是很常見的 DOM 操作：

執行 example_dom.js 程式，確認 Y.log() 印出來的執行結果符合預期：

node example_dom.js

輸出結果至瀏覽器

現在我們已經能夠自在地操作 DOM 物件了，不過可能有人希望不只是在 log 裡看到結果，而是要能顯示在瀏覽器中，畢竟這才是一般我們在開發網站常見的作法。
在[教學] Nodejs 學習筆記 (1) -- 建立開發環境中示範了使用 Node.js 建立 http 伺服器的方法，只要把這兩個範例結合在一起，就能從瀏覽器裡看到結果囉：

使用瀏覽器連線至：http://localhost:8124，出現了剛剛 Node.js 執行的結果。開啟開發者工具進一步確認回傳的內容與剛才在 log 裡看到的確實是一模一樣的：

[教學] Nodejs 學習筆記 (2) -- 使用 npm 管理套件

noreply@blogger.com (clay liao) — Sun, 07 Aug 2011 06:23:00 +0000

續前文：[教學] Nodejs 學習筆記 (1) -- 建立開發環境

npm (Node Package Manager) 是 Node.js 用來管理第三方套件的工具，目前 npm 上可以找到的套件總數約 1,000 個，許多方便的工具都已經有人寫好了，開發任何功能前不妨先找看看是否有現成的套件，避免重新打造輪子。

使用 npm 管理套件

安裝 npm 需要自行編譯安裝，不過 npm 也提供了自動化的 script ，只要執行這段指令即可：

curl http://npmjs.org/install.sh | sh
遇到錯誤或是堅持自行編譯安裝的人，可以參考 Github 上的說明( https://github.com/isaacs/npm)。

Node.js + YUI 3

把 YUI 3 移植到 Node.js 的工程是由 Dav Glass 完成的，由原作者親自介紹這個專案再適合不過了：

安裝相依套件

在安裝 nodejs-yui3 前，必須先安裝以下兩個套件：

npm install jsdom
npm install htmlparser

安裝 YUI 3

一切準備就緒後，就可以安裝 nodejs 版的 YUI 3，這個步驟需要一點時間，enter/return 按下去後可以先去上個廁所：

npm install yui3

出現成功訊息後，我們就可以在 Node.js 上使用大多數的 YUI 3 語法囉！也就是說，以往使用 YUI 3 的經驗與技巧都可以延續到伺服器端的開發。到這裡 Node.js + YUI 3 的環境已經準備就緒，下一篇我們來試著使用 Node.js 與 YUI 3 在伺服器端操作 DOM 物件。

續：[教學] Nodejs 學習筆記 (3) -- 操作 DOM 物件
閱讀更多 »

[教學] Nodejs 學習筆記 (1) -- 建立開發環境

noreply@blogger.com (clay liao) — Sat, 06 Aug 2011 07:14:00 +0000

說起近期前端最紅的技術，除了 HTML5 之外就非 Node.js 莫屬了。相較於 YUI 或是 jQuery 這類在瀏覽器執行的函式庫，Node.js 最大的特色就是可以在伺服器端執行 JavaScript，就像是 php/Java/Ruby/Python 一樣。也就是說，如果這項技術普及的話，前端工程師就可以單純地使用一種語言（JavaScript）完成前後端的 Web Application 開發。關於 Node.js 的介紹與想像可以參考 inside 的文章，這裡就不多加著墨了。我們直接開始實作 Node.js。

建立開發環境

下載 Node.js

Node.js 是開放原始碼的專案，所有的程式碼都可以在 Github 上找到。開發者可以選擇最新版本或是較舊的穩定版本。實際測試發現，雖然兩種版本都可以成功安裝，不過最新版的 v0.5.3 使用 npm （下一篇教學將會介紹）安裝套件時出現錯誤。為了避免走冤枉路，建議安裝 v0.4.10 穩定版本：

Node.js 下載位址：http://nodejs.org/#download

安裝 Node.js

Node.js 在不同作業系統環境下各有不同的安裝方法，您可以選擇：
1.) 自行編譯安裝（參考文件：Building and Installing Node.js）或
2.) 使用套件安裝（參考文件：Installing Node.js via package manager）。

如果是 Windows 使用者或是對 Linux 權限不熟悉的開發者，可以參考以下文章：

簡單範例實作

Step 1: 開啟檔案 example.js，並撰寫 Node.js 程式碼如下範例：

Step 2: 存檔後，執行這段程式碼：

$ node example.js
Step 3: 使用瀏覽器開啟 http://127.0.0.1:8124 ，如果看到 Server 回傳的內容 "Hello Nodejs!" 的話，就表示我們的第一個 Node.js 範例成功了！其中 port number 8124 是可以自訂的，只要不跟伺服器裡的其它 port 衝突即可。

現在我們已經踏出成功的第一步，成功地在伺服器端執行 JavaScript。如果想要進一步探究技術細節的話，可以參考官方文件（中文翻譯）。既然 JavaScript 重新回到了伺服器端，就有人想到，瀏覽器端的 JavaScript 有很多現成好用的函式庫與框架，如果這些框架也能在 Node.js 上執行的話，開發網站豈不是事半功倍？

是的，後續的教學文章我們就來一步步實作 YUI 3 on Nodejs，在 Node.js 上面使用 YUI 3 的各種功能。

續：[教學] Nodejs 學習筆記 (2) -- 使用 npm 管理套件

前端測試 @ 杭州 D2 前端技術論壇

noreply@blogger.com (clay liao) — Mon, 18 Jul 2011 16:45:00 +0000

由淘寶網舉辦，已經邁向第六屆的 D2 前端技術論壇是大陸最具規模的網路前端技術研討會，地點在距離杭州西湖不遠的之江飯店。今年很榮幸有機會獲邀到 D2 論壇分享前端自動化測試相關的主題，這也是我第一次與這麼多大陸優秀前端工程師們近距離互動，心理上是非常期待的。

聯合演講 -- 前端測試

"前端測試"的演講者一共有三位，除了我之外還有兩位阿里巴巴旗下的前端工程師。值得一題的是，阿里巴巴與旗下網站的員工都會取個武俠小說人物的名字當做自己的"花名"，這次合作的講者有口碑網的廖健（花名正邪）與淘寶網的陳成（花名云谦），兩位都是技術底蘊深厚的前端工程師。

我的演講題目是使用 YUI Test + Selenium + Hudson 打造自動化的 Continuous Integration 測試系統，有興趣的人可以參考以下投影片：

【前端测试】打造自动化的持续集成测试系统

View more presentations from taobao.com

CSS 菜鳥救星 @ 德明財經科技大學

noreply@blogger.com (clay liao) — Fri, 10 Jun 2011 12:54:00 +0000

記得剛進公司不久時滿腔熱血地做了六堂的 CSS 入門課程並開班授課，主要目的是為了 ~~幫 PM洗腦~~ 灌輸非 Engineer 同事基本的技術概念。事後也證明了，這些課程讓 Team members 都可以用相同的術語溝通，減少了許多日後的溝通成本。

以下投影片是本週與德明財經科技大學資管系大一學生分享 CSS 撰寫經驗的內容，摘錄自上述入門課程，並整理成可閱讀的版本。希望能降低 CSS 新手的學習門檻！

CSS 菜鳥救星

View more presentations from Ying-Hsiang Liao

[教學] 前端自動化測試 (下) -- YUI Test + Selenium + Hudson

noreply@blogger.com (clay liao) — Tue, 07 Jun 2011 15:09:00 +0000

續上文 [教學] 前端自動化測試 (上) -- YUI Test + Selenium，我們已經學會使用 YUI Test + Selenium 做測試。不過這個流程還需要人力手動開啟測試網頁看結果，通常一個中上規模的系統不僅包含數百甚至數千個 Test Case，而且還得重複在不同的瀏覽器/作業系統組合中重複測試... 像這種乏味且重複的事情，不如交給機器來做來得可靠！接下來我們將使用 Hudson 完成 Continuous Integration 系統的最後一塊拼圖。

安裝 Hudson

Hudson 提供 Native Package 與 hudson.war 兩種安裝方式，這裡採用後者。首先確定您的建置環境安裝了 JDK 與 Tomcat (或其他 Java Server 軟體)。下載 hudson.war 後，將它放在 Tomcat 所在的 webapps 目錄下，啟動 Tomcat 即可完成安裝：

./{Tomcat 目錄}/bin/startup.sh

開啟瀏覽器，連線至 http://localhost:8080/hudson，看到以下畫面表示 Hudson 安裝成功：

Create New Jobs

首先自由命名一個新專案：

安裝 Hudson Seleniumhq Plugin

Hudson 有現成的外掛整合 Selenium（關於 Selenium 與 YUI Test 詳見前文），在管理介面找到 [管理 Hudson] --> [管理插件] --> 安裝 Hudson Seleniumhq plugin。安裝成功後，重新啟動 Tomcat 以載入新的設定。接下來依照官方教學步驟完成 Seleniumhq Plugin 設定。

特別注意的是，該文件是以 Windows 系統為範例，若在 OSX/Linux/Unix 環境下，則需選擇 Build --> Execute Shell ，範例指令如下：

java -jar ~/Library/yuitest/java/build/yuitest-selenium-driver.jar http://127.0.0.1/examples/basic-usage-example.htm --resultsdir .

[教學] 前端自動化測試 (上) -- YUI Test + Selenium

noreply@blogger.com (clay liao) — Sun, 05 Jun 2011 04:08:00 +0000

Why YUITest

在 Web 前端測試中，常見的 JavaScript Unit Test 工具有 JSUnit、 QUnit 等，本文介紹的不只是 Unit Test ，而是自動化的 Unit Test！整個流程使用到的工具包含 YUITest 與 Selenium RC。有別於其他 JavaScript 測試工具，YUITest 具有以下特色：

模擬真實瀏覽器環境下的 DOM Event 行為。
支援非同步 (Asynchronous) 與 Ajax 測試。
Code Coverage 分析，確保所有程式邏輯都包含在測試中。
獨立運作，可搭配使用其他 JavaScript Library (e.g. jQuery, Dojo, Ext JS... ) 使用。
整合 Hudson 以及 Selenium 成為完整的 Continuous Integration, CI 系統。

準備測試網頁

以下的 YUITest 測試網頁原始碼可以在這裡下載。如果使用瀏覽器開啟的話，會看到 YUITest 的測試結果。可是手動開啟網頁測試實在太沒效率，因此我們使用 Selenium 自動化測試產生報表，如此一來就能將珍貴的時間放在更有價值的開發上！

安裝並啟動 Selenium RC

下載 Selenium RC 後，到所在的目錄（任意目錄皆可），執行以下 Command 啟動 Selenium RC Server：

java -jar selenium-server-standalone.jar

執行 YUITest 測試

確認 Selenium RC Server 啟動後，接著執行 YUITest ，測試標的是剛才準備好的測試網頁：

java -jar yuitest-selenium-driver.jar --resultsdir ~/results http://127.0.0.1/examples/basic-usage-example.htm

附註：YUITest Selenium Driver 需要 Java Client Driver，下載後放到 {JRE}/lib/ext 下或是用其他的方法引用該 selenium-java-{version}.jar 檔。(e.g. Mac 預設的 Java 目錄為 /Library/Java/Home )

測試結果告訴我們，YUITest 一共執行了七個測試，其中一個失敗了。詳細的報表在指定的目錄（本例為 ~/results ）下可以找到。接下來只要針對這個錯誤 Debug 即可，不必等待 QA 回報 Bug ，也不需要如大海撈針般尋找問題根源，大幅縮減開發時間！（Engineer 心中 OS: 終於可以準時下班了 T_T）

第一次 Mobile Web 就上手 @ 海大資工

noreply@blogger.com (clay liao) — Sat, 28 May 2011 03:50:00 +0000

繼去年(2010)在海洋大學資工系介紹 YUI 後，很榮幸地，今年再度獲邀講手機上的網路應用。由於 Mobile Web/App 並不是工作上的專業，於是利用自己的閒暇時間整理相關資料，並實際動手做了幾個展示用的 Mobile Web 網站與 iPhone/Android App。

這門課的聽眾大多是大二的同學，且擁有智慧型手機的人數估計低於一半。所以內容設計上儘量避免程式碼，以實例 Demo 為主。

第一次 Mobile App 就上手

View more presentations from Ying-Hsiang Liao

更多相關文章:

YUI 演講 @ 海大資工

參訪 Google 矽谷總部

noreply@blogger.com (clay liao) — Sun, 15 May 2011 13:01:00 +0000

Google 的總部就在距離 Yahoo! 十分鐘車程的 Mountain View，身為一名 ~~觀光客~~ 工程師，當然要到這個著名的景點參訪囉！不過遊客們可得注意，要進 Google 參觀得有內部的員工陪同，否則光是在建築物外拍照，都會有警衛出面制止的喔。

到達 Google 已經是午餐時間（這麼巧？），正好嚐嚐這裡有名的免費午餐。加州灣區的科技公司非常競爭，為了吸引好人才，員工福利的規格都異常地高。不過儘管如此，免費午餐還是很稀罕的，即便是 Apple 的員工餐廳也要付錢呢！

Google Campus 佔地廣闊，如果要在各個建築物移動的話，可以使用免費的 G-bike（台語唸起來有點...）。吃飽喝足，每個人找到自己的 G-bike 後，接下來就要參觀 Google Campus 啦！

Google 的辦公室非常有趣，很多角落都藏著驚喜。例如這台聽說是 NASA 送的飛行載具：

然後這個是電影「博物館驚魂夜」裡的恐龍骨骼模型：

原理跟跑步機一樣，傳說中的「無法前進的游泳池」：

體驗工作 in Yahoo! 矽谷總部

noreply@blogger.com (clay liao) — Sat, 07 May 2011 02:25:00 +0000

續上篇， F2E Summit 結束後，我們一行人繼續留在 Yahoo! 工作將近兩週，除了與平常只能通過 E-mail 溝通的美國同事們博感情，也順便體驗在矽谷工作的感覺。

Yahoo! 在 Bay Area 共有兩個園區，兩者距離大約 15 分鐘車程，中間有接駁車固定往返兩地。這次 F2E Summit 的主要活動場地則是位於加州 Sunnyvale 的 Yahoo! Campus。

從舊金山開車，沿著矽谷著名的 101 高速公路往南約 40 分鐘，下交流道後沿著 Mathilda Avenue 直走，迎面而來的是醒目的 Yahoo! 招牌：

Yahoo! Campus 一共有 7 棟建築，中央是一大片修剪整齊的草地，很有大學校園的感覺：

這裡就是今年 F2E Summit 的會場，裡面除了演講廳外，還有免費健身房與最大的員工餐廳 URL's：

趁假日沒有人的時候拍下空曠的 URL's 餐廳，平常用餐時間這裡可是非常熱鬧的：

戶外籃球場，中午有同事在樂活打籃球：

除了籃球場與健身房外，這裡還有兩座沙灘排球場！會不會過太爽啦！

訪客入口處很醒目的紫牛：

碰巧在 URL's 遇到星巴克的 CEO Howard Schultz 來演講，現場除了提供免費星巴克咖啡與餐點吃到飽外，還大手筆地送了每人一本親筆簽名的新書 Onward: How Starbucks Fought for Its Life without Losing Its Soul (中譯：勇往直前：我如何拯救星巴克)

Yahoo! F2E Summit - 中文手寫輸入法

noreply@blogger.com (clay liao) — Tue, 19 Apr 2011 13:58:00 +0000

F2E Summit 是 Yahoo! 前端工程師的年度盛會之一（另一個則是 YUI Conference），今年很幸運地投稿獲得青睞，因此可以以講者的身分出差到美國 Yahoo! 總部旅遊參加 F2E Summit。

F2E Summit 的 Session 大多是硬底子的技術研討，短短兩天內就可以快速了解各國工程師正在研究的新技術。今年的重點則是不意外的 HTML5、Web Performance、Mobile web 以及 nodejs。我的 Session 介紹的是雅虎奇摩去年 (2010) 中旬在台灣與香港同步推出的 Yahoo! 手寫輸入法，這個功能主要是提供給不善打字的輕度使用者使用，例如老年人、電腦初學者甚至輕微殘疾的人士等，讓網頁搜尋更加普及。

現場的外國同事對於中文輸入一竅不通，但對於象形文字『龜』還是有反應的 :)

活動結束後，同行的台北雅虎同事與 F2E Summit 的主辦人 Nicholas C. Zakas 合照：

以下是刪去了敏感資訊的公開版本投影片，：

Chinese Handwriting in Yahoo! F2E Summit 2011

View more presentations from Ying-Hsiang Liao

快速上手 Opera Widget - Twitter Instant Search

noreply@blogger.com (clay liao) — Fri, 25 Mar 2011 02:47:00 +0000

圖片來源

幾天前 Opera 的 Zi-Bin 等人應邀前來公司演講，一個下午的 Session 裡介紹了 HTML5、Opera Widgets 以及 Opera App Store。

在現場聽演講的同時，我也順手寫了一個簡單的 Widget，測試 Opera Widget 是否能跨網域存取 Json 資料。結論是為了安全考量，Opera Widget 預設是不開放跨網域存取資料的。如果開發者有需要的話，必須手動在 config.xml 中加上屬性 network="public"。

回家後花點時間把這個小工具穿上 CSS 外衣，完成了第一個 Opera Widget： Twitter Instant Search :)

Twitter Instant Search 使用的技術包含：

YUI 3 AutoComplete
Twitter Search API
Opera Widget

[教學] 使用 PhoneGap 跨平台開發手機應用程式

noreply@blogger.com (clay liao) — Tue, 15 Mar 2011 06:51:00 +0000

近年來手機應用程式開發愈來愈熱門，為了能夠減少開發者的學習曲線，並延續 Web 的開發經驗，一些幫開發者將 HTML / CSS / JavaScript 包裝成原生應用程式的工具便應運而生。上次介紹過了知名的 Titanium （[教學] 使用 Titanium 同時開發 iPhone/Android 應用程式），今天我們來介紹另一套 Open Source 的 PhoneGap。

1. 下載 PhoneGap

到 PhoneGap 官方網站下載最新版本的程式碼並解壓縮。

2. 安裝開發套件

解開壓縮檔後可以看到 PhoneGap 支援的各種 Mobile OS 平台，除了最熱門的 iOS, Android 外，還有 BlackBerry, Symbian 與 WebOS 等。這裡以 iPhone App 作為範例，所以我們開啟 iOS 資料夾：

打開 iOS 資料夾後，安裝 PhoneGapLibinstaller.pkg ：

3. Hello PhoneGap!

經過一連串的授權聲明確認完成安裝後，打開 Xcode 編輯器，側邊導覽列的 User Templates 下方新增了一個 PhoneGap 選項：

選擇 PhoneGap-based Application 開始第一個 PhoneGap 專案。一個標準的 PhoneGap project 如下圖，其中專案目錄與必要的檔案都是自動產生的。首先看到 www 資料夾下的 index.html ，這裡是我們的專案起點。

前面提到，使用 PhoneGap 可以幫我們把 Web App 包裝成 Native App，因此開發者不需要學習 Objective-C 或 Java 就可以開發跨平台的原生應用程式。也就是說，在 PhoneGap 裡，我們只要在 www 目錄下工作，寫原生應用程式就彷彿在寫普通網站一樣！

回到 index.html 檔案，此時 <body>...</body> 裡面還沒有任何內容。我們來試著在 <body>...</body> 中間隨便加點東西，例如：<h1>Hello PhoneGap!</h1>：

4. 使用模擬器執行 PhoneGap 專案

完成修改 index.html 後，使用 Xcode 內建的 iphone 模擬器執行 PhoneGap 專案。在左上角的下拉選單中選擇 Simulator - 4.0，點擊 [Build and Run] 按鈕。此時 PhoneGap 會開始包裝應用程式，幾秒後就能看到模擬器的執行結果：

大功告成！

[教學] 使用 YQL 跨網域讀取網站內容

noreply@blogger.com (clay liao) — Sun, 06 Mar 2011 10:02:00 +0000

許多 Mashup 網站經常需要跨網域存取（多個）外部網站資料，如果該資料來源網站沒有提供 JavaScript API 的話，由於 JavaScript 原生的安全性限制，這些動作都必須繞道 Server 端的 Proxy。這個雞肋的步驟很容易澆熄開發者的熱情，特別是對前端工程師 (Front-end Engineer, F2E) 來說更是如此。

您的煩惱 YQL 聽到了！Yahoo! 查詢語言（Yahoo! Query Language, YQL）解決了這個惱人的問題。YQL 將整個網路的公開內容視為一個巨大的資料庫，每個網頁就是一個概念上的 "Table"。YQL 的概念可以用以下這段 SQL 語法說明：

select * from internet

開始使用 YQL

YQL 提供了完整的官方文件，但學習 YQL 可以從更簡單的 YQL Console 開始。

三個步驟開始 YQL Console：

左上方的空白欄位輸入 YQL 語法。YQL 的語法長得很像 SQL ，非常很容易讀寫。初學者可以參考右方列出的的語法範例。以下是一段簡單的 YQL 範例，列出 Flickr 的前10筆搜尋結果：
select * from flickr.photos.search where text="Cat" limit 10
YQL 提供 XML/JSON 兩種回傳格式，如果是 JSON 還可以加上 callback function。選擇回傳的格式後，按下黃色的 "TEST" 按鈕開始抓資料。YQL 的最長回應時間為 30 秒，通常不會太慢，不過實際速度得視目標網站的回應時間而定。
回傳的結果(XML/JSON)顯示於下方的欄位。

使用 YQL 預設的 DataTable

了解了 YQL 語法後，可先別急著動手寫語法。YQL 內建了 1000 個以上的 DataTable ，包含 amazon, ebay, netflix, flickr, github, imdb 甚至 Google 部分的 API 等，這個列表可以在 YQL Console 的右下方找到，節省開發者的時間：

[Facebook] BigPipe 效能優化技術的疑問與解答

noreply@blogger.com (clay liao) — Sun, 13 Feb 2011 07:22:00 +0000

不久前任職於 Facebook 的 Changhao Jiang 提出了 FB 網頁前端效能調校的文章 BigPipe: Pipelining web pages for high performance。由於網頁的效能調校已經好一陣子沒有出現新的概念與方法，因此該文引起了許多阿宅工程師的注意與討論。以下是我讀完該文後第一時間的疑問與解答。

Q1. 如何讓 Server 與 Browser 同時處理網頁

一般來說，瀏覽器都是在接收到 Server 回傳結果後才開始後續處理，但 BigPipe 則是希望每回傳一個 Pagelet 區塊，瀏覽器就要馬上接手處理該部分的 HTML, CSS 與 JavaScript。為了要達到這樣的效果，其實 Server 端也需要配合採用 flush 的方式回傳結果。這點可以觀察 Facebook 首頁回傳的 Transfer-Encoding: chunked 得到印證（如下圖）。（更多 flush 觀念與實作請參考這裡, 這裡與這裡）

Q2. BigPipe 跟 Ajax 有什麼不同？為何不用 Ajax 實作？

使用 flush 而非 Ajax 的原因主要在於減少對 Server 的 Request 數目。以下圖為例，Facebook 首頁切分為 10 個 Pagelet，如果使用 Ajax 實作的話，瀏覽器必須至少對 Server 送出 10+1 個 Request（或更多）。使用 flush 的方式就可以有效降低 Server 的負擔並減少等待 Server 回應的時間以加快速度。

圖片來源

Q3. BigPipe 真的可以有效提昇網頁的效能嗎？

文章中也提出了使用 BigPipe 的效能改進，"看起來" Facebook 的首頁效能有了顯著的提昇。不過值得注意的是，這是以使用者看到重要區塊的時間（例如：人氣/最新動態）為基準比較。也就是說， BigPipe 在意的是讓使用者 "感覺" 變快，但實際上，整個網頁完成的時間卻是比以前慢的。
閱讀更多 »

Google 版的 JSLint - Closure Linter

noreply@blogger.com (clay0529) — Thu, 20 Jan 2011 15:13:00 +0000

為了提昇 JavaScript 程式碼的品質與統一撰寫風格，許多開發者通常會使用 JSLint 來檢查程式碼。JSLint 是 Douglas Crockford 發表的 JavaScript 程式碼檢查工具，除了檢查基本的語法外，它還會建議開發者使用比較好的寫法，例如減少使用全域變數與避免危險的函式（e.g., eval()）。一般來說，能通過 JSLint 驗證的程式碼品質都算是水準之上。

除了 JSLint 之外，Google 日前推出的 Closure Tools 裡其實也低調地包含了一個 JavaScript 檢查工具： Closure Linter 。這裡我們就來試著安裝並測試它的效果。

安裝 Closure Linter

Closure Linter 使用 Python 的 easy_install 安裝，如果你的開發環境已經有具備前述的兩項條件，只需要一行指令即可安裝 Closure Linter ，以 Mac 為例（其他OS安裝步驟）：

$ sudo easy_install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz

使用 Closure Linter 檢查程式碼

為了測試 Closure Linter 是否有效，首先得準備一份寫得很糟的 JavaScript 程式碼，並存檔為 testlint.js (檔名隨意)：

經 JSLint 判斷，這段程式碼可以改進的地方有： 1.變數結尾沒有分號, 2.使用比較不效率的方式建立陣列, 3.函式中有多餘的空格字元, 4.line 5 使用 tab 而非空格縮排。

Run Closure Linter

接著使用 gjslint ＋檔名開始檢查 JavaScript。很快地， Closure Linter 提出了四個 errors：

$ gjslint testlint.js

與 JSLint 相比， Closure Linter 並沒有提醒開發者注意全域變數，也沒有建議使用 [] 來建立陣列。
閱讀更多 »

[教學] YUI 3 學習筆記 (8) ─ Widgets

noreply@blogger.com (clay0529) — Thu, 23 Dec 2010 13:25:00 +0000

許多 JavaScript Library 都提供了視覺化介面，例如月曆、標籤效果等等。在 YUI 裡，我們把這些視覺化元件稱為 Widget。以下將以開發者常常需要實做的 "標籤效果" 為例，使用 YUI 的 TabView Widget 快速製作出跨瀏覽器的標籤效果。

1. 載入YUI 3 核心檔案

首先載入YUI 3 的核心檔案。在HTML的<head></head>標籤之間加入這一行： <script type="text/javascript" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>

2. 準備 HTML Markup

YUI 的 TabView Widget 支援各種資料來源，這裡我們考慮到瀏覽器的漸進式支援 (Progress Enhancement)，所以將標籤頁的內容寫在 HTML 裡面。準備一個 <div id=”demo”> … </div> 作為最外層的容器，以下所有的內容都要放在這個 id 命名為 demo 的 <div> 標籤裡。為了方便說明，範例使用 YUI 預設的樣式，所以我們再給這個標籤加上 class="yui3-skin-sam" 屬性:

使用瀏覽器開啟這個檔案，所有的標籤如預期地垂直排列，而且目前還看不到任何變化:

3. 使用 YUI Widget: TabView

接著我們要使用 TabView 這個 Widget 讓頁面產生標籤換頁的效果。實際的做法非常容易，只要在 </body> 結束標籤之前加上以下幾行 JavaScript 程式碼就可以了。簡單來說，這段程式碼作了幾件事情:

動態載入 YUI "tabview” 模組
new 一個 Y.TabView 物件，並在初始化的時候指定資料來源，範例的 #demo 對應到剛剛準備好的 <div id=”demo”> … </div>
render TabView Widget

[教學] YUI 3 學習筆記 (7) ─ 拖放效果

noreply@blogger.com (clay0529) — Tue, 23 Nov 2010 14:27:00 +0000

近年來，在網頁上使用拖拉(放)元素的介面設計已經非常普遍了，YUI 也提供很方便的模組實作這樣的效果。在 YUI 裡，拖拉的功能稱為 DD (Drag & Drop 的簡稱)。這篇教學我們要使用很短的程式碼完成酷炫的拖拉功能，讓一個原本靜態的元素變得更為活潑!

1. 載入YUI 3 核心檔案

首先載入YUI 3 的核心檔案。在HTML的<head></head>標籤之間加入這一行：
<script type="text/javascript" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>

2. 準備一個正方形的 <div> 元素

當然您也可以自由發揮設計這個 <div> 元素的外觀。到目前為止，這個元素還無法與使用者互動，完全就是一個普通且靜態的 <div> 元素。

3. 載入 YUI 3 的 DD 模組

與其他的 YUI 3 模組相同，當我們使用 DD 模組的時候，YUI 會自動找到並載入相依的 JS 檔案。這個範例中我們需要撰寫的程式碼非常簡短，只要新建一個 Y.DD 物件並指定元素ID node: ‘#demo’ 就完成了:

Note: #demo 來自步驟2 的 <div id=”demo”></div>

4. 測試拖拉功能

使用瀏覽器重新讀取檔案，試著用滑鼠"拖曳"測試用的正方形元素，此時原本靜態的 <div> 元素已經可以四處拖拉，變得有趣多了! 這裡只介紹了 Drag ，對完整 Drag & Drop 有興趣的人可以到這裡參考更多 YUI DD 範例。

[教學] 使用 Titanium 同時開發 iPhone/Android 應用程式

noreply@blogger.com (clay0529) — Wed, 03 Nov 2010 15:07:00 +0000

隨著智慧型手機愈來愈普及，各種有趣的應用程式也紛紛在手機桌面上攻城掠地。可對開發者來說，開發手機應用程式卻也不是件容易的事，除了投資買台Mac外(for iPhone/iPad)，還得熟悉新的開發架構與程式語言，例如開發 iPhone App 需要學習~~有點冷門的~~ Object-C、Android App 則要用到 Java 等。
為了解決這個問題，有些大大就開始思考如何讓開發者在不需學習新語言的情況下開發跨平台的 Apps，幾個 Wrapper 開發工具便應運而生。這些開發工具可以幫忙把 Mobile Web App 打包成 iPhone/Android 原生應用程式(Native App)，也就是說，開發者可以延續過去的 Web 開發經驗，統一使用 JavaScript 撰寫應用程式，而不需要重新學習其他語言與開發平台。目前比較知名的開發 Wrapper 有 PhoneGap 與 Titanium。這裡我們試著用後者進行開發。

安裝 Titanium

1. 首先下載最新版本的 Titanium 、 Android SDK 與 iPhone SDK (Optional，例如 Windows 開發環境無法使用 iPhone SDK)。
2. 依照官方PDF文件設定 Java 環境與環境變數，注意每種作業系統的設定方式略有出入，以下以 Windows XP 作範例。

Note: Windows 使用者需要特別注意，到 Android SDK 所在目錄執行 SDK Manager.exe 這支程式並至少安裝:
1. SDK Platform Android 1.6, API 4, revision 3
2. Google APIs by Google Inc., Android API 4, revision 2

建立新專案

前面我們提到 Titanium 可以幫助開發者將 Mobile Web App 包裝成行動裝置的原生應用程式(Native App)，首先在 Project type 選項中選擇 Mobile ，接著依照以下範例填入所有欄位，接著按下 [Create Project] 按鈕建立新專案。

Note: 如果專案建立失敗，請重新檢查 Android/iPhone SDK 的位置是否正確。

啟動模擬器

新專案成功建立後，切換到上方的 Test & Package 視圖 –> 選擇 Run Emulator 標籤，點選下方的下拉選單，這裡會列出剛剛安裝的所有 Platforms & APIs，選擇 APIs 1.6 後按下 [Launch] 按鈕啟動模擬器。

Note: 啟動的過程需要一點時間，請耐心等待。啟動過程的錯誤訊息(如果有的話)會印在中間的 Console 中，例如沒有在環境變數中設定JAVA_HOME就會導致 Android 模擬器啟動失敗。

如果使用 Mac 開發則可選擇啟動 Android 或 iPhone 模擬器：

閱讀更多 »

[教學] YUI 3 學習筆記 (6) ─ SimpleYUI

noreply@blogger.com (clay0529) — Sat, 02 Oct 2010 04:19:00 +0000

為了追求效能最佳化，使用 YUI 必須了解各項模組，無形中也加提高了學習門檻。為了造福廣大 YUI 初學者，YUI 在新版的 3.2.0 增加了類似 jQuery 一次下載概念的 SimpleYUI。SimpleYUI 將常用的 JavaScript 功能打包在一起，不清楚模組細節的人可以直接使用各項 YUI 方便的API；略懂部分 UI 模組(例如標籤分頁)的人也可以用習慣的Y.use() 動態載入這些模組，加快開發速度且無須重新學習。

1. 載入SimpleYUI檔案

首先載入SimpleYUI檔案。在HTML的<head></head>標籤之間加入這一行：
<script src="http://yui.yahooapis.com/3.2.0/build/simpleyui/simpleyui-min.js"></script>

前幾篇教學中，為了追求最佳化的效能，一開始我們只有載入 YUI 的核心檔案(6-8 K)，往後才依照需求載入對應的模組，用不到的 js 既不載入也不執行。而 SimpleYUI 的設計理念則與 jQuery 相近，都是一次載入基本款的全部檔案(約35K)，目的是方便初學者學習或使用在中小型專案上。

2. 使用SimpleYUI

SimpleYUI 包含所有常用的功能，並且預先把 YUI() 指定給了全域變數 Y。基本上可以將它視為升級版的JS，接下來我們就可以直覺使用YUI，而不需要思考對應的 YUI 模組。

Note: 習慣使用 YUI.use('*', handleFunction); 的開發者要特別注意 JS 順序，例如將 JS 程式放在</body>結束標籤前或是加上ondomready事件，確保需要的HTML標籤已經載入：

Reference:

YUI 3.2.0: http://www.yuiblog.com/blog/2010/09/07/yui-3-2-0/
SimpleYUI: http://www.yuiblog.com/blog/2010/09/03/coming-inyui-3-2-0-simpleyui/

Yahoo新版首頁效能調校 -- Nicholas經驗分享

noreply@blogger.com (clay0529) — Mon, 06 Sep 2010 16:05:00 +0000

對網頁前端工程師來說，《High Performance Web Sites》書中的14點原則幾乎成為這幾年來網頁前端效能調校的Best Practice。但近幾年網頁前端明顯朝向肥大豐富化、客製化的趨勢，原有的14點原則似乎有點不敷使用(這大概也是作者出第二集《Even Faster Web Sites》的原因吧!)。

Nicholas 在調校新版的Yahoo! 首頁就遇到了相同的問題，由於新版的Yahoo! 首頁允許使用者加入各種客製化模組，例如可以將自己的 Gmail 或 Facebook 加入Yahoo! 首頁，並且在不離開網頁的情況下讀取信件或在塗鴉牆留言等。使用者可能加入無限種組合的客製化模組，此時如果將所有圖檔整合成一張 Sprite Image，或是將所有 JavaScript minimized成一個檔案，雖然可以減少 Request 的數量，但卻會造成客戶端(瀏覽器)下載太多不必要的檔案，反而拖累了網頁開啟的速度。

面對高度客製化的網頁前端效能調校，魚與熊掌不可兼得的兩難下，或許我們可以參考大師的作法：

Performance on the Yahoo! Homepage

View more presentations from Nicholas Zakas.

Reference

[教學] YUI 3 學習筆記 (5) ─ AJAX 下篇

noreply@blogger.com (clay0529) — Sun, 22 Aug 2010 13:41:00 +0000

在上一篇 YUI3學習筆記(4) -- Ajax 上篇中，我們已經使用 YUI 3 提供的 IO 模組完成了跨瀏覽器的 Ajax 效果。但客戶與使用者可能不曉得這個網頁有酷炫的 Ajax 功能，因為他們印象中的 Ajax 應該要有類似下面這樣的圖示才對啊!

學習目標

客戶永遠是對的，我們就來替上篇的範例加上"讀取中..."的圖示吧!

YUI 3 的 Ajax 事件

為了精準控制 Ajax 與後端程式連絡的過程，YUI 3 提供了以下的事件供開發者使用，事件依照發生的前後順序排列如下：

io:start --> io:complete --> io:success --> io:failure --> io:end

這次我們在 HTML 中加入新的 id="loading" 的 <img> 標籤，並且將它的 CSS 樣式設定為 display: none; ，預設不顯示，讓使用者一開始看不見這個圖示。

接著繼續新增兩個 function 負責圖片的顯示與隱藏：

io:start：當 Ajax 開始的時候，將原本隱藏的 loading 圖片顯示出來。
io:complete：當 Ajax 結束後，再度將 loading 圖片隱藏。

到這裡已經完成了 "讀取中..." 的圖示。如果server 回傳的速度太快，導致看不見圖示的話，可以在 showLoading() 函式加上一個 alert() 彈出視窗暫時中斷 Ajax 流程，這樣就能看清楚每一階段的效果了：

[教學] YUI 3 學習筆記 (4) ─ AJAX 上篇

noreply@blogger.com (clay0529) — Thu, 19 Aug 2010 16:01:00 +0000

自從幾年前 "Web 2.0" 開始流行後，似乎每個網頁都要秀點 Ajax 才表示自己跟得上時代。由於 IE 瀏覽器的支援度參差不齊，純粹使用 JavaScript 寫 Ajax 必須要自己處理跨瀏覽器的問題，寫起來就不那麼輕鬆寫意。為了解決這個問題， YUI 3 提供了名為 "io" 的模組方便開發者快速寫出跨瀏覽器的 Ajax。

學習目標

假設~~討厭的~~客戶又提出需求：

聽說 Ajax 不用重新整理網頁就可以更新某一部分的內容，這樣好像比較酷炫。我們希望當使用者按下按鈕後，只要更新某一區塊的文字內容。記得不要重新整理網頁喔! 要用 Ajax !

記住，客戶永遠是對的，用 Ajax 就是比較酷炫。現在我們使用 YUI 3 來實作 Ajax 功能。

1. 載入YUI 3 核心檔案

首先載入YUI 3 的核心檔案。在HTML的<head></head>標籤之間加入這一行：

<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>

2. 準備範例後端程式 demo.php

為了避免跨網域的問題，我們先準備一個簡單的 demo.php 檔案。這個檔案唯一的功能就是回傳"Hello! YUI3"字串：

3. 準備範例 HTML

接下來準備簡單的 HTML 檔案，裡面包含一個 div 標籤與一個 button 按鈕：

4. 載入 YUI 3 的 Ajax 模組：IO

YUI 3 為了提高效率，只在需要的時候才載入相對應的模組。這裡我們要使用的是"io" Ajax 模組，只要用 YUI().use('io', ... ); 即可載入所有相依的JS檔案。使用 io 模組非常容易，只需要注意以下幾個重點：

uri: 給定後端程式所在位置，這樣前端的 YUI 程式才知道要 call 哪個檔案。範例中使用的是準備好的 demo.php。
function showMsg(): 成功取得後端資料後會呼叫這個 function。目前我們先將回傳的字串以彈出視窗 alert() 印出來。
Y.on('io:success', ...): 註冊事件。io 提供了各種事件，開發者非常彈性地處理各種 AJAX 狀態。詳細的 io 事件詳見 API 文件。
Y.io(): 開始執行 AJAX。

實際執行上面的程式碼，可以看到我們已經正確地拿到後端 demo.php 回傳的字串了。

[教學] YUI 3 學習筆記 (3) ─ 動畫特效

noreply@blogger.com (clay0529) — Wed, 18 Aug 2010 14:38:00 +0000

在前兩篇文章中，我們已經學會如何使用 YUI 3 來操作網頁的 DOM 物件與事件處理。除了這些基本的JavaScript操作外，YUI 3 還提供動畫功能，只要簡單幾行程式碼就能讓網頁呈現驚人的效果。

學習目標

假設有一份客戶需求：

當使用者按下按鈕後，將一個紅色區塊漸漸地變成一個200px * 200px的方塊，內容文字變成白色... 喔，對了，背景順便換成半透明的好了，這樣看起來比較順眼。

純粹使用 JavaScript 要做到這樣的效果並不容易，所以我們使用 YUI 3 來完成它。

1. 載入YUI 3 核心檔案

首先載入YUI 3 的核心檔案。在HTML的<head></head>標籤之間加入這一行：

<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>

2. 準備範例 HTML

先準備一份簡單的 HTML 檔案，裡面主要包含一個 div 標籤與一個 button 按鈕：

3. 載入YUI 3 的動畫模組：Animation

前面我們介紹過 YUI 3 為了提高效率，只在需要的時候才載入相對應的模組。這裡我們要使用的是"anim"動畫模組，只要用 YUI().use('anim', ... ); 即可載入一連串相依的JS檔案：

4. 使用 Animation 模組製作動畫效果

使用 YUI 3 製作效果非常容易，基本上只需要做到三件事：

指定DOM物件
告訴它最後要變成什麼樣式
選擇特效

很簡單吧! 但光說不練是沒有用的，接下來我們來一步步完成客戶剛剛提出的需求。

5. 替 DOM 物件加上動畫效果

載入 anim 模組後，首先 new 一個 Y.Anim 物件，然後加上各項細部設定：

node：要加上動畫特效的目標，範例選擇 id='demo' 的<div>標籤，當然你也可以使用class選擇目標標籤。
to：結束時的效果。範例將透明度設定為0.5(半透明)、白色的前景顏色與長寬各200px。
anim.set(...)：給動畫加上時間設定與效果，更多效果請參考 API 文件。
anim.run()：trigger 動畫效果。

在瀏覽器上試著跑跑看，紅色框是不是按著我們的想像逐漸變換顏色與大小了呢? 不過現再我們只完成了一半。回頭看看客戶的需求，這個特效必須讓使用者自己啟動，於是我們還得加上事件處理。

clayliao.f2e

[教學] Nodejs 學習筆記 (4) -- express framework

express - Nodejs MVC Framework

安裝 express

建立新專案

執行 express 新專案

express 的運作方式

[教學] Nodejs 學習筆記 (3) -- 操作 DOM 物件

在伺服器端操作 DOM 物件

在 Node.js 中使用 YUI 3

建立 DOM 物件

輸出結果至瀏覽器

[教學] Nodejs 學習筆記 (2) -- 使用 npm 管理套件

使用 npm 管理套件

Node.js + YUI 3

安裝相依套件

安裝 YUI 3

[教學] Nodejs 學習筆記 (1) -- 建立開發環境

建立開發環境

下載 Node.js

安裝 Node.js

簡單範例實作

前端測試 @ 杭州 D2 前端技術論壇

聯合演講 -- 前端測試

CSS 菜鳥救星 @ 德明財經科技大學

[教學] 前端自動化測試 (下) -- YUI Test + Selenium + Hudson

安裝 Hudson

Create New Jobs

安裝 Hudson Seleniumhq Plugin

[教學] 前端自動化測試 (上) -- YUI Test + Selenium

Why YUITest

準備測試網頁

安裝並啟動 Selenium RC

執行 YUITest 測試

第一次 Mobile Web 就上手 @ 海大資工

參訪 Google 矽谷總部

體驗工作 in Yahoo! 矽谷總部

Yahoo! F2E Summit - 中文手寫輸入法

快速上手 Opera Widget - Twitter Instant Search

[教學] 使用 PhoneGap 跨平台開發手機應用程式

1. 下載 PhoneGap

2. 安裝開發套件

3. Hello PhoneGap!

4. 使用模擬器執行 PhoneGap 專案

[教學] 使用 YQL 跨網域讀取網站內容

開始使用 YQL

使用 YQL 預設的 DataTable

[Facebook] BigPipe 效能優化技術的疑問與解答

Q1. 如何讓 Server 與 Browser 同時處理網頁

Q2. BigPipe 跟 Ajax 有什麼不同？ 為何不用 Ajax 實作？

Q3. BigPipe 真的可以有效提昇網頁的效能嗎？

Google 版的 JSLint - Closure Linter

安裝 Closure Linter

使用 Closure Linter 檢查程式碼

Run Closure Linter

[教學] YUI 3 學習筆記 (8) ─ Widgets

1. 載入YUI 3 核心檔案

2. 準備 HTML Markup

3. 使用 YUI Widget: TabView

[教學] YUI 3 學習筆記 (7) ─ 拖放效果

1. 載入YUI 3 核心檔案

2. 準備一個正方形的 <div> 元素

3. 載入 YUI 3 的 DD 模組

4. 測試拖拉功能

[教學] 使用 Titanium 同時開發 iPhone/Android 應用程式

安裝 Titanium

建立新專案

啟動模擬器

[教學] YUI 3 學習筆記 (6) ─ SimpleYUI

1. 載入SimpleYUI檔案

2. 使用SimpleYUI

Reference:

Yahoo新版首頁效能調校 -- Nicholas經驗分享

Reference

[教學] YUI 3 學習筆記 (5) ─ AJAX 下篇

學習目標

YUI 3 的 Ajax 事件

[教學] YUI 3 學習筆記 (4) ─ AJAX 上篇

學習目標

1. 載入YUI 3 核心檔案

Q2. BigPipe 跟 Ajax 有什麼不同？為何不用 Ajax 實作？