Tools, Websites, and Books to Improve Front-End People Efficiency

Online compilation (editing), playground

JS code obfuscation

www.jsfuck.com/

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

www.sassmeister.com/

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

www.sass.hk/css2sass/

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

www.typescriptlang.org/play

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 into js , .d.ts , etc. You will know more functions by trying them

babel online compilation

babeljs.io/repl

You can convert various versions of js, ts code into other low version js code

github1s

github1s.com/

Add a 1s to the path of the github code repository https://github , and you can use the editor mode to view the source code, which is much more convenient than viewing it directly in github

Visualization Online Tools/Other Online Tools

Online Regular Expression Visualization

jex.im/regulex

When you encounter a complex regular expression, you may lose a few more hairs if you look at it more, but with it, you can analyze the purpose of this regular expression very well.

Online Postman

Registration is required

web.postman.co/

Always online and always cool

Of course, you don't need it if you have apps already installed

Scripting House Online Tools

http://tools.jb51.net/table

Canvas background animation

jsrun.net/square/sear…

You paste the code inside and put it into your project, and you can achieve a cool background effect!

The disadvantage is that, generally adding this, the laptop fan will whistle

There are some other tools in this website, you can also try

online color matching

colorsinspo.com/

If you want to build your own component library, website, and you don't know the color matching, you can color it yourself

Compatibility QueryCan I Use

caniuse.com/

You can query the compatibility of a js api or css property under various versions of various browsers, including QQ browser, UC browser is the most interesting thing

JSON to TS code

www.json2ts.com/

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

CSS code generation

www.cssmatic.com/gradient-ge…

Four types of CSS code can be generated, gradients, shadows, etc.

Framework/Library/Tool Documentation

UI library

Liked by Vant

Vant3 with Vue3 support: vant-contrib.gitee.io/vant/#/zh-CN

A mobile component library developed by Youzan , currently supports Vue2, Vue3, React, WeChat and Alipay applet

This component library has always been a good-looking type. The business components are related to the business you like, and it is also more suitable for shopping mall (shopping) mobile applications.

Ant Group Ant Design

ant.design/

The design principles in this PC-side component library document are relatively well written, and each component is described 何时使用 , allowing you to have a deeper understanding of "components"

The design resources provided are more complete

Bootstrap

Bootstrap4 Chinese Documentation

This UI library comes from members of Twitter, but it has fewer components, and it provides many tool classes; JQuery needs to be introduced, and most interactions still need to be handled by yourself

FlatUI

FlatUI is developed based on Bootstrap, and the style is better

Layui

Chinese document mirror site: www.layuiweb.com/

A very good UI library in the JQuery era, imperative api, some examples in the documentation do not have a preview

The official website has been offline, see you in the rivers and lakes, the original official website ( layui.com )

ElementUI

element.eleme.cn/#/zh-CN

element.eleme.cn.jpg

From the Ele.me front-end team, it supports Vue2, as well as Angular and React versions, and Element Plus supports Vue3

semi design

semi.design/en-US

From the ByteDance Douyin front-end and UED team, it has just been open sourced recently, continue to pay attention

Taro UI

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

From Jingdong Bump Lab, based on Taro, it is a cross-end UI library

Vuetify

vuetifyjs.com/en-Hans/int…

From Vuetify, a full-time open source company

WeUI

weui.io/

WeChat official UI library, you must be familiar with WeChat every day

Ant Design Mobile

mobile.ant.design/

The mobile version of Ant Design, the old version has a general style, the document experience is not very good, the new version has a better style, and the updated document is easy to use