那些前端開發必不可少的生產力工具
引言
一些開源的生產力工具能極大的提升我們的開發效率(我一直是這么認為的)。
今天推薦一些我一直在用的、比較香的工具給大家。其中包括一些文檔、可視化工具、分析工具、代碼片段、調試工具等。
Collect UI
Collect UI[1]畫廊是一個免費的在線資源，用于每日UI設計靈感。目前，它有 6500 多個條目，并且持續保持更新最新內容。
在邊欄中，有做分類。包括 404 頁面、登陸/登出、購物車、日歷、視頻播放器等。如果你想在某方便需求靈感，然后用于你的公司項目或者個人項目，我想是會有很大的幫助的。
Taskade
在平時生活中總會有很多的事要做，比如工作時有很多待辦事項，但是很容易就會忘記一些事情，這時我們就需要一款具有帶有待辦事項的chrome插件--taskade[2]。
Taskade簡單，整潔并且設計精美，有著令人放松的主題和背景。使用Taskade來整理您的思路，這樣您可以集中精力做事情。
Colordot
有時候我們想尋求一個自己喜歡的顏色(有點像起一個自己滿意的昵稱)，卻沒有靈感，這時候我們就可以來這里[3]
網頁區域內隨意滑動鼠標，可以產生不同的色彩。確定一個色彩，再隨意滑動產生下一個色彩，直到找到自己滿意的配色。
FontSpark
FontSpark[4]是一個幫助有字體選擇困難癥的用戶打造的選擇字體的網站，用戶只需要輸入所需要展示的文字即可獲得網站推薦的字體，包括字體類型和大小。對于推薦的字體不是很滿意的話，點擊Generate按鈕刷新即可。
The Noun Project
The Noun Project 網站專門提供高品質、可辨識性強的icon，這些icon沒有很炫酷的設計，通常只用單色來呈現，使用者卻能很容易地辨別出它要傳達的意思。
目前 NounProject 提供超過 200 萬的icon供使用者免費下載，且持續在更新中，如果你需要某種icon，卻一直沒有找到合適的，不妨到這個網站[5]來走走。
csseffects
CSSeffectsSnippets[6]收錄了大約 20 多種CSS動畫，無論是加載讀取中，或是將光標移動過去產生的動畫，都能在網站上即時預覽。
而這還不是它最大的亮點，最值得推薦的是所有效果都能在點擊后快速復制相關代碼，直接讓開發者運用到自己的網站或博客，當然可能還是需要經過微調，不過不用從頭開始，也不需在網路上尋找這些動畫代碼，非常方便而且省時。
unDraw
unDraw[7] 是由希臘設計師 Katerina Limpitsouni 開發的一套開源矢量插圖庫，在這個網站上有超過 1000 個扁平矢量插畫供你下載使用。
如果你在做個人網站，但對于插畫沒有靈感，或許你可以來看看。
DevDocs
這個網頁應用匯聚了各種項目的文檔，還支持離線使用。
不管是新手程序員還是老程序員都需要有一個可以在線查詢各種編程手冊的文檔，而DevDocs[8]匯集了最全的編程開發文檔，又擁有極佳的閱讀模式，讓你可以快速的查詢想要的命令，同時還支持瀏覽器擴展，可謂方便之極。
CSS Tricks
CSS Tricks[9]是一個國外的優秀前端開發博客，主要分享使用CSS樣式的技巧、經驗和教程等。
該網站不斷的在更新一些優秀的教程和技巧，為前端社區做出了具大的貢獻。我也一直在這上面學習，讓我在CSS方面視野拓寬了很多。
cssreference
如果需要更新 CSS 知識或者查詢不熟悉、不常用的屬性，可以訪問這個站點[10]。上面對每個 CSS 屬性的講解很深入，給出的示例也很清楚，便于你理解這些屬性并應用于自己的項目。
Can I Use
前端開發的時候時常需要檢查瀏覽器的兼容性，在這里推薦(Can I Use[11])這個是一個針對前端開發人員定制的一個查詢CSS、Js在各種流行瀏覽器中的特性和兼容性的網站，可以很好的保證網頁的瀏覽器兼容性。有了這個工具可以快速的了解到代碼在各個瀏覽器中的效果。
Lighthouse
Lighthouse[12]是一個Google開源的自動化工具，主要用于改進網絡應用(移動端)的質量。目前測試項包括頁面性能、PWA、可訪問性(無障礙)、最佳實踐、SEO。
Lighthouse會對各個測試項的結果打分，并給出優化建議，這些打分標準和優化建議可以視為Google的網頁最佳實踐。
Majestic
Majestic[13]是一款好用的Jest運行測試GUI工具。
利用可視化的方式，使用它可以讓我們查看測試用例輸出日志更加簡單。
Wappalyzer
Wappalyzer[14]是一款能夠分析目標網站所采用的平臺架構、網站環境、服務器配置環境、javascript框架、編程語言等參數的chrome網站技術分析插件。
iHateRegex
對于開發人員來說，正則表達式是會被經常用到的，很多類型復雜的字符串都可以用它匹配出來，但唯一但缺點是編寫起來很困難，不僅需要熟練掌握規則，還需要花時間編寫、調試。
iHateRegex[15]就是這樣一個幫你解決書寫正則表達式煩惱的神器。
iHateRegex是一個在線開源工具，可快速檢索并匹配到合適的正則表達式，幫你完成如用戶名、郵箱、日期、手機號碼、密碼等常見規則的驗證。
當然你也可以看到它內部的匹配過程，這有助于加深你的理解。
