### 彪哥

爱好前端

- 网站
  - 推荐
  - 文档
  - 社区
    - 社区互动
  - 技巧
  - 博客
  - 电子书
  - 优秀文章
  - 视频
  - Github
  - 评论系统
  - 前端小工具
  - 代码编辑
  - Emoji表情
  - 图片工具
  - SVG
  - 音视频工具
  - 思维导图
  - CSS
  - CDN加速
  - 网站托管
  - 正则
  - 其他
  - 设计
  - 图库
  - 3D
  - 交互
  - 有趣
  - 生成器
  - 元宇宙
  - 教程
  - 产品
  - 实用
  - Talk
  - 算法
  - nginx
  - 生活
- 常用的前端轮子

目录

# 网站

# # 个人收藏夹

## # 推荐

- panjiachen
  (opens new window) by 花裤衩
- 编程导航
  (opens new window) by 程序员鱼皮
- 编程自学之路
  (opens new window) by 程序羊
- 前端知识图谱+B站资源整合
  (opens new window) by 技术胖
- 大圣编程自学网
  (opens new window) by 大圣
- 开发者武器库
  (opens new window)
- 工具大全
  (opens new window)

关注公众号[有趣研究社]，回复`前端资源`，获取 前端学习资料
(opens new window)

## # 文档

- MDN
  (opens new window) | MDN-JS标准内置对象
  (opens new window) Web技术权威文档
- DevDocs
  (opens new window) Web 开发技术文档，非常不错的学习手册！
- 现代JavaScript教程
  (opens new window) 以最新标准为基准的JS教程
- ES5教程
  (opens new window) 阮一峰的JS教程
- ES6教程
  (opens new window) 阮一峰的ES6教程
- Bash 脚本教程
  (opens new window) 阮一峰编写
- ECMA
  (opens new window) ECMA官网
- 菜鸟教程
  (opens new window) 涵盖多种语言的初级教程
- 腾讯云开发者手册
  (opens new window)

## # 社区

- Github
  (opens new window) 程序员同性交友社区
- 掘金
  (opens new window) 一个帮助开发者成长的社区
- 简书
  (opens new window) 有很多频道的创作社区
- 思否
  (opens new window) 解决技术问题的社区
- stack overflow
  (opens new window) 同上，外网的
- InfoQ
  (opens new window) 促进软件开发及相关领域知识与创新的传播
- V2EX
  (opens new window) 创意工作者们的社区
- 鱼塘热榜
  (opens new window) 划水网站，收集了很多网站，当天热门文章
- 码力全开资源库
  (opens new window) 很全很强大，独立开发者/设计干货/优质利器/工具资源...

### # 社区互动

- gitter
  (opens new window)
- 兔小巢
  (opens new window)

## # 技巧

- Google 趋势
  (opens new window) 查看某项技术或关键字的热度趋势，可用于分析某项技术的发展前景，或对比某两项技术的热度。
- 百度指数
  (opens new window) 同上，但百度的数据仅限国内。

## # 博客

- 阮一峰的网络日志
  (opens new window)
- samanthaming
  (opens new window) 对前端小知识点的总结，并为每个知识点制作精美的小卡片。

## # 电子书

- 高教书苑
  (opens new window) 高等教育出版社的书籍，包含多种学科。
- SoBooks
  (opens new window) 免费的电子书资源网站
- 识典古籍
  (opens new window) 古籍数字化平台

## # 优秀文章

- 我做系统架构的一些原则
  (opens new window) 作者对系统架构的方法论总结
- 灵活运用CSS开发技巧
  (opens new window)
- 防御性CSS
  (opens new window)

## # 视频

- bilibili
  (opens new window) B站，上面很多免费教学视频
- 慕课网
  (opens new window) 实战视频教程
- 妙味课堂
  (opens new window) 比较系统的前端入门视频教程
- 中国大学MOOC
  (opens new window) 涵盖计算机、外语、心理学等专业免费课程
- 终身教育平台
  (opens new window) 涵盖生活、兴趣、职场、技能、老年、学历等免费课程
