Firefox Plugin - Read It Later! (書籤管理、共享及同步工具)

Read It Later 是一個 firefox 上的 plug-in

對我而言，它幫我解決下列的問題

1. 因為很貪心，所以 常常在 firefox 上開了一堆 tab、有一堆待看的文章，但是這些文章都沒消化掉
若是就留在 tab 上面，每次 firefox 開啟時自動 reload 又很佔memory resources
若是把每個都 bookmark 起來一再關掉tab，這樣雖然節省資源 但操作起來又很費工 而且容易忘記閱讀、 bookmark也很容易髒掉

read it later 讓你在「留在 firefox tab」以及「bookmark」中取得一個平衡點
也就是，新增了一個 「待讀列表」的bookmark類別，並可透過該 plug-in 很容易的管理

2. 我有好多台電腦，散佈在家裡、公司，但是 待看的文章也是散佈在各台電腦的 browser tab 記憶內
透過 read-it later 的同步功能，只要在各台電腦上設定 read it later 伺服器上相同的帳號、密碼 就可以透過 read it later 伺服器來同步這些待讀的清單，且 這個帳號、密碼並不用申請 要產生多少 就有多少，是不是很方便呢 ?

3. read it later 與 google book mark 的比較
當然 透過 google book mark 也可以在不同的電腦裡面share同一份bookmark
不過，基於下述理由，我是兩套工具並用:
a. bookmark 是經過消化吸收後 才納入的，與未經消化及閱讀的項目是不同層級的資訊
b. read it later 的同步功能，會把各台電腦的 to-read list upload 到 server, 再download 到 client 變成 local list，在使用上 不用都透過 web、網路 來存取這些 list，相對的速度會較快
且在呈現上，也可依加入待讀列表的時間、網站的位置 等屬性來做排序呈現
雖只是簡單的小工能，但是 卻大大的給了我們方便呢 :)

閱讀全文...

網頁效能調校方向及工具 (Web Performance Tips & Tools) - YSlow, Google Page Speed

從Tim Berners-Lee發明WWW以來，Web已經過17、18個年頭的發展
其成長速度 是呈指數型的爆炸性成長
Web的爆炸性成長 讓Browser變成每人每天最常使用的軟體、介面
從最原始的資訊呈現用途 到現在成為一應用程式的平台
從 HTML5, O3D, Native Client, Chrome OS, ... 都可以感覺到，未來的Web 只會更重要...

一個好的網站 在效能面 是非常重要的
如果網頁回應速度太過、呈現速度太慢 即使有好的應用、好的內容 但還是會被使用者所唾棄。
那到底要怎麼建構一個效能佳的網頁? 有什麼好的實務作法(BestPractice)? 有什麼工具可以幫忙檢查?

下列的參考文章，分別是Yahoo & Google針對網頁開發在效能面的最佳實務作法說明，這些文章 提示了網頁開發者一些效能提升的重點(如: 降低Http Request 數，減少網頁及網頁組成之Size, Cache的使用, Http Compression的使用, Content Delivery Network的使用, 網頁及網頁組成在Server端的分散佈署, JavaScript、CSS 在網頁上的放置位置, ... 等)，從基本的觀念、到建階的方法，資訊非常的完整且值得參考，對於網頁效能提升有興趣的人，絕對值得一看!!

此外，Yahoo 及 Google 也各自依各自所提的網頁效能的要點，製做了檢查、分析的工具，讓網頁開發者透過該工具即可很快的知道自已的網頁在效能上還有什麼需要調整改進之處(會產出recommendation report)。這兩個工具分別的 Yahoo YSlow(Firefox的plugin)、Google Page Speed(Firefox上firebug的plugin)，順便一提，在這部分 Yahoo 的資訊分享及工具都比Google還快，Google在這點看來，是me too、是follower :Q 不過 看來 這兩個東西 都跟 Steve Souders有關... Steve 原本在 Yahoo 工作時 發展了YSlow，但 後來跳槽到Google ...
另外，若只是想單純的check 每個網頁、網頁組件的下載速度，Http Watch這個工具，也值得一試。


