最近，「前端工程」這名詞越來越常聽到了，這還真叫我這個一直停留在初學階段的門外漢有點焦慮。這就來整理一下自己可能需要做的功課，包括 Bootstrap、MV* 框架、好用的 JavaScript 函式庫、免費的 icon fonts、HTML、CSS 設計工具等等。
更新
2013-09-07：把一些自己覺得好用的網頁開發與設計工具整理進來，包括 JavaScript 函式庫、HTML 與 CSS 產生器等等。
2013-10-13：Durandal、BreezeJS，以及其他細微補充。
2013-10-17：Image Picker、Masonry。
（估計會持續更新）
小引
不用說，以下這些東西是必備的——雖然我根本不太熟：
jQuery （2.0 已經不支援 IE 8 或更舊版的 IE，所以別再花時間去找偵測 IE 版本的解法了如果還是想要讓網頁支援 IE 8，請看這裡（by 黑暗大）或這裡。與其偵測 IE 版本或瀏覽器廠牌，不如偵測功能／物件）
Modernizr （都說「不用說」了......）
Bootstrap - 快速建立美觀、一致的網頁（但也容易跟別人的網站長得很像）。
BEM - 一種網頁設計原則，強調持續修改、著重網頁的可維護性。我不知道這些原則能否容易用於 ASP.NET 應用程式開發模型，但出發點是很好的。這裡有簡體中文翻譯。
前端 MV* 框架
Polyfill
跨瀏覽器相容性測試
輔助設計工具，如 CSS、icon fonts......等等（下方補述）
 |
| Origin: http://www.paulirish.com/i/7570.png |
先前看到有人建議 IETester，於是拿來用看看，覺得作為一個簡易測試工具還挺方便的，只是擔心仍有不足的地方。如果要檢測網頁跨 IE 版本的相容程度，還是到 modern.ie 看看吧，除了線上掃描你的網頁，還有提供各種虛擬機器可以下載回去實測，支援的作業平台包括 Windows、Mac、和 Linux。參考下圖：
作業平台選擇 Windows 之後，右邊挑選 VM 平台（不只微軟自家的 Hyper-V，還有 VirtualBox 和 VMware）。我選了 Microsoft Server 2012 和 Windows 8 Pro 的 Hiper-V 平台，結果下方列出一拖拉庫的虛擬機器，涵蓋了 IE 6、7、8、9、10、11 等版本。這真是太方便啦！幾個月前還自己建立其中幾種 VM 來測試勒 XD
其他相關知識："X-UA-Compatible" content="IE=Edge,chrome=1"
前端 MV* 與 SPA 框架
MV* 指的是 MVP、MVVM、MVC 等等，SPA 則是 Single Page Application 的縮寫。
KnockoutJS：專作 data binding。
AngularJS：由 Google 開發維護，一套豪華的 SPA 框架。它可以用 jQuery，也可以用自家的 jqLite。
Durandal：結合其他 JS 函式庫一起合作，成為一套 SPA 框架。有用到的 JS 函式庫包括 KnockoutJS、RequireJS、Sammy 等等。授權條款：MIT。
Durandal vs. Framework “X” by Rob Eisenberg（Durandal 的爸爸）
FireBug - 很好用的網頁除錯工具。當然 Chrome 和 IE 內建的除錯功能也很好用啦！都是按 F12 就能開啟。
jsFiddle - 線上練習、展示 JavaScript 的工具。
ui.livetools - 線上建立客製化 HTML 表單、按鈕、圖示的工具。
Pure CSS - 提供現成可用 CSS 樣式庫，是 YUI Library 的子專案。授權條款：BSD。
CSS TrashMan - CSS 清潔工，幫你把網頁中多餘的 CSS 去掉。
CSS Sprites Generator - 線上建立 CSS Sprite 圖檔。
CSS Sprite Generator - 另一個線上建立 CSS Sprite 圖檔的工具，可上傳 zip 檔（以支援很較多、較大的圖片）。
Glue - 命令列工具，用來將多個圖檔組合成一個 CSS Sprite 圖檔。
Spritecow - 線上讀取你的 CSS Sprite 圖檔，以視覺化方式選取其中的圖片，並顯示該圖片的 CSS，包括偏移位置、寬度與高度等等。方便！
famfamfam.com - 免費、可商用的圖庫。其中的 Silk 圖庫包含 1000 個圖示喔。
Font Awesome - 免費的 icon font，可搭配 Bootstrap 一起服用，亦可單獨使用。
The Elegant Icon Font - 也是免費、可商用的 icon font（採 GPL 2.0 與 MIT 雙重條款）。網路上還可以找到更多、更多圖像字型、。如果你不知道 icon font 的用處，這裡有線上展示（重點：容易修改，包括大小、顏色，陰影效果等，還可疊疊樂）。
|
| 取自 Font Awesome 官網的範例 |
|
| 取自 Elegant Icon Font 網站 |
其他好用好玩 JavaScript 函式庫、plugins
CKEditor - 強大好用的 HTML 編輯器。授權條款可選擇 GPL3 or LGPL3 or MPL（基本上可免費使用）。其他開源免費的 HTML 編輯器還有 Yahoo! 的 Rich Text Editor、CLEditor（原作者 Scott 已不再參與此專案，若無人接手，大概就逐漸凋零了）、較陽春的 jHtmlArea（沒提供字型選擇，Ms-PL授權）、NiceEdit（作者已宣布停止開發，MIT 授權）。
Select2 - 帶有漸進式搜尋框的下拉清單。授權條款：Apache 2.0。
Noty - 用來顯示各種訊息，例如：錯誤、警告、確認等。官網有提供線上 demo。jQuery based。授權條款：MIT。
Alertify.js - 建立美觀的對話框、通知訊息（例如在網頁右下角顯示通知訊息，三秒後自動消失）。授權條款：MIT。這也是我自己常用的 js 函式庫之一。
Underscore.js - 工具函式庫。可補 jQuery 之不足，亦為 backbone.js 的必備函式庫。有簡體中文版 API 文件。
Moment.js - 處理日期時間。授權條款：MIT。
Image Picker - 好用的圖片挑選元件（使用 jQuery）。如果圖片大小不一，建議搭配 Masonry 一起服用，以便自動排列圖片位置。我的筆記：使用 Image Picker 和 Masonry 來顯示圖片清單。
還有更多....
除了以上提到的工具，Will 保哥的部落格也介紹了不少好東西，我稍微爬了一下，整理在文後的延伸閱讀清單。
此外，How to keep up to date on front-end technologies 也提供了幾個方法，讓我們搭上前端技術的列車。包括：
