40多個用於Web開發的高質量免費資源

資源對於程序員而言極爲重要，由於它們能夠極大地提升編碼時的生產率。在過去的幾個月中，我一直在收集許多連接，並但願與你分享其中的一些連接。但願它們對你和我同樣有用。事不宜遲，這裏提供了一些很棒的免費和最新資源！

目錄：

插圖
開發工具
CSS
Tailwind
設計
提升效率工具

插圖

Error 404

該資源很是適合查找可用於網站404頁面的插圖。

Blush

Blush容許你免費下載全部插圖，以用於商業和我的用途。使人驚奇的是，它具備許多能夠合成以建立新插圖的插圖樣式。此外，它們還有一個Figma插件，所以你能夠當即在設計中對其進行操做。

Smash Illustrations

Smash Illustrations具備時尚人物和簡單的插圖，可免費用於商業和我的用途。它具備250多個對象和角色，以及20多個獨特的場景，所以你能夠爲所欲爲地合成它們。

Control

Control免費提供實心和線性風格的高質量插圖。它們可自由用於商業和我的用途，但.png格式多樣。若是你須要SVG，則必須支付38美圓，對於這種質量的插圖來講還算不錯。

DrawKit

DrawKit具備220多個無償使用的插圖。它們都以SVG格式提供，所以你能夠建立很棒的構圖！此外，他們還提供使用抽獎的動畫插圖，這對於酷炫而時尚的網站開發很是有用。

Open Doodles

若是你喜歡粗略的插圖，那麼你會喜歡Open Doodles。全部插圖都可免費下載爲SVG或PNG格式。此外，他們還有合成路線和生成器，所以你能夠得到所需的塗鴉！

免費插圖

免費插圖具備許多插圖背景，很是適合登陸頁開發

Mixkit

Mixkit是Unsplash的插圖，或者是它們的目標。它具備許多插圖類別，還免費提供股票視頻和音樂。

Delesign

Delesign免費提供許多幹淨的插圖。他們的主要優勢是他們的多樣性。

開發工具

Majestic

Majestic是Jest的零配置UI，它使查看測試日誌輸出變得更加容易，而不是純粹使用終端。它能夠全局安裝，也可使用如下方法在任何存儲庫中打開npx majestic

Carbon

好看的代碼段圖形生成工具。

Squoosh

壓縮圖像幾乎不會引發明顯的質量損失。另外，你能夠編輯圖像大小以及丟失多少質量，這是優化站點圖像的必要條件。

SVGOMG

SVGOMG提供了用於優化SVG文件的GUI。在爲你的站點使用SVG時極其重要。

Kite

Kite對於提升你的代碼生產力很是了不得。我相信，未來人工智能將不會接替咱們的工做，但它將經過諸如此類的工具獲得加強。它使用通過2百萬個存儲庫訓練的機器學習，在你喜歡的編輯器中提供自動補全功能。它目前僅適用於Python和Javascript，但不久以後將提供更多語言。

DevDocs

DevDocs是一個文檔聚合器。它在一個乾淨且可搜索的界面中添加了多個庫和API文檔。這對於通常開發而言意義重大，所以我強烈建議你這樣作。

Devhints

該網站備有針對bash，React，go，sass等許多工具的備忘單。

Wappalyzer

想知道你最喜歡的網站使用什麼技術開發的嗎？無需多說，Wappalyzer可以使你快速瞭解。它們也有谷歌擴展，所以你能夠隨時隨地找到它們。

iHateRegex

對於那些不想建立本身的正則表達式或不但願經過Google搜索的人來講，這個網站是一個不錯的選擇。

LottieFiles

據說過lottie嗎？直到找到該網站，我才知道。Lottie是一個庫，可用於解析和運行從Adobe After Effects導出的動畫。這些動畫很是漂亮，LottieFiles免費提供數千個這些動畫。可是，考慮到它們大多數都具備CC-BY 2.0許可證。

Shape Divider

Shape Divider可以讓你動態地爲你的網站生成光滑的分隔線。與其餘網站相比，它具備很酷的UI，而且效果很好。

CSS

Animista

須要一些CSS動畫靈感或片斷嗎？Animista讓你蒙上了一層陰影。它具備許多很酷的CSS效果，能夠加快你的開發速度。

Pattern.css

喜歡在設計中使用patterns 嗎？而後，你將愛上這個。它是一個CSS庫，使你可使用不一樣的類來爲你的網站建立出色的模式。

CSSeffectsSnippets

提供了漂亮的CSS動畫。

98.css

98.css讓你懷舊的幻想成爲現實。若是你須要構建具備Windows 98風格的網站或電子應用程序，則98.css將爲你提供很大的幫助。

Tailwind

TailwindComponents

現在，Tailwind很是流行，而相似這樣的網站就說明了緣由。TailwindComponents擁有數百個社區使用內置組件的tailwind.css。其中一些具備很高的質量，因此必定要檢查一下！

Tailblocks

Tailblocks 具備更多高質量的Tailwind 組件。可是，它們提供了與引導相似的體驗，所以你可使用它們來建立整個網站。絕對是加快發展的必須。

設計

Colors.lol

Colors.lol能夠用來描述調色板。它們有10多個這樣的調色板，可使你的設計更加充滿活力。

Colormind

Colormind使用深度學習生成配色方案。你能夠鎖定顏色並得到其餘顏色的補充。

free-logo-maker

免費的logo製做工具，它們具備數千個圖標，能夠幫助你建立許多logo組合。提供了免費商業和我的使用，能夠下載log的PNG版本。

AppMockUp

AppMockUp使你無需太多工做便可爲Android和iPhone生成模型。

webframe

Webframe具備基於真實網站的數千種設計靈感。

FontSpark

FontSpark容許你經過生成不一樣的字體來發現下一個喜歡的字體，直到你喜歡爲止。

Checklist Design

若是你正在設計或構建網站，則這些清單能夠挽救生命。它們爲網站的不一樣部分（例如表單，排版，按鈕等）保證了可訪問性和出色的UX。

Remove BG

使用此工具能夠輕鬆地從圖像中刪除背景，以即可以在設計或網站中使用它。

Unscreen

就像remove.bg同樣，可是用於gif和視頻。

提升效率工具

Sejda

Sejda提供了一個在線流暢的PDF編輯器。很棒，可編輯你的簡歷！

GetTerms

GetTerms會爲你的應用生成量身定製的隱私政策和服務條款。這對於節省構建Web產品的時間來講是很棒的。

Product Hunt排行

此工具使你能夠查看Product Hunt中最著名的產品

開源軟件構建

OpenSource Builders提供了許多常見產品的開源替代品，例如Facebook，Slack，Shopify等。