參考文章:
Yahoo: Best Practices for Speeding Up Your Web Site
Google: Web Performance Best Practices

檢測工具:
Yahoo! YSlow
Google Page Speed
Http Watch

以下，是拿 udn.com (聯合新聞網)為標靶，用YSlow, Google Page Speed來看看這個新網網站的首頁有什麼需要加強的部分 :Q 也讓讀者感受一下，這兩個Tool的威力..

YSlow:



Google Page Speed:

閱讀全文...

Software Testing - 談軟體測試

在軟體發展生命週期中，測試是相當重要的一環

整個測試的目的 是要做到驗證(verification)及確認(validation)的作業

以在下列兩個主要的構面，確認軟體成品的品質
驗證(verification): do the thing right - 把事情做好, 即 驗證軟體是否依技術規格開發
確認(validation): do the right thing - 做對的事情，即 驗證軟體是否滿足開發的初衷(intend)

就軟體價值而言，通過驗證以證明軟體的技術品質是最基本的事
但，能讓軟體發恢價值 則是透過確認的動作 ...

確認的作業，一般發生在需求發展(requirement development)及 使用者驗收階段(User Acceptance Testing, UAT)，在需求發展階段 是要透過各種不同的方法 將軟體的需求誘導出來，並儘可能在該階段 就將需求確認好，因為 在整個軟體生命週期中 需求發展 - 需求分析 - 系統分析 - 開發 - 系統測試 - 驗收 - 上線
越是在後期發現問題、修改需求 所需的effort/cost愈高
所以，這個階段 其實 是最最最重要的

在使用者驗收階段中，則是透過檢視、使用者操作測試的方法 來確認最終產品符合客戶需求

驗證的作業，則強調 軟體生命週期中的各項產出(artifact) 互相間的一致性
即 需求-設計 的一致性，設計-開發 的一致性.. 等
透過層層的驗證檢查，以確保 所有最初的需求都有被完善的被滿足

不論是 驗證(verification)、確認(validation)，我們都會在其中的部分活動面臨到軟體成品的測試

特別在 RUP(Rational Unified Process), XP(eXtreme Programming)等agile development process的概念風行之後

所倡導的 Continuous Integration觀念、Test Spec as requirement 觀念
都在在的強調測試的重要性!!

唯有讓程式(自動化的測試工具/腳本)來驗證程式，才是通往agile development & continuous integration的唯一途徑

否則，在快速且反覆的整合過程當中，若缺乏自動、快速的測式方法，而由人力進行測試的話，將會花費許多時間人力、難以掌握測試的品質及一致性、亦會扼殺了人類的價值 (讓人一直做重複的事情跟操作)

一般軟體的測試工具 不勝枚舉，個人知道的有下列的工具
做Unit Test的有: JUnit, NUnit, ...等 *Unit 系列
做Functional Test的: QTP, WebDriver, Selenium Core/IDE/RC, ... 等
做Performance Test的: Rational Robots, Load Runner, ACT, Selenium Grid, ... 等

其中，WebDriver, Selenium 是專門進行 Web 測試的工具
都是伴隨著 Web 2.0 的成長，所發展出來的 opensource 免錢軟體

因為，這兩個產品在 google 內部也被大量的使用到

所以，後續 將會有針對這些tools的一些的介紹

閱讀全文...

CodeMirror 介紹 - 在Web上呈現程式語言內容

CodeMirror: http://marijn.haverbeke.nl/codemirror/

一般的programmer總會想在 web 上面去分享自已的一些sample code

但是，html 對於一般程式語言用的換行、tab符號 都視為空白

且，Browser也缺乏對 programmer language syntax high-lighting/coloring, code indentation(縮行)..等功能