- egghead
  (opens new window) 质量还不错的短视频教程，外网

## # Github

- Repobeats
  (opens new window) 生成仓库的动态数据统计图

- github 短域名服务
  (opens new window)
- shields
  (opens new window) 徽章图标
- followers 全球排名
  (opens new window)
- star-history
  (opens new window) 展示一个项目 Stars 增长曲线

## # 评论系统

- giscus
  (opens new window) 由 GitHub Discussions
  (opens new window) 驱动的评论系统

## # 前端小工具

- Can I use
  (opens new window) 查看属性和方法的兼容性
- 30 seconds of code
  (opens new window) 收集了许多有用的代码小片段

## # 代码编辑

- codepen
  (opens new window) 在线代码编辑与演示
- codesandbox
  (opens new window) 内嵌VSCode的在线IDE

## # Emoji表情

- emoji表情
  (opens new window)
- emoji表情备忘录
  (opens new window)
- 根据文本匹配emoji
  (opens new window)
- gitmoji
  (opens new window) 通过 emoji 表达 git 的操作内容

> 在任意输入框快速打开emoji表情方法：
> Windows系统下按`Win` + `.`
> Mac系统下按`Control` + `Command` + `空格`

## # 图片工具

- tinypng图片压缩
  (opens new window) 压缩png很有用
- 微图
  (opens new window) 浏览器端图片压缩，不会上传图片到服务器
- Squoosh
  (opens new window) 谷歌出品在线免费图片压缩工具（jpg、png等,压缩效果比tinypng稍好）
- waifu2x
  (opens new window) 通过卷积网络放大图片
- vectormagic
  (opens new window) 转换矢量图
- vectorizer
  (opens new window) 真正的 png 转 svg 神器
- 在线AI图片处理
  (opens new window) 黑白修复、无损放大、动漫化、铅笔画等。
- remove
  (opens new window) AI抠图（抠背景）
- magic eraser
  (opens new window) AI抠图（抠前景）
- backgroundremover
  (opens new window) 又一个抠图的

## # SVG

- svg编辑器-E2.Cool
  (opens new window)
- svg编辑器-i排版
  (opens new window)

## # 音视频工具

- 迅捷视频转换器
  (opens new window) 在线转换各种视频格式
- 迅捷音频转换器
  (opens new window) 在线转换各种音频格式
- 修剪音频
  (opens new window) 在线修剪或剪切任何音频文件

## # 思维导图

- processon在线作图
  (opens new window) 流程图、思维导图、原型图等
- 百度脑图
  (opens new window) 思维导图
- plectica 绘制知识图谱

## # CSS

- 各种CSS生成器和JS代码片段
  (opens new window)

- CSS Tricks
  (opens new window) CSS技巧收集与演示
- CSS生成器
  (opens new window)
- CSS渐变生成器
  (opens new window)
- CSS3-Box Shadow(阴影)
  (opens new window)
- 贝塞尔曲线生成器
  (opens new window)
- 花纹背景生成器
  (opens new window)
- 花纹背景-pattern.css
  (opens new window)
- 3D字体
  (opens new window)
- css-tricks
  (opens new window) css技巧文章
- You-need-to-know-css
  (opens new window) CSS的各种DEMO，很全
- animista
  (opens new window) CSS动画可视化工具，复制代码就能用
- navnav
  (opens new window) 各种炫酷的CSS动画组件

## # CDN加速

- jsDelivr
  (opens new window) 国外的一家优秀的公共 CDN 服务提供商
- unpkg
  (opens new window) cdn 服务

## # 网站托管

- vercel
  (opens new window) 好用的网站托管服务

## # 正则

- 正则可视化
  (opens new window)
- iHateRegex
  (opens new window) 正则搜索，细节做得很好
- 正则迷你书
  (opens new window) 学习正则的小手册

## # 其他

- Linux命令手册
  (opens new window)
- carbon代码图片生成器
  (opens new window) 生成好看的代码图片

## # 设计

- 创造师导航
  (opens new window)
- 设计师网址导航
  (opens new window)
- remove
  (opens new window) AI抠图，抠图算法很厉害
