clayliao.f2e

[台灣。旅行] 黃色小鴨 X 高雄光榮碼頭

noreply@blogger.com (Clay Liao) — Sat, 21 Sep 2013 04:21:00 +0000

在新聞頻道照三餐瘋狂宣傳下，黃色小鴨將在台灣巡迴展覽的消息相信已經廣為人知。黃色小鴨的展覽規則之一就是，小鴨本體必須由當地團隊製作/策展。為此台灣的工匠們巧手打造了高18公尺，寬25公尺，體重1000公斤，亞洲第一大（全世界第二大）的小鴨。同時為了避免小鴨沈沒的憾事發生，表皮使用特殊材質製作，不僅美工刀割不破，即便是扁鑽也插不進去！（"扁鑽"的比喻出自愛之船導覽人員）

高雄光榮碼頭

為了避開洶湧的人潮，我們選在9/19日開幕預演的時候搶拍小鴨。原先說好早上八點預演，但實際上小鴨進港時已經接近中午了(熱～)。跟著警告標語一起入鏡的小鴨，產生新的趣味 :) 拍照用小鴨背版防曬準備工作不能少，千萬不能小看南臺灣的豔陽啊！

街拍小鴨

高雄市成為黃色小鴨落腳台灣的首站可是當地的大事，為了迎接小鴨以及遊客們，街上處處可見黃色小壓的裝飾，形成另一道風景：由於颱風來襲，才展出一天的黃色小鴨就已經泄氣進港避風雨。想親臨現場感受黃色小鴨魅力可得再等等囉！

[九州。旅行] 渡遊柳川河

noreply@blogger.com (Clay Liao) — Fri, 13 Sep 2013 05:04:00 +0000

柳川是九州著名的古都水鄉，著名的是觀光特色是搭乘人力遊船與吃鰻魚飯。從鬧區天神三越搭乘西鐵電車大牟田線到「西鐵柳川站」約40分鐘。西鐵有賣售柳川/天滿宮電車+遊船+鰻魚飯(選購)各種組合的套票，價格比分開購買來得划算一些。
剛出西鐵柳川站閘門，馬上就有接待人員趨前詢問手持套票的旅客是否參加游船行程，確認後很快地來了一台接駁小巴。由於這天不是假日，車上並沒有其他旅客。約莫五分鐘到達目的地「川下り松月乗船場」，此時船夫已經在岸邊等待了。

接下來是更加尊榮的包船行程。可以選擇走完整條水道再搭車回西鐵柳川車站，或是遊船至中途點折返，為了節省時間我們選擇後者。
船夫是位開朗的大叔，一路上都用單口相聲的風格介紹沿岸風景人文，偶爾夾雜幾首當地的民謠，十足的日式風情。

沿岸風光

才剛坐穩，迎面而來的是史蹟柳川城崛水門，水門寬度剛好可以容納一艘船，而我們正在航行的河道正是古代的護城河。

沿河會遇到很多像這樣很低的橋，乘客必須矮著身子才能安全通過。船夫先生表示，之前有遊客光顧著拍照，結果不小心掉下水裡。幸好河的水位很低，大約在胸部到小腿這樣的高度而已。

柳川沿岸的風景十分恬靜。此時正值六月天，是繡球花的季節。氣候非常舒適，穿著短袖感覺涼涼的很舒服。如果是夏天來的話，可得租斗笠防曬，冬天船上則是會提供被爐禦寒。

這排紅磚建築是古蹟「並倉」，很多海報或宣傳品上都有印。可惜聽不懂日語，無法理解船夫先生的介紹，只好先按快門再說。

水路四通八達的柳川盛行河童傳說。

這幾隻小水鴨會跟在船旁邊游泳，累了就徑自上岸休息。

水上市場

船行至中繼站，沿岸出現了幾間商店，不過今天只有一家營業，船夫先生徵得我們同意後將船稍微靠岸。買了店家海報上廣告的抹茶冰淇淋與 Asahi Super Dry 啤酒，價格稍貴但尚可接受。隨後店家遞上一瓶茶飲給船夫（不曉得是不是因為客人消費才有的）。
微風徐徐，大口喝下一口啤酒，伴著船夫爽朗的歌聲，這似乎才是柳川完整的面貌呢！

[九州。旅行] 福岡雅虎巨蛋日職初體驗 - 軟銀鷹 V.S. 阪神虎

noreply@blogger.com (Clay Liao) — Sun, 01 Sep 2013 13:32:00 +0000

台灣職棒在2013年經典賽後變得十分火熱，久聞日本人也很熱愛棒球，這次九洲旅行特別查了福岡巨蛋的賽程表，體驗日本道地的職棒應援文化。
福岡巨蛋是日本第二座巨蛋球場，也是唯一的開閉式球場，主場球隊為福岡軟體銀行鷹隊。搭乘福岡地鐵空港線到唐人町站下車，徒步 15-20 分鐘就可以看到氣派的福岡雅虎巨蛋。

聽說非假日的球票並不難買，於是我們就不事先預約，隨性地到了現場才買票。這天是軟銀鷹對戰阪神虎系列賽的最後一場，特殊比賽票價比照假日，最便宜的外野指定席1,800日圓。
在購買的過程中，售票阿姨會（用日語）詢問支持的球隊。我用帶日文腔的英文說了幾次 "SoftBank Hawks" 後終於過關，在不懂日文的情況下成功買到票。

球場周邊

傳奇球員王貞治是前日本職棒福岡軟體銀行鷹隊監督（總教練）兼球團副社長、總經理。2010年7月王貞治棒球紀念館在福岡巨蛋開館（需另外購票參觀），王貞治的巨幅照片隨處可見。

握手廣場有很多名人的等比例手部模型，讓民眾可以近距離體驗跟名人握手的感覺。很多名人的手都比想像的要小很多。

大部份的球迷都會帶著球隊專屬的加油道具來看球，像下圖這樣全副武裝的球迷其實還蠻多的。迫於社會壓力，我們也入境隨俗地在旁邊的賣場裡買了軟銀鷹的加油棒 :)

入場時需要檢查包包，不過當驗票人員發現我們聽不懂日文後就直接放行了。福岡巨蛋是禁帶外食的，裡面的食物售價也偏高，如果時間充裕的話，建議可以在旁邊的 Shopping mall 海鷹城先用餐，不僅價格親民，選擇性也比較豐富。

軟銀鷹 V.S. 阪神虎

比賽開打前有介紹球員以及啦啦隊表演等活動炒熱開場氣氛。

