头图

40多个用于Web开发的高质量免费资源

JenK
English

资源对于程序员而言极为重要,因为它们可以极大地提高编码时的生产率。在过去的几个月中,我一直在收集许多链接,并希望与你分享其中的一些链接。希望它们对你和我一样有用。事不宜迟,这里提供了一些很棒的免费和最新资源!

目录:

插图
开发工具
CSS
Tailwind
设计
提高效率工具

插图

Error 404

image.png
该资源非常适合查找可用于网站404页面的插图。

Blush

image.png
Blush允许你免费下载所有插图,以用于商业和个人用途。令人惊奇的是,它具有许多可以合成以创建新插图的插图样式。此外,它们还有一个Figma插件,因此你可以立即在设计中对其进行操作。

Smash Illustrations

image.png
Smash Illustrations具有时尚人物和简单的插图,可免费用于商业和个人用途。它具有250多个对象和角色,以及20多个独特的场景,因此你可以随心所欲地合成它们。

Control

image.png
Control免费提供实心和线性风格的高质量插图。它们可自由用于商业和个人用途,但.png格式多样。如果你需要SVG,则必须支付38美元,对于这种质量的插图来说还算不错。

DrawKit

image.png
DrawKit具有220多个免费使用的插图。它们都以SVG格式提供,因此你可以创建很棒的构图!此外,他们还提供使用抽奖的动画插图,这对于酷炫而时尚的网站开发非常有用

Open Doodles

image.png
如果你喜欢粗略的插图,那么你会喜欢Open Doodles。所有插图均可免费下载为SVG或PNG格式。此外,他们还有合成路线和生成器,因此你可以获得所需的涂鸦!

免费插图

image.png
免费插图具有许多插图背景,非常适合登录页开发

Mixkit

image.png
Mixkit是Unsplash的插图,或者是它们的目标。它具有许多插图类别,还免费提供股票视频和音乐。

Delesign

image.png
Delesign免费提供许多干净的插图。他们的主要优点是他们的多样性。

开发工具

Majestic

image.png
Majestic是Jest的零配置UI,它使查看测试日志输出变得更加容易,而不是纯粹使用终端。它可以全局安装,也可以使用以下方法在任何存储库中打开npx majestic

Carbon

image.png
好看的代码段图形生成工具。

Squoosh

image.png
压缩图像几乎不会引起明显的质量损失。另外,你可以编辑图像大小以及丢失多少质量,这是优化站点图像的必要条件。

SVGOMG

image.png

SVGOMG提供了用于优化SVG文件的GUI。在为你的站点使用SVG时极其重要。

Kite

image.png
Kite对于提高你的代码生产力非常了不起。我相信,将来人工智能将不会接替我们的工作,但它将通过诸如此类的工具得到增强。它使用经过2百万个存储库训练的机器学习,在你喜欢的编辑器中提供自动补全功能。它目前仅适用于Python和Javascript,但不久之后将提供更多语言。

DevDocs

image.png

DevDocs是一个文档聚合器。它在一个干净且可搜索的界面中添加了多个库和API文档。这对于一般开发而言意义重大,因此我强烈建议你这样做。

Devhints

image.png

该网站备有针对bash,React,go,sass等许多工具的备忘单。

Wappalyzer

image.png

想知道你最喜欢的网站使用什么技术开发的吗?无需多说,Wappalyzer可使你快速了解。它们也有谷歌扩展,因此你可以随时随地找到它们。

iHateRegex

image.png
对于那些不想创建自己的正则表达式或不希望通过Google搜索的人来说,这个网站是一个不错的选择。

LottieFiles

image.png

听说过lottie吗?直到找到该网站,我才知道。Lottie是一个库,可用于解析和运行从Adobe After Effects导出的动画。这些动画非常漂亮,LottieFiles免费提供数千个这些动画。但是,考虑到它们大多数都具有CC-BY 2.0许可证。

Shape Divider

image.png

Shape Divider可让你动态地为你的网站生成光滑的分隔线。与其他网站相比,它具有很酷的UI,并且效果很好。

CSS

Animista

image.png

需要一些CSS动画灵感或片段吗?Animista让你蒙上了一层阴影。它具有许多很酷的CSS效果,可以加快你的开发速度。

Pattern.css

image.png
喜欢在设计中使用patterns 吗?然后,你将爱上这个。它是一个CSS库,使你可以使用不同的类来为你的网站创建出色的模式。

CSSeffectsSnippets

image.png
提供了漂亮的CSS动画。

98.css

image.png

98.css让你怀旧的幻想成为现实。如果你需要构建具有Windows 98风格的网站或电子应用程序,则98.css将为你提供很大的帮助。

Tailwind

TailwindComponents

image.png
如今,Tailwind非常流行,而类似这样的网站就说明了原因。TailwindComponents拥有数百个社区使用内置组件的tailwind.css。其中一些具有很高的质量,所以一定要检查一下!

Tailblocks

image.png

Tailblocks 具有更多高质量的Tailwind 组件。但是,它们提供了与引导类似的体验,因此你可以使用它们来创建整个网站。绝对是加快发展的必须。

设计

Colors.lol

image.png

Colors.lol可以用来描述调色板。它们有10多个这样的调色板,可以使你的设计更加充满活力。

Colormind

image.png

Colormind使用深度学习生成配色方案。你可以锁定颜色并获得其他颜色的补充。

free-logo-maker

image.png

免费的logo制作工具,它们具有数千个图标,可以帮助你创建许多logo组合。提供了免费商业和个人使用,可以下载log的PNG版本。

AppMockUp

image.png
AppMockUp使你无需太多工作即可为Android和iPhone生成模型。

webframe

image.png

Webframe具有基于真实网站的数千种设计灵感。

FontSpark

image.png

FontSpark允许你通过生成不同的字体来发现下一个喜欢的字体,直到你喜欢为止。

Checklist Design

image.png

如果你正在设计或构建网站,则这些清单可以挽救生命。它们为网站的不同部分(例如表单,排版,按钮等)保证了可访问性和出色的UX。

Remove BG

image.png
使用此工具可以轻松地从图像中删除背景,以便可以在设计或网站中使用它。

Unscreen

image.png
就像remove.bg一样,但是用于gif和视频。

提高效率工具

Sejda

image.png
Sejda提供了一个在线流畅的PDF编辑器。很棒,可编辑你的简历!

GetTerms

image.png

GetTerms会为你的应用生成量身定制的隐私政策和服务条款。这对于节省构建Web产品的时间来说是很棒的。

Product Hunt排行

image.png

此工具使你可以查看Product Hunt中最著名的产品

开源软件构建

image.png

OpenSource Builders提供了许多常见产品的开源替代品,例如Facebook,Slack,Shopify等。

阅读 1.6k
avatar
JenK
北京中电兴发 前端工程师

理想的光芒很难照进现实

5.9k 声望
4.6k 粉丝
0 条评论
你知道吗?

avatar
JenK
北京中电兴发 前端工程师

理想的光芒很难照进现实

5.9k 声望
4.6k 粉丝
宣传栏