如虎添翼！20個精心挑選、新鮮好用的前端開發工具

客戶彷佛老是慾求不滿的，要知足他們的需求你總須要不停地解決各類問題。也正是這樣的客觀現實，使得咱們不得不借助各類工具來應對各類挑戰，愈來愈多的開發者和設計師也加入到創造新工具的行列中來。

今天咱們精心挑選了20款新鮮好用的在線工具，讓網頁設計師和前端的工做變得更加輕鬆。這些工具備使用便捷的Web應用，有功能強大的JavaScript庫，有完備的CSS樣式表，在它們的加持之下，你的Web項目會如虎添翼。

1. Spot.IM

Spot.IM是一款強大的能用於「任何」網站的社交媒體生成器，能讓本身的網站變成內容驅動的社交網站。Spot.IM技術可以讓網站不在依賴大型的外部社交網絡而構建屬於網站本身的設計媒體，從而將內容從其餘社交媒體中解脫出來。

2. ExpandJS

ExpandJS是一個擁有80+自定義元素和350+ 實用功能的模塊化JS庫，幫你的Web項目快速起步。整個庫是基於Polymer來構建，而且遵循Google的Material Design的設計規範，是lodash 的延伸，而且加入了更多強大的功能。

3. Outline

Outline是一個簡單的響應式CSS模板，由Matt Harris建立。做爲一款移動優先的框架，Outline 擁有目前最好的響應式設計，也是目前最好的核心組件之一。Outline被設計成爲一個優秀的工具，能夠做爲你的Web項目的基礎。

4. Startup Launch List

若是你準備創業的話，Startup Launch List你絕對不能錯過。這個列表中包含了一系列創業者必讀的文章。這些文章的做者有創業者、設計師、投資者和意見領袖，過來人的經驗都濃縮在這個APP當中。

5. Bounce

Bounce是一個很是實用的腳本，它可讓你在本身的網站中無需編寫代碼就能夠發佈漂亮的Banner，當訪客來訪問網站的時候，這個Banner會根據訪客所在地域、所在的頁面來展現不一樣的內容。若是用戶裝了反廣告插件，Bounce會詢問用戶是否關閉插件，以支持你的網站的內容。

6. Coverr

Coverr是兩家創業公司 Veed.me 和 CodersClan 合做倡議之下的產物。因爲兩家公司都打算在網站首頁中使用視頻背景，而這又須要優質的視頻和可靠的代碼，因而兩家合做爲社區貢獻出這一免費工具，來解決這一問題。Coverr 爲你提供了任何你要的視頻（MP4+webm+圖片），而且提供給你必需的代碼，並幫你實現它（HTML+CSS+JS）。網站是會在每週一更西7個新視頻，每一個視頻片斷在12~15秒。

7. JavaScript.com

是不可多得的學習資源，它是一個由Code School 團隊創建的JavaScript 社區，這個社區秉承開源共享的精神，分享知識，其中內容是徹底免費的。對於編程新手而言，JavaScript也算是一種強大而易於上手的語言，在這個社區當中，來自世界各地的程序員和開發者蒐集整理了大量的內容，方便新手學習。因爲JavaScript 的強大擴展性，大量的第三方的工具、庫和框架層出不窮，你在社區當中還能及時得到相關的更新和新聞。

8. Sitecake

Sitecake是一款易用的內容管理系統，專門爲小型網站而設計，編輯器輕鬆易用，所見即所得。Sitecake 能夠直接讀取、修改和保存普通的HTML文件，無需你懂得PHP或者特定的模板語言，全部的改變會直接保存到HTML文檔中，而圖片則直接調用系統內的文件系統。完成編輯以後，你將擁有一個靜態的網站。

9. Gradify

Gradify是一個能幫你發現任何圖片中最突出色彩並生成必定梯度的色彩CSS樣式的模塊。

10. Inker

Inker是一個開源的前端框架和服務，它會改變你對於公司內單對單電子郵件的見解。Inker將你從編寫和發送郵件中解脫出來，讓你的團隊不用再在發郵件的事情上浪費時間，而且能夠專一於更加劇要的事情。Inker會確保你的郵件代碼乾淨，而且發送迅速，其中還內置了免費的模板，讓你更輕鬆。

11. CamanJS

CamanJS的名字其實是取自Canvas Manipulation兩個詞的開頭，這是一個界面簡單易用高效的圖片和畫布編輯工具。值得一提的是，CamanJS的擴展性很是強，它能夠輕鬆地同新的插件和濾鏡兼容，而且這個可兼容的插件數量還在不斷增加。做爲一個開源而獨立的庫，CamanJS能夠同Node.js以及各類瀏覽器兼容。

12. Slides

Slides 編輯器是一個在線的幻燈片編輯工具，只須要一個瀏覽器，你就能夠開始製做屬於你的PPT，無需下載任何軟件，更無需安裝。不管你在哪裏，均可以輕鬆搞定幻燈片的相關工做。若是須要，你還能夠在線製做的幻燈片導出爲PDF，或者打印出來，共享給其餘人。

13. Rocket Chat

Rocket Chat 是一款使用JavaScript開發的網絡聊天服務器，藉助Meteor fullstack framework開發完成。對於那些想要私密、獨立的實時溝通工具的企業而言，Rocket Chat是一個頗爲不錯的解決方案。須要注意的是，Rocket Chat是基於MIT協議發佈的。

14. Tota11y

Tota11y是一款輔助的可視化工具包，藉助它你能夠看到你的網站使用這樣的技術會有着怎樣的表現。對於不太熟悉可訪問性測試的開發者而言，這套工具可以將他們從迷惑與混亂中拯救出來。

15. Unyson

Unyson是一款快速而易用的Wordpress框架，它能夠幫開發者製做更優秀的主題。此外，它爲開發者預備了大量的開發文檔和普遍的支持。

16. Thao

這個名爲Thao的框架是一款極簡的CSS框架，它可讓Web開發更加簡單。它是使用Less來進行編寫和編譯的，輕量級，無需JS代碼，和瀏覽器兼容性不錯，不過IE8如下的就別考慮了。

17. GitHub Updater

這個插件容許用戶安裝並自動更新託管自GitHub的Wordpress 插件。雖然名字裏面帶有GitHub，不過它依然實際上還兼容Bitbucket和GitLab。

18. Sassy Exists

Sassy-exists 是一款 SASS 小型庫。它提供替代語法用來檢測variable-exists, function-exists, feature-exists, 等等。

19. Famous Engine

FamousEngine是一個用來構建動效和界面的JS庫，它抽象出了DOM和WebGL，容許你定製渲染效果和佈局。

20. Bootcards

BootCards是一款就卡片的UI框架，它基於BootStrap 而且藉助它的響應式特性來進行構建。不一樣於其餘的UI框架，它針對平板用戶準備了單獨的UI方案。BootCards內置樣式使得你製做出來的界面不管是在iOS、Android仍是桌面上都能呈現出本地應用的樣子。