閱讀更多 »

[教學] Grunt 學習筆記(2) - 打造更順暢的開發流程

noreply@blogger.com (Clay Liao) — Sat, 13 Jul 2013 17:47:00 +0000

前文 [教學] Grunt 學習筆記(1) - Getting Started 帶大家認識 Grunt 的基本用法，這裡我們要進一步使用 Grunt 簡化 Web 前端開發流程。

多數前端專案都會引入一些工具如 Node.js, SASS/Less/Stylus, JSHint 以提升專案品質或是可維護性，但這些工具同時也會提高開發流程的複雜度。例如一個 Stylus 專案的開發流程分解動作如下：

第一動：修改 example.styl 檔案並儲存檔案
第二動：執行 stylus 指令以產生 CSS 檔案： stylus [options] [command] [< in [> out]] [file|dir ...]
第三動：切換至瀏覽器視窗，重新整理畫面確認結果
第四動：切換至編輯器視窗，繼續編輯檔案
重複第一動

重新審視這個流程後，我們發現除了編輯/存檔以外的動作其實都能交給 Grunt 自動化處理。有了 Grunt 以後，開發者就可以專心寫程式，省下不斷地切換視窗重新整理的時間與力氣。

範例專案 hello-grunt

範例專案 hello-grunt 公開在 Github 上，本文將重點放在解釋如何讓專案跑起來，對細節有興趣的人歡迎自行參考 Gruntfile.js 的寫法。

1. 下載範例專案 hello-grunt：

$ git clone git@github.com:clayliao/hello-grunt.git

2. 將專案放到本地端開發目錄下，確保能使用 http://localhost/hello-grunt/ 開啓 index.html 檔。例如在 Mac 下可以使用 Symbolic link：
$ cd /Library/WebServer/Documents/
$ sudo ln -s ~/hello-grunt hello-grunt

3. 回到專案目錄下，安裝 Node.js 相依檔案：
$ cd hello-grunt
$ npm install