- Manypixels
  (opens new window) 插画
- Undraw
  (opens new window) 插画
- storytale
  (opens new window) 插画，种类丰富，包含3D插画
- uimovement
  (opens new window) 能从这个网站找到不少动画交互的灵感
- awwwards
  (opens new window)是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站
- dribbble
  (opens new window) 经常能在上面找到很多有创意好看的 gif 或者图片
- Bēhance
  (opens new window) dribbble 是设计师的微博，Bēhance 是设计师的博客
- Logojoy
  (opens new window) 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。
- brandmark
  (opens new window) 另一个在线制作 logo 网站
- instant
  (opens new window) 又一个 logo 制作网站
- namecheap
  (opens new window)又一个 logo 制作网站
- logo-maker
  (opens new window) 又一个 logo 制作网站 这个更简单点 就是选模板之后微调
- coolors
  (opens new window) 帮你在线配色的网站 你能找到不少配色灵感
- colorhunt
  (opens new window) 另一个配色网站
- uigradients
  (opens new window) 渐变色网站
- designcap
  (opens new window) 在线海报设计
- Flat UI 色表
  (opens new window) Flat UI 色表
- 0to255
  (opens new window) 颜色梯度
- Ikonate
  (opens new window) 提供免费的图标 icons
- remixicon
  (opens new window) 又一个提供免费图标 icons
- feather
  (opens new window) 免费的 icons
- nord
  (opens new window) 北欧性冷淡风主题配色
- Unsplash
  (opens new window) 提供免费的高清图片
- Pexels
  (opens new window) 提供免费的高清图片
- colorkitty
  (opens new window) 从你的图片中提取配色
- design.youzan
  (opens new window) 有赞设计原则
- iconfont
  (opens new window) 阿里巴巴矢量图标库
- undraw
  (opens new window) 免费的矢量插画
- icomoon
  (opens new window) 矢量图标库
- cssicon
  (opens new window) 所有的 icon 都是纯 css 画的 缺点：icon 不够多
- CSS triangle generator
  (opens new window) 帮你快速用 css 做出三角形
- clippy
  (opens new window) 在线帮你使用 css clip-path 做出各种形状的图形
- Lorem Picsum
  (opens new window) 提供免费的占位图
- Canva 可画
  (opens new window) 生成插画、封面、海报、头像等
- 404页
  (opens new window) 404页素材
- collectui
  (opens new window) 按功能组件分类的设计图
- smartmockups
  (opens new window) 产品模板生成工具

## # 图库

- uigradients
  (opens new window) 渐变色生成工具
- freepik
  (opens new window) banner 图库
- 觅元素
  (opens new window)一天免费下载十张 psd（免抠元素）
- 搞定设计
  (opens new window) 可以抠图
- vectorizer
  (opens new window) 真正的 png 转 svg 神器
- 站酷
  (opens new window) 国内优秀的设计作品展示
- 花瓣
  (opens new window)
- 虎克
  (opens new window) ps 学习教程
- beTheme
  (opens new window)
- UI 中国
  (opens new window)
- wallhaven
  (opens new window) 壁纸网站-

## # 3D

- sketchfab
  (opens new window) 3D模型

## # 交互

- 微交互
  (opens new window) 里面收集了市面上很多很好的微交互例子 值得学习

- Little Big Details
  (opens new window) 同上，一个国外微交互汇集网站

- cruip
  (opens new window) 登录页的各种页面设计，可以免费下载模板

- Comixify
  (opens new window) 一个波兰团队做了非常好玩的工具，可以把视频自动转成漫画，上图是他们提供的 demo，效果很棒。

- taiko-web
  (opens new window) 太鼓达人网页版 只能说很 6

## # 有趣

- 电脑恶搞
  (opens new window) 收集了一些恶搞小网页，比如xp系统蓝屏、黑客界面等
- neocities
  (opens new window) 上面托管了很多有趣的网站
- 奇趣网站收藏家
  (opens new window) 收藏了很多有趣的网站
- FC在线模拟器(小霸王游戏机)
  (opens new window) 童年回忆
