博客

• Overreacted Dan Abramov 的个人博客，更新频率很高（Redux 作者，React 核心开发）
• 阮一峰的网络日志 阮老师出的东西还是值得一读的
• Awesome-F2E-Libs sorrycc 整理的个人关注使用的前端库
• 苏洋博客 开发大佬，前美团技术布道师

社区

• DailyJS
• Codeburst
• StackOverflow 同上，外网的
• 思否 解决技术问题的社区
• InfoQ 文章的质量比一般网站的高不少
• 每日时报 定期会分享一些库和工具
• 码力全开资源库 很全很强大，独立开发者/设计干货/优质利器/工具资源...

开发

• 产品/设计师/独立开发者的资源库 很全很强大
• Can I Use 前端常用网站了 查看不同属性和方法的兼容性
• Squoosh 谷歌出品在线免费图片压缩工具 神器
• Tinypng 图片压缩 压缩 PNG 图片
• AstExplorer - 一个在线 ast 生成器
• 30 seconds of code 收集了许多有用的代码小片段
• IconFont 阿里出的图标库，非常实用，支持 svg、font、png 多种格式，基本现在所有图标都在上面找。
• 智图 腾讯出品 在线图片压缩 支持转成 WEBP 处理静态图片时候很好用
• Picdiet 另一个图片压缩网站
• CSS Triangle Generator 帮你快速用 css 做出三角形
• CSSArrowPlease 帮你做对话框三角的
• Clippy 在线帮你使用 css clip-path 做出各种形状的图形
• Regular Expressions 在线正则网站
• Jex 正则可视化网站，配合上面的 Regular Expressions，写正则方便很多
• Jsfiddle 在线运行代码网站 很不错，可惜要翻墙
• Codepan 在线运行代码网站 不用翻墙，可以自己部署
• Fiddle.md 一个方便的在线共享 markdown 在线笔试题一般都用这个
• Jsdelivr cdn 服务
• Unpkg cdn 服务
• Snipper 一个代码协同的网站。你新建一个代码片段，然后把网址分享给其他人，就可以看到他们的实时编辑。
• Codrops 上面的交互都非常酷炫
• BgRemover 在线图片去底工具
• Photopea 一个网页端 Photoshop 很变态
• Bestofjs 查看一个项目增长经历，Star 数变化的网站，辅助你判断这个库的质量
• Stackblitz 一款在线 IDE,主要面向 Web 开发者,移植了很多 VS Code 的特性与功能
• Gitmoji 通过 emoji 表达 git 的操作内容
• Starcharts 可以把你一个项目的 stars 增长轨迹当做 svg 放在 readme 中
• Mockapi 一个还不错的在线 mock 服务（可在线可视化编辑），可以满足大部分简单需求了
• Browserstack 远程调整各种版本浏览器兼容性问题
• Carbon 根据代码块生成图片 主要作用是让你打代码片段分享的时候更好看一点
• Clipboard2Markdown 将你所有复制进去的内容都转化为 markdown
• Grammarly 英语写作检查工具
• QuickChart 通过 URL 生成图表的开源服务
• Hipdf 一站式在线 PDF 解决方案
• Lorem Picsum 提供免费的占位图
• sm.ms 免费图床
• Webpagetest 前端性能分析工具
• 网络安全的教程
• 「零宽」长度的短网址服务 利用“零宽字符”来缩短 url，还支持统计
• 狼叔：如何正确的学习 Node.js
• 中国传统颜色手册
• Excalidraw 手绘风格流程图，强推

CSS

• CSS-Tricks 一个学习 css 不错的网站 有很多有意思的 demo
• CSS 生成器
• CSS 渐变生成器
• CSS3-Box Shadow(阴影)
• 贝塞尔曲线生成器
• 花纹背景-pattern.css
• 3D字体
• Animista CSS动画可视化工具

文档&教程

