推荐
- panjiachen by 花裤衩
- 编程导航 by 程序员鱼皮
- 编程自学之路 by 程序羊
- 前端知识图谱+B站资源整合 by 技术胖
- 大圣编程自学网 by 大圣
- 开发者武器库
- 工具大全
文档
社区
技巧
博客
- 阮一峰的网络日志
- samanthaming 对前端小知识点的总结，并为每个知识点制作精美的小卡片。
电子书
- 高教书苑 高等教育出版社的书籍，包含多种学科。
优秀文章
- 我做系统架构的一些原则 作者对系统架构的方法论总结
- 灵活运用CSS开发技巧
- 防御性CSS
视频
Github
- Repobeats 生成仓库的动态数据统计图
- github 短域名服务
- shields 徽章图标
- followers 全球排名
- star-history 展示一个项目 Stars 增长曲线
评论系统
- giscus 由 GitHub Discussions 驱动的评论系统
- Twikoo 一个简洁、安全、免费的静态网站评论系统
- Valine 一款快速、简洁且高效的无后端评论系统
前端小工具
- Can I use 查看属性和方法的兼容性
- 30 seconds of code 收集了许多有用的代码小片段
代码编辑
- codepen 在线代码编辑与演示
- codesandbox 内嵌VSCode的在线IDE
Emoji表情
- emoji表情
- emoji表情备忘录
- 根据文本匹配emoji
- gitmoji 通过 emoji 表达 git 的操作内容
在任意输入框快速打开emoji表情方法：
Windows系统下按Win + .
Mac系统下按Control + Command + 空格
图片工具
- tinypng图片压缩 压缩png很有用
- 微图 浏览器端图片压缩，不会上传图片到服务器
- Squoosh 谷歌出品在线免费图片压缩工具（jpg、png等,压缩效果比tinypng稍好）
- waifu2x 通过卷积网络放大图片
- vectormagic 转换矢量图
- vectorizer 真正的 png 转 svg 神器
- 在线AI图片处理 黑白修复、无损放大、动漫化、铅笔画等。
- remove AI抠图（抠背景）
- magic eraser AI抠图（抠前景）
- backgroundremover 又一个抠图的
- websiteplanet 高质量图片压缩工具
SVG
音视频工具
思维导图
- processon在线作图 流程图、思维导图、原型图等
- 百度脑图 思维导图
- plectica 绘制知识图谱
CSS
- 各种CSS生成器和JS代码片段
- CSS Tricks CSS技巧收集与演示
- CSS生成器
- CSS渐变生成器
- CSS3-Box Shadow(阴影)
- 贝塞尔曲线生成器
- 花纹背景生成器
- 花纹背景-pattern.css
- 3D字体
- css-tricks css技巧文章
- You-need-to-know-css CSS的各种DEMO，很全
- animista CSS动画可视化工具，复制代码就能用
- navnav 各种炫酷的CSS动画组件
CDN加速
网站托管
- vercel 好用的网站托管服务
正则
- 正则可视化
- iHateRegex 正则搜索，细节做得很好
- 正则迷你书 学习正则的小手册
其他
- Linux命令手册
- carbon代码图片生成器 生成好看的代码图片
设计
-
remove AI抠图，抠图算法很厉害
-
Manypixels 插画
-
Undraw 插画
-
storytale 插画，种类丰富，包含3D插画
-
uimovement 能从这个网站找到不少动画交互的灵感
-
awwwards是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站
-
dribbble 经常能在上面找到很多有创意好看的 gif 或者图片
-
Bēhance dribbble 是设计师的微博，Bēhance 是设计师的博客
-
Logojoy 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。
-
brandmark 另一个在线制作 logo 网站
-
instant 又一个 logo 制作网站
-
namecheap又一个 logo 制作网站
-
logo-maker 又一个 logo 制作网站 这个更简单点 就是选模板之后微调
-
coolors 帮你在线配色的网站 你能找到不少配色灵感
-
colorhunt 另一个配色网站
-
uigradients 渐变色网站
-
designcap 在线海报设计
-
Flat UI 色表 Flat UI 色表
-
0to255 颜色梯度
-
Ikonate 提供免费的图标 icons
-
remixicon 又一个提供免费图标 icons
-
feather 免费的 icons
-
nord 北欧性冷淡风主题配色
-
Unsplash 提供免费的高清图片
-
Pexels 提供免费的高清图片
-
colorkitty 从你的图片中提取配色
-
design.youzan 有赞设计原则
-
iconfont 阿里巴巴矢量图标库
-
undraw 免费的矢量插画
-
icomoon 矢量图标库
-
cssicon 所有的 icon 都是纯 css 画的 缺点：icon 不够多
-
CSS triangle generator 帮你快速用 css 做出三角形
-
clippy 在线帮你使用 css clip-path 做出各种形状的图形
-
Lorem Picsum 提供免费的占位图
-
Canva 可画 生成插画、封面、海报、头像等
-
404页 404页素材
-
collectui 按功能组件分类的设计图
-
smartmockups 产品模板生成工具
图库
3D
- sketchfab 3D模型
交互
-
微交互 里面收集了市面上很多很好的微交互例子 值得学习
-
Little Big Details 同上，一个国外微交互汇集网站
-
cruip 登录页的各种页面设计，可以免费下载模板
-
Comixify 一个波兰团队做了非常好玩的工具，可以把视频自动转成漫画，上图是他们提供的 demo，效果很棒。
-
taiko-web 太鼓达人网页版 只能说很 6
有趣
-
电脑恶搞 收集了一些恶搞小网页，比如xp系统蓝屏、黑客界面等
-
neocities 上面托管了很多有趣的网站
-
奇趣网站收藏家 收藏了很多有趣的网站
-
FC在线模拟器(小霸王游戏机) 童年回忆
-
URL 地址播放 Emojis 动画 在地址栏里面播放 emoji
-
Can’t Unsee 强烈建议前端、客户端、UI 开发的同学玩下，检查一下自己对设计稿的敏感度怎么样
-
ggtalk 平时一直在听的一个技术博客
-
awesome-comment 里面收集了很多有趣的代码注释
-
text-img 都将图片转化为 ascii 用来写注释
-
ascii video 使用ascii编码生成视频动画
-
weird-fonts 将普通字母转化为 特殊 unicode
-
snake 在地址栏里面玩贪吃蛇
-
zero-width-lib 利用零宽度字符实现 隐形水印、加密信息分享、逃脱词匹配，很有创意
-
abbreviations 查看一个简写是什么意思的网站
-
magi ai 搜索神器，超屌
-
在线取名 解决取名难问题，超多名字生成
生成器
-
卡通头像生成器 上传真人头像生成卡通头像
-
artbreeder 动漫图生成真人图像
-
声音生成器 生成下雨、咖啡厅、海浪、火车等声音，可几种声音合成
-
到账语音生成器 支付宝到账1亿元
元宇宙
符合元宇宙特征的几个网站，允许用户拥有虚拟土地，在上面构建自己的世界：
教程
- npx 教你怎么合理的使用 npx
- hacksplaining 网络安全学习网站
- mobile-web-best-practice 移动 web 最佳实践
产品
-
Product Hunt 好产品推荐
-
产品大牛 什么有很多完整的产品原型可以借鉴
-
磨刀 快速出 ui 原型
实用
Talk
- peerigon-talks 收集了不少有意思的 talks
算法
- leetcode 用 js 刷 leetcode
nginx
生活
- Ventusky 风雨气温图