压箱底：10 个超强的 Web 资源汇总！

点击下方“前端开发爱好者”，选择“设为星标”
第一时间关注技术干货！

哈喽，大家好 我是 xy👨🏻‍💻。今天给大家介绍一系列超级实用的开发工具和网站资源，一定要收藏起来！！！

大家好！今天，我要给大家介绍一系列超级实用的开发工具和网站资源，它们可以让你的开发工作更加高效、有趣，让你的网站和应用更加吸引人。

准备好了吗？让我们一起探索这些神奇的宝藏吧！

figlet：控制台的艺术字

你是否厌倦了在控制台中单调地输出纯文本？figlet 这个命令行小工具或许能为你带来一丝新意。

它可以将你的文本转换成 ASCII 艺术字体，让你的控制台输出也能充满艺术感。试试在终端中输入 figlet "Type Something"，你会惊喜地发现输出结果与众不同！

网址：https://www.npmjs.com/package/figlet

Codelf：变量命名的灵感源泉

一个好的变量名能让代码阅读起来更加顺畅，而 Codelf 正是帮助你寻找这些好名字的神器。

它能够搜索多个代码托管平台上的项目，展示实际项目中使用的变量名，让你的命名不再枯燥乏味。

网址：https://unbug.github.io/codelf

responsively：响应式设计实时预览

在移动设备盛行的今天，响应式设计已成为网站开发的标配。

responsively 这个在线工具让你能够快速预览你的网站在不同设备和屏幕尺寸下的表现，确保你的设计在各种场景下都能完美呈现。

网址：https://responsively.app/

3dicons：为你的网站增添立体感

图标是网站设计中的重要元素，而 3dicons 提供了丰富的 3D图标资源。

无论是扁平化还是立体感的图标，你都能在这里找到。将这些图标融入你的网站，定能让你的网站焕发出新的活力！

网址：https://3dicons.co/

Undraw：免费 SVG 插图库

如果你正在为找不到合适的插图而烦恼，Undraw 这个网站或许能帮到你。

它提供了大量免费的 SVG插图，你可以随意选择并应用到你的网站或应用中，让你的作品更加生动有趣。

网址：https://undraw.co/illustrations

Error 404：打造个性化的错误页面

当用户遇到 404 错误时，一个精心设计的错误页面能够为他们提供更好的用户体验。

Error 404 网站提供了多种 404页面模板供你选择，让你能够轻松打造出符合自己风格的错误页面。

网址：https://error404.fun/

Shape Divider：创意分割线生成器

在网页设计中，分割线可以用来划分不同区域，增强视觉效果。

Shape Divider 是一个在线生成器，让你能够轻松创建出各种形状的分割线，并导出为 SVG 格式，方便你在项目中使用。

网址：https://www.shapedivider.app/

CSS Scan：box-shadow 效果的灵感库

box-shadow 是 CSS 中一个非常强大的属性，可以用来创建阴影效果，增加元素的立体感。

CSS Scan 网站展示了大量 box-shadow 的实例，你可以在这里找到灵感，应用到自己的项目中。

网址：https://getcssscan.com/

CSS Filter：CSS 滤镜的无限可能

CSS Filter 这个网站可以让你实时预览各种 CSS滤镜 效果，包括模糊、亮度调整、颜色变换等。

通过尝试不同的组合和调整参数，你可以创造出独特的视觉效果。

网址：https://www.cssfilters.co/

VSCode 插件 Peacock：个性化你的开发环境

最后，我们来介绍一个 Visual Studio Code 的插件——Peacock。

它允许你自定义工作区的颜色方案，用不同颜色区分不同的项目或编码环境。这样一来，你的开发环境不仅更加美观，还能提高工作效率哦！

网址：https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

好了，今天的分享就到这里啦！希望这些工具和网站资源能给你的开发工作带来新的启发和便利。如果你对这些神器感兴趣的话，不妨亲自去尝试一下哦！

写在最后

公众号：前端开发爱好者 专注分享 web 前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞 👍 或者 ➕关注 都是对我最大的支持。

欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。

添加好友备注【进阶学习】拉你进技术交流群

关注公众号后，在首页：

• 回复 面试题，获取最新大厂面试资料。
• 回复 简历，获取 3200 套 简历模板。
• 回复 React 实战，获取 React 最新实战教程。
• 回复 Vue 实战，获取 Vue 最新实战教程。
• 回复 ts，获取 TypeScript 精讲课程。
• 回复 vite，获取 Vite 精讲课程。
• 回复 uniapp，获取 uniapp 精讲课程。
• 回复 js 书籍，获取 js 进阶 必看书籍。
• 回复 Node，获取 Nodejs+koa2 实战教程。
• 回复 数据结构算法，获取数据结构算法教程。
• 回复 架构师，获取 架构师学习资源教程。
• 更多教程资源应有尽有，欢迎 关注获取。