This article contains online compilation, online editing, utilities, visualization tools, a variety of front-end e-books and more than 50 sites, quickly put your favorites to eat the ashes

If you see the end, give me a free like

Online compilation (edit), playground

JS code confusion

www.jsfuck.com/

Well, the good thing is you can use it to prank your front-end engineer buddy, the bad thing is you can only use it once

SCSS to CSS online compilation

www.sassmeister.com/

Sometimes when writing some complex SCSS logic, it does not take effect. You may need to look at the compiled CSS code to confirm whether there is a problem with your SCSS code. Online compilation may be a more convenient way

Turn the CSS SCSS

www.sass.hk/css2sass/

Might be useful when you refactor your project? In addition to SCSS, you can also transfer Less, Stylus, etc., but the style after conversion may be different from what you write directly

TypeScript PlayGround

www.typescriptlang.org/play

If you run into a PROBLEM with Typescript (or a TS code demo), you can go to Typescript and write your own code. Then send the link (code changes will be encoded and dynamically added to the current URL) to your knowledgeable friends or friends and ask them to help you solve the problem

In addition to this, it can also be you write ts code online compiled into JS,.d.ts, etc., more functions you have to try to know

Vue PlayGround

sfc.vuejs.org/

Lightweight VuE3 Playground, you can preview the effect in real time, see the compiled JS code (including SSR) and extracted CSS code in real time

Vue3 Template Explorer

template-explorer.vuejs.org/

Vue3 template parsing tool, learning source code necessary

Vue2 Template Explorer

v2.template-explorer.vuejs.org/

Vue2 template parsing tool, learning vue3 source, can be combined with the above V3 parsing tool to see, see where the changes, optimization

Abstract syntax tree parsing

astexplorer.net/

Js abstract syntax tree online parsing tool, can let you better understand JS, learn some compiler tools necessary

CodeSandBox

Codesandbox. IO/dashboard/h…

Can quickly build a simple project, online operation, and fast (your network fast premise), you can also use someone else’s template to create a new project, complex projects it also hold, do not install the environment, online lu code, who does not love it

Log in and save your project in the cloud, share links with others for easy viewing, and provide an API to enable your app to open in CodeSandBox

Free!

You can also search for other people’s written demos. If you don’t know how to use a library, or if you have any tips, you can look it up. You can see the code and preview it online in real time.

CodePen

codepen.io/

Support HTML, CSS, JS, lighter than CodesandBox, suitable for writing simple demo

Babel compiled online

babeljs.io/repl

You can convert various versions of JS, TS code to other lower versions of JS code

github1s

github1s.com/

Add 1s after https://github to the github repository path and you can view the source code in editor mode, which is much more convenient than directly on Github

Visual online tools/other online tools

Online regular expression visualization

When you look at a complex regular expression, you might lose a few hairs, but with it, you’ll be able to figure out what the regular expression is for

Online Postman

Registration is required

web.postman.co/

Use it online all the time

Of course, if you have an installed application, you don’t need it

CSS3 Clip-path online generator tool

Tools.jb51.net/code/css3pa…

You want to play some fancy style when necessary, but write yourself is impossible to write yourself, let the machine generate their own slowly adjust it

CSS animations

css3lib.alloyteam.com/

This site has some cool styles and animations, but it tends to be foreign style

Canvas Background animation (blog available)

Jsrun.net/square/sear…

You can paste the code inside and post it on your personal blog to achieve a cool background effect!

The downside is that it usually makes the laptop fan howl

There are other tools on the site, like the one below

Online code theme color matching tool

jsrun.net/app/49pKp

The same site as above, if you feel that your editor code theme color is not good, then you can use it to slowly adjust

Online color

colorsinspo.com/

If you want to create your own component library, website, do not know the color match can be their own color match

Compatibility query Can I Use

caniuse.com/

You can query the compatibility of a JS API or CSS property in each browser version, there are QQ browser, UC browser is the most interesting thing

EventLoop visualization

www.jsv9000.app/

A great tool for understanding EventLoop

CSS Shadow Generator

www.jq22.com/too-jq22/bo…

Box-shadow is an amazing and useful property. You can generate the necessary box-shadow code on this site

JSON to TS code

www.json2ts.com/

Very useful, can improve the efficiency of your TS code, especially when you need to define the interface return type, use it is copy and paste!

Online regular expression testing

regex101.com/

Instead of testing regex with an online tool, I prefer to write code tests directly on the console

CSS code generation

www.cssmatic.com/gradient-ge…

You can generate four types of CSS code, gradient, shadow, etc

carbon

carbon.now.sh/

Let your code become more beautiful, their own articles or papers can use this tool to beautify their own code

Framework/library/tools documentation

UI library

There are great Vant

Support Vue3 Vant3 https://vant-contrib.gitee.io/vant/#/zh-CN

A mobile component library developed by Uzan, currently supports Vue2, Vue3, React, wechat and Alipay applets

