This article contains more than 50 websites such as online compilation, online editing, practical tools, visualization tools, various front-end e-books, etc., put them in your favorites and eat ashes
If you see the end, remember to give me a free like
Online compilation (editing), playground
JS code obfuscation
Well, the advantage is that you can use it to prank your front-end engineer friends, the disadvantage is that it can only be used once
SCSS to CSS online compilation
Sometimes when writing some more complex SCSS logic, if you encounter a problem that it does not take effect, you may need to see what the compiled CSS code looks like to confirm whether there is a problem with the SCSS code you wrote. Online compilation may be a kind of more convenient way
CSS to SCSS
Might be useful when you refactor your project? In addition to converting to SCSS, you can also convert Less, Stylus, etc., but the converted style may be inconsistent with what you wrote directly.
TypeScript PlayGround
The TypeScript online debugging and running tool officially provided by Typescript, if you encounter some TS problems (or take a look at the demo of the ts code), you can go to this website to write your code, and then link (code changes will be dynamically modified after coding). Add to the current url) and send it to the vast netizens, or your friends, ask them to help you solve the problem
In addition to this, it can also compile the ts code you wrote online js, .d.tsetc. You will know more functions by trying it out.
Vue PlayGround
A lightweight vue3 playground, you can preview the effect in real time, view the compiled js code (including ssr's) and the extracted css code in real time
Vue3 Template Explorer
Vue3's template parsing tool, necessary for learning source code
Vue2 Template Explorer
v2.template-explorer.vuejs.org/
vue2 的模板解析工具，学习 vue3 源码的时候，可以与上面 v3 的解析工具一起结合起来看，看看变化、优化都在哪
抽象语法树解析
js 的抽象语法树在线解析工具，能让你更好的理解 js，学习一些编译工具必备
CodeSandBox
能快速搭建一个简单的项目，在线运行，而且速度很快（你网快的前提下），你也可以用别人的模板来新建项目，复杂的项目它也 hold 的住，不用装环境，在线撸代码，谁不爱呢
登录后云端保存项目，把链接分享给其他人就可以方便的查看，提供 api 来让你的应用拥有 在CodeSandBox中打开 的能力
免费的！
还可以搜索别人的写好的 demo，你不知道一个库怎么用的时候，或有什么技巧的时候，可以来搜搜看看，既可以看代码，又可以在线实时预览，“CV 工程师必备”
CodePen
支持 HTML、CSS、JS，比 codesandbox 轻量，适合写简单的 demo
babel 在线编译
你可以将各种版本的 js、ts 代码转换成其他低版本的 js 代码
github1s
在 github 代码仓库的路径的 https://github 后面加个 1s，就能用编辑器模式看源码了，比直接在 github 中看方便多了
可视化在线工具/其他在线工具
在线正则表达式可视化
遇到一个复杂的正则表达式，你多看几眼就可能会多掉几根头发，但是有了它，你就可以很好的分析出这个正则表达式的用途了
在线 Postman
需要注册哦
一直在线用一直爽
当然，有已经安装的应用就不需要了
CSS3剪贴路径（Clip-path）在线生成器工具
你想玩些花里胡哨的样式的时候必备，但是自己写是不可能自己写的，让机器生成好自己再慢慢调吧
CSS 动画
这个网站有一些炫酷的样式和动画效果，不过比较偏向国外的风格
Canvas 背景动画（博客可用）
你把这个里面代码粘贴出来，放到你的个人博客中，就可以实现很炫酷的背景效果了！
缺点是，一般加了这个，笔记本电脑风扇就会呼啸起来
这个网站里面还有一些其他的工具，比如下面这个
在线代码主题配色工具
跟上面是同一个网站，你如果觉得自己编辑器的代码主题颜色不好看，那你可以用它来慢慢调
在线配色
如果你想搞一个自己的组件库，网站，不知道配色的就可以自己来配色
兼容性查询 Can I Use
可以查询一个 js api 或者 css 属性的在各个浏览器的各个版本下的兼容性，里面还有 QQ 浏览器，UC 浏览器是最有趣的事
EventLoop 可视化
前端小白理解 EventLoop 的利器
CSS 阴影生成器
box-shadow 是一个很神奇且有用的属性，在这个网站可以生成需要的 box-shadow 代码
JSON 转 TS 代码
十分有用，能提高你写TS代码的效率，特别是需要定义接口的返回类型时，用它就是复制粘贴了！
在线正则表达式测试
比起用在线工具测试正则，我更习惯直接在控制台写代码测试
CSS 代码生成
可以生成四种类型的 CSS 代码，渐变，阴影等
carbon
让你的代码变的更美观，自己写文章或者论文都可以用这个工具来对自己的代码进行美化
框架/库/工具 文档
UI库
有赞 Vant
支持 Vue3 的 Vant3 https://vant-contrib.gitee.io/vant/#/zh-CN
一款由有赞开发的移动端组件库，目前支持 Vue2、Vue3、React，微信和支付宝小程序
这款组件库一直以来都属于比较好看的类型，其中的业务组件和有赞的业务相关，也比较契合商城（购物）类移动端应用
蚂蚁集团 Ant Design
这款PC端组件库文档中的设计原则写的比较完善，并且每个组件都描述了 何时使用，让你对“组件”有更深的认识
提供的设计资源更为完善
配套的有 中台前端/设计解决方案 Ant Design Pro、Ant Design Pro Components、图表 Ant Design Charts、和 Vue，Angular 版本的 Ant Design
Bootstrap
这个 UI 库来自 Twitter 的成员，但是组件比较少，特点是提供了很多工具类；需要引入 JQuery，大部分交互还是需要自己处理
FlatUI 是基于 Bootstrap 开发的，样式更好看了
Layui
中文文档镜像站 https://www.layuiweb.com/
JQuery 时代很好的 UI 库，命令式 api，文档中有些示例没有预览
官网已经下线了，江湖再见，原官网（layui.com）
Material Design Angular
基于 Angular，没用过，用过的朋友们评论一下呢
ElementUI
出自饿了么前端团队，学 Vue 的童鞋们必用的一款 UI 库，支持 Vue2，也支持有 Angular 和 React 的版本，Element Plus 支持 Vue3
semi design
出自字节跳动抖音前端与 UED 团队，最近刚开源不久，持续关注
Taro UI
出自京东凹凸实验室，基于 Taro，是一款跨端 UI 库
Vuetify
出自一家全职开源企业 Vuetify
WeUI
微信官方的 UI 库，天天用微信的你一定很熟悉
Ant Design Mobile
Ant Design 的手机版，旧版样式一般般，文档体验不是很好，新版样式比较好，文档更新的也好用起来了
图标库
Font Awesome 中文网
IcoMoon
iconfont
IconPark
iconpark.oceanengine.com/official
JS 框架/库
Vue
React
Angular
svelte
Taro
京东的跨端框架，支持 Vue2、Vue3、React
uni-app
出自 DCloud，基于 Vue 的跨端框架
Three.js
D3.js
一款很强大的基于 SVG 的可视化图形库
CoCos
使用 Typescript 的跨平台游戏引擎
其他
ECMA 官方文档
VsCode 插件开发中文文档
MDN Web中文技术文档
developer.mozilla.org/zh-CN/docs/…
菜鸟教程
W3C 参考手册
你可以在下列网站找到更多
awesome list chinese
npm
github
在线书籍/文档
《ES6标准入门》阮一峰
《浏览器工作原理与实践》
blog.poetries.top/browser-wor…
《深入浅出 webpack》
《代码随想录》
《现代 JavaScript 教程》
《前端进阶之道》
《React 技术揭秘》
《Vue 技术揭秘》
ustbhuangyi.github.io/vue-analysi…
《TypeScript 入门教程》
《深入理解TypeScript》
《You-need-to-know-css》
《CSS Inspiration》
chokcoco.github.io/CSS-Inspira…
Three.js Tutorial
"WebGL Tutorial"
Note: Some websites may require their own tools to access for some reasons.
This article first appeared on the Nuggets on March 27, 2022
My other article recommendations:
TS type gymnastics close to the ceiling, you can play TS if you understand it
Use a command-line base64 encoding tool to teach you how to publish npm packages
TypeScript's Utility Types, do you really understand?