快捷导航
# 基础教程
MDN Web Docs
Web 开发着指南
W3cschool - HTML
HTML 基础教程
W3cschool - CSS
CSS 基础教程
W3cschool - JS
JavaScript 基础教程
现代 JavaScript 教程
最新 JS 标准为基准的教程
ES6 入门教程
阮一峰 - ES6 入门教程
深入理解 TypeScript
《TypeScript Deep Dive》
VUE 2 文档
渐进式 JavaScript 框架
代码规范
前端代码规范
VSCode
极客教程 - VSCode
SVN
菜鸟教程 - SVN
- name: MDN Web Docs
desc: Web 开发着指南
avatar: https://developer.mozilla.org/favicon.ico
link: https://developer.mozilla.org/zh-CN/
- name: W3cschool - HTML
desc: HTML 基础教程
avatar: https://www.w3school.com.cn/ui2019/logo-180.png
link: https://www.w3school.com.cn/html/index.asp
- name: W3cschool - CSS
desc: CSS 基础教程
avatar: https://www.w3school.com.cn/ui2019/logo-180.png
link: https://www.w3school.com.cn/css/index.asp
- name: W3cschool - JS
desc: JavaScript 基础教程
avatar: https://www.w3school.com.cn/ui2019/logo-180.png
link: https://www.w3school.com.cn/js/index.asp
- name: 现代 JavaScript 教程
desc: 最新 JS 标准为基准的教程
avatar: https://zh.javascript.info/img/favicon/favicon.png
link: https://zh.javascript.info/
- name: ES6 入门教程
desc: 阮一峰 - ES6 入门教程
avatar: https://es6.ruanyifeng.com/favicon.ico
link: https://es6.ruanyifeng.com/
- name: 深入理解 TypeScript
desc: 《TypeScript Deep Dive》
avatar: https://jkchao.github.io/typescript-book-chinese/logo.png
link: https://jkchao.github.io/typescript-book-chinese/
- name: VUE 2 文档
desc: 渐进式 JavaScript 框架
avatar: https://v2.cn.vuejs.org/images/icons/android-icon-192x192.png
link: https://v2.cn.vuejs.org/index.html
- name: 代码规范
desc: 前端代码规范
avatar: https://guide.aotu.io/img/apple-touch-icon-152x152.png
link: https://guide.aotu.io/index.html
- name: VSCode
desc: 极客教程 - VSCode
# avatar: https://geek-docs.com/favicon.ico
avatar: https://code.visualstudio.com/favicon.ico
link: https://geek-docs.com/vscode/vscode-tutorials/what-is-vscode.html
- name: SVN
desc: 菜鸟教程 - SVN
avatar: https://static.runoob.com/images/favicon.ico
link: https://www.runoob.com/svn/svn-tutorial.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# 项目依赖
Axios
基于 promise 的网络请求库
Ant Design Vue
UI 组件
vxe-table
表格文档
vxe-utils
工具类
moment
日期处理类库
ECharts
可视化图表库
Mock
生成随机数据，拦截 Ajax 请求
Swiper
生成随机数据，拦截 Ajax 请求
NodeJS
开源、跨平台的 JS 运行时环境
Yarn
软件包管理器
webpack
JS 的静态模块打包工具
less
CSS 扩展语言
Sass
CSS 扩展语言
AntV X6
X6 图编辑引擎
tinymce-vue
富文本编辑器
Lodash
模块化、高性能工具库
- name: Axios
desc: 基于 promise 的网络请求库
avatar: https://www.axios-http.cn/assets/favicon.ico
link: https://www.axios-http.cn/
- name: Ant Design Vue
desc: UI 组件
avatar: https://qn.antdv.com/favicon.ico
link: https://1x.antdv.com/docs/vue/introduce-cn/
- name: vxe-table
desc: 表格文档
avatar: https://vxetable.cn/v4/logo.png
# link: https://vxetable.cn/#/table/start/install
link: https://vxetable.cn/v3/
- name: vxe-utils
desc: 工具类
avatar: https://vxetable.cn/v4/logo.png
link: https://vxetable.cn/xe-utils/#/
- name: moment
desc: 日期处理类库
avatar: http://momentjs.cn/static/img/moment-favicon.png
link: http://momentjs.cn/
- name: ECharts
desc: 可视化图表库
avatar: https://echarts.apache.org/zh/images/favicon.png
link: https://echarts.apache.org/zh/index.html
- name: Mock
desc: 生成随机数据，拦截 Ajax 请求
avatar: http://mockjs.com/assets/img/logo-2.svg
link: http://mockjs.com/
- name: Swiper
desc: 生成随机数据，拦截 Ajax 请求
avatar: https://www.swiper.com.cn/favicon.ico
link: https://www.swiper.com.cn/
- name: NodeJS
desc: 开源、跨平台的 JS 运行时环境
avatar: http://img.nodejs.cn/favicon.png
link: http://nodejs.cn/
- name: Yarn
desc: 软件包管理器
avatar: http://img.nodejs.cn/favicon.png
link: https://www.yarnpkg.cn/
- name: webpack
desc: JS 的静态模块打包工具
avatar: https://yarn.bootcss.com/favicon.ico
link: https://yarn.bootcss.com/docs/getting-started/
- name: less
desc: CSS 扩展语言
avatar: https://less.bootcss.com/public/ico/favicon.ico
link: https://less.bootcss.com/
- name: Sass
desc: CSS 扩展语言
avatar: https://www.sass.hk/favicon.ico
link: https://www.sass.hk/
- name: AntV X6
desc: X6 图编辑引擎
avatar: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original
link: https://x6.antv.antgroup.com/
- name: tinymce-vue
desc: 富文本编辑器
avatar: https://www.tiny.cloud/favicon-32x32.png
# link: http://tinymce.ax-z.cn/
link: https://www.tiny.cloud/docs/
- name: Lodash
desc: 模块化、高性能工具库
avatar: https://www.tiny.cloud/favicon-32x32.png
link: https://www.lodashjs.com/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
# 在线工具
时间戳转化
在线时间戳转化
json 格式化
在线 json 格式化
Base64 编码 & 解码
在线 Base64 编码 & 解码
正则表达式
在线正则表达式
Unicode转换
在线 Unicode 转换
URL 编码 & 解码
在线 Unicode 转换
Websocket 测试
在线 Websocket 测试
CRONTAB 执行时间计算
在线 CRONTAB 执行时间计算
MD5 / Hash
在线 MD5 / Hash
进制转换
在线进制转换
占位图生成器
在线占位图生成器
二维码生成
在线二维码生成
图片压缩
在线图片压缩
Favicon 制作
在线 favicon 制作
RSA 加密
在线 RSA 加密
AES 加密
在线 AES 加密
DES 加密
在线 DES 加密
颜色值转换
在线颜色值转换
- name: 时间戳转化
desc: 在线时间戳转化
avatar: https://tools.fun/assets/image/557d5256c6.png
link: https://tools.fun/timestamp.html
- name: json 格式化
desc: 在线 json 格式化
avatar: https://tools.fun/assets/image/6bd170b2c8.png
link: https://tools.fun/json.html
- name: Base64 编码 & 解码
desc: 在线 Base64 编码 & 解码
avatar: https://tools.fun/assets/image/286f696a67.png
link: https://tools.fun/base64.html
- name: 正则表达式
desc: 在线正则表达式
avatar: https://tools.fun/assets/image/4ca3f448d8.png
link: https://tools.fun/regexp.html
- name: Unicode转换
desc: 在线 Unicode 转换
avatar: https://tools.fun/assets/image/b3ecfbb0cb.png
link: https://tools.fun/unicode.html
- name: URL 编码 & 解码
desc: 在线 Unicode 转换
avatar: https://tools.fun/assets/image/ebdb6264c1.png
link: https://tools.fun/url.html
- name: Websocket 测试
desc: 在线 Websocket 测试
avatar: https://tools.fun/assets/image/e6b9f67cb6.png
link: http://tools.fun/websocket.html
- name: CRONTAB 执行时间计算
desc: 在线 CRONTAB 执行时间计算
avatar: https://tools.fun/assets/image/1518876a3f.png
link: https://tools.fun/crontab.html
- name: MD5 / Hash
desc: 在线 MD5 / Hash
avatar: https://tools.fun/assets/image/265bdc88c1.png
link: https://tools.fun/md5.html
- name: 进制转换
desc: 在线进制转换
avatar: https://tools.fun/assets/image/d867713134.png
link: https://tools.fun/hex-convert.html
- name: 占位图生成器
desc: 在线占位图生成器
avatar: https://tools.fun/assets/image/fe0f57f958.png
link: https://tools.fun/image-generator.html
- name: 二维码生成
desc: 在线二维码生成
avatar: https://tools.fun/assets/image/8e591f96ce.png
link: https://tools.fun/qrcode.html
- name: 图片压缩
desc: 在线图片压缩
avatar: https://tools.fun/assets/image/a17d84598b.png
link: https://tools.fun/tinyimg.html
- name: Favicon 制作
desc: 在线 favicon 制作
avatar: https://tools.fun/assets/image/61f08db5ce.png
link: https://tools.fun/favicon.html
- name: RSA 加密
desc: 在线 RSA 加密
avatar: https://tools.fun/assets/image/b66fd0f35b.png
link: https://tools.fun/rsa.html
- name: AES 加密
desc: 在线 AES 加密
avatar: https://tools.fun/assets/image/3f57f5e3cf.png
link: https://tools.fun/aes.html
- name: DES 加密
desc: 在线 DES 加密
avatar: https://tools.fun/assets/image/a82195820d.png
link: https://tools.fun/des.html
- name: 颜色值转换
desc: 在线颜色值转换
avatar: https://tools.fun/assets/image/5a90f44a2d.png
link: https://tools.fun/color.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
# CSS 工具
CSS-Inspiration
寻找到使用 CSS 的灵感
flex boxes
Flexbox 生成器
CSS Grid Generator
grid 网格生成器
你不知道的 CSS
Web开发者应该掌握的 CSS tricks
CSSFX
漂亮的简单点击复制CSS效果
CSS 常用样式
总结一些常用的 CSS 样式
神奇 UI 样式
创建、分享和使用自定义元素
loading.io
加载动画
终极CSS生成器
我可以给你生任何你想要的CSS
CSS渐变生成器
满足你任何方式的渐变
CSS Layout
收集常见的CSS布局方案
CSS Shadows Generator
box-shadow 阴影生成
CSS阴影收集
收集各种CSS阴影效果
CSS生成器
三角形、渐变、波浪线等生成器
Neumorphism.io
圆角、背景、阴影
选择框生成器
多选框、单选框样式生成器
瀑布流生成器
生成瀑布流的相关代码
Easing Gradients
渐变
Clippy
CSS clip-path 生成器
- name: CSS-Inspiration
desc: 寻找到使用 CSS 的灵感
avatar: https://csscoco.com/inspiration/logo2.png
link: https://csscoco.com/inspiration/
- name: flex boxes
desc: Flexbox 生成器
avatar: https://the-echoplex.net/flexyboxes//favicon.ico
link: https://the-echoplex.net/flexyboxes/
- name: CSS Grid Generator
desc: grid 网格生成器
avatar: https://cssgrid-generator.netlify.app/favicon.ico
link: https://cssgrid-generator.netlify.app/
- name: 你不知道的 CSS
desc: Web开发者应该掌握的 CSS tricks
avatar: https://lhammer.cn/You-need-to-know-css/static/favicon.ico
link: https://lhammer.cn/You-need-to-know-css/#/zh-cn/
- name: CSSFX
desc: 漂亮的简单点击复制CSS效果
avatar: https://cssfx.netlify.app/favicon-32x32.png
link: https://cssfx.netlify.app/
- name: CSS 常用样式
desc: 总结一些常用的 CSS 样式
avatar: https://github.githubassets.com/favicons/favicon.svg
link: https://qishaoxuan.github.io/css_tricks/
- name: 神奇 UI 样式
desc: 创建、分享和使用自定义元素
avatar: https://github.githubassets.com/favicons/favicon.svg
link: https://uiverse.io/all
- name: loading.io
desc: 加载动画
avatar: https://loading.io/favicon.ico
link: https://loading.io/
- name: 终极CSS生成器
desc: 我可以给你生任何你想要的CSS
avatar: https://webcode.tools/favicon.png
link: https://webcode.tools/generators/css
- name: CSS渐变生成器
desc: 满足你任何方式的渐变
avatar: https://www.colorzilla.com/firefox/images/logo-50.png
link: https://www.colorzilla.com/gradient-editor/
- name: CSS Layout
desc: 收集常见的CSS布局方案
avatar: https://csslayout.io/favicon.png
link: https://csslayout.io/
- name: CSS Shadows Generator
desc: box-shadow 阴影生成
avatar: https://shadows.brumm.af/favicon.svg
link: https://shadows.brumm.af
- name: CSS阴影收集
desc: 收集各种CSS阴影效果
avatar: https://getcssscan.com/apple-touch-icon.png
link: https://getcssscan.com/css-box-shadow-examples
- name: CSS生成器
desc: 三角形、渐变、波浪线等生成器
avatar: https://omatsuri.app/assets/favicon-48x48.png
link: https://omatsuri.app/triangle-generator
- name: Neumorphism.io
desc: 圆角、背景、阴影
avatar: https://neumorphism.io/favicon.ico
link: https://neumorphism.io/#e0e0e0
- name: 选择框生成器
desc: 多选框、单选框样式生成器
avatar: https://bun.js.org/favicon.ico
link: https://bun.js.org/
- name: 瀑布流生成器
desc: 生成瀑布流的相关代码
avatar: https://w3bits.com/wp-content/uploads/masonry.jpg
link: https://w3bits.com/tools/masonry-generator/
- name: Easing Gradients
desc: 渐变
avatar: https://larsenwork.com/favicon.ico
link: https://larsenwork.com/easing-gradients/#editor
- name: Clippy
desc: CSS clip-path 生成器
avatar: https://bennettfeely.com/clippy/pics/favicon.png
link: https://bennettfeely.com/clippy/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
# JavaScript 工具
在线JS代码格式化
基于Prettier的在线格式化
在线JSON格式化
在线JSON代码解析及格式化
30秒的代码
满足开发需求的简短代码片段
1 LOC
1行JS代码解决方案
操作DOM
原生JS操作DOM的解决方案
- name: 在线JS代码格式化
desc: 基于Prettier的在线格式化
avatar: https://prettier.io/icon.png
link: https://prettier.io/playground/
- name: 在线JSON格式化
desc: 在线JSON代码解析及格式化
avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store@master/blog/json.3dj9idaidog0.jpg
link: https://www.json.cn/
- name: 30秒的代码
desc: 满足开发需求的简短代码片段
avatar: https://www.30secondsofcode.org/assets/30s-icon.png
link: https://www.30secondsofcode.org/
- name: 1 LOC
desc: 1行JS代码解决方案
avatar: https://1loc.dev/favicon.png
link: https://1loc.dev/
- name: 操作DOM
desc: 原生JS操作DOM的解决方案
avatar: https://htmldom.dev/favicon.png
link: https://htmldom.dev/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Github 收录
- name: 前端技巧
desc: 收集前端技巧、最佳实践
avatar: https://getfrontend.tips/favicon.ico
link: https://getfrontend.tips/
- name: 正则大全
desc: 收集常用的正则表达式
avatar: https://regex101.com/static/assets/icon-76.png
link: https://any86.github.io/any-rule/
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 图片处理
微图
不限格式，极速压缩。(压缩后可选格式为webp)
tinypng
压缩png很优秀，也可压缩jpg、webp
AI自动抠图
只需单击一下，即可快速地自动删除图像背景
favicon生成器
favicon图标生成器，基于图片、文本、表情生成。
- name: 微图
desc: 不限格式，极速压缩。(压缩后可选格式为webp)
avatar: https://devtool.tech/_next/image?url=%2Fassets%2Flogo.svg&w=96&q=75
link: https://devtool.tech/tiny-image
- name: tinypng
desc: 压缩png很优秀，也可压缩jpg、webp
avatar: https://tinypng.com/images/apng/panda-waving-2x.png
link: https://tinypng.com/
- name: AI自动抠图
desc: 只需单击一下，即可快速地自动删除图像背景
avatar: https://www.remove.bg/apple-touch-icon.png?v=YAXaAv7pao
link: https://www.remove.bg/zh
- name: favicon生成器
desc: favicon图标生成器，基于图片、文本、表情生成。
avatar: https://favicon.io/assets/static/favicon.b9532cc.ed88c65f76fa003989a0c683d668c765.png
link: https://favicon.io/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 设计
设计师导航
图库、灵感、工具、素材、配色等
配色生成器
输入一个颜色，生成相应的配色
unDraw免费插画
免费插画，可编辑颜色
logo设计
logo设计，有免费的
logo设计
logo设计，个人比较喜欢
- name: 设计师导航
desc: 图库、灵感、工具、素材、配色等
avatar: https://image.uisdc.com/wp-content/uploads/2018/09/nav-dkt-new2018.jpg
link: https://hao.uisdc.com/
- name: 配色生成器
desc: 输入一个颜色，生成相应的配色
avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store@master/blog/WX20211219-145201@2x.2j5fe3tm0aw0.webp
link: https://mycolor.space/
- name: unDraw免费插画
desc: 免费插画，可编辑颜色
avatar: https://undraw.co/apple-touch-icon.png
link: https://undraw.co/illustrations
- name: logo设计
desc: logo设计，有免费的
avatar: https://www.designevo.com/templates/designevosite/favicon.ico
link: https://www.designevo.com/logo-maker/
- name: logo设计
desc: logo设计，个人比较喜欢
avatar: https://instantlogodesign.com/img/home/icon-instantlogodesign.svg?v=1
link: https://instantlogodesign.com/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 其他
Shields徽章
生成动态的数据统计小徽章
树形目录生成器
Tree 树形目录可视化生成器
Nginx配置
高性能、安全、稳定的配置方案
代码片段生成器
生成 VSCode 代码片段
打字训练
英语单词记忆锻炼软件
- name: Shields徽章
desc: 生成动态的数据统计小徽章
avatar: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAABE0lEQVR4AWJkAIKkpCQ7TU3NySIiIlosQMCABejbMWAFf//8YXj77vWn27duZWVGz1nKGBYWZiQkJHSIkZGRmwEPCMxiwAt+/fz3/86VL8EAbuiiAKEoiMLwGcHdCQMBiUAlurDErmJ75tmKP8A3oiJyuF6vAxglws+0C5pv81GJaJdzhlWMMJssaaXM3C0CpmSDLAQtgH3BiCIVB2NRMKWEIoXQMBiLgjHGP9nQ+6ZPLgqGgs9xriDovX8A6Jjgw8ZyIigzn5xz+yZ+6O/tsz7Hy8tb/PLlywPAHMOFT/G3LwRc95fxPyerQCojuKwLDLQAGjoJWIzpAw1mw6bB0guHSYyMDBysnO/5hUTTGvM3rQEAI8qCnLiY3O4AAAAASUVORK5CYII=
link: https://shields.io/
- name: 树形目录生成器
desc: Tree 树形目录可视化生成器
avatar: https://devtool.tech/_next/image?url=%2Fassets%2Flogo.svg&w=96&q=75
link: https://devtool.tech/tree
- name: Nginx配置
desc: 高性能、安全、稳定的配置方案
avatar: https://www.digitalocean.com/assets/community/apple-icon-120x120-052cdf68a3af8b01c3fd0d46ed35f8f089c10c690109d20e7b186f0159391863.png
link: https://www.digitalocean.com/community/tools/nginx?global.app.lang=zhCN#top
- name: 代码片段生成器
desc: 生成 VSCode 代码片段
avatar: https://snippet-generator.app/favicon.ico
link: https://snippet-generator.app/
- name: 打字训练
desc: 英语单词记忆锻炼软件
avatar: https://qwerty.kaiyi.cool/favicon.ico
link: https://qwerty.kaiyi.cool/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20