技術的快速發展讓 Web 開發人員學習起來不知所措，幸運的是，很多優秀的開發者和設計人員在努力尋找各種有特色的解決方案。 因此，我們有了很多優秀的小工具和庫，每一個都是用來解決特定的問題或維護一組特定的項目。這篇文章收集了2012年度新發布的最具有代表性 Web 前端開發工具和框架，這是一個非常值得收藏的工具列表。
11. Sublime Text 2
如果你想體驗流暢編寫代碼的快感，趕緊試試 Sublime Text 2 吧！
Sublime Text 具有漂亮的用戶界面和強大的功能，例如代碼縮略圖，多重選擇，快捷命令等。還可自定義鍵綁定，菜單和工具欄。Sublime Text 的主要功能包括：拼寫檢查，書簽，完整的 Python API ，Goto 功能，即時項目切換，多選擇，多窗口等等。
Sublime Text 是一款跨平臺的編輯器，同時支持 Windows、Linux、Mac OS X 等操作系統。Sublime Text 2 是收費軟件，但目前可以無限期試用。
12. PhoneGap 2.0
PhoneGap 是一個免費開源的開發框架，讓 Web 開發人員能夠使用熟悉的 HTML，CSS 和 JavaScript 構建跨平臺的移動本地應用。
通過 PhoneGap 框架提供的 JavaScript API 能夠以非常簡單的方式調用移動設備的核心功能，包括地理位置，攝像頭，加速器，通訊錄，多媒體，文件和網絡等功能。
借助 PhoneGap，你完全可以使用熟悉的 Web 開發技術寫出移動 Native App，并發布到 Apple Store，Google Play 等各平臺應用商店中。編寫好的代碼可以上傳到云端服務器，使用云端編譯功能編譯成各種平臺下的應用，支持 iOS，Android，Palm WebOS，Symbian，Blackberry，Windows Phone 和 Bada 七大平臺。
13. Emmet
Emmet 項目的前身是前端開發人員熟知的 Zen Coding，一種提供快速編寫 HTML/CSS 代碼的方法。和一般的編輯器中使用的“代碼片段”概念不同，Emmet 使用動態的類似 CSS 表達式的語法來生成代碼，這意味著你不需要自己去編輯并創建固定的代碼片段，大大的提高了代碼編寫效率。
Emmet 結合優秀的編輯器使用，可以讓你代碼飛起來！支持的編輯器包括：
Sublime Text 2
Eclipse/Aptana
TextMate 1.x
Coda 1.6 and 2.x
Espresso
Chocolat
Komodo Edit/IDE
Notepad++
PSPad
《textarea》
CodeMirror2/3
Brackets
14. Yeoman
Yeoman 提供了一套強大的工具、庫和工作流，可以幫助開發人員快速構建出漂亮的、引人注目的Web應用。Yeoman 的主要特色：
閃電般搭建出框架（使用能夠自定義的模板（例如：HTML5 Boilerplate、Twitter Bootstrap 等）、AMD（通過 RequireJS）以及其他工具輕松地創建新項目的框架。）；
自動編譯 CoffeeScrip & Compass——在代碼改動的時候，Yeoman 的 LiveReload 監視進程會自動編譯源文件并刷新瀏覽器，而不需要你手動執行；
自動校驗腳本——腳本會自動運行 jshint 校驗，以確保他們遵循語言的最佳實踐；
內建預覽服務器——不需要啟動自己的 HTTP 服務器，內置的服務器用一條命令就可以啟動；
高效的圖像優化——Yeoman 使用 OptPNG 和 JPEGTran 對所有圖像做了優化，提供頁面加載速度；
生成 AppCache 清單——Yeoman 會為你生成應用程序緩存的清單，你只需要構建項目就好；
殺手級的構建過程——Yeoman 為你自動化完成了大部分的工作，幫助你節省大量時間和精力；
集成包管理——你可以通過命令行輕松地查找新的包，安裝并保持更新，而不需要你打開瀏覽器；
支持 ES6 模塊語法——可以使用最新的 ECMAScript 6 模塊語法來編寫模塊，不過還是一種實驗性的特性，它會被轉換成ES5；
PhantomJS 單元測試——使用 PhantomJS 輕松運行單元測試。創建新的應用程序的時候，它還會為你自動創建測試框架；
15. TypeCast
TypeCast 讓你可以從 Fonts.com、TypeKit、FontDeck 和 Google 這些字體供應和商選擇字體，而且能非常方便的比較這些字體使用效果。如果你想獲得用戶對這些字體效果的反饋，只需要發布一個 URL 就可以了。這樣，無需實際購買的字體，直到你已經決定在最終的解決方案。
由于網頁字體的巨大飛躍，排版正在成為網頁設計師工作中一項越來越重要的內容。但是，實際的情況是數以千計的字體讓設計師需要花大量的時間和精力去選擇，而 TypeCast 正是為了解決這個問題的。
16. Gridset
Gridset 讓你可以非常輕松的添加列，定義比例和設置間隔，而不用考慮背后的數學計算。
網格系統正逐漸成為網頁設計的焦點，和印刷排版有點類似，但是要復雜很多。網頁的網格系統需要更加靈活，更加響應性。但是網格系統的計劃和規劃是件困難的事情，Gridset 可以讓你輕松的使用網格系統。
17. Microsoft WebMatrix 2
WebMatrix 是一個全新的 Web 開發平臺，區別于現有的開發平臺，WebMatrix 的特點是一站式和簡化的開發過程，提供一種簡單、一體化的建站方案。
它提供了網站所需的所有工具：Web Server、數據庫、Web 框架和開發環境。其主要組件包括了輕量級 Web serve IIS Developer Express；輕量級基于文件的數據庫 SQL Server Compact Edition；輕量級開發環境ASP.NET “Razor”。
18. Trello
Trello 是由著名的軟件工程師 Joel Spolsky 開發的一個團隊協作平臺，在今年的 TechCrunch Disrupt 大會上正式發布。運行和管理一家公司，最困難的事情莫過于追蹤大家的工作狀況，因此他開發了 Trello 來解決這個難題。任何行業中的任何人都可以使用 Trello 團隊工作系統。
其他的項目管理系統都是以開發者為中心的，過于復雜，對普通用戶缺乏吸引力，Trello 則為各種流程設計，既可以當做公司的協作工具，也可以當做個人的列表管理工具。
19. Firefox 18
Firefox 擁有眾多強大的開發工具插件，成為 Web 開發人員必備可少的調試工具，從Firefox 18 開始，Mozilla 將正式開啟開發長達1年之久的的新一代 JavaScript 引擎——IonMonkey，不僅能大幅提高 Firefox 的 JavaScript 性能，還能提高瀏覽器的安全性及其他性能。
最新版本增加對于 OSX 10.7+ 超高分屏和和 WebRTC 的支持；使用了新的 HTML 拉伸算法，提高了圖片質量；實現了 CSS3 Flexbox；實現 W3C 標準的觸摸實現，替代了 MozTouch 實現；實現新的 DOM 屬性 window.devicePixelRatio；通過智能化處理簽名擴展的認證來提高啟動速度。
20. Photon
Photon 是一個非常有趣的項目，為立體空間中的 DOM 元素添加光照效果的 JavaScript 庫，結合 CSS3 變換（Transform）實現。
作者 Tom Giannattasio 提供了三個例子，包括一個非常好的紙鶴的效果展示，你可以移動鼠標進行旋轉，下面提供的 Photon 效果切換按鈕可以讓你體驗兩種狀態下的差異。
