个人收藏夹

文档

• MDN | MDN-JS标准内置对象 Web技术权威文档
• 现代JavaScript教程 以最新标准为基准的JS教程
• ES5教程 阮一峰的JS教程
• ES6教程 阮一峰的ES6教程
• Bash 脚本教程 阮一峰编写
• ECMA ECMA官网
• 菜鸟教程 涵盖多种语言的初级教程
• 腾讯云开发者手册

社区

• Github 程序员同性交友社区
• 掘金 一个帮助开发者成长的社区
• 简书 有很多频道的创作社区
• 思否 解决技术问题的社区
• stack overflow 同上，外网的
• InfoQ
• V2EX

博客

• 阮一峰的网络日志
• css-tricks css技巧文章

电子书

• 前端电子书收集
• SoBooks 免费的电子书资源网站

文章

• 灵活运用CSS开发技巧

科学上网

谷歌chrome商店访问助手

谷歌云(GCP)一键搭建 V2Ray 让你畅快科学上网

视频

• 慕课网 实战视频教程
• 妙味课堂 比较系统的前端入门视频教程
• 中国大学MOOC 涵盖计算机、外语、心理学等专业免费课程
• bilibili B站，上面也有一些可供学习的免费视频
• egghead 质量还不错的短视频教程，外网

Github

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

在线工具

开发

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

代码编辑

• codepen 在线代码编辑与演示
• codesandbox 内嵌VSCode的在线IDE

UI

• iconfont 阿里巴巴矢量图标库
• undraw 免费的矢量插画
• icomoon 矢量图标库
• cssicon 所有的 icon 都是纯 css 画的 缺点：icon 不够多
• CSS triangle generator 帮你快速用 css 做出三角形
• clippy 在线帮你使用 css clip-path 做出各种形状的图形
• Lorem Picsum 提供免费的占位图

Emoji表情

• emoji表情
• emoji表情备忘录
• gitmoji 通过 emoji 表达 git 的操作内容

windows系统下按Win+.快速打开表情选择框

图片压缩

• tinypng图片压缩 压缩png很有用
• Squoosh 谷歌出品在线免费图片压缩工具

作图

• processon在线作图 流程图、思维导图、原型图等
• 百度脑图 思维导图

CSS

• imgcook由设计稿一键智能生成代码
• CSS Tricks CSS技巧收集与演示
• CSS生成器
• CSS渐变生成器
• CSS3-Box Shadow(阴影)
• 贝塞尔曲线生成器
• 花纹背景生成器
• 花纹背景-pattern.css
• 3D字体

CDN加速

• jsDelivr 国外的一家优秀的公共 CDN 服务提供商
• unpkg cdn 服务

正则

• 正则可视化

其他

• Linux命令手册
• 代码图片生成器

设计

• 创造师导航
• 设计师网址导航
• Manypixels 插画
• Undraw 插画
• uimovement 能从这个网站找到不少动画交互的灵感
• awwwards是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站
• dribbble 经常能在上面找到很多有创意好看的 gif 或者图片
• Bēhance dribbble 是设计师的微博，Bēhance 是设计师的博客
• Logojoy 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。
• brandmark 另一个在线制作 logo 网站
• instant 又一个 logo 制作网站
• namecheap又一个 logo 制作网站
• logo-maker 又一个 logo 制作网站 这个更简单点 就是选模板之后微调
• coolors 帮你在线配色的网站 你能找到不少配色灵感
• colorhunt 另一个配色网站
• uigradients 渐变色网站
• designcap 在线海报设计
• Flat UI 色表 Flat UI 色表
• 0to255 颜色梯度
• Ikonate 提供免费的图标 icons
• remixicon 又一个提供免费图标 icons
• feather 免费的 icons
• nord 北欧性冷淡风主题配色
• Unsplash 提供免费的高清图片
• Pexels 提供免费的高清图片
• colorkitty 从你的图片中提取配色
• design.youzan 有赞设计原则

图库

• uigradients 渐变色生成工具
• freepik banner 图库
• 觅元素一天免费下载十张 psd
• 搞定设计 可以抠图
• vectorizer 真正的 png 转 svg 神器
• 站酷
• 花瓣
• 虎克 Ps 学习教程
• beTheme
• UI 中国

交互

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

教程

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

产品

• 产品大牛 什么有很多完整的产品原型可以借鉴
• 磨刀 快速出 ui 原型

实用

• VideoFk VideoFk 视频在线解析下载
• 全历史 历史内容聚合网站
• UzerMe 云端办公工具
• SoBooks 强大的电子书资源网站
• 稿定设计 键式设计工具+智能抠图
• 大力盘 百度网盘搜索
• ENFI 下载器 不限速下载器
• 来画视频 像做 PPT 一样做短视频
• Arkie 海报制作工具
• 优品 PPT
• 比格 PPT
• 高清免费图片
• 高清免费图片 2

算法

• leetcode 用 js 刷 leetcode