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

供各位參考~ 還滿有趣的

閱讀全文...

JavaScript 之哀愁 & 學習資源

Douglas Crockford 在 Google Tech Talk 的一個演講: JavaScript: The Good Parts

裡面提到了 JavaScript的美麗與哀愁

多數人 認為 這是一個很簡單、不重要的語言，所以 都是需要用到時 去抄、去改、去湊、去查

然後~ 拼出一個好像可以work的東西

JavaScript 語法長的很像 C, Java 不過 實質的內容 則是差很多

所以囉~ 寫出來的東西 錯誤連連、不好Debug 就怪到這語言設計不好的頭上啦~

當然 這語言設計是有一些缺失 不過 也有很多值得讚美的地方~

在JavaScript: The Good Parts這個talk 裡就為JavaScript做了一些平反

演講裡面~ 有提到 其實 JavaScript是當今世上最重要的語言

不無道理~ 現在 有哪台電腦上沒有browser、沒有JavaScript Interpreter ?

哪個網站沒用 JavaScript? 不搞Web2.0 ?

So, 既然這麼重要 當然應該要好好的熟悉它

因為本身對這語言 就像 Douglas Crockford 說的一樣... 還真的沒有好好的去研究他過

所以 也在網路上Search一番，有些資源 看來不錯~ 也在這兒做個整理囉:

• JavaScript: The Definitive Guide,by David Flanagan: 高手唯一推薦可讀的JavaScript書籍
• The Java Script Reference Series: 這個網站有對JavaScript的教學及說明 我覺的寫的很棒
• Mozilla Developer Center: 裡面有 JavaScript Reference & Guide
• JSLint: 一個JavaScript Code品質的評估工具
• Douglas Crockford也是JSON的發明人
• JavaScript: The World's Most Misunderstood Programming Language, by Douglas Crockford

閱讀全文...