- 帮你百度一下
  (opens new window) 可以 点我测试一下
  (opens new window)-
- 国际版
  (opens new window) 同`帮我百度一下`-点我测试一下
  (opens new window)-
- URL 地址播放 Emojis 动画
  (opens new window) 在地址栏里面播放 emoji
- Can't Unsee
  (opens new window) 强烈建议前端、客户端、UI 开发的同学玩下，检查一下自己对设计稿的敏感度怎么样
- ggtalk
  (opens new window) 平时一直在听的一个技术博客
- awesome-comment
  (opens new window) 里面收集了很多有趣的代码注释
- text-img
  (opens new window) 都将图片转化为 ascii 用来写注释
- ascii video
  (opens new window) 使用ascii编码生成视频动画
- weird-fonts
  (opens new window) 将普通字母转化为 特殊 unicode
- snake
  (opens new window) 在地址栏里面玩贪吃蛇
- zero-width-lib
  (opens new window) 利用零宽度字符实现 隐形水印、加密信息分享、逃脱词匹配，很有创意
- abbreviations
  (opens new window) 查看一个简写是什么意思的网站
- magi
  (opens new window) ai 搜索神器，超屌
- 在线取名
  (opens new window) 解决取名难问题，超多名字生成
- 像素画GIF
  (opens new window)
- 猫咪生成器
  (opens new window)

## # 生成器

- 卡通头像生成器
  (opens new window) 上传真人头像生成卡通头像

- artbreeder
  (opens new window) 动漫图生成真人图像

- 声音生成器
  (opens new window) 生成下雨、咖啡厅、海浪、火车等声音，可几种声音合成

- 诺基亚短信图片生成器
  (opens new window)

- 到账语音生成器
  (opens new window) 支付宝到账1亿元

## # 元宇宙

符合元宇宙特征的几个网站，允许用户拥有虚拟土地，在上面构建自己的世界：

- 沙盒
  (opens new window)
- 梦境空间
  (opens new window)
- Decentraland
  (opens new window)

## # 教程

- npx
  (opens new window) 教你怎么合理的使用 npx
- hacksplaining
  (opens new window) 网络安全学习网站
- mobile-web-best-practice
  (opens new window) 移动 web 最佳实践

## # 产品

- Product Hunt
  (opens new window) 好产品推荐

- 产品大牛
  (opens new window) 什么有很多完整的产品原型可以借鉴

- 磨刀
  (opens new window) 快速出 ui 原型

## # 实用

- webden
  (opens new window) 在线网页编辑器，轻便快捷
- browser-update
  (opens new window) 浏览器版本更新提示插件
- typeform
  (opens new window) 一个国外的在线调查问卷网站
- VideoFk
  (opens new window) VideoFk 视频在线解析下载
- 全历史
  (opens new window) 历史内容聚合网站
- UzerMe
  (opens new window) 云端办公工具
- SoBooks
  (opens new window) 强大的电子书资源网站
- 稿定设计
  (opens new window) 键式设计工具+智能抠图
- 大力盘
  (opens new window) 百度网盘搜索
- ENFI 下载器
  (opens new window) 不限速下载器
- 来画视频
  (opens new window) 像做 PPT 一样做短视频
- Arkie 海报制作工具
  (opens new window)
- 优品 PPT
  (opens new window)
- 比格 PPT
  (opens new window)
- 高清免费图片
  (opens new window)
- 高清免费图片 2
  (opens new window)
- shapedivider
  (opens new window) 生成波浪分隔线
- Notion
  (opens new window) 知识库、快速笔记、TaskList、日记、读书清单，各种类型，应有尽有

## # Talk

- peerigon-talks
  (opens new window) 收集了不少有意思的 talks

## # 算法

- leetcode
  (opens new window) 用 js 刷 leetcode

## # nginx

- nginx 可视化配置工具
  (opens new window)

## # 生活

- Ventusky
  (opens new window) 风雨气温图

编辑
(opens new window)
上次更新: 2022/12/14, 19:36:42
常用的前端轮子

常用的前端轮子→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式