The most practical bookmark on the front end



The front-end has developed rapidly in recent years. It’s time to form a knowledge map of the front-end knowledge and see what you know and what you don’t know;
Through this article, we will have a systematic understanding of the front end;
Bookmark address, welcome star, you can directly git clone down, through Google’s top right corner of the bookmark – Import bookmarks, so it doesn’t look too convenient.

General Atlas

First of all, let’s take a look at the map of general manager Zhang
The most practical bookmark on the front end

Bookmark import rendering, very systematic and convenient
The most practical bookmark on the front end


1.1 intermediate

New features of ES6, ES7, es8, es9 and ES10 1
New features of ES6, ES7, es8, es9 and ES10 2
And generator, promiasync

Function inheritance
Object basic usage
Array operation method
Other data types
Regular tutorial

Ajax principle and several tool classes

Data structure and algorithm

HTTP cache
HTTP 1. X 2. X difference

Browser storage

Front end XSS, CSRF, click hijack attack

1.2 advanced

JS execution mechanism 1
JS execution mechanism 2
JS event loop

Handwritten NEW
Handwritten call and apply
Handwritten bind
Handwritten promise, generator, async and await
Handwritten deep copy
Handwritten throttle anti shake
Coritrization of handwritten functions
Anti coriolisation of handwritten functions
Handwritten reduce, instance of, flat

JSON.stringify Advanced Usage

23 design patterns

Prevent XSS attack
Prevention of CSRF attack


16 ways to center CSS
CSS skills 1
CSS skills 2
CSS skills 3
Css45 shapes
1px solution

2. Image

2.1 intermediate

Canvas API
Three.js API
15 animation Libraries

2.2 advanced

Canvas drawing clock
Canvas drawing text particles
Canvas pie chart
Canvas draws a bar chart
Canvas draw line chart
Three draw pilots


3.1 intermediate

Vue-Router API
Vuex API
36 skills of Vue development
Comparison between compute and vuuted
Extend, mixins, extensions, components, install of Vue
Vue 3.x API

Chart plug in of Vue ecarts Vue
Vue quill editor rich text plug in
Vue2 editor rich text plug in
Wangeditor rich text plug in
Vue mdeditor markdown plug in

PC UI component of element Vue
UI component of iView Vue on PC
PC UI component of Ant Design Vue Vue

Mobile UI component of vant Vue
Mobile UI component of nut UI Vue

Vue entry project
Vue TS project
Vue element admin sequence

Vue server rendering
Nuxt server rendering plug in

3.3 advanced

Line by line analysis of Vue Wanxing source code
Vue source code module analysis 1
Vue source code module analysis 2
Vue 3. X source code
Vue router source code
Vuex source code

Write a Vue
Writing a Vue router
Write a vuex
Handwriting a rich text


4.1 intermediate

Reacr API
React-Router API
React-Redux API
34 skills of react development
Hooks usage
Framework of UMI based on react
DVA framework based on react

React LZ editor rich text plug in
VISER PC chart plug in
F2 mobile chart plug in

UI components of ant design PC
UI components of ant design mobile
Zarm Mobile’s UI component library

4.2 advanced

Component mode of TS combined with react
React source code
React router source code
React Redux source code

Write a react
Handwriting a react router
Handwriting a react Redux

5. Webpack and Babel

5.1 intermediate

Webpack API
Webpack 4 configuration best practices
Webpack manual build project 1
Webpack manual build project 2
The difference between different versions of webpack
Babel plug in

5.2 advanced

Webpack principle
Handwritten webpack

Babel and AST
Babel working process

6. Span end frame

Weex API cross end framework based on Vue
The UI component library of weex UI Mobile

Native react based API framework
React-Native UI

Taro’s multi terminal framework
Wepy’s multi terminal framework
Mpvue can span multi terminal framework
Chameleon’s multi terminal framework
A framework for uni app to span multiple terminals
Flutter API


Git common commands
Git principle 1
Git principle 2

Svn common commands
Svn principle
The difference between GIT and SVN

NPM usage
NPM technique


6.1 intermediate

Node API
Framework API of express node
Framework API of KOA node
Framework API of egg node
Deno API
Learn node together

Oracle API

Node enterprise official website project
Koa demo project


6.2 advanced

Node source code 1
Node source code 2
Express source code
Koa source code
Egg source code

Handwritten KOA
Handwritten Express


Introduction to IOS
Principle of jsbridge
Jsbridge usage


Getting started with Android

9. Interview

Front end 100 questions
Interview handwritten code
Tencent front end interview 1
Tencent front end interview 2
Baidu, youzan, Ali interview
Headline interview 1
Headline interview 2
Wechat, headline and Ali interview

9. Architecture

Introduction to micro front end
Qiankun’s Micro front end framework
Practice of micro front end in meituan

Front end Infrastructure 1
Front end Infrastructure 2
Front end construction optimization – Tencent

UI component encapsulation
Visual programming of flying ice
Visual construction of Luban H5

Performance and exception reporting
Vue project performance optimization
CSS performance optimization
Performance optimization of react project
Webpack performance optimization
Front end performance optimization

10. Project management

Project management of laboratory
Quality of Ali leader
Ali’s team planning
The ability to develop beyond code


Original codeword is not easy, welcome to start!

Recommended Today

Common auxiliary classes

CountDownLatch Subtraction counter import java.util.concurrent.CountDownLatch; //Counter public class CountDownLatchDemo { public static void main(String[] args) throws InterruptedException { //The total number is 6. It can be used when the task must be performed CountDownLatch countDownLatch = new CountDownLatch(6); for (int i = 0; i < 6; i++) { new Thread(()->{ System.out.println(Thread.currentThread().getName()+” Go out”); countDownLatch.countDown(); },String.valueOf(i)).start(); […]