【年度盛宴】2012年度最佳 Web 前端開發工具和框架——《下篇》

  技術的快速發展讓 Web 開發人員學習起來不知所措,幸運的是,不少優秀的開發者和設計人員在努力尋找各類有特點的解決方案。 所以,咱們有了不少優秀的小工具和庫,每個都是用來解決特定的問題或維護一組特定的項目。這篇文章收集了2012年度新發布的最具備表明性 Web 前端開發工具和框架,這是一個很是值得收藏的工具列表。 html

 

11. Sublime Text 2

  若是你想體驗流暢編寫代碼的快感,趕忙試試 Sublime Text 2 吧! 前端

  Sublime Text 具備漂亮的用戶界面和強大的功能,例如代碼縮略圖,多重選擇,快捷命令等。還可自定義鍵綁定,菜單和工具欄。Sublime Text 的主要功能包括:拼寫檢查,書籤,完整的 Python API ,Goto 功能,即時項目切換,多選擇,多窗口等等。 git

  Sublime Text 是一款跨平臺的編輯器,同時支持 Windows、Linux、Mac OS X 等操做系統。Sublime Text 2 是收費軟件,但目前能夠無限期試用。 github

 

 

12. PhoneGap 2.0

  PhoneGap 是一個免費開源的開發框架,讓 Web 開發人員可以使用熟悉的 HTMLCSS 和 JavaScript 構建跨平臺的移動本地應用。 web

  經過 PhoneGap 框架提供的 JavaScript API 可以以很是簡單的方式調用移動設備的核心功能,包括地理位置,攝像頭,加速器,通信錄,多媒體,文件和網絡等功能。 算法

  藉助 PhoneGap,你徹底可使用熟悉的 Web 開發技術寫出移動 Native App,併發布到 Apple Store,Google Play 等各平臺應用商店中。編寫好的代碼能夠上傳到雲端服務器,使用雲端編譯功能編譯成各類平臺下的應用,支持 iOS,Android,Palm WebOS,Symbian,Blackberry,Windows Phone 和 Bada 七大平臺。 數據庫

 

HTML5 + CSS3 + Javascript = native mobile apps

 

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 輕鬆運行單元測試。建立新的應用程序的時候,它還會爲你自動建立測試框架;

 

Yeoman provides a friendly interface to the most up to date development techniques

 

15. TypeCast

  TypeCast 讓你能夠從 Fonts.comTypeKitFontDeck 和 Google 這些字體供應和商選擇字體,並且能很是方便的比較這些字體使用效果。若是你想得到用戶對這些字體效果的反饋,只須要發佈一個 URL 就能夠了。這樣,無需實際購買的字體,直到你已經決定在最終的解決方案。 

  因爲網頁字體的巨大飛躍,排版正在成爲網頁設計師工做中一項愈來愈重要的內容。可是,實際的狀況是數以千計的字體讓設計師須要花大量的時間和精力去選擇,而 TypeCast 正是爲了解決這個問題的。

 

 

Typesetting the web as it should be done

 

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」。

 

WebMatrix has excellent manners, helping when needed, or just staying out of the way

 

18. Trello

  Trello 是由著名的軟件工程師 Joel Spolsky 開發的一個團隊協做平臺,在今年的 TechCrunch Disrupt 大會上正式發佈。運行和管理一家公司,最困難的事情莫過於追蹤你們的工做情況,所以他開發了 Trello 來解決這個難題。任何行業中的任何人均可以使用 Trello 團隊工做系統。

  其餘的項目管理系統都是以開發者爲中心的,過於複雜,對普通用戶缺少吸引力,Trello 則爲各類流程設計,既能夠當作公司的協做工具,也能夠當作我的的列表管理工具。

 

Make sense of the big picture with Trello's boards

 

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;經過智能化處理簽名擴展的認證來提升啓動速度。

 

Firefox makes sense of the tangled web

 

20. Photon

  Photon 是一個很是有趣的項目,爲立體空間中的 DOM 元素添加光照效果的 JavaScript 庫,結合 CSS3 變換(Transform)實現。

   做者 Tom Giannattasio 提供了三個例子,包括一個很是好的紙鶴的效果展現,你能夠移動鼠標進行旋轉,下面提供的 Photon 效果切換按鈕可讓你體驗兩種狀態下的差別。

 

相關文章
相關標籤/搜索