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

轉(zhuǎn)載贊3 收藏19 評論

舉報 2015-07-15

掃描,分享朋友圈

客戶似乎總是欲求不滿的，要滿足他們的需求你總需要不停地解決各種問題。也正是這樣的客觀現(xiàn)實，使得我們不得不借助各種工具來應(yīng)對各種挑戰(zhàn)，越來越多的開發(fā)者和設(shè)計師也加入到創(chuàng)造新工具的行列中來。
今天我們精心挑選了20款新鮮好用的在線工具，讓網(wǎng)頁設(shè)計師和前端的工作變得更加輕松。這些工具有使用便捷的Web應(yīng)用，有功能強大的JavaScript庫，有完備的CSS樣式表，在它們的加持之下，你的Web項目會如虎添翼。

來源 | 優(yōu)設(shè)

1. Spot.IM

Spot.IM 是一款強大的能用于“任何”網(wǎng)站的社交媒體生成器，能讓自己的網(wǎng)站變成內(nèi)容驅(qū)動的社交網(wǎng)站。Spot.IM技術(shù)能夠讓網(wǎng)站不在依賴大型的外部社交網(wǎng)絡(luò)而構(gòu)建屬于網(wǎng)站自己的設(shè)計媒體，從而將內(nèi)容從其他社交媒體中解脫出來。

2. ExpandJS

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

3. Outline

Outline 是一個簡單的響應(yīng)式CSS模板，由Matt Harris創(chuàng)建。作為一款移動優(yōu)先的框架，Outline 擁有目前最好的響應(yīng)式設(shè)計，也是目前最好的核心組件之一。Outline被設(shè)計成為一個優(yōu)秀的工具，可以作為你的Web項目的基礎(chǔ)。

4. Startup Launch List

如果你準備創(chuàng)業(yè)的話，Startup Launch List 你絕對不能錯過。這個列表中包含了一系列創(chuàng)業(yè)者必讀的文章。這些文章的作者有創(chuàng)業(yè)者、設(shè)計師、投資者和意見領(lǐng)袖，過來人的經(jīng)驗都濃縮在這個APP當中。

5. Bounce

Bounce 是一個非常實用的腳本，它可以讓你在自己的網(wǎng)站中無需編寫代碼就可以發(fā)布漂亮的Banner，當訪客來訪問網(wǎng)站的時候，這個Banner會根據(jù)訪客所在地域、所在的頁面來展示不同的內(nèi)容。如果用戶裝了反廣告插件，Bounce會詢問用戶是否關(guān)閉插件，以支持你的網(wǎng)站的內(nèi)容。

6. Coverr

Coverr 是兩家創(chuàng)業(yè)公司 Veed.me 和 CodersClan 合作倡議之下的產(chǎn)物。由于兩家公司都打算在網(wǎng)站首頁中使用視頻背景，而這又需要優(yōu)質(zhì)的視頻和可靠的代碼，于是兩家合作為社區(qū)貢獻出這一免費工具，來解決這一問題。Coverr 為你提供了任何你要的視頻（MP4+webm+圖片），并且提供給你必需的代碼，并幫你實現(xiàn)它（HTML+CSS+JS）。網(wǎng)站是會在每周一更西7個新視頻，每個視頻片段在12~15秒。

7. JavaScript.com

JavaScript.com 是不可多得的學習資源，它是一個由Code School 團隊建立的JavaScript 社區(qū)，這個社區(qū)秉承開源共享的精神，分享知識，其中內(nèi)容是完全免費的。對于編程新手而言，JavaScript也算是一種強大而易于上手的語言，在這個社區(qū)當中，來自世界各地的程序員和開發(fā)者搜集整理了大量的內(nèi)容，方便新手學習。由于JavaScript 的強大擴展性，大量的第三方的工具、庫和框架層出不窮，你在社區(qū)當中還能及時獲得相關(guān)的更新和新聞。

8. Sitecake

Sitecake 是一款易用的內(nèi)容管理系統(tǒng)，專門為小型網(wǎng)站而設(shè)計，編輯器輕松易用，所見即所得。Sitecake 可以直接讀取、修改和保存普通的HTML文件，無需你懂得PHP或者特定的模板語言，所有的改變會直接保存到HTML文檔中，而圖片則直接調(diào)用系統(tǒng)內(nèi)的文件系統(tǒng)。完成編輯之后，你將擁有一個靜態(tài)的網(wǎng)站。

9. Gradify

Gradify 是一個能幫你發(fā)現(xiàn)任何圖片中最突出色彩并生成一定梯度的色彩CSS樣式的模塊。

10. Inker

Inker 是一個開源的前端框架和服務(wù)，它會改變你對于公司內(nèi)單對單電子郵件的看法。Inker將你從編寫和發(fā)送郵件中解脫出來，讓你的團隊不用再在發(fā)郵件的事情上浪費時間，并且可以專注于更加重要的事情。Inker會確保你的郵件代碼干凈，并且發(fā)送迅速，其中還內(nèi)置了免費的模板，讓你更輕松。

11. CamanJS

CamanJS 的名字實際上是取自Canvas Manipulation兩個詞的開頭，這是一個界面簡單易用高效的圖片和畫布編輯工具。值得一提的是，CamanJS的擴展性非常強，它可以輕松地同新的插件和濾鏡兼容，并且這個可兼容的插件數(shù)量還在不斷增長。作為一個開源而獨立的庫，CamanJS可以同Node.js以及各種瀏覽器兼容。

12. Slides

Slides 編輯器是一個在線的幻燈片編輯工具，只需要一個瀏覽器，你就可以開始制作屬于你的PPT，無需下載任何軟件，更無需安裝。無論你在哪里，都可以輕松搞定幻燈片的相關(guān)工作。如果需要，你還可以在線制作的幻燈片導(dǎo)出為PDF，或者打印出來，共享給其他人。

13. Rocket Chat

Rocket Chat 是一款使用JavaScript開發(fā)的網(wǎng)絡(luò)聊天服務(wù)器，借助Meteor fullstack framework開發(fā)完成。對于那些想要私密、獨立的實時溝通工具的企業(yè)而言，Rocket Chat是一個頗為不錯的解決方案。需要注意的是，Rocket Chat是基于MIT協(xié)議發(fā)布的。

14. Tota11y

Tota11y 是一款輔助的可視化工具包，借助它你可以看到你的網(wǎng)站使用這樣的技術(shù)會有著怎樣的表現(xiàn)。對于不太熟悉可訪問性測試的開發(fā)者而言，這套工具能夠?qū)⑺麄儚拿曰笈c混亂中拯救出來。

15. Unyson

Unyson 是一款快速而易用的Wordpress框架，它可以幫開發(fā)者制作更優(yōu)秀的主題。此外，它為開發(fā)者預(yù)備了大量的開發(fā)文檔和廣泛的支持。

16. Thao

這個名為Thao的框架是一款極簡的CSS框架，它可以讓Web開發(fā)更加簡單。它是使用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 是一個用來構(gòu)建動效和界面的JS庫，它抽象出了DOM和WebGL，允許你定制渲染效果和布局。

20. Bootcards

BootCards 是一款就卡片的UI框架，它基于BootStrap 并且借助它的響應(yīng)式特性來進行構(gòu)建。不同于其他的UI框架，它針對平板用戶準備了單獨的UI方案。BootCards內(nèi)置樣式使得你制作出來的界面不論是在iOS、Android還是桌面上都能呈現(xiàn)出本地應(yīng)用的樣子。