引言

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

 

[[335467]]

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

Collect UI 

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

 

 

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

Taskade

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

 

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

 

Colordot

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

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

FontSpark

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

 

 

 

 

The Noun Project

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

 

 

 

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

csseffects

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

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

 

unDraw

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

 

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

 

 

DevDocs

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

 

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

 

 

CSS Tricks

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

 

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

 

 

cssreference

如果需要更新 CSS 知識或者查詢不熟悉、不常用的屬性，可以訪問這個站點[10]。上面對每個 CSS 屬性的講解很深入，給出的示例也很清楚，便于你理解這些屬性并應用于自己的項目。

 

 

 

Can I Use

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

 

 

 

Lighthouse

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

 

Lighthouse會對各個測試項的結(jié)果打分，并給出優(yōu)化建議，這些打分標準和優(yōu)化建議可以視為Google的網(wǎng)頁最佳實踐。

 

 

 

Majestic

Majestic[13]是一款好用的Jest運行測試GUI工具。

 

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

 

 

Wappalyzer

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

 

 

 

iHateRegex 

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

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

 

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

 

 

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