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

　　技術的快速發展讓很多人學習起來無所適從，幸運的是，很多優秀的 Web 開發人員和設計人員在努力尋找各種有特色的解決方案。 因此，我們有了很多優秀的小工具和庫，每一個都是用來解決特定的問題或維護一組特定的專案。

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