网站资源

# 常看的网站

overreacted (opens new window) react Dan 的个人博客，更新频率很高（redux 作者，react 核心开发）
DailyJS (opens new window)
codeburst (opens new window)
阮一峰的网络日志 (opens new window) 阮老师出的东西还是值得一读的
InfoQ (opens new window) 文章的质量比一般网站的高不少
鱼塘 (opens new window) 划水网站收集了很多网站当天热门文章
每日时报 (opens new window) 定期会分享一些库和工具
awesome-f2e-libs (opens new window) sorrycc 整理的个人关注使用的前端库

# Github

github 短域名服务 (opens new window)
shields (opens new window) Github README 里面的装逼小图标
Emoji (opens new window) 方便平时写查找 emoji
emoji.muan (opens new window) 同上而且更全
git-awards (opens new window) github ranking 没事可以查着玩玩
http://githubrank.com/ (opens new window) github 按照 followers 排名
github-rank (opens new window)同上，githubrank 基本算挂了已经，只能用这个新的
star-history (opens new window) 展示一个项目 Stars 增长规矩曲线
probot (opens new window) 基于 github 做一个小机器人。可以做很多 workflow 的事情

# 开发

产品/设计师/独立开发者的资源库 (opens new window) 很全很强大
can i use (opens new window) 前端常用网站了查看不同属性和方法的兼容性
Squoosh (opens new window) 谷歌出品在线免费图片压缩工具神器
codesandbox-client (opens new window) - 在线 web 开发容器
astexplorer (opens new window) - 一个在线 ast 生成器
30 seconds of code (opens new window) 收集了许多有用的代码小片段
zeplin (opens new window) 前端和设计师神器，有标注、Style Guide、版本管理、简单的团队协作，重点是前端不用写 css 了，复制就可以了。
iconfont (opens new window) 阿里出的图标库，非常实用，支持 svg、font、png 多种格式，基本现在所有图标都在上面找。
cssicon (opens new window) 所有的 icon 都是纯 css 画的缺点：icon 不够多
智图 (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 服务
coderpad (opens new window) 远程面试的神器，可以让面试者远程写代码不过需要翻墙
icode (opens new window) 有赞团队出品的 coderpad 可以互补，它不需要翻墙
codeadvice (opens new window) 又一个让面试者远程写代码的网址
snipper (opens new window) 一个代码协同的网站。你新建一个代码片段，然后把网址分享给其他人，就可以看到他们的实时编辑。
codesandbox (opens new window) 一个可以在线编辑且提供在线 demo 的网站支持 vue react angular 多种框架神器
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 的特性与功能
**programmingfonts.org ** (opens new window) 一个专门介绍编程字体的网站
早报 (opens new window) 一个个人开发者的前端开发的分享日报
emoji-search (opens new window) 帮你快速找到能表达你情感的 emoji
gitmoji (opens new window) 通过 emoji 表达 git 的操作内容
starcharts (opens new window) 可以把你一个项目的 stars 增长轨迹当做 svg 放在 readme 中
mockapi (opens new window) 一个还不错的在线 mock 服务（可在线可视化编辑），可以满足大部分简单需求了
coder (opens new window) 在线版 VS Code
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 解决方案
whimsical (opens new window) 画路程图
Lorem Picsum (opens new window) 提供免费的占位图
sm.ms (opens new window) 免费图床
webpagetest (opens new window) 前端性能分析工具
网络安全的教程 (opens new window)
Ananas Analytics Desktop (opens new window) 一站式数据可视化
"零宽" 长度的短网址服务 (opens new window) 利用"零宽字符"来缩短 url，还支持统计
hotjar (opens new window) 用户调研支持用户反馈录屏 heatMap
狼叔：如何正确的学习 Node.js (opens new window)
独角兽公司榜单 (opens new window) 感觉大家想去大公司的时候，可以看看排名
中国传统颜色手册 (opens new window)
coderlane (opens new window) 远程视频面试，目前使用的是牛客，这个工具待考察
excalidraw (opens new window) 手绘风格流程图，强推

# 设计

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) 提供免费的高清图片
colorkitty (opens new window) 从你的图片中提取配色
design.youzan (opens new window) 有赞设计原则
undraw (opens new window) 一个免费的插图网站，可以在上面寻找合适的插图，用于商业用途。

# 有趣

帮你百度一下 (opens new window) 可以点我测试一下** (opens new window)-
国际版 (opens new window) 同帮我百度一下-点我测试一下** (opens new window)-
wallhaven (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 用来写注释
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)

# 交互

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

# Css

css-tricks (opens new window) 一个学习 css 不错的网站有很多有意思的 demo

# 教程

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 入门教程，很不错，推荐初学者学习
Webpack 知识图谱 (opens new window) webpack 相关教程和原理分析还不错