引言

一些開源的生產(chǎn)力工具能極大的提升我們的開發(fā)效率(我一直是這么認(rèn)為的)。

 

[[335467]]

今天推薦一些我一直在用的、比較香的工具給大家。其中包括一些文檔、可視化工具、分析工具、代碼片段、調(diào)試工具等。

Collect UI 

Collect UI[1]畫廊是一個(gè)免費(fèi)的在線資源，用于每日UI設(shè)計(jì)靈感。目前，它有 6500 多個(gè)條目，并且持續(xù)保持更新最新內(nèi)容。

 

 

在邊欄中，有做分類。包括 404 頁面、登陸/登出、購物車、日歷、視頻播放器等。如果你想在某方便需求靈感，然后用于你的公司項(xiàng)目或者個(gè)人項(xiàng)目，我想是會(huì)有很大的幫助的。

Taskade

在平時(shí)生活中總會(huì)有很多的事要做，比如工作時(shí)有很多待辦事項(xiàng)，但是很容易就會(huì)忘記一些事情，這時(shí)我們就需要一款具有帶有待辦事項(xiàng)的chrome插件--taskade[2]。

 

Taskade簡(jiǎn)單，整潔并且設(shè)計(jì)精美，有著令人放松的主題和背景。使用Taskade來整理您的思路，這樣您可以集中精力做事情。

 

Colordot

有時(shí)候我們想尋求一個(gè)自己喜歡的顏色(有點(diǎn)像起一個(gè)自己滿意的昵稱)，卻沒有靈感，這時(shí)候我們就可以來這里[3]

網(wǎng)頁區(qū)域內(nèi)隨意滑動(dòng)鼠標(biāo)，可以產(chǎn)生不同的色彩。確定一個(gè)色彩，再隨意滑動(dòng)產(chǎn)生下一個(gè)色彩，直到找到自己滿意的配色。

FontSpark

FontSpark[4]是一個(gè)幫助有字體選擇困難癥的用戶打造的選擇字體的網(wǎng)站，用戶只需要輸入所需要展示的文字即可獲得網(wǎng)站推薦的字體，包括字體類型和大小。對(duì)于推薦的字體不是很滿意的話，點(diǎn)擊Generate按鈕刷新即可。

 

 

 

 

The Noun Project

The Noun Project 網(wǎng)站專門提供高品質(zhì)、可辨識(shí)性強(qiáng)的icon，這些icon沒有很炫酷的設(shè)計(jì)，通常只用單色來呈現(xiàn)，使用者卻能很容易地辨別出它要傳達(dá)的意思。

 

 

 

目前 NounProject 提供超過 200 萬的icon供使用者免費(fèi)下載，且持續(xù)在更新中，如果你需要某種icon，卻一直沒有找到合適的，不妨到這個(gè)網(wǎng)站[5]來走走。

csseffects

CSSeffectsSnippets[6]收錄了大約 20 多種CSS動(dòng)畫，無論是加載讀取中，或是將光標(biāo)移動(dòng)過去產(chǎn)生的動(dòng)畫，都能在網(wǎng)站上即時(shí)預(yù)覽。

而這還不是它最大的亮點(diǎn)，最值得推薦的是所有效果都能在點(diǎn)擊后快速復(fù)制相關(guān)代碼，直接讓開發(fā)者運(yùn)用到自己的網(wǎng)站或博客，當(dāng)然可能還是需要經(jīng)過微調(diào)，不過不用從頭開始，也不需在網(wǎng)路上尋找這些動(dòng)畫代碼，非常方便而且省時(shí)。

 

unDraw

unDraw[7] 是由希臘設(shè)計(jì)師 Katerina Limpitsouni 開發(fā)的一套開源矢量插圖庫，在這個(gè)網(wǎng)站上有超過 1000 個(gè)扁平矢量插畫供你下載使用。

 

如果你在做個(gè)人網(wǎng)站，但對(duì)于插畫沒有靈感，或許你可以來看看。

 

 

