客戶似乎總是欲求不滿的，要滿足他們的需求你總需要不停地解決各種問題。也正是這樣的客觀現實，使得我們不得不借助各種工具來應對各種挑戰，越來越多的開發者和設計師也加入到創造新工具的行列中來。

今天我們精心挑選了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

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. The 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還是桌面上都能呈現出本地應用的樣子。