# 博客
- Overreacted (opens new window) Dan Abramov 的个人博客，更新频率很高（Redux 作者，React 核心开发）
- 阮一峰的网络日志 (opens new window) 阮老师出的东西还是值得一读的
- Awesome-F2E-Libs (opens new window) sorrycc 整理的个人关注使用的前端库
- 苏洋博客 (opens new window) 开发大佬，前美团技术布道师
# 社区
- DailyJS (opens new window)
- Codeburst (opens new window)
- StackOverflow (opens new window) 同上，外网的
- 思否 (opens new window) 解决技术问题的社区
- InfoQ (opens new window) 文章的质量比一般网站的高不少
- 每日时报 (opens new window) 定期会分享一些库和工具
- 码力全开资源库 (opens new window) 很全很强大，独立开发者/设计干货/优质利器/工具资源...
# 开发
- 产品/设计师/独立开发者的资源库 (opens new window) 很全很强大
- Can I Use (opens new window) 前端常用网站了 查看不同属性和方法的兼容性
- Squoosh (opens new window) 谷歌出品在线免费图片压缩工具 神器
- Tinypng 图片压缩 (opens new window) 压缩 PNG 图片
- AstExplorer (opens new window) - 一个在线 ast 生成器
- 30 seconds of code (opens new window) 收集了许多有用的代码小片段
- IconFont (opens new window) 阿里出的图标库，非常实用，支持 svg、font、png 多种格式，基本现在所有图标都在上面找。
- 智图 (opens new window) 腾讯出品 在线图片压缩 支持转成 WEBP 处理静态图片时候很好用
- Picdiet (opens new window) 另一个图片压缩网站
- CSS Triangle Generator (opens new window) 帮你快速用 css 做出三角形
- CSSArrowPlease (opens new window) 帮你做对话框三角的
- Clippy (opens new window) 在线帮你使用 css clip-path 做出各种形状的图形
- Regular Expressions (opens new window) 在线正则网站
- Jex (opens new window) 正则可视化网站，配合上面的 Regular Expressions，写正则方便很多
- Jsfiddle (opens new window) 在线运行代码网站 很不错，可惜要翻墙
- Codepan (opens new window) 在线运行代码网站 不用翻墙，可以自己部署
- Fiddle.md (opens new window) 一个方便的在线共享 markdown 在线笔试题一般都用这个
- Jsdelivr (opens new window) cdn 服务
- Unpkg (opens new window) cdn 服务
- Snipper (opens new window) 一个代码协同的网站。你新建一个代码片段，然后把网址分享给其他人，就可以看到他们的实时编辑。
- Codrops (opens new window) 上面的交互都非常酷炫
- BgRemover (opens new window) 在线图片去底工具
- Photopea (opens new window) 一个网页端 Photoshop 很变态
- Bestofjs (opens new window) 查看一个项目增长经历，Star 数变化的网站，辅助你判断这个库的质量
- Stackblitz (opens new window) 一款在线 IDE,主要面向 Web 开发者,移植了很多 VS Code 的特性与功能
- Gitmoji (opens new window) 通过 emoji 表达 git 的操作内容
- Starcharts (opens new window) 可以把你一个项目的 stars 增长轨迹当做 svg 放在 readme 中
- Mockapi (opens new window) 一个还不错的在线 mock 服务（可在线可视化编辑），可以满足大部分简单需求了
- Browserstack (opens new window) 远程调整各种版本浏览器兼容性问题
- Carbon (opens new window) 根据代码块生成图片 主要作用是让你打代码片段分享的时候更好看一点
- Clipboard2Markdown (opens new window) 将你所有复制进去的内容都转化为 markdown
- Grammarly (opens new window) 英语写作检查工具
- QuickChart (opens new window) 通过 URL 生成图表的开源服务
- Hipdf (opens new window) 一站式在线 PDF 解决方案
- Lorem Picsum (opens new window) 提供免费的占位图
- sm.ms (opens new window) 免费图床
- Webpagetest (opens new window) 前端性能分析工具
- 网络安全的教程
- 「零宽」长度的短网址服务 (opens new window) 利用“零宽字符”来缩短 url，还支持统计
- 狼叔：如何正确的学习 Node.js (opens new window)
- 中国传统颜色手册 (opens new window)
- Excalidraw (opens new window) 手绘风格流程图，强推
# CSS
- CSS-Tricks (opens new window) 一个学习 css 不错的网站 有很多有意思的 demo
- CSS 生成器 (opens new window)
- CSS 渐变生成器 (opens new window)
- CSS3-Box Shadow(阴影) (opens new window)
- 贝塞尔曲线生成器 (opens new window)
- 花纹背景-pattern.css (opens new window)
- 3D字体 (opens new window)
- Animista (opens new window) CSS动画可视化工具
# 文档&教程
- DevDocs (opens new window) 包含各种类型的技术文档
- 印记中国 (opens new window) 前端文档大全
- npx (opens new window) 教你怎么合理的使用 npx
- hacksplaining (opens new window) 网络安全学习网站
- mobile-web-best-practice (opens new window) 移动 web 最佳实践
- vanillawebprojects (opens new window) 通过纯前端的手段实现一些小项目，适合入门
- Think Python (opens new window) 还不错的 Python 入门教程
- Node.js CLI Apps Best Practices (opens new window) 叫你如何写好一个 node cli 工具
- SQL Murder Mystery (opens new window) 一个英文的 SQL 初级教程，以游戏的方式，让你利用学到的 SQL 概念和命令来找出谋杀凶手
- html-dom (opens new window) 一些常用的 dom 或者原生 js 操作判断，挺实用的
- TypeScript (opens new window) TypeScript 入门教程，很不错，推荐初学者学习
- 深入理解 TypeScript (opens new window) 深入理解 ts
- Webpack 知识图谱 (opens new window) webpack 相关教程和原理分析还不错
- Linux 基础 (opens new window)
- Linux 命令手册 (opens new window)
# 交互
- 微交互 (opens new window) 里面收集了市面上很多很好的微交互例子 值得学习
- Little Big Details (opens new window) 同上，一个国外微交互汇集网站
- Cruip (opens new window) 落地页的各种页面设计，可以免费下载模板
- Comixify (opens new window) 一个波兰团队做了非常好玩的工具，可以把视频自动转成漫画，上图是他们提供的 demo，效果很棒。
- taiko-web (opens new window) 太鼓达人网页版 只能说很 6
# 设计
- 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 制作网站
- 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) 从你的图片中提取配色
- unDraw (opens new window) 一个免费的插图网站，可以在上面寻找合适的插图，用于商业用途。
# 有趣
- 鱼塘 (opens new window) 划水网站 收集了很多网站 当天热门文章
- wallhaven (opens new window) 壁纸网站-
- Can't Unsee (opens new window) 强烈建议前端、客户端、UI 开发的同学玩下，检查一下自己对设计稿的敏感度怎么样
- awesome-comment (opens new window) 里面收集了很多有趣的代码注释
- text-img (opens new window) 都将图片转化为 ascii 用来写注释
- weird-fonts (opens new window) 将普通字母转化为 特殊 unicode
- zero-width-lib (opens new window) 利用零宽度字符实现 隐形水印、加密信息分享、逃脱词匹配，很有创意
- abbreviations (opens new window) 查看一个简写是什么意思的网站
- taag (opens new window) 命令行文字生成器
# 实用
- 写作猫 (opens new window) 可以通过 AI 的方式，帮你检查错别字，很有效的一个工具
- draw (opens new window) 在线 web 画流程图
- 全历史 (opens new window) 历史内容聚合网站
- SoBooks (opens new window) 强大的电子书资源网站
- 稿定设计 (opens new window) 键式设计工具+智能抠图
- pichance (opens new window) 一个将低分辨率图片增强为高分辨率的工具，可以将分辨率增加 4 倍（即长和宽各增加一倍）
- bigjpg (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) 淘宝，京东等商品历史价格，能更清晰了解商家的活动是否为虚假促销以及促销的力度。神器
- 百度脑图 (opens new window) 思维导图
- processon (opens new window) 免费在线作图，支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图等
# 算法
- Leetcode (opens new window) 用 js 刷 leetcode