2012年5月31日

支援平板閱讀的 dokuwiki-readable 佈景主題發佈

Dokuwiki + Readable Theme

Dokuwiki 目前仍是我最喜歡用的 Wiki,它輕薄短小不需要資料庫的特性,拿來做筆記實在非常方便。但是在閱讀舒適度的部份,是我覺得最需要改善的地方,尤其是平常習慣用平板電腦閱讀,舊的 Dokuwiki  佈景一直找不到一款滿意的。所以只好自己動手;過去曾發佈 dokuwiki readability 佈景,不過隨著時間流逝年久失修,這個舊專案已經不打算再改寫。

這幾天開始著手一項新專案 Dokuwiki Readable Template:

https://github.com/lyhcode/dokuwiki-readable

這是 fork 自作者 AmdY 發佈的樣板:

https://github.com/AmdY/Dokuwiki-Template-Twitter

Twitter Bootstrap 提供了足夠的 CSS 基礎樣式,也有針對不同螢幕提供 Responsive Design;AmdY 將 Bootstrap 加入 Dokuwiki,一些基本設定可以直接拿來用。

Bootstrap 的專案:

http://twitter.github.com/bootstrap/

不過 Bootstrap 預設的佈景並未強調閱讀舒適度,所以我在 Bootswatch 找到 Readable 這個佈景;這個佈景是修改 Bootstrap 的 CSS 設定,放大字體以及參考 Readability 閱讀版面設計的色彩配置。

http://bootswatch.com/readable/

範例網站請參考:

http://lyhdev.com/

使用平板電腦瀏覽會依照螢幕大小微調畫面。



這是一項開放原始碼專案,歡迎喜歡用 Dokuwiki 的朋友自由下載、參與開發或回饋意見給我們。

2012年5月30日

想入手蘋果 MacBook 筆電?期待 WWDC 2012 傳聞即將揭曉!

MacBook
自從我被蘋果咬一口,用了 MacBook 就無法再回頭。所以每次遇到有換機需求的朋友,我就不忘跟他們介紹一下 MacBook 的好,以及它唯一的明顯缺失(貴)。當然介紹 MacBook 不需要太多推銷詞,只要重點提示一下,是用過的朋友都很快就決定,下一台筆電優先考慮蘋果(如果預算夠而且女王批准成功的話)。

最近我很期待新款 MacBook 的發表,所以一直關心著任何風吹草動;我相信這有可能是壓死駱駝的最後一根稻草,如果它能像傳聞中的既輕薄、續航力充足、記憶體可擴充又有大尺寸螢幕,我想這會是很多熱血開發者心目中的最佳選擇。

有註冊的蘋果開發者,已經可以查看 WWDC 時程表。

蘋果WWDC 2012時程表確認

據說不會有 iPhone 5,所以把預算省下來直上高階 MacBook 吧!

富士康消息稱WWDC 2012並沒有iPhone 5

蘋果謠言滿天飛。

MacBook Pro 2012即將推出:富士康外包以滿足需求

到底哪個傳聞會成真?

Pro還是Air 新款MacBook Pro改頭換面

根據過去的經驗來看,最近想入手蘋果筆電的朋友,可以先忍住衝動再等一等。店家一定告訴你有需要就買不要等,但店家不會告訴你,如果新款上市,就會有機會用出清價便宜買舊規格。

我對新款 MacBook Pro 的期待是:
  • 15吋高解析度螢幕
  • 8GB以上記憶體
  • 一定要的SSD
  • 拿掉佔位的光碟機 
  • 不要比 Air 厚一點點就好
  • 電池容量不要省

2012年5月28日

如何環遊世界一整年?程式設計師 Alex MacCaw 的背包客旅行故事

weary traveler
圖片來源:weary traveler (CC License)

最近我對「Programmer」+「Traveler」這兩個 Term 的交集很感興趣,我認為「出走」對程式設計師來說非常重要;因為整天呆坐在電腦前面的程式設計師,創意和靈感很容易受到侷限。如此一來,就非常難創造能實際解決生活問題的軟體。

許多優秀的程式設計師往往都是業餘的運動愛好者,耗在戶外休閒的時間比在電腦前的時間更多;令人景仰的程式設計師,有更多是勇於冒險的旅行者,流浪早已是生活中的一部分。

十多年前曾讀過一本印象深刻的書,書名是《背著電腦,去歐洲流浪》,作者是劉燈,一位令人景仰的資訊遊俠---黑客;在那個行動上網和智慧型手機還在實驗室的年代,大四的他已經帶著筆電遊走歐洲。
本書作者是一位大學四年級的學生,他在去年夏天帶著一部筆記型電腦,到歐洲旅行了兩個月。從柏林到海德堡,布拉格到阿斯特丹,旅行中種種有趣的、值得記錄的事全部在電腦中,隨時隨地地進行跨國際的e-mail。 
這個創新的做法賦予了「旅行」新的風味。而以這次旅行為藍本的《背著電腦,去歐洲流浪》則處處散發著歐洲城市特有的魅力和生命力。一位獨立、聰明、開朗、用功的大學生,懂得運用新科技,語言能力強,且能自己解決問題。他為所有渴望出走的人們編織了一個美麗又現代感十足的流浪夢。 
「離開這裡,那就是我的目標。」

上 Google 搜尋一下「Programmer+Traveler」,結果發現一篇文章:

How a world trip made a programmer’s career
這篇文章的圖片很有趣,當你是正在沙發衝浪的背包客,卻又帶著一台筆電,是否可能一邊旅行一邊工作呢?

