在我從事 Web 開發這段期間，其實一直依賴著很多好用的工具及參考文件；當然也不是所有的工具和文件我都精通，但它們確實幫我節省了很多開發的時間，也讓我學到很多有趣的技術。

以下我就來分享一些我收集並放在手邊參考的資訊，我也會大略地描述它們的內容與用途。

從開始用 jQuery 來開發網站前端程式之後，我就有 JavaScript 程式架構上的困擾。

jQuery 是屬於事件驅動模型，在小型程式的開發上是很方便的。不過一旦頁面元件一多，且彼此之間的關連性變得更複雜時，其視覺呈現與資料狀態就會混雜在一起。這樣一來就會使得我後續在維護時，不容易掌握程式的架構與流程。

今年二月，我在 Re-using Backbone.js Models on the server with Node.js and Socket.io to build real-time apps 這篇文章第一次跟 Backbone.js 相遇，那時就發現這似乎是個不錯的架構，可以用來整理我的 JavaScript 程式碼。

不過當時並沒有時間好好研究，直到後來很多國外高手開始發表有關 Backbone 的教學文章，再加上 Rails 社群大力推廣下，我才又回頭關注這個一直被我忽略的強大工具。

初探 Backbone.js

Backbone.js 一開始是屬於 MVC 架構，不過後來作者認為 Backbone.js 的 Controller 並非真正 MVC 中的 Controller 角色，所以將它改名為更符合其功能的 Router 。

接下來我用一個簡單的小例子來快速介紹 Backbone.js 的架構。

這是最近的讀書會報告，內容是有關 CSS 排版相關知識與實例分享。

以下是投影片的部份：

試著用 Head First 的風格來呈現，希望沒有畫虎不成反類犬。

實例的部份等影片整理好後再獻給大家。

在調整 Octopress 的過程中，找到一篇不錯的參考文章：換到octopress 。

因為想同時練習 Backbone.JS 和 CoffeeScript 這兩個熱門的技術，所以在網路上找了一下，剛好看到這篇 CoffeeScript with Backbone.js Example ，所以快速做個筆記。

這篇文章的範例主要是讓我們可以同時更改所有方塊的顏色和尺寸，只要在上方的文字欄位中輸入顏色與尺寸值即可。

以下就針對實做這篇文章時所碰到的一些問題以及實作上的心得，一一做整理。

用了 Compass Sprite 後，快速做個筆記，免得之後又忘了。

Compass Sprite 可以幫我們快速製作 CSS Sprite ，它有幾個特色：

• 可以不需要自行把圖檔串連起來， Compass Sprite 會自動幫我們處理。不過可惜它只支援 PNG 格式的圖檔，這點使用上要小心。

• 自動幫我們產生 Sprite CSS ，我們只要在適當的元素的屬性上加入對應的 class 就可以了。

以下是簡單的使用流程：

看了 Ant 和龍哥都各自寫了自己在 PHPConf.TW 簡報的心得，那麼我也來談談我自己的部份好了。