2012年，Web 開發領域繼續在快速的發展，HTML5 仍然在展示其跨平臺的優越性，CSS3 被人們更多的應用到實際專案中，響應式設計（Responsive Design）技巧也被人越來越多的人熟知和使用。

這篇文章收集了2012年度新發布的最具有代表性 Web 前端開發工具和框架，這是一個非常值得收藏的工具列表，從功能全面的 IDE 到美觀、充滿異國情調的小框架，小工具等等。他們能夠幫助你降低 Web 開發過程中的複雜度，節省時間和精力。

01.Foundation 3

響應式設計（Responsive Design）似乎瞬間就發展起來了，各個網頁設計的論壇或者社群都會討論這個話題，大家都想知道如何實現響應式設計，有什麼框架或好的解決方案。

Foundation 3，由 ZURB 公司開發，號稱世界上最先進的響應式前端框架。利用靈活的網格系統可以快速設計出頁面佈局。更妙的是，網格可以是你所需要的任何尺寸，它很容易適應各種尺寸的螢幕。

02.Proto.io

Proto.io是一個新的介面原型設計工具，專門針對移動應用程式。基於 Web 的線上環境，可以讓你製作流行的 iPhone，iPad，Android 手機或平板電腦，以及任何帶有螢幕介面的裝置的原型專案。

在設計了一些介面後，你通常會期望能夠把頁面互動性的連結起來，Proto.io 做到了這一點。它也支援所有你可能想到的觸控手勢，以及幻燈片、翻轉和淡入淡出動畫，使用簡單，而且可以免費使用。

03.Fontello

為什麼這麼難找到一組涵蓋所有的基礎功能的外觀一致的圖示？

不用再困惑了，Fontello不僅擁有所有你需要的圖示，而且你可以挑選並選擇你所需要的字形，並編譯成自己需要的一套。 當然，您也可以從GitHub下載整個的圖示集。該專案是開源的，糕富帥們捐幾刀吧，不勝感激。

04.Bugherd

與普遍的看法相反，推出一個新的網站對於開發團隊來說工作還遠遠沒有結束。

BugHerd提供了一個整潔，組織良好的方式來處理反饋，Bug 修復和功能要求。不需要繁雜的電子郵件反饋方式，只需要在網站中包含一個簡單的 JavaScript 檔案，該網站的訪問者就可以通過反饋按鈕提交意見和建議。BugHerd 提供了一個友好，直觀的介面來管理整個事情。

05.Sencha Touch 2

毫無疑問，移動觸屏裝置的流行給Web開發帶來了巨大的影響。

Sencha Touch是一個基於 HTML5 的移動應用開發框架，致力於吸引HTML5開發者使用Sencha Touch構建在iPhone、Android和BlackBerry等裝置上執行的移動Web應用，這些應用效果看起來如同本地應用。改進的API，完善的文件和教程資料以及可靠的本地整合讓 Sencha Touch 2成為強有力的移動框架競爭者。

06.Dreamweaver CS6

Dreamweaver是經典的網頁製作軟體，最新發布的Dreamweaver CS6新增了HTML5和CSS3編碼支援；jQuery移動和Adobe PhoneGap框架的擴充套件支援可協助您為各種螢幕、手機和平板電腦建立專案；集成了Adobe Business Catalyst、FTPS、FTPeS 支援、Adobe Creative Suite、Adobe BrowserLab等眾多功能。

07. Cloud9 IDE

Cloud 9是基於NodeJS構建的線上整合開發環境，語法高亮支援 C#, C++, Python, Perl, Ruby, Scala 等等眾多常用開發語言。

內建的Vim模式非常好用，支援流行的版本控制系統，像Git，Mercurial和SVN，另外它還有非常強大的外掛系統，可以拓展其功能，例如藉助CSSLint和JSBeautify，Cloud9就可以變成一款非常實用的程式碼美化工具。

08.Adobe Edge Inspect

Edge Inspect是一款對移動開發者非常有用的工具，其前身是Adobe Shadow，用於幫助設計師和開發者同時在多個移動裝置上預覽應用設計，發現和解決跨平臺問題。

只需要把你的裝置（Android和iOS）和你的電腦連線起來，這時候你的網站就會在各個裝置上同步顯示，讓檢查和除錯變得更有效，並可以讓設計師同時看到每個版本在所有目標裝置上的顯示情況。

09.Adobe Brackets

你可能會覺得現在程式碼編輯器已經是琳琅滿目了，而且這些編輯器都很相似，沒有什麼可創新的了。Brackets讓我們知道，其實在編輯器領域還是有很多功能可以去探索的。Brackets是Adobe的開源HTML、CSS和JavaScript整合開發環境。Brackets提供Windows和OS X平臺支援。

Brackets的核心目標是減少在開發過程中那些效率低下的重複性工作，例如瀏覽器重新整理，修改元素的樣式，搜尋功能等等，Brackets值得你試試。

10.Modernizr 2.6

Modernizr是一個開源的JavaScript庫，用於檢測使用者瀏覽器的HTML5和CSS3特性。它使得那些基於使用者瀏覽器的不同（指對新標準支援性的差異）而開發不同級別體驗的設計師的工作變得更為簡單，讓Web開發人員可以在現代瀏覽器中充分利用HTML5和CSS3的那些先進的特性進行開發，同時又不會犧牲其它不支援這些新技術的瀏覽器的控制。

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結合優秀的編輯器使用，可以讓你程式碼飛起來！支援的編輯器包括：

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效果切換按鈕可以讓你體驗兩種狀態下的差異。