這篇文章又連結到「How to travel around the world for a year.」,作者是 Alex MacCaw,去年曾分享過這位作者的報導,他是一名熟悉 Ruby/JavaScript 的程式設計師,寫過「JavaScript Web Applications」這本書(O'Reilly 出版)。他花了十個月時間遊歷世界,包括非洲、東南亞、澳洲、北美及南美洲的 17 個國家。

這段環遊世界的期間,他不僅拍攝許多精采的照片,同時也寫作了幾本電腦技術書籍、發表演說,貢獻一些開放原始碼自由軟體,創業、最後留在 Twitter 工作。在作者自己寫的這篇文章「Traveling, Writing and Programming」,有著關於他「旅行、寫作與程式設計」的故事。

雖然 Alex 的文章不像 Lonely Planet 有鉅細靡遺的旅遊指南,但是他帶來一則真實的故事,一位背包客,在旅行的同時依然從事最愛的程式設計工作。

我喜歡 Alex 的做法,因為對於一個熱血的程式設計師來說,三天沒有寫程式感覺就像三天沒吃飯一樣難受;如果離開舒適圈以後的生活,每天只有洗碗盤或摘水果,一定會非常想念寫程式的日子。所以,帶著筆電出走旅行,可能是在旅程中「解渴」的必要裝備。

所以出走對程式設計師來說,也許是一個好辦法,不僅可以自由地旅行,同時還能自由地寫程式。我不知道各位從事程式設計工作的朋友,有多久沒有享受「寫程式的自由」了?也許,你也該考慮展開一場遙遠的冒險之旅了。

2012年5月26日

Hedgren 76折最後一天(5/27),入手半月側背包記錄

Hedgren Web Site

我在 2008 年買的 Hedgren 側背包, 用到現在已經近5年時間,出門喜歡將包包塞滿,不管是 3C 產品或書籍都往裡塞,經常帶著它上山下海,時間證明 Hedgren 算耐用,外觀也沒有因時間而差異太多。

以前還是窮學生的時候,覺得價位 2,000 的 Hedgren 就需要花點時間存錢才能買;但開始工作有收入後,覺得 Hedgren 這個比利時品牌真是便宜耐用,不太需要省吃儉用就能入手。

雖然說 Hedgren 的價格相當平易近人,但是相對於 3C 產品來說,我對配件的預算實在非常不高,一定要等到有折扣才會買。

上一次用便宜價格買到 Hedgren 的筆電公事包,是在蘭卡威碼頭的免稅商店,用刷卡 5 折的超低價買到。但有這次經驗後,讓我後來看到 9 折的 Hedgren 完全不會有帶回家的慾望。

直到最近到某連鎖店找 MERRELL Barefoot 赤足系列的鞋款時,發現 Clarks、Hush Puppies、Timberland、Hedgren 四個品牌有 8 折的特價。加上會員本來就有 95 折,算起來只要 76 折就能入手。

所以,不小心又帶了新包回家,Hedgren 的休閒半月側背包。


折扣活動只到 5/27(日)。


bluga.net webthumb 速度超快的網頁縮圖服務

http://webthumb.bluga.net/
曾經介紹過 websnapr 這個網站擷圖服務,但是它在改版後免費服務僅提供尺寸較小的縮圖,產生縮圖需要的時間也需要等許久。

webthumb 是 bluga.net 提供的網站縮圖服務,目前它用起來速度算是相當不錯,大約十幾秒就能產生完成。

在 webthumb 輸入網址,選擇需要的長寬尺寸,等待處理完成後就能看到網站縮圖。


對開發者來說,webthumb 也提供很方便的 API,支援的程式語言包括:PHP、Python、Ruby、Java、.Net、C#、Perl 及 Bash。它提供 RESTful Web Services,要整合到其他網站相當容易。

產生的縮圖專頁範例:

http://webthumb.bluga.net/thumbnail/blog.lyhdev.com_/2012-05-25@19:30:15

網站擷圖範例:


Vaadin 來自北歐的 Web Application 開發利器

vaadin.com
對許多 Web-based Application 的開發者來說,要選擇什麼樣的 Web UI Framework,其實並不是那麼好下決定。這裡指的 Application 並不是一般認知的內容網站,而是用網站技術來開發過去用視窗介面打造的應用程式。雖然 Web UI 有很高的彈性,可以在不同作業系統下呈現相同的外觀(幾乎啦),也可以不受作業系統原生操作介面的限制;打開瀏覽器就能啟動應用程式,不用下載安裝,讓應用程式發展的想像可以更豐富。

但 Web UI Framework 的發展還在相當年輕的階段,要用什麼模式(pattern)來開發有著各方不同的意見。像 ExtJS 就讓前端(front-end)的 JavaScript 主宰一切,後端只負責產生資料;而 GWT 則盡可能在後端實作,隱藏前端需要的細節。其實現行的方案,不管選擇什麼都是優劣參半,沒有哪個是絕對好或不好,重點在於框架未來是否得以延續發展。

對專案來說要選擇合適的框架並不容易,因為你需要瞭解每一種框架的利弊得失,才能為不同的需求選擇正確的專案。在 Web UI 大行其道的今日,以及可預期的未來將有大量應用程式會以 Web-based 方式開發,每位開發者都應該多認識各種框架的發展。

最近我愈來愈期待 Vaadin 這個框架的發展,所以整理成這篇筆記方便大家快速認識。

Vaadin 是一家公司名字,同時也是開發框架的名稱,這家公司位於北歐芬蘭(Finland),這個特別的產地賦予它獨特的血統,讓它看起來獨具風格。Vaadin 是採用 Apache V2 授權的開放原始碼專案,開發者可以利用它當做基礎擴充自己需要的元件。

以 GWT(Google Web Toolkit)為基礎發展的 Vaadin,也是 Java-based 的開發框架,程式碼主要是在後端以 Java Class 定義,再由框架產生所需 JavaScript 程式碼。

關於 Vaadin 和其他框架的比較,可以參考這個網址: https://vaadin.com/comparison (同時也能了解還有哪些值得比較的框架)

從 Vaadin 的 Sampler 可以瀏覽提供了哪些元件:
http://demo.vaadin.com/sampler

聽到 GWT 很多人可能會覺得,這大概又是一個其貌不揚的框架。不過來自北歐的 Vaadin 擁有簡約的視覺風格,開發者能用它打造出專屬的外觀。

以下是 Vaadin 的 iTunes 佈景示範:
http://demo.vaadin.com/VaadinTunesLayout/

另一種佈景風格:
http://demo.vaadin.com/chameleon-editor

提供所視即所得的 Visual Designer 也是 Vaadin 的特色之一,這個 Designer 也是用 Vaadin 開發,它附屬在 Vaadin for Eclipse Plugin,可以跟 Eclipse 開發工具整合在一起。
http://demo.vaadin.com/visualdesigner-nightly

目前 Vaadin 的出版品並不多,只找到這本由手腳很快的 PACKT 出版社發行的書籍(有提供付費電子書)。
http://morevaadin.com/

Vaadin 是個值得期待的框架,看起來很適合用於某些功能不是太多太複雜的專案;但它是 Java-based,以筆者來說就相當討厭用 Java 寫 Web 程式,幸好 Vaadin 目前已經有 Grails 的 Plugin 可用,因此可以利用比 Java 簡潔很多很多很多的 Groovy 來開發 Vaadin 應用程式(現階段開發上可能還有不少問題)。

Vaadin Plugin for Grails http://grails.org/plugin/vaadin

也許你不會真的拿 Vaadin 來開發專案,但是多觀摩不同產地來源的框架,仍可以帶來一些啟發。

2012年5月24日

Node.js NPM 相依模組問題處理,以 connect-mongodb for Windows 為例

Node.js 使用 NPM 工具管理模組依賴關係(modules dependencies),開發者可以在專案資料夾定義 "package.json" 設定檔,如此一來就能方便建置(build)的自動化。對某些雲端 PaaS 服務來說,這也是必要的設定(例如 Heroku)。

不過當模組愈來愈複雜,dependencies 會是個製造問題的麻煩,例如在 Node.js for Windows 環境下,安裝 connect-mongodb@1.1.3 會發生錯誤。

"dependencies": {
  "connect-mongodb": "latest"
}

錯誤訊息如下:


從訊息中可以發現 mongodb@0.9.7(在 connect-mongodb 的 package.json 指定的版本)這個版本無法在 Windows 環境下安裝。但如果使用 npm install mongodb 或是在 package.json 增加 mongodb 的相依(目前最新版本是 1.0.2),會發現最新版本的 mongodb 模組已經相容 Windows。

"dependencies": {
  "mongodb": "1.0.2",
  "connect-mongodb": "latest"
}

但即使增加了最新版的 mongodb 相依設定到 package.json,NPM 仍會強制幫 connect-mongodb 安裝其指定的 mongodb@0.9.7。

我參考 npm-shrinkwrap 想要設定 sub-dependencies,但最後並沒有成功。

另外一個嘗試結果可以解決問題,就是在 GitHub 上面 fork 一份原始專案,我想這也是一個可行的方案:
  1. 許多 Node.js modules 都有 GitHub Repository
  2. NPM 支援從 GIT / HTTP URL 取得 modules(很方便的 feature)

因此我將 masylum/connect-mongodb fork to lyhcode/connect-mongodb,再修改 package.json 的 mongodb 相依版本為 1.0.2。同時也將這個修改 Pull Request 到原始專案。

我不知道原作者什麼時候才會 accept 這個 request,不過在這段期間,可以直接將 GIT URL 作為 package.json 的 dependencies 設定值,如此一來就能自己快速解決某項模組的小問題。

"dependencies": {
  "connect-mongodb": "git://github.com/lyhcode/connect-mongodb.git"
}

2012年5月23日

Mosh(mobile shell)取代 SSH 的遠端終端機連線工具

畫面來源:Mosh Project Site
Mosh 是終端機連線工具,它不是一種 Shell(如 bash、csh 等),而是一般熟知的 SSH / Telnet 有相同的作用 --- 連線到遠端的文字終端機。

但是 SSH 已經很管用,而且也跨平台,為什麼還需要 Mosh 呢?

Mosh 可以用來改善 SSH 的使用經驗,尤其是你需要透過無線網路、行動上網操作終端機時。相信經常使用 Linux、Mac OS X 的朋友,都會利用 SSH 連線到遠端的 Server / Workstation 工作,雖然文字終端機對頻寬的需求很低,但無線網路有延遲(latency)、斷線問題,會造成終端機在這種不堪使用。

例如筆者生活的南部(天龍國以南)地區,訊號經常只有 GPRS 或不到兩格的 3G,這種情況下使用 SSH 操作終端機真是痛苦無比,經常輸入一串指令後,過幾秒才斷斷續續得到回應。如果遇到斷線,那就更糟糕了,需要重新登入才能繼續。

雖然稍有經驗的 Linux/*nix 玩家都知道可以用 screen 指令來克服,讓工作狀態可以重新恢復到斷線前的樣子;不過,若一小時內重複斷線個幾次,或者網路長短不一的延遲情況嚴重,就會大幅影響工作效率。

如果你想多體驗這種想摔筆電的感覺,只要多搭幾次高鐵來回南北部,中途利用 SSH 遠端連線並用 VIM 完成幾支程式,就知道為什麼需要 Mosh。

在 Ubuntu Linux 12.04 LTS 版本安裝 Mosh,只需要一行指令:

sudo apt-get install mosh

基本的使用方式跟 SSH 類似:

mosh hostname

或(指定登入使用者)

mosh user@hostname

需要注意的是:Server 端也必須安裝 Mosh(連線建立時必須會在 Server 端自動執行 mosh-server)

以下是 Mosh 的官方介紹(中譯摘要)

切換IP仍保持連線 Change IP. Stay connected.
在不同的網路連線之間自動漫遊,例如在火車上使用 WiFi、旅館的區網或海灘的3G行動上網。Mosh 不像一般的網路程式會因為IP改變而斷線。

讓你有個舒服好眠 Makes for sweet dreams.
當你想睡覺的時候,儘管蓋上筆電的螢幕,讓它進入休眠狀態,雖然網路會因此斷線,但是當你重新打開螢幕,網路恢復連線後,原本的終端機可以自動恢復。

解決討厭的網路累格問題 Get rid of network lag.
原本的 SSH 輸入一段訊息後,必須等到伺服器回應才會顯示輸入的資料,但是對於延遲嚴重的網路,看不到即時的回應會使操作變得礙手礙腳,Mosh 可以立即顯示回應,即使是 VIM 或 Emacs 這種全螢幕的編輯器也能支援。

不需要特別的權限或常駐服務 No privileged code. No daemon.
你不需要有系統管理員權限就能執行 Mosh,直到你真正需要連線時 Mosh 才會被執行。

相同的登入方式 Same login method.
Mosh 不會監聽特別的連接埠或者驗證使用者,Mosh 的客戶端可以透過原有 SSH 機制登入到伺服器,帳號密碼及公鑰都是與 SSH 相同的驗證方式。登入後伺服器端會執行 mosh-server 來建立 UDP 連線。

在終端機中執行但效果更好 Runs inside your terminal, but better.
你可以用一般的 xterm、gnome-terminal 等終端機工具來執行 Mosh 程式,但是 Mosh 自行實現的底層的處理,因此諸如一些終端機可能會發生的 UTF-8 問題等,都可以得到解決。

Ctrl+C 正常作用 Control-C works great.
Mosh 使用 UDP 為基礎的協定,並且對封包遺失問題有好的處理,會根據網路條件調整頻率,由於 Mosh 不會將網路的緩衝區填滿,因此 Ctrl+C(中止程序)可以正常作用。

以上是官方說法,歡迎有興趣的朋友發表試用感言!

Google Doodle 紀念:電子合成器之父 Robert Moog 生日



今天的 Google doodle 又有新玩具,在搜尋首頁上方的這部電子合成器,不只是紀念 Robert Moog(電子合成器之父)生日的插圖,用滑鼠按一下鍵盤還可以彈奏音樂,上方的旋鈕可以調音,而右邊裝置則是錄音功能,可以錄製、重播彈奏的音樂。

延伸閱讀


2012年5月22日

你我都是怪咖 《We Are All Weird》 賽斯.高汀

We Are All Weird (book cover)
如果你學過行銷,那麼一定會認識 Seth Godin(賽斯.高汀)。高汀的暢銷書包括《紫牛》、《低谷》及《行銷人是大騙子!》。他利用部落格行銷他的觀點,文章也經常被報章雜誌或其他書籍引用。

Seth Godin's Blog

這篇要介紹的是高汀著作的《We Are All Weird》一書,這本書在 2011 年 9 月發行。目前沒有中譯版;但只要 1-click 就能從線上書店取得原文電子書。

在工業時代,全世界都以大眾市場作為主流,如果能製造一樣產品,不管什麼國家、年齡、文化背景的人都愛用,這樣的產品肯定能創造可觀的利潤;「量產」讓你到哪都能看到 Nike 的球鞋、Hollywood 電影或 McDonald's 速食餐廳。

高汀認為「大眾」(normal)時代已經結束,而「怪咖」(weird)時代正崛起。

過去企業賺錢的模式,是將焦點放在族群人口分布的鐘形曲線高峰,因為絕大多數人都集中在那裡,因此努力推出大眾化的品牌,製造大眾化的產品,藉此得到為數最多的消費者。

但是,有四股力量正在改變世界的趨勢:

創作能力被放大

你用手機拍攝的一部短片,可能在幾天甚至數小時就在網路流竄,在數以萬計的人們面前播放。你用論壇、部落格或社群網站發表的一篇文章,只要幾秒鐘,在地球另一面的人們也能夠閱讀。

資訊傳遞的速度太快太廣,人們開始厭倦平凡的事物,能夠吸引更多人注目的創作,必定是「特別」的東西,例如「梗漫(Rage Comic)」要有梗就必須先有怪咖(有別於常人)的獨特想法。

富有

許多國家的經濟條件改善,使得人們有機會「選擇」。舉例來說,即使是每天抱怨萬物皆漲只有薪水不漲的上班族,仍然可以花 50 元買杯 CityCafe 或 100 元的 Starbucks 當下午茶,你不會辛苦省吃儉用幾天後,才從撲滿倒出幾枚硬幣去買罐裝伯朗咖啡或雀巢三合一咖啡。

即使王品已經努力推出不同主題的餐飲,你可能覺得它仍是大眾化路線的飲食,而在需要慶祝的時刻選擇更具特色的餐廳,即使要付出更高的花費。

你已經買了很貴的 iPhone,但就是覺得不想跟別人用一樣的手機,而花費更多錢買配件讓它看起來不太一樣。

富有不代表你的口袋足夠你養一台法拉利,而是你有足夠的財富讓你做出不一樣的選擇。

行銷對怪咖更有效

每個人多少都有怪咖的特質,也因此希望跟別人不一樣。為了跟別人有一點點的不一樣,你可能必須付出更高的金額作為代價。

例如洗衣粉的品牌,若是針對「特別追求健康安全環保」的怪咖族群,那麼就可以推出比一般市價平均高一倍的產品,如此一來就會有一群人願意花更多錢購買,他們就是不想買一般廉價普通的產品。

許多人願意付出更高的價格,只為了符合自己想追求的不一樣。推出不凡的產品,針對這群人做的行銷就會帶來更高的效益。

聚落(tribes)有更好的連結

在現實生活中,同一個生活在一起的群體,通常不會有太多人是同類型的怪咖,因為如果身旁的人都一樣,那在這群人裡面就不能稱作是怪咖了。所以怪咖的存在通常被地理空間分隔,例如有一群人都是科幻迷,但他們不會剛好全部都在同一間辦公室裡。

但是拜網路及科技發展所賜,在虛擬空間中怪咖很容易就形成聚落,即使現實生活中身處不同國家,只要利用社群網站、行動裝置,就能隨時保持聯繫,對同一個類型的怪咖來說,資訊交換流通更容易。前一分鐘發生的事情,可能下一分鐘就在整個怪咖圈子裡傳遍。

我們每個人都存在怪咖的特質,這是一股驅動創新的動能,任何人都有權力選擇不一樣、追求不平凡。每一位被世人視為「成功」的人物,都將他們的怪咖特質發揮徹底,到了可以改變世界的地步。

對企業來說,高汀特別提出建言:「If you cater to the normal, you will disappoint the weird. And as the world gets weirder, that's a dumb strategy.」

這句話的意思是說:「若你想迎合平凡人,就會令怪咖失望,世界追求更不平凡,你迎合平凡將是一項愚蠢的策略。」

*部分參考自彭蒙惠英語 2012 年 5 月刊。

Tweet-a-Watt 讓全世界知道你的節能減碳行動

畫面:Tweet-a-Watt 網站
Make 雜誌中文版即將推出第四期,其中一篇名為 Tweet-a-Watt 的標題讓我想先上網瞧瞧。結果找到這個專案的原始網站:

Tweet-a-Watt Build a wireless home-power monitoring system

這是一個 XBee 電子積木的應用,創作者是位 MIT 的學生,這個發揮 DIY 精神的改裝,將用電量計數器 Kill A Watt 加入 XBee 使數據能藉由無線傳送,再經由電腦端接收後上網發佈。作者使用 @tweetawatt 的 Twitter 頁面將每天的用電量公開:

https://twitter.com/#!/tweetawatt

電量計數器是 P3 International 的 P4400 Kill A Watt 產品,在台灣可能需要花點功夫才能找得到。

改裝的重要零件 XBee 只要上拍賣網站就能找到,這是採用 ZigBee 技術的無線傳輸模組,可以被拿來和 Arduino 等當作電子積木,更容易組裝出兼具創意及實用性的電子裝置。

這項生活中的綠色創意,獲選 2009 年由 Core77 舉辦的 Greener Gadgets 成為 Top 13 得獎專案之一。

作者大方將設計、軟體原始碼大方公開,讓喜歡動手、想自己實現綠色生活小創意的人,能夠直接利用這個基礎。

我很喜歡這個 Idea,因為它讓「省電」變得更具體,例如大家都知道隨手關燈關電器可以為地球盡一份微薄之力(或是拯救北極熊?!),但每天養成的省電小習慣到底省下多少,號稱更節能的電器到底用電幾瓦,有了數據就會更具體。

雖然有耗電量計數器可以呈現即時的用量,但實際上不太可能頻繁地觀察數據;透過這項小改裝讓數據透過社群網路記錄起來,你就能清楚今年夏天和去年相比,用電量是否增加了?

如果你懂一點程式設計,就可以利用這個基礎發揮更多的應用,例如讓數據圖形化,用圖表來讓「省電」變得更具體、視覺化。

或許有一天,你的手機主畫面螢幕上,不再只有天氣和時間,還會多了一項「我家的用電量」。

延伸閱讀:

2012年5月21日

Carol 最新單曲:小音符 Carol's Little Note

Carol's Little Note 單曲封面

五月最重要的日子就是溫馨的母親節,Carol 最新單曲「Carol's Little Note(小音符)」在這個月發行,因為我自己錯過了 5/12 的台中場,所以把活動訊息貼出來,希望喜歡 Carol 音樂的朋友可以不要錯過月底的幾場。

小音符是 Carol 獻給母親的一首歌,不管是音符旋律或歌詞都帶有濃厚的情感可以穿透你的心。


誠品音樂現場
  • 5/12(六)20:00-21:00 台中園道店3F
  • 5/26(六)1500-1600 台東故事館2F藝文空間
  • 5/27(日)1500-1600 高雄大遠百店17F書區中庭
  • 6/01(五)2200-2300 台南店B1書區舞台

線上音樂

2012年5月17日

客製化 ExtJS 4.1 佈景主題小筆記 Compass/Sass

在 ExtJS 2.0-3.0 的時代,搜尋一下就可以找到不少佈景主題(themes),例如:

但是到了 ExtJS 4.x,即使 4.1 已經正式發佈,還是很難找到官方以外的佈景主題。

目前 ExtJS 4.1 可用的佈景選項有:
  • Default(淡藍色)
  • Gray(灰色)
  • Neptune

雖然 ExtJS 4.1 很難找到現成、好看的佈景,但其實 ExtJS 從 4.x 開始加入更現代化的 Sass( Syntactically Awesome Stylesheets)支援,使得 ExtJS 4.x 的佈景主題更容易依照專案的特殊需求進行客製。

ExtJS 4.x 內建的佈景都是採用 Sass 語法撰寫,並且以 Compass 為基礎,打造樣式定義出可重複利用、易擴充的佈景。

Sass 簡單說就是增強版的 CSS 語法,它可以做到過去 CSS 不可能做的事情:定義變數、宣告函式、巢狀樣式定義、尺寸單位及顏色的計算...等。

ExtJS 本身並沒有附帶 Compass/Sass 工具,需要擴充佈景(Theming)的開發者,需要依循 Ruby 慣用的 RubyGems 安裝方式:

gem install compass

將 Compass/Sass 軟體安裝,之後才能開始客製 ExtJS 的佈景。

這兩篇文章可供佈景開發者參考:

由於 Compass 定義的佈景,有很多擴充方式,但也經常讓初學者摸不著邊際,所以這篇文章稍微整理一下相關說明。

假設專案根路徑是:MyApp

ExtJS 解壓縮後放置的路徑是:MyApp/extjs

所有佈景主題相關的檔案都會放在:MyApp/extjs/resources

客製佈景會需要用到 resources/themes/templates/resources/sass/ 範本資料夾底下的兩個檔案:
  1. config.rb
  2. my-ext-theme.scss

其中 config.rb 是 ExtJS 為佈景開發者準備好的 Compass 設定範本,因此 ExtJS 的佈景並不是從一般的 compass create 開始建立,而是直接套用現成的設定檔(因為佈景產生過程會用到 ExtJS 定義的預設樣式及 Ruby 撰寫的處理程式)。

此時先在 ExtJS 資料夾下建立命名為 custom 的資料夾:MyApp/extjs/custom

再將範本檔案複製:cp extjs/resources/themes/templates/resources/sass/* extjs/custom

新資料夾 custom 的名稱可自訂,但路徑必須在 extjs 下(與 resources 同一層),這是因為 config.rb 裡面用的相對路徑設定;如果放到其他路徑就必須重新調整設定值。

接著切換到新資料夾下:cd extjs/custom

使用 Compass 編譯佈景的方式有兩種:
  1. 直接編譯 compass compile
  2. 監看異動編譯 compass watch .

如果佈景還在調整的階段,使用 watch 可以免去每次修改都要重新輸入 compile 指令的麻煩。

其中 my-ext-theme.css 的內容就是客製佈景的內容,如果都沒有修改的情況下,就會產生 ExtJS 預設的樣式,也就是淡藍色的佈景。

在 my-ext-theme.css 的內容有一段註解:

// Insert your custom variables here.

在此註解下方就是用來定義新的佈景,但範本檔並沒有提供任何設定可參考。

所以這邊可以先找到 ExtJS 預設佈景的樣式定義: MyApp/extjs/resources/sass/ext-all-gray.scss

把裡面的相關變數宣告複製到 my-ext-theme-css 的定義區。例如:

$theme-name: 'gray';
$base-color: #ccc;

從這個例子中可以看到,預設的 Gray(淺灰)佈景,其實就是利用 $base-color 來定義基礎顏色,#ccc 顏色值就是淺灰色。

如果把 #ccc 改成其他顏色,例如:

$base-color: #ff0000;

上面的修改會讓佈景從灰色變成紅色。

從這邊就能看到 ExtJS 採用 Compass/Sass 佈景的好處,只改了一行,但整個佈景主題會從灰色轉變為紅色,因為利用了 Compass/Sass  的顏色計算功能,在 Ext 各式視窗元件都會依照這個基礎色碼進行深淺度的自動調整。

另一個修改的例子是字型大小,再過去調整 ExtJS 的字型大小相當麻煩,因為不能只改一個或少數幾的地方,若是想加大整體的字型大小,必須把全部字型大小的設定都翻修過,才能維持原有的比例,例如 13px 調到 15px,那麼 11px 就應該調為 13px 等,...

但是在 ExtJS 4.x 的 Compass/Sass 佈景系統中,只要在 .scss 佈景設定中設定一行:

$font-size: 11pt;

其他相關的字型大小,就會以 11pt 為基礎重新計算新的大小,因此能保持佈景原有的字型大小比例。

在 compass compile 動作後,會將 .scss 檔案自動產生對應檔名的 .css,其預設路徑為: MyApp/extjs/css

有了設計好的新佈景之後,在 HTML 的 link 標籤也要替換路徑,將原本使用預設佈景的位址,例如:

/extjs/resources/css/ext-all-gray.css

替換為客製產生的新佈景檔:

/extjs/css/my-ext-theme.css

雖然使用 Compass/Sass 的佈景設計,對仍舊習慣 CSS 的開發者來說,剛開始要上手一點門檻,但其實只要多嘗試一下,就會發現 Compass/Sass 真是網頁開發者的福音,試過就...再也回不去了。

雖然目前還沒有看到太多 ExtJS 4.x 的佈景分享,但是基於 Compass/Sass 設計的 ExtJS 佈景,其實要分享是再方便不過的,因為只要把幾個主要的基礎變數宣告設定分享即可,簡單的修改幾個變數,就能發現整個佈景在視覺上有很大的變化。

IE 不吃餅乾(Cookies)的問題:避免包含底線「_」(underscore)的網址

包含底線的網址,例如 abc_efg.company.com 雖然也可以用瀏覽器開啟,但是會發生在 Chrome / Firefox 一切正常,但使用 IE 瀏覽器就會無法儲存 Cookie 導致 Session 失效的問題。

從 IEInternals Blog Bugs QA 可以找到以下跟 Cookies 有關的說明:

IE0005: By-design.  Setting cookies fails when the hostname of the server contains an underscore.
IE0006: By-design.  Setting more than 20 50 cookies per host results in the oldest cookie being lost.

因為底線「_」(underscore)對 DNS 的 Domain Name 規範來說,屬於不合法的符號:

以下清單是 DNS 不允許的符號列表,出自微軟的網頁


Disallowed characters
  • comma (,)
  • tilde (~)
  • colon (:)
  • exclamation point (!)
  • at sign (@)
  • number sign (#)
  • dollar sign ($)
  • percent (%)
  • caret (^)
  • ampersand (&)
  • apostrophe (')
  • period (.)
  • parentheses (())
  • braces ({})
  • underscore (_)

如果需要在網址中使用分隔符號,可以用「-」(hyphen)。例如 abc-efg.company.com,就能避免 DNS 規則衝突造成的問題發生。

2012年5月10日

思索下一代程式語言教學系統,利用 Node.js 實作程式碼遠端編譯執行

長久以來我一直在思考如何實作更好的程式語言的教學系統,目前發展的 PLWeb v2 已經用了五年的時間,而下一個版本會是什麼樣子,怎樣才有更大的躍進,是我每次在夜深人靜時就會不斷在腦海中不停思考的問題,...

PLWeb 程式設計學習網

我對新的程式語言教學系統,有無數個期待:
  1. 支援 Eclipse 及 Visual Studio 等各種整合開發環境的教學。
  2. 線上編輯教材,以 Markdown 編寫電子書,使用 CodeMirror 或 ACE Editor 提供用瀏覽器撰寫程式碼的功能。
  3. 教材自動轉換為電子書。
  4. 更好的互動練習環境、支援廣播及即時問答功能的網頁介面。
  5. 學習者不必安裝任何軟體(包括編譯器也免安裝),直接透過瀏覽器就能學習(即使是用 iPad 平板電腦也能學)。
最近最有興趣解決的其中一項問題,就是讓程式碼在遠端編譯執行。

這聽起來並沒有什麼困難,因為只要先將程式碼上傳,在 Server Side 只要用 Shell 呼叫編譯程式,就能將執行結果回傳給 Client 端。

但是對於教學來說,許多程式會有 User Input,也就是使用者需要將資料以鍵盤輸入,再交由程式處理回應。

雖然可以將 Input Data 以 STDIN Stream 給執行中的程式,但這樣需要在程式未輸出任何訊息時,就已經將 Input Data 輸入完成,對學習者來說這樣寫好的程式,User Input 就失去意義。

對網頁程式來說,還必須將後端執行中的程式與瀏覽器串接起來,重新導向 STDIN/STDOUT,如此才能讓遠端執行的程式,就像在 Local 端一樣有 Console 的互動操作效果。

近期對 Node.js 的研究,讓我發現 Node.js 是目前最適合用來處理這項需求的方案。

因為 Node.js 有太多好處:
  1. 輕量,伺服器負載小,一部機器可承載大量線上使用者。
  2. Socket.io 提供最簡單穩固的 WebSocket 實作,解決瀏覽器和伺服器之間串流執行中程式 STDIN/STDOUT 的需求。
  3. 由 chjj 開發的 pty.jstty.js 已經初步完成基本實作的範例。
  4. 可以透過 Node.js module 搭配 C/C++ 實作底層所需的程式碼,如此一來 Unix 既有的虛擬終端機介面(Pseudo terminal)就能派上用場。
而多人共用伺服器編寫程式碼、執行程式的安全性問題,則可以透過 Unix 的權限控管,以及搭配虛擬機器來執行(包含網路的隔離等)。

我 fork 了一份 tty.js,並加入一些簡單的修改,大致上完成了程式練習系統的介面雛形,用來驗證這個構想(proof-of-concepts)。專案的網址是:


執行畫面如下圖,上方為程式碼編輯區,下方為瀏覽器的 Console 畫面,透過 tty.js 串接在伺服器上執行的終端機畫面;如此一來,即使是包含 User Input 的程式,也可以在遠端編譯、執行,但學習者只要透過瀏覽器就可以完全地控制。
修改自 tty.js 的 proof-of-concepts

雖然 Unix/BSD/Linux 是絕佳的程式開發環境,但是對初學者來說,又要學程式語言又要摸索新的作業系統操作,難免會有太多的阻礙。

但如果透過簡易的 Web UI 介面包裝,讓寫程式變成只要打開瀏覽器,就能立即開始編寫程式碼,按下一個 Run 按鈕後,就自動交由遠端的 Linux 伺服器編譯、執行,同時還能享有跟 Local 端相同的 Console 鍵盤操作、跟程式互動,我想這應該會是更方便的學習環境吧。

Node.js 是有趣的新技術,即使你從未使用過它、未來也不打算用它開發軟體,多瞭解它還是能夠顛覆許多傳統的想法,例如那些過去認為用 Web 做不到或很難做的事情,現在都變得可行而且簡單有趣。

如果你有興趣研究 Node.js,請參考:
  1. Node.js Taiwan Facebook Page http://facebook.com/nodejs.tw
  2. Node.js Taiwan Homepage http://nodejs.tw
  3. Node.js 中文社群電子書 http://book.nodejs.tw
Node.js Rocks!

2012年5月7日

淺談快速開發網站雛形,從 ContPub 的經驗說起...

如果使用架站軟體,如 Wordpress、Drupal 或 Joomla,可以找到很多佈景可以套用,例如:
  1. Wordpress Themes
  2. Drupal Themes
  3. JoomlaArt
但是自行開發的網站就沒有這麼幸運了,不管是程式或佈景,都必須自己打理。

2011 年 9 月剛開始啟動 ContPub 的專案時,為了讓網站剛開始有個基本堪用的外觀,我從一些網站找來 Free / Open 的佈景。
  1. www.oswd.org
  2. www.openwebdesign.org
  3. www.styleshout.com
套上佈景之後,寫程式會比較快樂,因為網站有基礎的佈景,比較不會像原始文件那樣醜陋;一開始不必花太多時間調整佈景,可以先專注在程式的開發上。

一段時間後問題慢慢浮現,雖然免費的樣板提供 PSD / CSS / HTML 原始檔,可以自行依照需求修改;但是要挑到一個滿意的佈景已經很不容易,更不用說還要講究免費佈景提供的布局和 UI 元件足夠使用。

因此當部分的功能需要用到 Tab、Dialog 時,我用了 jQuery UI 加速開發;這時候網站同時存在基本的佈景與 jQuery UI 的佈景,佈景不一致的問題就浮現了。

接下來為了讓 CSS 的撰寫更容易,我加入了 Compass,剛開始用得很順利,也陸續加入幾個 Compass Plugins;我想 Compass / LESS 對現代網站開發的方便與重要性,就不用在此贅述了,用過的人應該不會想要再用純手工撰寫 CSS 了吧。

由於原本的佈景沒有 Grid System,若要加上 Responsive Web Design 的修改很不容易。

於是我又幫 ContPub 加上 SUSY,但為了讓原本的佈景可以融合 Grid System,花了不少時間做佈景的修改。

在原本的佈景加上 SUSY 並不難,但是要再不同尺寸的螢幕瀏覽都能自動調整布局,就需要加上更多修改,例如 320+Susy 或相似作法等。

這幾天看到由 Even Wu 發佈的 Golden Grid Framework 後,我覺得這才是我想要的 Fluid Grid System + Respinsive Design。

除此之外佈景還有很多問題要解決,例如在使用 Reset CSS 之後,網站的基本樣式(如 Typography)都被清除需要重新定義,...

最後我發現用在調整 Web UI Design 的時間,比真正用來開發網站功能的時間還要多得太多了...

用了一個週末的時間把網站的外觀整個砍掉重練,為了重新開始,我考慮了以下兩種方案:
使用 Compass + Blueprint 可以享受 Compass 的便利,但 Blueprint 若要考慮 Responsive Design 就必須自己多下一些功夫;比較起來 Twitter Bootstrap 是一個更完整的基礎。

雖然 GitHub 可以找到一些 Compass + Twitter Bootstrap 的實作,但考慮到 Bootstrap 本身就已提供 LESS 可以客製外觀,我就不考慮這種混合的作法。

把原本的 CSS / Compass 清除後,大約耗費了10多個小時,才把 ContPub 原有的20多個 View 修改為 Bootstrap 的 conventions。



kippt 這個網站也是使用 Twitter Bootstrap 為基礎,開發者 @karrisaarinen 發表了一篇「Building with Twitter Bootstrap」分享他的經驗談,其中也講到 Bootstrap 的問題:
I think using Bootstrap for prototypes or hackathlons is ok, but if you actually have been using some time and effort to build your app, don’t ruin that by being lazy. Use some time to customize the site for your target users or get a designer to help you a bit.

也就是說使用了 Bootstrap 並不代表網站就不需要 Designer,Bootstrap 雖然預設的外觀相當簡潔也堪用,但是對於正式上線的網站來說,仍要花上許多時間進行客製。

雖然用 Bootstrap 打造的網站,一開始會有相同的外觀,但網站佈景本來就免不了需要請 Designer 特別設計,所以 Bootstrap 的意義就跟它的命名一樣,當網站還處於「bootstrap」階段時,它提供比較周全的基礎設施,讓你的 HTML/CSS/UI Components 有個基本的 conventions 可以參考。

這聽起來是個兼顧現時與未來的作法,讓網站在創立的初期,可以不必太花時間在無意義的外觀調整上(畢竟功能都還沒做完);等到需要正式上線、有 Designer 支援時,再用比較有系統的方式重新定義客製的外觀。

站在 Twitter Bootstrap Open Source 的基礎上,已經有許多延伸的專案出現,提供 Bootstrap 的佈景主題及客製化工具,例如:

Wrap Bootstrap - Themes for Twitter Bootstrap

Style Bootstrap - Create unique design with Bootstrap v2

lyhcode by lyhcode
歡迎轉載,請務必註明出處!