This component library has always been of the better-looking type, where business components are related to the good business and fit well with mobile apps like shopping mall

Ant Design of Ant Group

ant.design/

The PC component library documentation is well documented, and each component describes when to use it, giving you a better idea of what a component is

The design resources provided are more complete

It comes with mid-platform front-end/Design solutions Ant Design Pro, Ant Design Pro Components, Ant Design Charts, and Vue, Angular version of Ant Design

Bootstrap

Bootstrap4 Chinese document

The UI library comes from members of Twitter, but has fewer components and features many utility classes; JQuery will be introduced, and most of the interaction will have to be handled yourself

  • FlatUI

FlatUI is developed based on Bootstrap and looks better

Layui

The mirror stand https://www.layuiweb.com/ Chinese documents

JQuery era UI library, imperative API, some examples in the documentation are not previewed

The official website has been offline, goodbye jianghu, the original official website (layui.com)

Material Design Angular

material.angular.io/

Based on Angular, if you haven’t used it, please comment

ElementUI

element.eleme.cn/#/zh-CN

Vue2. Angular and React versions are supported. Element Plus supports Vue3

semi design

semi.design/zh-CN

It is from tiktok front end and UED team of Bytedance. It has just opened source recently, and continues to pay attention to it

Taro UI

Taro-ui.jd.com/#/docs/intr…

From JINGdong Attong Laboratory, based on Taro, is a cross-terminal UI library

Vuetify

Vuetifyjs.com/zh-Hans/int…

From Vuetify, a full-time open source company

WeUI

weui.io/

Wechat official UI library, every day with wechat you must be very familiar with

Ant Design Mobile

mobile.ant.design/

Ant Design for mobile, the old version of the style is mediocre, the documentation experience is not very good, the new style is better, the documentation update is also useful

Icon library

Font Awesome Chinese

www.fontawesome.com.cn/

IcoMoon

icomoon.io/

iconfont

www.iconfont.cn/

IconPark

iconpark.oceanengine.com/official

JS framework/library

Vue

  • Vue2 Chinese document

  • Vue3 Chinese document

  • Vue CLI

  • Vue Devtools

  • Vue Loader

  • Vue Router

  • Vuex

  • Vue SSR

  • Vite

React

  • Chinese document

  • React Router

  • Redux, Chinese document

  • react-redux

  • create-react-app

  • React Native official documentation

  • React Native Chinese document

Angular

angular.io/

svelte

svelte.dev/

Taro

taro-docs.jd.com/taro/docs

Jingdong’s cross-end framework supports Vue2, Vue3 and React

uni-app

uniapp.dcloud.io/README

From DCloud, Vue based cross-end framework

Three.js

  • Chinese document

  • The official documentation

  • Official Online Sample

D3.js

d3js.org/

A very powerful visual graphics library based on SVG

CoCos

Docs.cocos.com/creator/man…

A cross-platform game engine using Typescript

other

ECMA official documentation

tc39.es/ecma262/

VsCode plug-in development Chinese documentation

Liiked. Making. IO/v – Code – Ext…

MDN Web Chinese technical document

Developer.mozilla.org/zh-CN/docs/…

Web API interface reference

Novice tutorial

  • Quick search for HTML tags (by first letter)

  • Quick search for HTML tags (by function)

  • Quick query of CSS properties

  • CSS selector quick check

  • JS Reference Manual

W3C Reference Manual

W3C Reference Manual

You can find out more at the following websites

awesome list chinese

asmcn.icopy.site/

npm

npmjs.com

github

github.com

Online books/documents

Introduction to ES6 standard ruan Yifeng

es6.ruanyifeng.com/

“Browser Working Principles and Practices”

Blog. Poetries. Top/browser – wor…

Simple Webpack

webpack.wuhaolin.cn/

Code Random

programmercarl.com/

Modern JavaScript Tutorial

zh.javascript.info/

How to Advance the Front End

yuchengkai.cn/

React Tech Revealed

react.iamkasong.com/

Vue Technology Revealed

Ustbhuangyi. Making. IO/vue – analysi…

TypeScript Introduction

ts.xcatliu.com/

Understanding TypeScript

Jkchao. Making. IO/typescript -…

“You need – to – know – CSS”

Lhammer. Cn/You — the need to…

“CSS Inspiration”

Chokcoco. Making. IO/CSS – Inspira…

Three. Js Tutorial

www.webgl3d.cn/Three.js/

WebGL Tutorial

www.webgl3d.cn/WebGL/

Note: Some sites may require your own tools to access for some reasons

This article was first published in Denver on March 27, 2022

Other articles I recommend:

Close to the ceiling of the TS type of gymnastics, read you can play TS

How to publish NPM packages with a command line base64 encoding tool

TypeScript Utility Types, do you really understand?

TypeScript advancements, how to avoid any

How can I solve the problem of slow access to Github