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

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

來自： 夢想天空的博客

2012年度最佳Web前端開發工具和框架