前端工程師都有用那些靠譜的工具

一、素材類網(wǎng)站

千庫(kù)網(wǎng)：一個(gè)免費(fèi)下載圖片素材的網(wǎng)站

Unsplash | Free High-Resolution Photos

Unsplash是一個(gè)分享免費(fèi)高質(zhì)量照片的網(wǎng)站，照片分辨率都挺大，而且都是真實(shí)的攝影師作品，圖片多是風(fēng)景和靜物。

二、配色類網(wǎng)站

Color Hunt

這個(gè)網(wǎng)站給我們提供了很多的配色方案，我們直接使用就OK了。使用方法也很簡(jiǎn)單，鼠標(biāo)移動(dòng)到對(duì)應(yīng)的顏色上，我們就可以看到顏色的十六進(jìn)制碼，復(fù)制這個(gè)顏色到工具里就可以使用了。

Adobe Color CC

這個(gè)是Adobe公司出的，他提供了多種配色方案。我們點(diǎn)擊圓盤中間的點(diǎn)，就可以調(diào)整出我們想要的配色方案。

http://www.colorhunter.com/

這是一個(gè)提取現(xiàn)有圖片配色方案的工具。我們上傳一張圖片，它就會(huì)幫我們把圖片的配色提取出來(lái)供我們使用。

Web安全色

這個(gè)網(wǎng)站是為WEB設(shè)計(jì)，開(kāi)發(fā)中經(jīng)常用到的安全色。網(wǎng)站內(nèi)列出了顏色的十六進(jìn)制碼和RGB碼，復(fù)制粘貼就可以了。

RGB顏色值與十六進(jìn)制顏色碼轉(zhuǎn)換工具

這是一個(gè)在線RGB和十六進(jìn)制顏色碼轉(zhuǎn)換工具。在對(duì)應(yīng)的位置填入十六進(jìn)制代碼，點(diǎn)擊轉(zhuǎn)換，我們就可以獲取到RGB顏色的代碼了。

三、圖標(biāo)類網(wǎng)站

Iconfont 阿里巴巴矢量圖標(biāo)庫(kù)

這是阿里巴巴旗下的圖標(biāo)庫(kù)網(wǎng)站，直接搜索關(guān)鍵詞就可以找到大批的圖標(biāo)。下載圖標(biāo)的時(shí)候我們還可以選擇顏色、大小、格式，根據(jù)自己的需要下載就好了。

PNG、ICO、ICNS 格式圖標(biāo)搜索下載_easyicon.net

這也是一個(gè)非常有名的圖標(biāo)庫(kù)，與上面那個(gè)不同的是，這里的圖標(biāo)不是單一顏色的，而是設(shè)計(jì)好的顏色。下載圖標(biāo)也很簡(jiǎn)單，直接點(diǎn)擊對(duì)應(yīng)圖標(biāo)上面的格式就可以下載。

Font Awesome圖標(biāo)搜索

奧森圖標(biāo)（Font Awesome）提供豐富的矢量字體圖標(biāo)—通過(guò)CSS可以任意控制所有圖標(biāo)的大小 ，顏色，陰影。

四、字體類網(wǎng)站

在線字體-有字庫(kù)：一個(gè)免下載字體，直接在線引用字體的網(wǎng)站。

五、工具類

在線工具 - 程序員的工具箱：一個(gè)在線工具網(wǎng)站，包含大量在線工具

JavaScript 庫(kù)/框架

JavaScript是全世界*受歡迎的Web編程語(yǔ)言。人們?yōu)榱丝旖蓍_(kāi)發(fā)網(wǎng)站或應(yīng)用預(yù)先編寫一些JS類庫(kù)。你可以通過(guò)一些公用CDN很方便地在自己的網(wǎng)站上引入這些庫(kù)：

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

jQuery: 方便快捷，功能強(qiáng)大全面，居家旅行必備，近乎JS的替代品，你可以不會(huì)js，但是不能不會(huì)jQuery。

BackBoneJS: 模型、視圖、集合、事件，讓你的前端代碼更有框架感。

D3.js: 數(shù)據(jù)可視化必學(xué)必會(huì)，只有你想不出來(lái)的，沒(méi)有D3畫不出來(lái)的。

React: 學(xué)會(huì)React，再學(xué)學(xué)React-native，你就能從一個(gè)前端化身Web app工程師、IOS/Andorid開(kāi)發(fā)者、桌面應(yīng)用工程師……

jQuery UI: 幾行代碼就能寫一個(gè)帶動(dòng)畫帶ajax的Web應(yīng)用。

jQuery Mobile: 移動(dòng)端專用js開(kāi)發(fā)框架，和上面的類似。

Underscore.js: 非入侵式框架，提供了眾多有用的函數(shù)方法，彌補(bǔ)jQuery的不足。

Moment.js: 原生的JS顯示輸出日期時(shí)間真的很痛苦，Moment為你解決了一切啦～

Lodash: 模塊化且高效，lodash和underscore很相似。

前端框架：

Bootstrap: 全世界*流行的響應(yīng)式前端框架。

Foundation: 提供了很多模版，針對(duì)網(wǎng)站、移動(dòng)端、郵件提供了很多好用的模塊和樣式。

Semantic UI: 個(gè)人非常喜歡的一個(gè)前端框架，樣式非常好看，更重要的是就像它語(yǔ)義UI的名稱一樣，類命名特別友好，寫網(wǎng)頁(yè)就像和人說(shuō)話一樣。

uikit: 漂亮、可定制，即將發(fā)布uikit3版本，感興趣可以試試看。

Web應(yīng)用框架：

Ruby on Rails: Ruby on Rails 是一款用ruby語(yǔ)言編寫Web應(yīng)用的MVC框架，github就是用它寫的！

AngularJS: Google主導(dǎo)的Web開(kāi)發(fā)框架，數(shù)據(jù)綁定、MVVM，很可惜被后來(lái)更靈活的React、Vue等框架搶去了風(fēng)頭。

Ember.js: 用來(lái)開(kāi)發(fā)單頁(yè)Web應(yīng)用的JS前端MVC框架。

Express: Node.js上的Web框架，搭建網(wǎng)站或API服務(wù)只要一秒鐘！

Meteor: JS全端框架，是的，你只需要學(xué)習(xí)JavaScript一門語(yǔ)言，就可以完成Web應(yīng)用前后端、數(shù)據(jù)庫(kù)的開(kāi)發(fā)。

Django: Python的Web框架，人生苦短，請(qǐng)用Python.

Flask: Python的Web框架，據(jù)說(shuō)只要學(xué)好flask就能隨意找到好工作？

ASP.net: 老一輩人的最愛(ài)。

Laravel: *優(yōu)雅性感的PHP Web框架，好用到不能再好用，優(yōu)雅到不能再優(yōu)雅，畢竟PHP是全世界*好的語(yǔ)言嘛。

Phalcon: 用C語(yǔ)言擴(kuò)展的，據(jù)說(shuō)是*快的PHP框架。

*文章內(nèi)容和圖片均來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除。