网站
# 个人收藏夹
# 推荐
# 文档
- MDN (opens new window) | MDN-JS标准内置对象 (opens new window) Web技术权威文档
- DevDocs (opens new window) Web 开发技术文档,非常不错的学习手册!
- Bash 脚本教程 (opens new window) 阮一峰编写
- 菜鸟教程 (opens new window) 涵盖多种语言的初级教程
# 社区
Github (opens new window) 程序员同性交友社区
掘金 (opens new window) 一个帮助开发者成长的社区
简书 (opens new window) 有很多频道的创作社区
思否 (opens new window) 解决技术问题的社区
InfoQ (opens new window) 促进软件开发及相关领域知识与创新的传播
V2EX (opens new window) 创意工作者们的社区
鱼塘热榜 (opens new window) 划水网站,收集了很多网站,当天热门文章
码力全开资源库 (opens new window) 很全很强大,独立开发者/设计干货/优质利器/工具资源...
# 社区互动
# 技巧
- Google 趋势 (opens new window) 查看某项技术或关键字的热度趋势,可用于分析某项技术的发展前景,或对比某两项技术的热度。
- 百度指数 (opens new window) 同上,但百度的数据仅限国内。
# 博客
- 阮一峰的网络日志 (opens new window)
- samanthaming (opens new window) 对前端小知识点的总结,并为每个知识点制作精美的小卡片。
# 电子书
- 高教书苑 (opens new window) 高等教育出版社的书籍,包含多种学科。
- SoBooks (opens new window) 免费的电子书资源网站
# 优秀文章
- 我做系统架构的一些原则 (opens new window) 作者对系统架构的方法论总结
- 灵活运用CSS开发技巧 (opens new window)
- 防御性CSS (opens new window)
# 视频
- bilibili (opens new window) B站,上面很多免费教学视频
- 慕课网 (opens new window) 实战视频教程
- 妙味课堂 (opens new window) 比较系统的前端入门视频教程
- 中国大学MOOC (opens new window) 涵盖计算机、外语、心理学等专业免费课程
- egghead (opens new window) 质量还不错的短视频教程,外网
# Github
- Repobeats (opens new window) 生成仓库的动态数据统计图
- github 短域名服务 (opens new window)
- shields (opens new window) 徽章图标
- followers 全球排名 (opens new window)
- star-history (opens new window) 展示一个项目 Stars 增长曲线
# 评论系统
# 前端小工具
- Can I use (opens new window) 查看属性和方法的兼容性
- 30 seconds of code (opens new window) 收集了许多有用的代码小片段
# 代码编辑
- codepen (opens new window) 在线代码编辑与演示
- codesandbox (opens new window) 内嵌VSCode的在线IDE
# Emoji表情
- emoji表情 (opens new window)
- emoji表情备忘录 (opens new window)
- 根据文本匹配emoji (opens new window)
- gitmoji (opens new window) 通过 emoji 表达 git 的操作内容
在任意输入框快速打开emoji表情方法:
Windows系统下按Win + .
Mac系统下按Control + Command + 空格
# 图片工具
- tinypng图片压缩 (opens new window) 压缩png很有用
- 微图 (opens new window) 浏览器端图片压缩,不会上传图片到服务器
- Squoosh (opens new window) 谷歌出品在线免费图片压缩工具(jpg、png等,压缩效果比tinypng稍好)
- waifu2x (opens new window) 通过卷积网络放大图片
- vectormagic (opens new window) 转换矢量图
- vectorizer (opens new window) 真正的 png 转 svg 神器
- 在线AI图片处理 (opens new window) 黑白修复、无损放大、动漫化、铅笔画等。
- remove (opens new window) AI抠图
- backgroundremover (opens new window) 又一个抠图的
# 思维导图
- processon在线作图 (opens new window) 流程图、思维导图、原型图等
- 百度脑图 (opens new window) 思维导图
- plectica 绘制知识图谱
# CSS
- CSS Tricks (opens new window) CSS技巧收集与演示
# CDN加速
- jsDelivr (opens new window) 国外的一家优秀的公共 CDN 服务提供商
- unpkg (opens new window) cdn 服务
# 网站托管
- vercel (opens new window) 好用的网站托管服务
# 正则
- 正则可视化 (opens new window)
- iHateRegex (opens new window) 正则搜索,细节做得很好
- 正则迷你书 (opens new window) 学习正则的小手册
# 其他
# 设计
- 创造师导航 (opens new window)
- 设计师网址导航 (opens new window)
- remove (opens new window) AI抠图,抠图算法很厉害
- Manypixels (opens new window) 插画
- Undraw (opens new window) 插画
- storytale (opens new window) 插画,种类丰富,包含3D插画
- 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 制作网站
- namecheap (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) 从你的图片中提取配色
- design.youzan (opens new window) 有赞设计原则
- iconfont (opens new window) 阿里巴巴矢量图标库
- undraw (opens new window) 免费的矢量插画
- icomoon (opens new window) 矢量图标库
- cssicon (opens new window) 所有的 icon 都是纯 css 画的 缺点:icon 不够多
- CSS triangle generator (opens new window) 帮你快速用 css 做出三角形
- clippy (opens new window) 在线帮你使用 css clip-path 做出各种形状的图形
- Lorem Picsum (opens new window) 提供免费的占位图
- Canva 可画 (opens new window) 生成插画、封面、海报、头像等
- 404页 (opens new window) 404页素材
- collectui (opens new window) 按功能组件分类的设计图
- smartmockups (opens new window) 产品模板生成工具
# 图库
- uigradients (opens new window) 渐变色生成工具
- freepik (opens new window) banner 图库
- 觅元素 (opens new window)一天免费下载十张 psd(免抠元素)
- 搞定设计 (opens new window) 可以抠图
- vectorizer (opens new window) 真正的 png 转 svg 神器
- 站酷 (opens new window) 国内优秀的设计作品展示
- 花瓣 (opens new window)
- 虎克 (opens new window) ps 学习教程
- beTheme (opens new window)
- UI 中国 (opens new window)
- wallhaven (opens new window) 壁纸网站-
# 3D
# 交互
微交互 (opens new window) 里面收集了市面上很多很好的微交互例子 值得学习
Little Big Details (opens new window) 同上,一个国外微交互汇集网站
cruip (opens new window) 登录页的各种页面设计,可以免费下载模板
Comixify (opens new window) 一个波兰团队做了非常好玩的工具,可以把视频自动转成漫画,上图是他们提供的 demo,效果很棒。
taiko-web (opens new window) 太鼓达人网页版 只能说很 6
# 有趣
- 电脑恶搞 (opens new window) 收集了一些恶搞小网页,比如xp系统蓝屏、黑客界面等
- neocities (opens new window) 上面托管了很多有趣的网站
- 奇趣网站收藏家 (opens new window) 收藏了很多有趣的网站
- FC在线模拟器(小霸王游戏机) (opens new window) 童年回忆
- 帮你百度一下 (opens new window) 可以 点我测试一下 (opens new window)-
- 国际版 (opens new window) 同
帮我百度一下
-点我测试一下 (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 用来写注释
- ascii video (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) 上传真人头像生成卡通头像
artbreeder (opens new window) 动漫图生成真人图像
声音生成器 (opens new window) 生成下雨、咖啡厅、海浪、火车等声音,可几种声音合成
到账语音生成器 (opens new window) 支付宝到账1亿元
# 元宇宙
符合元宇宙特征的几个网站,允许用户拥有虚拟土地,在上面构建自己的世界:
# 教程
- npx (opens new window) 教你怎么合理的使用 npx
- hacksplaining (opens new window) 网络安全学习网站
- mobile-web-best-practice (opens new window) 移动 web 最佳实践
# 产品
产品大牛 (opens new window) 什么有很多完整的产品原型可以借鉴
磨刀 (opens new window) 快速出 ui 原型
# 实用
- webden (opens new window) 在线网页编辑器,轻便快捷
- browser-update (opens new window) 浏览器版本更新提示插件
- typeform (opens new window) 一个国外的在线调查问卷网站
- VideoFk (opens new window) VideoFk 视频在线解析下载
- 全历史 (opens new window) 历史内容聚合网站
- UzerMe (opens new window) 云端办公工具
- SoBooks (opens new window) 强大的电子书资源网站
- 稿定设计 (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)
- 高清免费图片 2 (opens new window)
- shapedivider (opens new window) 生成波浪分隔线
- Notion (opens new window) 知识库、快速笔记、TaskList、日记、读书清单,各种类型,应有尽有
# Talk
- peerigon-talks (opens new window) 收集了不少有意思的 talks
# 算法
- leetcode (opens new window) 用 js 刷 leetcode