所以，我們單純的把程式碼做為 html 的文字內容時，常常得到的是一串很醜、沒斷行的字串
就算加了 pre 這個 html tag, 能保留斷行、空白 但也無法擁有 syntax hilight 的功能

一般，可能用貼圖的方式 or 檔案下載的方式 來提供這些程式碼的內容

或是自訂css來做呈現~

但這些方法都比較間接 也比較麻煩一點...

Code Mirror 就是為了幫助解決這個問題所生的一套 javascript library

基本上，它提供了一個 code editor 的介面

提供了數種程式語言的呈現及編輯介面 (只要依它定的規則去寫parser，就可以再延伸其它語言的應用)，使用者可以很清義的透過 javascript 來使用、設定呈現的效果

目前支援的語言有 HTML ,XML, JavaScript, Python, CSS, SPARQL, PHP

透過 CodeMirror config值的設定，可以定義該呈現區塊處理的程式語言為何(parser)、呈現方式為何(css file)、要不要有行號、要不要自動換行(wrapping)...等功能

可說是非常的方便~

連 Google 的 API playground, Google Earth KML Sampler 都是透過code mirror來打造出一個可線上編輯、執行JavaScript的環境

下面是我試用的結果:

閱讀全文...

Yahoo Pipes: Web資料擷取處理引擎介紹

Yahoo Pipes 可以依你定義的資料流處理方式，幫你進行 web 資料(rss, atom, csv, ..)的擷取、處理、輸出(format: rss, json, ...)

好處是 透過 pipies 作為資料處理引擎，不用將資料處理邏輯放在自家的 server 上 而是 host 在 yahoo

透過拖拉的方式 將資料處理邏輯定義好(如, 取得、匯集、過濾、排序...等) 也可省掉很多 coding的時間及人力

以之前寫的 sample 而言

就是透過 yahoo pipes 裡user定義好的資料處理流程，將 RSS / ATOM feed 轉成 JSON format

以達到 不用 server side code (proxy) 來達到 client 端跨domain 的資料擷取
(註: 因為 Same Origin Policy 的關係，在AJAX的實作中，client side script 不能透過XMLHttpRequest 存取不同domain的web resources，此時 proxy 是一種walkaround來繞過這種問題的解決方式)

這樣，甚至根本就不用 server side 的程式，就可做很多 mashup 的應用 :Q

供各位參考~ 還滿有趣的

閱讀全文...

翻譯筆記 - TransNote

翻譯筆記 - TransNote (http://www.transnote.org/) 是 ITRI(工研院)的一項 project

這個小工具的功能，不像其它網站/工具提供的「全文翻譯服務」，也不項某些 翻譯軟體或browser plug-in提供的「User滑鼠指標指到的文字 進行即時的翻譯」功能

而是提供所謂「翻譯筆記」的功能

所謂的翻譯筆記，使用起來會很像大家在讀原文書時，若有些單字看不懂，會在查完字典後將所查的中文解釋註記在書本上

個人覺的這個功能感覺很不賴，雖然本人非該工具的重度使用者，但是還是分享予讀者

有可能對原文文章的閱讀有一定的幫助，當然不能完全拿來做為學習英文的方法，畢竟一個單字的用法是很多種的...

TransNote 目前使用方法如下:
1. Copy 一段原文文章至 Transnote 網站
2. 點選「開始閱讀」
3. 在欲翻譯的文字上 double-click，則該英文生詞即會注記在文字下方，再double-click一次，即會取消該註記

以下是我拿「歐巴馬就職演說」的英文原文做為範例，所示範的效果:



翻譯筆記做完後，可在線上存檔或儲存到電腦內(目前儘提供 html 格式)，算是小貼心的設計。
目前翻譯筆記的功能應該只是在試驗階段，所以原文的內容需由 user copy & paste 上去，並無法引用特定Url的內容，當然 也未保留文章內容原本的html格式。

閱讀全文...