• DevDocs 包含各种类型的技术文档
• 印记中国 前端文档大全
• npx 教你怎么合理的使用 npx
• hacksplaining 网络安全学习网站
• mobile-web-best-practice 移动 web 最佳实践
• vanillawebprojects 通过纯前端的手段实现一些小项目，适合入门
• Think Python 还不错的 Python 入门教程
• Node.js CLI Apps Best Practices 叫你如何写好一个 node cli 工具
• SQL Murder Mystery 一个英文的 SQL 初级教程，以游戏的方式，让你利用学到的 SQL 概念和命令来找出谋杀凶手
• html-dom 一些常用的 dom 或者原生 js 操作判断，挺实用的
• TypeScript TypeScript 入门教程，很不错，推荐初学者学习
• 深入理解 TypeScript 深入理解 ts
• Webpack 知识图谱 webpack 相关教程和原理分析还不错
• Linux 基础
• Linux 命令手册

交互

• 微交互 里面收集了市面上很多很好的微交互例子 值得学习
• Little Big Details 同上，一个国外微交互汇集网站
• Cruip 落地页的各种页面设计，可以免费下载模板
• Comixify 一个波兰团队做了非常好玩的工具，可以把视频自动转成漫画，上图是他们提供的 demo，效果很棒。
• taiko-web 太鼓达人网页版 只能说很 6

设计

• uimovement 能从这个网站找到不少动画交互的灵感
• awwwards是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站
• Dribbble 经常能在上面找到很多有创意好看的 gif 或者图片，基本上我所有的图都是上面招的
• Bēhance dribbble 是设计师的微博，Bēhance 是设计师的博客
• Logojoy 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。
• Brandmark 另一个在线制作 logo 网站
• Instant 又一个 logo 制作网站
• Logo-Maker 又一个 logo 制作网站 这个更简单点 就是选模板之后微调
• Coolors 帮你在线配色的网站 你能找到不少配色灵感
• ColorHunt 另一个配色网站
• UIGradients 渐变色网站
• Designcap 在线海报设计
• Flat UI 色表 Flat UI 色表
• 0to255 颜色梯度
• Ikonate 提供免费的图标 icons
• Remixicon 又一个提供免费图标 icons
• Feather 免费的 icons
• Nord 北欧性冷淡风主题配色
• Unsplash 提供免费的高清图片
• Pexels 高清免费图片
• ColorKitty 从你的图片中提取配色
• unDraw 一个免费的插图网站，可以在上面寻找合适的插图，用于商业用途。

有趣

• 鱼塘 划水网站 收集了很多网站 当天热门文章
• wallhaven 壁纸网站-
• Can't Unsee 强烈建议前端、客户端、UI 开发的同学玩下，检查一下自己对设计稿的敏感度怎么样
• awesome-comment 里面收集了很多有趣的代码注释
• text-img 都将图片转化为 ascii 用来写注释
• weird-fonts 将普通字母转化为 特殊 unicode
• zero-width-lib 利用零宽度字符实现 隐形水印、加密信息分享、逃脱词匹配，很有创意
• abbreviations 查看一个简写是什么意思的网站
• taag 命令行文字生成器

实用

• 写作猫 可以通过 AI 的方式，帮你检查错别字，很有效的一个工具
• draw 在线 web 画流程图
• 全历史 历史内容聚合网站
• SoBooks 强大的电子书资源网站
• 稿定设计 键式设计工具+智能抠图
• pichance 一个将低分辨率图片增强为高分辨率的工具，可以将分辨率增加 4 倍（即长和宽各增加一倍）
• bigjpg 放大图片的神器 通过神经网络可以放大图片并能降噪
• 大力盘 百度网盘搜索
• ENFI 下载器 不限速下载器
• 来画视频 像做 PPT 一样做短视频
• Arkie 海报制作工具
• 优品 PPT
• 比格 PPT
• 历史价格查询 淘宝，京东等商品历史价格，能更清晰了解商家的活动是否为虚假促销以及促销的力度。神器
• 百度脑图 思维导图
• processon 免费在线作图，支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图等

算法

• Leetcode 用 js 刷 leetcode