---
title: 网站
permalink: /pages/beb6c0bd8a66cea6/
date: 2020-04-19 11:33:04
article: false
author:
  name: xugaoyi
  link: https://github.com/xugaoyi
---
# 个人收藏夹

## 推荐
* [panjiachen](https://panjiachen.github.io/awesome-bookmarks/) by 花裤衩
* [编程导航](https://www.code-nav.cn/) by 程序员鱼皮
* [编程自学之路](https://r2coding.com/) by 程序羊
* [前端知识图谱+B站资源整合](https://gitee.com/jishupang/web_atlas) by 技术胖
* [大圣编程自学网](https://shengxinjing.cn/) by 大圣
* [开发者武器库](https://devtool.tech/)
* [工具大全](https://www.fly63.com/tool/home.html)

<p align="center">
<img src="https://fastly.jsdelivr.net/gh/xugaoyi/image_store@master/blog/qrcode.zdqv9mlfc0g.jpg" width="200">
</p>

::: center
关注公众号[有趣研究社]，回复`前端资源`，获取 [前端学习资料](https://github.com/xugaoyi/blog-gitalk-comment/wiki/Front-end-Study)
:::

<!-- more -->

## 文档
* [MDN](https://developer.mozilla.org/zh-CN/docs/Web) | [MDN-JS标准内置对象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects) Web技术权威文档
* [DevDocs](https://devdocs.io/) Web 开发技术文档，非常不错的学习手册！
* [现代JavaScript教程](https://zh.javascript.info) 以最新标准为基准的JS教程
* [ES5教程](https://wangdoc.com/javascript/) 阮一峰的JS教程
* [ES6教程](http://es6.ruanyifeng.com/) 阮一峰的ES6教程
* [Bash 脚本教程](https://wangdoc.com/bash/) 阮一峰编写
* [ECMA](https://www.ecma-international.org/) ECMA官网
* [菜鸟教程](https://www.runoob.com/) 涵盖多种语言的初级教程
* [腾讯云开发者手册](https://cloud.tencent.com/developer/devdocs)

## 社区
* [Github](https://github.com/) 程序员同性交友社区
* [掘金](https://juejin.im/) 一个帮助开发者成长的社区
* [简书](https://www.jianshu.com/) 有很多频道的创作社区
* [思否](https://segmentfault.com/) 解决技术问题的社区
* [stack overflow](https://stackoverflow.com/) 同上，外网的
* [InfoQ](https://www.infoq.cn/topic/Front-end) 促进软件开发及相关领域知识与创新的传播
* [V2EX](https://www.v2ex.com/) 创意工作者们的社区
* [鱼塘热榜](https://mo.fish) 划水网站，收集了很多网站，当天热门文章
* [码力全开资源库](https://maliquankai.com/designnav/) 很全很强大，独立开发者/设计干货/优质利器/工具资源...
### 社区互动
- [gitter](https://gitter.im/home/explore)
- [兔小巢](https://txc.qq.com/)

## 技巧
* [Google 趋势](https://trends.google.com/trends) 查看某项技术或关键字的热度趋势，可用于分析某项技术的发展前景，或对比某两项技术的热度。
* [百度指数](https://index.baidu.com/v2/index.html#/) 同上，但百度的数据仅限国内。

## 博客
* [阮一峰的网络日志](http://www.ruanyifeng.com/blog/)
* [samanthaming](https://www.samanthaming.com/) 对前端小知识点的总结，并为每个知识点制作精美的小卡片。


## 电子书
* [高教书苑](https://ebook.hep.com.cn/ebooks/h5/index.html) 高等教育出版社的书籍，包含多种学科。
<!-- * [前端电子书收集](http://www.yuanchengcheng.vip/books) -->
* [SoBooks](https://sobooks.cc/) 免费的电子书资源网站

## 优秀文章
* [我做系统架构的一些原则](https://coolshell.cn/articles/21672.html) 作者对系统架构的方法论总结
* [灵活运用CSS开发技巧](https://juejin.im/post/5d4d0ec651882549594e7293)
* [防御性CSS](https://ishadeed.com/article/defensive-css/)
## 视频
* [bilibili](https://www.bilibili.com/) B站，上面很多免费教学视频
* [慕课网](https://www.imooc.com/) 实战视频教程
* [妙味课堂](https://www.miaov.com/) 比较系统的前端入门视频教程
* [中国大学MOOC](https://www.icourse163.org/) 涵盖计算机、外语、心理学等专业免费课程
* [终身教育平台](http://le.ouchn.cn/) 涵盖生活、兴趣、职场、技能、老年、学历等免费课程
* [egghead](http://egghead.io) 质量还不错的短视频教程，外网

## Github

- [Repobeats](https://repobeats.axiom.co/) 生成仓库的动态数据统计图

* [github 短域名服务](https://git.io/)
* [shields](https://shields.io/) 徽章图标
* [followers 全球排名](https://wangchujiang.com/github-rank/index.html)
* [star-history](https://star-history.t9t.io/) 展示一个项目 Stars 增长曲线



## 评论系统

- [giscus](https://giscus.app/zh-CN) 由 [GitHub Discussions](https://docs.github.com/en/discussions) 驱动的评论系统



## 前端小工具
* [Can I use](https://caniuse.com/) 查看属性和方法的兼容性
* [30 seconds of code](https://30secondsofcode.org/) 收集了许多有用的代码小片段

## 代码编辑
* [codepen](https://codepen.io) 在线代码编辑与演示
* [codesandbox](https://codesandbox.io) 内嵌VSCode的在线IDE

## Emoji表情
* [emoji表情](https://emojipedia.org/)
* [emoji表情备忘录](https://www.webfx.com/tools/emoji-cheat-sheet)
* [根据文本匹配emoji](https://translate.yandex.com/?lang=zh-emj)
* [gitmoji](https://github.com/carloscuesta/gitmoji) 通过 emoji 表达 git 的操作内容

> 在任意输入框快速打开emoji表情方法：<br/>
> Windows系统下按<kbd>Win</kbd> + <kbd>.</kbd><br/>
> Mac系统下按<kbd>Control</kbd> + <kbd>Command</kbd> + <kbd>空格</kbd>

## 图片工具
* [tinypng图片压缩](https://tinypng.com) 压缩png很有用
* [微图](https://devtool.tech/tiny-image) 浏览器端图片压缩，不会上传图片到服务器
* [Squoosh](https://squoosh.app/) 谷歌出品在线免费图片压缩工具（jpg、png等,压缩效果比tinypng稍好）
* [waifu2x](http://waifu2x.udp.jp/) 通过卷积网络放大图片
* [vectormagic](https://vectormagic.com/) 转换矢量图
* [vectorizer](https://www.vectorizer.io/) 真正的 png 转 svg 神器
* [在线AI图片处理](https://photo.opencool.cn/) 黑白修复、无损放大、动漫化、铅笔画等。
* [remove](https://www.remove.bg/zh) AI抠图（抠背景）
* [magic eraser](https://www.magiceraser.io/) AI抠图（抠前景）
* [backgroundremover](https://github.com/nadermx/backgroundremover) 又一个抠图的

## 思维导图
* [processon在线作图](https://www.processon.com/) 流程图、思维导图、原型图等
* [百度脑图](https://naotu.baidu.com) 思维导图
* [plectica](plectica.com) 绘制知识图谱

## CSS

- [各种CSS生成器和JS代码片段](https://juejin.cn/post/7030572979868139551?utm_source=gold_browser_extension)

* [CSS Tricks](http://css-tricks.neatbang.com/) CSS技巧收集与演示
* [CSS生成器](https://neumorphism.io/)
* [CSS渐变生成器](https://www.colorzilla.com/gradient-editor/)
* [CSS3-Box Shadow(阴影)](https://www.html.cn/tool/css3Preview/Box-Shadow.html)
* [贝塞尔曲线生成器	](https://cubic-bezier.com)
* [花纹背景生成器](http://www.heropatterns.com/)
* [花纹背景-pattern.css](https://github.com/bansal-io/pattern.css)
* [3D字体](https://bennettfeely.com/ztext/)
* [css-tricks](https://css-tricks.com/) css技巧文章
* [You-need-to-know-css](https://lhammer.cn/You-need-to-know-css/#/zh-cn/) CSS的各种DEMO，很全
* [animista](https://animista.net/) CSS动画可视化工具，复制代码就能用
* [navnav](http://navnav.co/) 各种炫酷的CSS动画组件

## CDN加速
* [jsDelivr](http://www.jsdelivr.com/) 国外的一家优秀的公共 CDN 服务提供商
* [unpkg](https://unpkg.com/) cdn 服务

## 网站托管
- [vercel](https://vercel.com/) 好用的网站托管服务
## 正则
* [正则可视化](https://regex101.com/)
* [iHateRegex](https://ihateregex.io/) 正则搜索，细节做得很好
* [正则迷你书](https://github.com/qdlaoyao/js-regex-mini-book) 学习正则的小手册
## 其他
* [Linux命令手册](https://ipcmen.com/)
* [carbon代码图片生成器](https://carbon.now.sh/) 生成好看的代码图片


## 设计
- [创造师导航](http://chuangzaoshi.com/)
- [设计师网址导航](http://hao.uisdc.com/)
- [remove](https://www.remove.bg/zh) AI抠图，抠图算法很厉害
- [Manypixels](https://www.manypixels.co/gallery/) 插画
- [Undraw](https://undraw.co/illustrations) 插画
- [storytale](https://storytale.io/) 插画，种类丰富，包含3D插画
- [uimovement](https://uimovement.com/) 能从这个网站找到不少动画交互的灵感
- [awwwards](https://www.awwwards.com/)是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站
- [dribbble](https://dribbble.com/) 经常能在上面找到很多有创意好看的 gif 或者图片
- [Bēhance](https://www.behance.net/) dribbble 是设计师的微博，Bēhance 是设计师的博客
- [Logojoy](https://logojoy.com/) 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。
- [brandmark](http://brandmark.io/) 另一个在线制作 logo 网站
- [instant](https://instantlogodesign.com/) 又一个 logo 制作网站
- [namecheap](https://www.namecheap.com/logo-maker/app/)又一个 logo 制作网站
- [logo-maker](https://www.designevo.com/logo-maker/) 又一个 logo 制作网站 这个更简单点 就是选模板之后微调
- [coolors](https://coolors.co/) 帮你在线配色的网站 你能找到不少配色灵感
- [colorhunt](http://colorhunt.co/) 另一个配色网站
- [uigradients](https://uigradients.com/#SummerDog) 渐变色网站
- [designcap](https://www.designcap.com/) 在线海报设计
- [Flat UI 色表](https://flatuicolors.com/) Flat UI 色表
- [0to255](https://www.0to255.com/) 颜色梯度
- [Ikonate](https://github.com/mikolajdobrucki/ikonate) 提供免费的图标 icons
- [remixicon](https://remixicon.com/) 又一个提供免费图标 icons
- [feather](https://github.com/feathericons/feather) 免费的 icons
- [nord ](https://github.com/arcticicestudio/nord) 北欧性冷淡风主题配色
- [Unsplash](https://unsplash.com/) 提供免费的高清图片
- [Pexels](https://www.pexels.com/zh-cn/) 提供免费的高清图片
- [colorkitty](https://colorkitty.com/) 从你的图片中提取配色
- [design.youzan](http://design.youzan.com/) 有赞设计原则
- [iconfont](https://www.iconfont.cn/) 阿里巴巴矢量图标库
- [undraw](https://undraw.co/illustrations) 免费的矢量插画
- [icomoon](https://icomoon.io/) 矢量图标库
- [cssicon](http://cssicon.space/#/) 所有的 icon 都是纯 css 画的 缺点：icon 不够多
- [CSS triangle generator](http://apps.eky.hk/css-triangle-generator/) 帮你快速用 css 做出三角形
- [clippy](http://bennettfeely.com/clippy/) 在线帮你使用 css clip-path 做出各种形状的图形
- [Lorem Picsum](https://picsum.photos/) 提供免费的占位图
- [Canva 可画](https://www.canva.cn/) 生成插画、封面、海报、头像等
- [404页](https://error404.fun/) 404页素材
- [collectui](https://collectui.com/) 按功能组件分类的设计图
- [smartmockups](https://smartmockups.com/zh) 产品模板生成工具

## 图库

- [uigradients](https://uigradients.com/) 渐变色生成工具
- [freepik](https://www.freepik.com/) banner 图库
- [觅元素](http://www.51yuansu.com/)一天免费下载十张 psd（免抠元素）
- [搞定设计](https://www.gaoding.com/) 可以抠图
- [vectorizer](https://www.vectorizer.io/) 真正的 png 转 svg 神器
- [站酷](https://www.zcool.com.cn/) 国内优秀的设计作品展示
- [花瓣](https://huaban.com/)
- [虎克](https://huke88.com/) ps 学习教程
- [beTheme](https://themes.muffingroup.com/be/splash/)
- [UI 中国](https://www.ui.cn/)
- [wallhaven](https://alpha.wallhaven.cc/) 壁纸网站-

## 3D
- [sketchfab](https://sketchfab.com/) 3D模型

## 交互

- [微交互](http://aliscued.lofter.com/) 里面收集了市面上很多很好的微交互例子 值得学习

- [Little Big Details](http://littlebigdetails.com/) 同上，一个国外微交互汇集网站

- [cruip](https://cruip.com/) 登录页的各种页面设计，可以免费下载模板

- [Comixify](https://comixify.ii.pw.edu.pl/) 一个波兰团队做了非常好玩的工具，可以把视频自动转成漫画，上图是他们提供的 demo，效果很棒。

- [taiko-web](https://github.com/bui/taiko-web) 太鼓达人网页版 只能说很 6



## 有趣
- [电脑恶搞](https://pranx.com/) 收集了一些恶搞小网页，比如xp系统蓝屏、黑客界面等
- [neocities](https://neocities.org/browse) 上面托管了很多有趣的网站
- [奇趣网站收藏家](https://fuun.fun/) 收藏了很多有趣的网站
- [FC在线模拟器(小霸王游戏机)](https://game.xugaoyi.com/) 童年回忆
- [帮你百度一下](http://www.baidu-x.com/) 可以 [点我测试一下](http://www.baidu-x.com/?q=和谐有爱富强)-
- [国际版](http://lmgtfy.com/) 同`帮我百度一下`-[点我测试一下](http://lmgtfy.com/?q=a)-
- [URL 地址播放 Emojis 动画](http://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/#🌖) 在地址栏里面播放 emoji
- [Can't Unsee](https://cantunsee.space/) 强烈建议前端、客户端、UI 开发的同学玩下，检查一下自己对设计稿的敏感度怎么样
- [ggtalk](https://talk.swift.gg/) 平时一直在听的一个技术博客
- [awesome-comment](https://github.com/Blankj/awesome-comment) 里面收集了很多有趣的代码注释
- [text-img](https://www.text-image.com/index.html) 都将图片转化为 ascii 用来写注释
- [ascii video](https://pessimistress.github.io/ascii/) 使用ascii编码生成视频动画
- [weird-fonts](https://github.com/beizhedenglong/weird-fonts) 将普通字母转化为 特殊 unicode
- [snake](https://github.com/epidemian/snake) 在地址栏里面玩贪吃蛇
- [zero-width-lib](https://github.com/yuanfux/zero-width-lib) 利用零宽度字符实现 隐形水印、加密信息分享、逃脱词匹配，很有创意
- [abbreviations](https://www.abbreviations.com/) 查看一个简写是什么意思的网站
- [magi](https://magi.com/) ai 搜索神器，超屌
- [在线取名](https://www.qmsjmfb.com/) 解决取名难问题，超多名字生成

## 生成器

- [卡通头像生成器](https://toonme.com/) 上传真人头像生成卡通头像
- [artbreeder](https://www.artbreeder.com/) 动漫图生成真人图像

- [声音生成器](https://neal.fun/ambient-chaos/) 生成下雨、咖啡厅、海浪、火车等声音，可几种声音合成
- [诺基亚短信图片生成器](https://zzkia.noddl.me:8020/)
- [到账语音生成器](https://zfb.xugaoyi.com/) 支付宝到账1亿元

## 元宇宙

符合元宇宙特征的几个网站，允许用户拥有虚拟土地，在上面构建自己的世界：

- [沙盒](https://www.sandbox.game/cn/)
- [梦境空间](https://somniumspace.com/)
- [Decentraland](https://market.decentraland.org/)

## 教程

- [npx](https://egghead.io/courses/execute-npm-package-binaries-with-the-npx-package-runner) 教你怎么合理的使用 npx
- [hacksplaining](https://www.hacksplaining.com/lessons) 网络安全学习网站
- [mobile-web-best-practice](https://github.com/mcuking/mobile-web-best-practice) 移动 web 最佳实践

## 产品
- [Product Hunt](https://www.producthunt.com/) 好产品推荐

- [产品大牛](http://www.pmdaniu.com/) 什么有很多完整的产品原型可以借鉴
- [磨刀](https://modao.cc/pricing) 快速出 ui 原型

## 实用
- [webden](https://webden.dev/) 在线网页编辑器，轻便快捷
- [browser-update](https://browser-update.org/) 浏览器版本更新提示插件
- [typeform](https://admin.typeform.com/signup) 一个国外的在线调查问卷网站
- [VideoFk](https://www.videofk.com/) VideoFk 视频在线解析下载
- [全历史](https://www.allhistory.com/) 历史内容聚合网站
- [UzerMe](https://www.uzer.me/) 云端办公工具
- [SoBooks](https://sobooks.cc/) 强大的电子书资源网站
- [稿定设计](https://www.gaoding.com/) 键式设计工具+智能抠图
- [大力盘](https://dalipan.com/) 百度网盘搜索
- [ENFI 下载器](https://www.macbl.com/app/internet/enfi) 不限速下载器
- [来画视频](https://www.laihua.com/) 像做 PPT 一样做短视频
- [Arkie 海报制作工具](https://www.arkie.cn/)
- [优品 PPT](http://www.ypppt.com/)
- [比格 PPT](http://www.tretars.com/)
- [高清免费图片](https://www.pexels.com/)
- [高清免费图片 2](https://unsplash.com/)
- [shapedivider](https://www.shapedivider.app/) 生成波浪分隔线
- [Notion](https://www.notion.so/) 知识库、快速笔记、TaskList、日记、读书清单，各种类型，应有尽有
## Talk

- [peerigon-talks](https://github.com/peerigon/talks) 收集了不少有意思的 talks

## 算法

- [leetcode](https://github.com/azl397985856/leetcode) 用 js 刷 leetcode


## nginx
- [nginx 可视化配置工具](https://www.digitalocean.com/community/tools/nginx?global.app.lang=zhCN)

## 生活

- [Ventusky](https://www.ventusky.com/) 风雨气温图