4. 執行 Grunt，此時 Grunt 會監控 lib/*.styl 檔案與 *.html 檔案，一旦這些檔案被修改過就會作出相對應的動作（例如執行 stylus command）並且通知瀏覽器重新整理。
$ grunt

安裝 Livereload 瀏覽器外掛

Livereload 的主要功能是通知瀏覽器重新整理畫面，這個方便的功能已經被整合在 grunt-contrib-watch plugin 中。

Livereload 支援多數主流瀏覽器。以 Chrome 瀏覽器為例，下載並安裝完成後右上角會出現 Livereload 的小圖示，滑鼠點擊小圖示即可啓動 Livereload（請再次確認 $ grunt 正在執行中，否則會出現錯誤訊息）

體驗全新的開發流程

準備工作就緒後，就讓我們來親身體驗 Grunt 帶來的好處。首先使用編輯器開啓 example.styl 並且試著改變網頁中 <h1> 標題的顏色。起初 <h1> 標題預設是黑色的：

接下來我們試著將顏色改為紅色（存檔後請務必讓雙手離開鍵盤，用心感受一下這個 moment）。此時 Grunt 偵測到了 lib/example.styl 檔案被修改過，於是自動執行 stylus command 編譯新的 CSS 檔案：

編譯成功後，瀏覽器馬上自動重新整理，並且 <h1> 標題也被改成紅色了！另外也可以修改 index.html 的文字內容，您會發現瀏覽器幾乎能夠同步更新內容：

小結

專案 hello-grunt 是簡化過的範例，目的是要展示如何使用 Grunt 將重複的動作自動化，讓開發流程變得更流暢。您可以視需求將 Stylus 換成 SASS/Less，也可以發掘更多的 Grunt 外掛讓自己更上一層樓。

[教學] 分享照片到 Yahoo! 氣象 App

noreply@blogger.com (Clay Liao) — Sat, 06 Jul 2013 03:11:00 +0000

榮獲2013年蘋果設計獎（Apple Design Awards）的 Yahoo! 氣象 App (iOS / Android) 是我最常用的天氣應用程式。除了豐富的氣象訊息外，其漂亮的動態氣象背景圖也是一大特色，查詢氣象資訊之餘還能順便欣賞世界各地的照片。

這些高品質的天氣照片都是 Flickr 用戶提供的。也就是說，每個人都有機會讓自己的照片登上 Yahoo! 氣象 App。只要將您的 Flickr 天氣照片加上地理資訊後提交至 Project Weather 社團，經審核通過就可以在天氣 App 上讓大家都看到囉！（詳見官方說明）

經過一段時間的募集後，現在 Flickr Project Weather 上熱門城市的照片水準都已經高不可攀。專業攝影水準的人當然可以正面對決，但是普通鄉民想登上Yahoo! 氣象 App 的話，就只能靠「開發處女地戰略」了。這次我投稿的地點（日本的熊本市、佐世保市以及柳川市）都還在使用系統預設照片，猜想這些地點應該都還沒有人投稿。實際測試後，果然只要符合規定的照片都很有機會通過審核。

照片登上氣象 App 後的畫面如下，其右下角會標示作者 Flickr id：

截至目前小弟共有四張照片上榜，拍攝地點都在日本九州：

熊本城/九州熊本縣（day/cloudy）

柳川/九州柳川市（day/clear）

千陽號/九州佐世保市（day/cloudy）

豪斯登堡/九州佐世保市（day/cloudy）

[教學] Grunt 學習筆記(1) - Getting Started

noreply@blogger.com (Clay Liao) — Tue, 25 Jun 2013 16:42:00 +0000

一般來說，網站上線前都要經過壓縮、測試、打包 package 等佈署動作，在 Linux/Unix 環境下，我們通常將這些指令 (shell script) 寫在 Makefile 裡方便自動化執行。不過很可惜地，這些指令並不具備跨平台的能力，也就是說，在 Windows 與 Linux/Unix 各有不同的寫法。

Grunt 是一套基於 NodeJS 的 JavaScript Task Runner 工具，它可以跨平台（Windows 系統也能用）、沿用 JavaScript 語法（免學 shell script），還有眾多的 Plugins 支援 CoffeeScript、Handlebars、JSHint、Less、Sass、Compass 等常用工具。

Getting Started

學習 Grunt 最快的方法就是建立一個可執行的範例。本文的範例將會建立一個 Grunt Task ，完成後就可以讓 Grunt 利用 uglify 工具自動化壓縮 JavaScript 檔案，以後上線部署再也不用純手工壓縮了！

首先我們依照 Getting Started 教學新開了 Gruntfile.js 以及 package.json 兩個檔案，接著在專案目錄下執行命令 grunt ，但是迎面而來的卻是令初學者傻眼的錯誤畫面：

錯誤訊息回報 ugligy:build 這個 Task 出錯了。為了找出原因，我們回過頭來檢查 Gruntfile.js ，看看這個 Task 做了什麼事情。

ugligy:build Task 會將 /src 目錄下的原始檔 helloworld.js （變數 pkg.name 即為範例中的 "my-project-name"，這裡我們將它改為 "helloworld" 方便說明）壓縮處理後，放到 /build 目錄下並且命名為 helloworld.min.js（"helloworld" 即變數 pkg.name ）。

為了順利執行 grunt，我們在專案目錄下建立一個空的 src 目錄，並且在裡面新增一個名為 helloword.js 的 JavaScript 檔案，此外，再新建一個空的 build 目錄用來放置壓縮處理過的結果。完成後的目錄結構如下所示：

回到專案目錄下重新執行指令 grunt，此時取而代之的是是令人放心的成功訊息！（撒花）壓縮處理過的新檔案如預期地新增到 build 目錄下：

Pure CSS -- 超輕量化 CSS Framework

noreply@blogger.com (Clay Liao) — Tue, 18 Jun 2013 11:13:00 +0000

Pure 是 YUI 團隊新推出的開源專案，才推出不久就在 Github 上累積了將近 3800 個 Star 。它是一套非常輕量化的 CSS framework，提供了常用的網頁 UI 元件樣式：Base 、Grid、Forms、Buttons、Tables、Menus，。Pure 的預設樣式正是正流行的 Flat Design ，開發者可以直接引用 Pure 打底 CSS，快速地建構出跨瀏覽器且具備 Responsive Design 的網站。

相較於各種 CSS/Front-end framework （ex, Bootstrap）動輒 100KB 起跳的 CSS 檔案，Pure 走的是極簡輕量化路線，只提供最通用的 CSS 元件，全部的 CSS 加起來只有 18.7KB (v2.0)！

範例Layouts

Pure 檔案雖小，但卻也十分夠用。以下是 YUI 團隊提供的幾個範例模板：

Landing Page

Photo Gallery

Email

整合工具

熟悉 Yeoman 的開發者只要安裝 generate-pure 套件後，就可以使用 yo pure 指令開始新的 Pure 專案。此外 DocPad 的愛用者也有整合工具 yui-purecss.docpad。

Skin Builder

每個網站都希望保持自己的風格，YUI Skin Builder 是很方便的視覺工具，幫助我們快速地建構不同的樣式。舉凡圓角角度、配色色碼等，都可以客制化新樣式，不再需要跟大家一起穿制服了！

淺談遊戲化產品設計

noreply@blogger.com (Clay Liao) — Mon, 04 Mar 2013 03:37:00 +0000

Gamification 指的是「遊戲化」，主要是在原本生硬的產品/服務加上一些好玩的元素，並且引導使用者在不知不覺中完成我們期望的行為。「Gamification for Webapps」投影片中介紹兩種遊戲驅動力：「約定」與「社會地位」，並使用幾個現實生活中常見的產品/網路服務/行銷活動作為範例，讓大家更了解遊戲化的強大威力。

對遊戲化主題有興趣的人，歡迎繼續閱讀下列兩份資料。投影片中遊戲驅動力的靈感正是來自於TED演講 The game layer on top of the world ：

1. [TED] Seth Priebatsch: The game layer on top of the world

2. Gamification 遊戲化是在 Play 蝦米 Game

Gamification 遊戲化是在 Play 蝦米 Game from Bob Chao

3. 獎金獵人 - Gamification vs. UX / 張芷芸 (花水木/hanamizuki)

超理性使用者介面設計 - Data-driven A/B Testing @ Webconf Taiwan 2013

noreply@blogger.com (Clay Liao) — Mon, 14 Jan 2013 10:30:00 +0000

創下 NT$1,300 門票四分鐘完售紀錄的 Webconf Taiwan 圓滿落幕囉！這次的活動會場分為技術軌與設計師軌，今年很榮幸受邀在設計師軌分享「超理性使用者介面設計 - Data-driven A/B Testing」。

A/B Testing 是大流量網站改善介面的秘訣。根據現場調查的結果，只有少數聽眾（目測約五位）執行過類似的實驗。A/B Testing 的理論根據是統計學的假設檢定，有效的測試能夠以數字呈現出每個頁面上的像素、色碼、排版的使用者回饋，讓設計師不再只是憑感覺做設計，配合實驗的佐證才更專業！

超理性使用者介面設計 - Data-driven A/B Testing from Clay Liao

[分享] 網頁 UI 設計苦手的實用工具包

noreply@blogger.com (Clay Liao) — Wed, 09 Jan 2013 05:33:00 +0000

在許多中小企業或是個人工作室裡製作網站經常是一條龍式的「垂直整合」：工程師得身兼架設伺服器、資料庫甚至是... 介面設計。介面設計對許多缺乏美感的阿宅工程師來說這是一大挑戰，因為多數的情況下老闆/產品經理看不懂 Database schema ，但是卻能一眼看出網站漂不漂亮。以下分享一些個人常用到的工具/資源給有相同困擾的工程師。

免費工具

Pencil Project

Pencil Project 是正港免費的 Wireframe 軟體，也是我目前使用的主力工具。它需要下載安裝，支援 Windows、Mac、Linux 平台，也提供 Firefox 外掛。使用草稿除了非常方便溝通外，使用 Pencil Project 預先定義好的 UI 元件也能避免老闆/客戶/產品經理想出太前衛的介面。

Cacoo

與 Pencil Project 不同的是，Cacoo 是一個「網站」工具，只要有瀏覽器就能使用。Cacoo 提供付費加值功能，如果是個人使用的話，免費版本也算很夠用了。

付費工具

Balsamiq

Balsamiq 可以做出高品質的手繪風格草稿設計圖，介面很容易上手。不考慮價格的話，Balsamiq 絕對是首選推薦軟體。註冊 Balsamiq 帳號可以獲得 30 天試用期，您一定要試試看！

Mockingbird

Mockingbird 也是網站形式的工具，可以線上免費試用，如果要取得所有功能需要付費。

其他工具

Yahoo! Design Pattern Library

非專業的 UI 設計人員常常用錯 UI 元件，其實每個 UI 元件都有其背後隱含的意義，而這些細節往往是介面好壞的關鍵。如果沒有受過專業的 UI 設計訓練的話，請趕快上 Yahoo! Design Pattern Library 惡補一下。裡面有對介紹每個 UI 元素與建議用途，有了這些背景知識，設計出的介面絕對會更上一層樓！

Flickr

使用高品質的圖可以讓網站的質感大加分，不過臨時要用才出外景可能趕不上專案時程。Flickr 提供大量高品質的圖片，但是要特別注意照片的授權。如果是公開用途的話，在 Flickr 搜尋的時候別忘了將 "Only search with Creative Common-licensed content" 選項打勾，以免不小心侵權喔！

IconFinder

一些漂亮的小圖示可以達到畫龍點睛的效果。對於許多缺乏美感，無法使用 Photoshop 自製 Icon 的阿宅工程師來說，直接來 IconFinder 找素材是最快的了。

UI Cloud

有時候要做一個 UI 元件（如搜尋框、下載按鈕），但是又不曉得該如何設計樣式才會好看，此時 UI Cloud 可以幫上忙。在 UI Cloud 可以找到各種不同的 UI 元件設計，非常適合設計新手找靈感。

Reference

誰在追蹤你的上網行為？讓 Mozilla Collusion 告訴你

noreply@blogger.com (Clay Liao) — Wed, 02 Jan 2013 07:34:00 +0000

當我們上網時，許多公司也在背後忙著記錄所有的瀏覽/點擊行為，即便開啟私隱模式或不使用個人帳號登入也無法完全躲過各種追蹤技術。藉由這些訊息，網路公司可以分析並辨識出每個獨立的用戶。如今的網際網路不只知道你是一隻狗，還知道你喜歡吃哪一個牌子的狗食！想要在上網同時保有自己的隱私是愈來愈困難了。

好消息是，這些資訊能讓我們上網更有效率：它讓廣告更為精準，也讓網站得以提供個人化訊息；但是反過來說，它也可能遭到有心人利用甚至侵犯隱私。事實上這些追蹤蒐集而來的個人資訊已經成為一個龐大且成熟的產業，「搜尋引擎沒告訴你的事 The Filter Bubble: What the Internet Is Hiding from You」這本書裡有更深入的探討。

然而技術本身是中立的，端看使用資訊的人是誰。Gary Kovacs 的 TED 演說 "Tracking the trackers" 提醒我們，即便憑個人之力無力扭轉大局，但我們至少有權知道哪些網站正在追蹤自己的上網行為。

要找出這些資訊並不難，事實上，它們都被記錄在瀏覽器中，只不過沒有相關技術的一般網民實在難以接觸。Firefox 的 Mozilla Collusion 外掛可以協助我們分析解讀這些生硬的資料，並且以視覺化的方式即時地呈現出正在追蹤我們上網行為的網站。

使用 Mozilla Collusion

下載安裝 Mozilla Collusion 後啟動 Firefox 瀏覽器，在選單列中點選 [Tools] -> [Collusion Graph] 就可以啟動 Mozilla Collusion：

Mozilla Collusion 視窗呈現所有正在追蹤上網行為的網站與它們之間的關係，每開啟一個網站就會即時更新關係圖，如此我們就能清楚地看到上網背後複雜的追蹤行為：

上圖是造訪了幾個較知名網站的結果，背後的追蹤網站已經有這麼長長一串。下次造訪一些不知名論壇網站前可得留意背後那些虎視眈眈的眼睛喔！

用 NodeJS 祝大家聖誕快樂！

noreply@blogger.com (Clay Liao) — Tue, 25 Dec 2012 07:04:00 +0000

正確地說是 npm 的彩蛋。只要在命令列輸入以下指令就可以打開 npm 的聖誕樹彩蛋囉！

npm xmas

[教學] 使用 Yeoman 優化 WebApp 開發流程

noreply@blogger.com (Clay Liao) — Mon, 17 Dec 2012 06:01:00 +0000

Yeoman 是一個很有意思的開源專案，它整合了許多開發者常用的工具，包含 Twitter Bootstrap、Compass、Modernizr、CoffeeScript、Jasmine、PhantomJS、Grunt 等。使用 Yeoman 可以一鍵快速啟動新 WebApp 專案，並且讓開發流程變得更加流暢。

安裝 Yeoman

為了使用上述列出的開發工具，Yeoman 在安裝步驟會指導開發者安裝這些工具。在命令列執行以下指令，它會列出安裝完成以及尚未安裝的工具，只要依照提示的指令依序安裝即可：

curl -L get.yeoman.io | bash

安裝完成後，快速瀏覽一下 Yeoman 的基本指令：

yeoman init      # Initialize and scaffold a new project using generator templates
yeoman build     # Build an optimized version of your app, ready to deploy
yeoman server    # Launch a preview server which will begin watching for changes
yeoman test      # Run a Mocha test harness in a headless PhantomJS
yeoman install   # Install a package from the client-side package registry
yeoman uninstall # Uninstall the package
yeoman update    # Update a package to the latest version
yeoman list      # List the packages currently installed
yeoman search    # Query the registry for matching package names
yeoman lookup    # Look up info on a particular package

開新專案

在一個空的專案資料夾中，執行以下指令開啟一個全新的 WebApp 專案。過程中 Yeoman 會問一些像是要不要使用 Compass 或是 Twitter Bootstrap 之類的問題，請依照個人或專案需求選擇：

yeoman init

過程中可能需要下載一些檔案。專案建立完成後檢視一下目錄結構，跟網站相關的檔案都放在 app 資料夾下：

檢視成果

在專案目錄下執行以下指令即可啟動 Server。此外，Yeoman 還會揪甘心地自動開啟瀏覽器並顯示結果！

yeoman server

體驗 Yeoman 神奇之處

Yeoman 內建了許多 Generator、Unit Test 、Package Management 等實用功能。除了整合許多工具外，很多細節上也都看得到 Yeoman 的用心。
舉例來說，使用 Compass 寫 CSS 時，我們需要在編輯器寫 Code 、存檔、編譯 CSS、切換瀏覽器並且重新整理才能看到成果。在 Yeoman 的世界裡，這一連串的動作都是自動完成的。開發者只要在（下圖右上）編輯器寫 code 並存檔，Yeoman 會立馬在背景處理編譯等動作（下圖右下），然後就能在瀏覽器裡直接看到結果（下圖左），整個過程如行雲流水般一氣呵成，連[重新整理] (command/ctrl + R) 都省下來了！
Yeoman 不僅是套實用的 web 開發工具，在使用的過程中，也讓我們深深體會到高手工程師將不必要/重複的動作自動化的好習慣。無論您最終是否選擇使用 Yeoman ，這個觀念依舊是非常值得學習的。

[教學] 整合 Sublime Text 2 與 JSLint

noreply@blogger.com (Clay Liao) — Mon, 03 Dec 2012 05:37:00 +0000

Sublime Text 2 擁有美觀的介面、正確的 Syntax highlight 功能、便利的搜尋工具以及各式各樣的外掛工具等，是最近上手且非常推薦的一款程式碼編輯器，同時支援 Windows、Mac以及Linux平台。這篇文章是寫給 JavaScript 開發者，介紹如何整合 Sublime Text 2 編輯器與 JSLint ，設定完成後每次存檔都會自動執行 JSLint ，確保開發流程不被中斷且所有的 JavaScript 程式碼都能通過 JSLint 檢查！

安裝 Sublime Package Control

Sublime Package Control 方便我們管理各種 Sublime 工具。依照以下步驟安裝

Step 1: 使用快速鍵 Ctrl + ` 開啟 console 介面。

Step 2: 複製以下指令並貼到最下方的命令列中，按下 enter 開始安裝 Sublime Package Control：

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

看到安裝成功訊息後，重新啟動 Sublime Text 2 完成安裝程序：

整合 JSLint

接下來我們要使用 Package Control 安裝 JSLint 工具。在螢幕上方的工具列選擇 [Sublime Text 2] -> [Preferences] -> [Package Control] ：

在選單中選擇 [Package Control: Install Package]：

這裡列出了許多可以安裝的 Package，在搜尋框中輸入 "jslint" 並選擇安裝 sublime-jslint Package：

開啟新的檔案 test.js ，這裡故意寫出可執行但不符合 JSLint 規則的 JavaScript 程式碼，由於已經安裝了 sublime-jslint ，所以可以使用快速鍵 ctrl + j 執行 JSLint 檢查，注意下方的對話框提醒我們程式碼第一行的陣列應該使用 [] 取代 new Array()！相較於複製程式碼並貼上 JSLint 網站的傳統作法，這樣是不是方便許多呢？

儲存檔案後自動執行 JSLint

雖然 ctrl + j 的方式已經很方便了，不過畢竟還是需要開發者手動操作。這裡我們要使用一個小技巧，只要加上簡單的設定，就能在每次存檔都讓 Sublime Text 2 自動執行 JSLint !

回到上方的工具列選擇：[Sublime Text 2] -> [Preferences] -> [Package Settings] -> [JSLint] -> [Settings - User]

此時會開啟一個空白檔案 sublime-jslint.sublime-settings，複製並貼上下方設定範例，其中 "jslint_options" 可依照個人習慣與專案需求更改：

{
    // jslint 參數
    "jslint_options": "--browser --node --indent 4 --predef YUI",

    // 每次存檔時自動執行 jslint
    "run_on_save": true,

    // debug flag.
    "debug": true
}

完成後的檔案如下圖，以後每次撰寫 JavaScript 存檔時，編輯器都會自動執行並時時提醒我們通過 JSLint 檢查，如此一來就能避免許多不良的 JavaScript 語法，程式碼的品質也會大幅提高喔！

[教學] YUI 學習筆記 - 將 jQuery 變成 YUI 模組

noreply@blogger.com (Clay Liao) — Wed, 07 Nov 2012 02:45:00 +0000

儘管 YUI 提供了許多官方與社群貢獻的模組，但難免無法涵蓋所有專案的需求。這裡我們要試著在以 YUI 的專案裡引用 jQuery UI 裡的日曆模組作為範例，讓 YUI 與其他函式庫並存在同一個專案中。這個方法不限於 jQuery ，您可以使用相同的方法引用各種 JavaScript 程式碼。

直覺但不建議的作法

jQuery UI 模組基本由三個部分組成：jQuery 核心 JavaScript、jQuery UI JavaScript 以及該特定模組的 CSS 樣式，直覺上多數開發者會使用 <script> 以及 <link> 直接引用這些檔案。雖然這樣也能正常運作，但是卻無法用到 YUI 的模組管理功能。在這個使用情境下，我們其實還能做得更好。

使用 YUI Loader 管理模組

YUI Loader 不僅能用來管理 YUI 自己的模組，也能靠著簡單的設定將 jQuery （或任何 JavaScript）變成 YUI 模組來使用，其設定檔的寫法如下：

YUI({
    module: {
        // 在這裡設定模組名稱、檔案路徑與相依關係
        ...
    }
}).use("模組名稱", function (Y) {
    // 相依的模組都已經準備就緒
    // code here
});

在這個範例中，我們要提供的設定有 jquery、jquery-ui 與 jquery-ui-css 三個模組，並且分別指定檔案路徑與相依關係（jQuery UI 模組需要 jQuery 以及 CSS 才能正常使用）：

在網頁的任何地方使用 YUI().use("jquery-ui") ，此時 YUI Loader 就會自動去下載 jquery-ui 以及相依的 jquery + jquery-ui-css 兩個模組，開發者不需要自己維護，甚至不需要考慮引用 JavaScript 檔案的前後順序，就像... YUI 原生的模組一樣！同時 jQuery 的程式碼也能無痛轉移，所有的程式碼都能正常地執行。

進階群組設定

如果這些模組檔案都是在相同 domain 下的話，還可以更進一步使用 group 將它們群組起來方便管理。下一個範例在 YUI 的基礎上同時使用 YUI 以及 jQuery 的日曆模組，我們可以清楚地比較兩者之間的差異。

完成後的範例（點選右上方的導航列可以看到每個部分的程式碼與執行結果）：

認識 TypeScript

noreply@blogger.com (Clay Liao) — Mon, 15 Oct 2012 06:26:00 +0000

TypeScript 是微軟近期推出的開放原始碼專案，其專案負責人是 C#, TurboPascal 之父 Anders Hejlsberg。TypeScript 的主要目的是利用編譯的方式加強 JavaScript 不足的部份，幫助（有其他語言基礎的）開發者更容易撰寫 JavaScript。

TypeScript 的特色

Compile JavaScript 以降低開發門檻並非 TypeScript 新創的觀念，概念上相似且較知名的專案還有 CoffeeScript 以及 Google Web Toolkit（GWT）等。看過 TypeScript 的範例後，我認為與其他專案相較之下， TypeScript 的特點有：

不需要學習新的語法，且完全相容於原生 JavaScript。
為 JavaScript 加入強型別的編譯期檢查與 "class" 物件導向語法。
可以編譯出可讀性高的 JavaScript 程式碼。

TypeScript 的設計哲學看來挺不錯的（特別是前兩點），接下來我們試著使用實際的範例來理解它。

動手玩 TypeScript

安裝 TypeScript

TypeScript 承襲微軟容易安裝的產品特性。我們可以使用 Visual Studio 2012 整合 TypeScript，或是使用 npm 安裝 Node.js 版的 TypeScript 套件：

$ npm install typescript -g

100% 相容 JavaScript 語法

TypeScript 檔案的附檔名為 .ts，首先我們建立一個新檔案 greeter.ts 並填入以下 JavaScript 程式碼。

使用命令列編譯 greeter.ts，編譯後產生新檔案 greeter.js（附檔名不同）:

$ tsc greeter.ts

比較編譯前後的檔案。您沒看錯，兩個檔案內容確實是一模一樣。

這個範例貌似無聊，實際上卻非常重要。這意味著 TypeScript 能"向下相容"於現有以 JavaScript 撰寫的專案（不需要改寫就能移植到 TypeScript！），開發者也能延續既有的經驗，繼續使用 YUI、jQuery 等 Library。
此外，相較於 CoffeeScript （自定語法）、GWT（ Java）經由編譯器輸出 JavaScript 的設計，我比較偏好 TypeScript 相容原生 JavaScript 的語法設計。主要原因是，當 JavaScript 愈來愈重要，開發者就更應該掌握實作細節，而非規避語法將它交給編譯器處理。若是 GWT 的編譯錯誤產生了 bug，或是需要進階調整 JavaScript 效能時，依賴編譯器的開發者除了立下宏願追編譯器原始碼找出根本原因，否則就真的束手無策了。

加強 JavaScript - 靜態型別

多數 Script 語言的型別錯誤只能在執行期被發現，JavaScript 也不例外。不過，在 TypeScript 的強化下，JavaScript 也加入了靜態型別（static typing）語法，讓 JavaScript 也能像 Java 一樣，在編譯期檢查型別了！

以下範例的 Greeter() 函式只接受字串作為參數，這時候我們故意傳入錯誤的型別（陣列物件），看看 TypeScript 會如何反應：

沒有意外地，TypeScript 很正確地在編譯期間發現了型別錯誤並提示錯誤訊息：

回頭檢查輸出的結果，TypeScript 編譯完成的程式碼彷彿出自 JavaScript 行家的手筆，可讀性非常高：

加強 JavaScript - Classes 物件導向

JavaScript 也是物件導向語言（使用 Prototype 而非 Class），不過很少人會寫。TypeScript 實作了尚未拍板定案 ECMAScript 6，使得開發者能夠使用順眼習慣的 Class 語法在 JavaScript 設計物件（下圖左）。下圖右則是經由 TypeScript 編譯後，正港的 JavaScript 物件導向寫法：

小結

總體來說 TypeScript 確實是非常令人期待的專案。我非常喜歡 TypeScript 在語法上相容 JavaScript 的設計概念。它不新創自己的一套語法，而是加強 JavaScript 不足的部份，並幫助更多開發者學習/使用 JavaScript。值得注意的是，尚未定案的 ECMAScript 6 經過多年反覆修改後，我們不能確定 TypeScript 的相容程度是否會因為某種程度的妥協導致大打折扣，且 TypeScript 目前為預覽版，在正式版本推出前暫時不建議使用在正式專案中。

Reference

Yahoo! 釀的酒 - 淺嚐 Cocktails @ 北京 HTML5 開發者論壇

noreply@blogger.com (Clay Liao) — Wed, 22 Aug 2012 14:45:00 +0000

繼去年參加淘寶主辦的D2前端技術論壇分享前端測試，今年很榮幸地再度到 HTML5 開發者論壇介紹 Yahoo! 的新一代 Cocktails 技術。

HTML5 開發者論壇是北京前端開發者的年度盛會，贊助商一字排開幾乎涵蓋了大陸所有主流的互聯網公司，與會的開發者超過一千人！上午的主題峰會由 Google、Opera、微軟、百度等公司分享其在 HTML5 領域的努力成果，現場人山人海，非常熱鬧。

下午場次則分成瀏覽器、TV、安全與支付、渠道與合作、工具與應用等五大專場。我的場次在工具與應用專場，分享《Yahoo! 釀的酒 - 淺嚐 Cocktails》，內容著重在今年(2012)四月開放原始碼的 Node.js Framework- Mojito。演講投影片已上傳並空開，歡迎有興趣的同學參考：

Yahoo! 釀的酒 - 淺嚐 Cocktails from Ying-Hsiang Liao

HTML5峰會歸來
新浪微博討論：#HTML5在路上# #HTML5峰會#
優酷視頻： http://v.youku.com/v_show/id_XNDQyNDU1Mzk2.html

YUI Masonry - 快速打造 Pinterest 流布局

noreply@blogger.com (Clay Liao) — Thu, 09 Aug 2012 13:08:00 +0000

自從 Pinterest 成為近期內熱門的網站後，其強烈視覺風格的瀑布流版型在短時間內成為眾網站仿效的對象。不久前實作 Shopping+ 購物搜尋時意外發現 YUI 竟然沒有對應的外掛可以使用，於是便興起了打造 YUI Masonry 並開源貢獻給社群的念頭。

專案名稱：YUI Masonry

http://yui-masonry.appspot.com/

http://yuilibrary.com/gallery/show/masonry

快速上手

YUI Masonry 的使用方法很容易，只要短短幾行程式碼即可創造出類似 Pinterest 的瀑布流佈局效果：


<!--Include YUI seed on your page.-->
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
<script>
YUI().use('gallery-masonry', function (Y) {
    var masonry = new Y.Masonry({
        node: '#container',
        itemSelector: '.item'
    });
});
</script>

線上文件

在 YUI Masonry 官方網站可以找到更多進階的用法與範例程式碼：

YUI Masonry 使用 YUIDoc 建立的 API 文件，方便開發者查詢 Masonry 物件裡的屬性與方法：

Open Source on YUI Gallery

YUI Masonry 的原始碼是公開的，您可以在 GitHub 上找到原始碼。此外，YUI Masonry 也貢獻給了 YUI Gallery 社群，所有的檔案都 Host 在 Yahoo! 的 CDN 服務上，開發者完全不需要自行 Host，也不需要擔心網路效能問題：

Reference

[教學] YUI 學習筆記 - 成為 YUI Contributor

noreply@blogger.com (Clay Liao) — Tue, 31 Jul 2012 03:51:00 +0000

除了 YUI 核心團隊提供的功能外， YUI 也非常歡迎社群貢獻程式碼與模組。開發者可以在 YUI Gallery 找到各式各樣的模組，並且這些模組都是 host 在 Yahoo! 的 CDN 上，效能掛保證的喔!

準備工作

GitHub：YUI 以及 YUI Gallery 都將原始碼公開在 GitHub 平台上，首先必須要申請帳號並安裝設置好 Git 環境。更多 Git 操作方式詳見底下的 Reference。
YUI Builder：完成的 JavaScript 原始碼必須使用 YUI Builder 編譯成統一格式的 YUI 模組。YUI Builder 需要 Ant 以及 Java 環境(JDK 或至少需要 JRE)才能運行。

簽署 YUI CLA

為了確保程式碼不會在日後因侵權或其他法律原因被下架，Contributor 在貢獻原始碼前必須簽署 YUI CLA，以確保該模組是由作者或是足以代表專案的人上傳的。YUI CLA 以前必須傳真簽名同意書，現在只要線上作業即可完成：

提交程式碼

YUI 採用 Git 做版本控制，首先我們先 fork 一份完整的 yui3-gallery 專案到自己的目錄下：
https://github.com/yui/yui3-gallery

注意左上角的目錄名稱是 yui / yui3-gallery，代表我們在專案的主目錄裡，點選右上方的 [Fork] 按鈕：

回到自己的目錄中，我們發現自己的目錄下已經複製了一份 yui3-gallery。日後我們只要在自己的專案目錄下工作即可：

開啟新的專案

註冊成為 YUI Gallery 會員後，我們可以在左側導行列中找到新增模組連結。填寫模組的描述與範例程式碼後儲存，即可送交 YUI Team 審核。如果沒有意外的話，根據經驗隔天(時差因素，YUI Team 在美西時區上班)都會收到核准通知。

專案開好後，點選上方的 [Show Setup Info] 繼續接下來的步驟：

這份 Setup Info 是依據健立專案實填的資訊產生的，也就是說，只要在 console 複製貼上指令就可以建立該有的 Git local 目錄並 Build 出所有的檔案囉！

經過 YUI Builder 產生的檔案結果如下，有原始碼、debug ，也有壓縮過的檔案：

申請 CDN Request

當一切都就續且完善測試過，我們就可以申請將程式碼部屬到 CDN 上。點選上方的 [Submit CDN Request] ，美西時間每周三下午 YUI Team 會做一次上傳。

選擇這次變更的 Commit：

確認成功訊息！等到最近一次的 CDN push，我們的模組就可以在 CDN 上使用囉！

當 CDN 上傳成功後，使用者就能像使用官方模組一般使用我們所貢獻的代碼：

YUI().use('gallery-masonry', function (Y) {
    // do something here
});

[分享] YUI is Sexy @ JSDC 2012

noreply@blogger.com (Clay Liao) — Tue, 03 Jul 2012 12:54:00 +0000

啊嗚（josephj）是前 Yahoo! 前端工程師兼傳教士，"YUI is Sexy" 是他在 JSDC 2012 分享的主題。以淺顯的語言說明 YUI 的設計概念與優勢，包含 YUI 的模組化、物件導向、動態加載，以及其任職的新創公司 miiiCasa 的實戰經驗分享。
這是個老少咸宜(?)的 Session，只要不到 30 分鐘的時間，就能帶您重新認識一個優質的 JavaScript Framework 喔！

YUI is Sexy - 使用 YUI 作為開發基礎

View more presentations from Joseph Chiang

Shopping+ 購物搜尋 - Pinterest 流商品搜尋

noreply@blogger.com (Clay Liao) — Mon, 04 Jun 2012 04:07:00 +0000

Pinterest 是近期最火紅的圖片收藏社群網站，它憑著創新的點子與令人眼睛一亮的介面在短時間內成為網路圈最火紅的焦點。此外，Pinterest 漂亮的瀑布流版型也成為許多網站爭相仿效的範本。

其實，只要使用現成的 jQuery Masonry 就能做到一模一樣的功能喔。我認為瀑布流的圖片呈現方式非常適合用來展示商品，這次的 jQuery Masonry 練習作品以 Yahoo! 購物中心做為對象，實做了 Pinterest 流的 Shopping+ 購物搜尋。

DEMO 功能展示

作品名稱：Shopping+ 購物搜尋

http://pupushopin.appspot.com/

新介面 - Pinterest 流視覺化商品搜尋

Before - 目前有兩種方法可以搜尋 Yahoo! 購物中心的商品 (重點在搜尋介面)：

1. 直接上 Yahoo! 購物中心搜尋：

http://search.buy.yahoo.com.tw/search.php?p=%E6%B4%8B%E8%A3%9D

2. 使用 Yahoo! 購物搜尋 ( http://tw.shopping.search.yahoo.com/ (可同時搜尋拍賣、超級商城與購物中心)：
http://tw.shopping.search.yahoo.com/search?p=%E6%B4%8B%E8%A3%9D

After - 視覺化大圖購物搜尋介面
http://pupushopin.appspot.com/?q=%E6%B4%8B%E8%A3%9D
上面兩個搜尋方式功能都非常完整，不過圖片略小。竊以為 Shopping+ 購物搜尋以圖片為主的呈現，看起來非常賞心悅目：

搜尋建議 - 關鍵字自動補完 (Auto Complete)

"搜尋建議" 是找商品不可或缺的功能，Shopping+ 購物搜尋也把它整合進來囉！

使用技術/API

Shopping+ 購物搜尋使用到的技術平台與 API 如下：

結論

實做產品是學習新技術最好也最有成就感的方式之一，Shopping+ 購物搜尋就是我的 jQuery Masonry 練習小品。它的功能簡單(只是改良 Yahoo! 購物中心的搜尋介面)，不過卻很實用喔！
閱讀更多 »

[Hackday] 真。雅虎無雙猛將傳 - 社群人才管理系統

noreply@blogger.com (Clay Liao) — Wed, 30 May 2012 12:40:00 +0000

Hackday 是 Yahoo! 內部幾乎每年都會舉辦的活動，在 Hackday 這天，每個志願參加的 Engineer/PM 都可以放下手邊工作，沒有限制地把自己的 Idea 在短時間內實做出來，並且利用 90 秒的時間在所有同事面前 Demo。這次 Hackday 一如往常地吸引了上百位工程師共襄盛舉，有實力派也有 ~~來亂的~~ 組別 :) 整體來說，同事們的創意/研發能量還是很強大的呀！

看到強者 Eric 大大的 Hackday 活動紀實，小弟也來野人獻曝，介紹一下我的惡搞作品囉！

真。雅虎無雙猛將傳 - 社群人才管理系統

真。雅虎無雙分析員工在 Linkedin 上的活動資料，計算並預測該員工對於現任職位的穩定程度。在系統裡將這個計算出來的數值稱為「忠誠度」。有了忠誠度資料後，老闆們就可以拿來穩定內政或是挖角人才。真。雅虎無雙裡提供的兩項功能分別為「安內」與「攘外」：

1. 安內

這個功能列出的是任職於敝公司的員工 Linkedin 帳號列表，並且依照「忠誠度」排序。不過 Demo 現場為了顧及個人隱私，所有員工都預設為忠誠度 99。

如果老闆發現員工忠誠度降低的話，可以考慮賞賜金銀財寶或是到小房間聊一聊，把主管們寶貴的時間/金錢花在刀口上！

2. 攘外

列出其他公司的員工 Linkedin 帳號並依照忠誠度排序。如此一來，老闆/HR們就能夠找到特定公司忠誠度較低的員工聊聊天，如此一來可望有效地提高挖角成功機率！（有阿宅建議我實作「水鏡先生(付費版)」功能，玩三國志系列長大的宅宅們應該聽得懂 XD）

對多數腳踏實地的 Engineer 來說，90 秒 Demo 往往是 Hackday 中最困難的部份，有些組別甚至過了 90 秒還沒進入 Demo 階段，非常可惜。

以真。雅虎無雙猛將傳為例，雖然這個 Hack 的重點是計算個人對於現任職位穩定程度的方法，不過考慮到評審與觀眾聽了數十組的 Demo 後，如果再聽到「演算法」這類的字眼可能注意力會加速渙散。為了吸引大家的目光並加強娛樂效果，這次 Demo 時選用熱門的電玩「真。三國無雙」與「忠誠度」這樣的字眼來包裝我的 Hack。雖然最後沒有獲得評審青睞中箭落馬，不過 Demo 現場效果卻是出奇地好，甚至過了幾天還是有不少人來詢問細節呢！

[教學] YUI 3 學習筆記 - From jQuery to YUI

noreply@blogger.com (Clay Liao) — Tue, 17 Apr 2012 08:25:00 +0000

在網頁前端工程領域中，jQuery 簡潔的語法語容易上手的特性，長年來一直都是最受歡迎的 JavaScript 函式庫。
相較於 jQuery，許多初學者常常對著 YUI 官方網站而躊躇不知如何下手。其實，這兩個函式庫都各自擁有許多 JavaScript 大師投注心血開發，各有各的優點。
許多開發者抱怨 YUI 的語法複雜，不如 jQuery 來得簡潔云云，小弟基於兩個函式庫都略有接觸，也在不同專案中交替著使用的經驗，以下是整理出來一些比較常用的 jQuery 與 YUI 3 語法對照，讀完後您會發現，原來 jQuery 與 YUI 3 的語法幾乎一模一樣!
第一次閱讀時請快速瀏覽，往後有需要再回頭速查特定的語法即可。若您對 YUI 3 有興趣，不妨也看看頗受好評的 YUI 3 菜鳥救星與 YUI 學習筆記系列喔!

Handbook - From jQuery to YUI 3

View more presentations from Ying-Hsiang Liao

[教學] 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 裡看到的確實是一模一樣的：

clayliao.f2e

[台灣。旅行] 黃色小鴨 X 高雄光榮碼頭

高雄光榮碼頭

街拍小鴨

[九州。旅行] 渡遊柳川河

沿岸風光

水上市場

[九州。旅行] 福岡雅虎巨蛋日職初體驗 - 軟銀鷹 V.S. 阪神虎

球場周邊

軟銀鷹 V.S. 阪神虎

[教學] Grunt 學習筆記(2) - 打造更順暢的開發流程

範例專案 hello-grunt

安裝 Livereload 瀏覽器外掛

體驗全新的開發流程

小結

[教學] 分享照片到 Yahoo! 氣象 App

[教學] Grunt 學習筆記(1) - Getting Started

Getting Started

更多 Grunt 功能

Pure CSS -- 超輕量化 CSS Framework

範例Layouts

Landing Page

Photo Gallery

Email

整合工具

Skin Builder

淺談遊戲化產品設計

超理性使用者介面設計 - Data-driven A/B Testing @ Webconf Taiwan 2013

[分享] 網頁 UI 設計苦手的實用工具包

免費工具

Pencil Project

Cacoo

付費工具

Balsamiq

Mockingbird

其他工具

Yahoo! Design Pattern Library

Flickr

IconFinder

UI Cloud

Reference

誰在追蹤你的上網行為？讓 Mozilla Collusion 告訴你

使用 Mozilla Collusion

用 NodeJS 祝大家聖誕快樂！

[教學] 使用 Yeoman 優化 WebApp 開發流程

安裝 Yeoman

開新專案

檢視成果

體驗 Yeoman 神奇之處

[教學] 整合 Sublime Text 2 與 JSLint

安裝 Sublime Package Control

整合 JSLint

儲存檔案後自動執行 JSLint

[教學] YUI 學習筆記 - 將 jQuery 變成 YUI 模組

直覺但不建議的作法

使用 YUI Loader 管理模組

進階群組設定

認識 TypeScript

TypeScript 的特色

動手玩 TypeScript

安裝 TypeScript

100% 相容 JavaScript 語法

加強 JavaScript - 靜態型別

加強 JavaScript - Classes 物件導向

小結

Reference

Yahoo! 釀的酒 - 淺嚐 Cocktails @ 北京 HTML5 開發者論壇

相關文章

YUI Masonry - 快速打造 Pinterest 流布局

快速上手

線上文件

Open Source on YUI Gallery

Reference

[教學] YUI 學習筆記 - 成為 YUI Contributor

準備工作

簽署 YUI CLA

提交程式碼

開啟新的專案

申請 CDN Request

[分享] YUI is Sexy @ JSDC 2012

[Hackday] 真。雅虎無雙猛將傳 - 社群人才管理系統

真。雅虎無雙猛將傳 - 社群人才管理系統