网站大全
# 网站
# 常看的网站
- awesome-f2e-libs (opens new window) sorrycc 整理的个人关注使用的前端库
- overreacted (opens new window) react Dan 的个人博客，更新频率很高
- DailyJS (opens new window)
- codeburst (opens new window)
# 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 的事情
# 开发
- 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 在线版 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) 免费图床
# 设计
- 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) 从你的图片中提取配色
# 有趣
- 帮你百度一下 (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) 在地址栏里面玩贪吃蛇
# 交互
- 微交互 (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) 网络安全学习网站
# 产品
产品大牛 (opens new window) 什么有很多完整的产品原型可以借鉴
磨刀 (opens new window) 快速出 ui 原型
# 实用
typeform (opens new window) 一个国外的在线调查问卷网站
# Talk
peerigon-talks (opens new window) 收集了不少有意思的 talks
# 算法
leetcode (opens new window) 用 js 刷 leetcode