DevDocs

這個(gè)網(wǎng)頁應(yīng)用匯聚了各種項(xiàng)目的文檔，還支持離線使用。

 

不管是新手程序員還是老程序員都需要有一個(gè)可以在線查詢各種編程手冊(cè)的文檔，而DevDocs[8]匯集了最全的編程開發(fā)文檔，又擁有極佳的閱讀模式，讓你可以快速的查詢想要的命令，同時(shí)還支持瀏覽器擴(kuò)展，可謂方便之極。

 

 

CSS Tricks

CSS Tricks[9]是一個(gè)國(guó)外的優(yōu)秀前端開發(fā)博客，主要分享使用CSS樣式的技巧、經(jīng)驗(yàn)和教程等。

 

該網(wǎng)站不斷的在更新一些優(yōu)秀的教程和技巧，為前端社區(qū)做出了具大的貢獻(xiàn)。我也一直在這上面學(xué)習(xí)，讓我在CSS方面視野拓寬了很多。

 

 

cssreference

如果需要更新 CSS 知識(shí)或者查詢不熟悉、不常用的屬性，可以訪問這個(gè)站點(diǎn)[10]。上面對(duì)每個(gè) CSS 屬性的講解很深入，給出的示例也很清楚，便于你理解這些屬性并應(yīng)用于自己的項(xiàng)目。

 

 

 

Can I Use

前端開發(fā)的時(shí)候時(shí)常需要檢查瀏覽器的兼容性，在這里推薦(Can I Use[11])這個(gè)是一個(gè)針對(duì)前端開發(fā)人員定制的一個(gè)查詢CSS、Js在各種流行瀏覽器中的特性和兼容性的網(wǎng)站，可以很好的保證網(wǎng)頁的瀏覽器兼容性。有了這個(gè)工具可以快速的了解到代碼在各個(gè)瀏覽器中的效果。

 

 

 

Lighthouse

Lighthouse[12]是一個(gè)Google開源的自動(dòng)化工具，主要用于改進(jìn)網(wǎng)絡(luò)應(yīng)用(移動(dòng)端)的質(zhì)量。目前測(cè)試項(xiàng)包括頁面性能、PWA、可訪問性(無障礙)、最佳實(shí)踐、SEO。

 

Lighthouse會(huì)對(duì)各個(gè)測(cè)試項(xiàng)的結(jié)果打分，并給出優(yōu)化建議，這些打分標(biāo)準(zhǔn)和優(yōu)化建議可以視為Google的網(wǎng)頁最佳實(shí)踐。

 

 

 

Majestic

Majestic[13]是一款好用的Jest運(yùn)行測(cè)試GUI工具。

 

利用可視化的方式，使用它可以讓我們查看測(cè)試用例輸出日志更加簡(jiǎn)單。

 

 

Wappalyzer

Wappalyzer[14]是一款能夠分析目標(biāo)網(wǎng)站所采用的平臺(tái)架構(gòu)、網(wǎng)站環(huán)境、服務(wù)器配置環(huán)境、javascript框架、編程語言等參數(shù)的chrome網(wǎng)站技術(shù)分析插件。

 

 

 

iHateRegex 

對(duì)于開發(fā)人員來說，正則表達(dá)式是會(huì)被經(jīng)常用到的，很多類型復(fù)雜的字符串都可以用它匹配出來，但唯一但缺點(diǎn)是編寫起來很困難，不僅需要熟練掌握規(guī)則，還需要花時(shí)間編寫、調(diào)試。

iHateRegex[15]就是這樣一個(gè)幫你解決書寫正則表達(dá)式煩惱的神器。

 

iHateRegex是一個(gè)在線開源工具，可快速檢索并匹配到合適的正則表達(dá)式，幫你完成如用戶名、郵箱、日期、手機(jī)號(hào)碼、密碼等常見規(guī)則的驗(yàn)證。

 

 

當(dāng)然你也可以看到它內(nèi)部的匹配過程，這有助于加深你的理解。