🔥 What’s this?

After the author learned JS and the application of the framework, there is a period of time do not know how to go deep, live capable, just do not know what to learn. I believe this problem will also have many readers encountered.

Of course, I have now broken through this bottleneck and become a member of the infrastructure team of a well-known company. Therefore, I want to sort out a series of learning routes and material recommendations through my own growth experience and accumulated information to help readers solve this problem.

The author is the main contributor to the warehouse content, and has also pulled nearly 20 senior front-end developers to do content construction and review, most of whom work for the first-line large factories P6 and P7. The first edition took several weeks, and we did not stop during the National Day holiday. The content is absolutely satisfactory to everyone.

This information is suitable for small white entry, intermediate advanced, senior leak filling.

Content is updated every day, you can continue to follow.

Here is the Github link, the latest content will be first updated on Github, if you think the content is helpful to you, you can click the Star.

💻 How to use

If you are a junior or intermediate engineer, I also recommend starting with the “front End Core Learning Path,” which focuses on building a solid foundation, and then picking out topics of interest.

If you are an advanced engineer, I recommend skipping the “front-end core learning path” and just picking a topic that interests you.

All of the points below are designed to help readers connect their knowledge to build their own knowledge rather than memorizing loose points individually.

How do I access this information

The author has sorted out the important information in the warehouse content, you can pay attention to [The public,Send “Information” to obtain

📖 directory

Since digg’s header tag doesn’t support redirects, you’ll be left with the task of redirecting your article to a place of interest, or heading to Github to browse the contents.

How to teach yourself effectively

Self-study is a skill that every engineer needs to master. This study method author tries 100 clever, study any technology can use this train of thought. In addition, we can also broaden our technology stack through this way of thinking, and establish our own knowledge system by connecting various knowledge, and the knowledge learned through this way is not easy to forget.

Books recommended

The following books mainly recommend JS, while other technologies such as frameworks, TS and so on will be introduced in their respective chapters.

primary

  • JavaScript Advanced Programming (version 4)

The advanced

  • JavaScript Ninja Secrets (version 2)
  • JS 3 volumes you don’t know, the English version of this book is open source, and the author has been writing the second edition, the ability to read English readers recommended to read the original

senior

  • JavaScript enlightenment.
  • The Essence of JavaScript and Programming Practices (3rd edition)

You can pay attention to the above books [The public,Send “Information” to obtain

Front-end core learning path

It’s an accepted fact, but there’s no need to learn everything. You’d just bite off more than you can chew. We can beat most front-end engineers by learning the core knowledge, hot technologies, and things we need to do our jobs, and the rest of us can choose what we want to learn.

But before learning other content, the author strongly recommends everybody to be sure to lay a solid foundation first, the foundation is bad really impossible to pull up oneself technology.

In order to ensure that the knowledge you have learned is correct, the author uses the English version of the following documents. Because in the process of reviewing materials, the author found that many Chinese documents have translation errors or outdated situations.

If you are a beginner, it is recommended that you read one or two books on your own before following this plan, as it does not cover all of JS, but rather Outlines all of the core points.

The author recommends the following two books:

  • JavaScript Advanced Programming (version 4)
  • JavaScript Ninja Secrets (version 2)

JS core knowledge

The data type

JS data types are divided into two categories and eight data types. Note that BIGint is added to ES6.

  • Documents:
    • JavaScript data types and data structures

Type judgment

There are several ways to judge the type, which are as follows:

  • typeof

  • instanceof

  • Object.prototype.toString

  • IsXXX, such as isArray

  • The document

    • typeof
    • instanceof
    • Object.prototype.toString

  • It is important to recommend articles and Issue

    • Type Judgment of JavaScript Topics (PART 1)
    • Type Judgment of JavaScript Topics (Part 2)

Type conversion

Type conversion is a complex and error-prone SITUATION in JS, but often encountered in the development of knowledge. Forcible memorization is easy to forget, recommended memory and practice development common situation.

  • The document
    • ES standard
      • The standard is not easy to read. If you are not good at English, you can only read the table in this section.
    • Such as double judgment
  • Recommend the article
    • You Don’t Know JS chapter on type conversions
    • Several basic types simple type conversions
    • JavaScript deep headache type conversion (part 1)
    • JavaScript deep headache type conversion (part 2)

this

This is a good way to learn English.

  • The document
    • this
  • Recommend the article
    • This is the first chapter of You Don’t Know JS book
    • You Don’t Know JS book about the second chapter of this
    • In-depth understanding of js this binding (no need to memorize, there is a summary and analysis of the questions at the end)

closure

Closures are commonly used, but many engineers get them wrong.

  • The document
    • closure
  • Recommend the article
    • You Don’t Know JS (You Don’t Know JS, You Don’t Know JS, You Don’t Know JS)
    • JavaScript’s static scope chain versus the “dynamic” closure chain
    • Discussion on closures in Zhihu

scope

Scope is the area of the program where variables are defined. This location determines the life cycle of variables, that is, the accessible scope of variables and functions.

  • The document
    • scope
    • Block scope
  • Recommend the article
    • JavaScript deep lexical scope and dynamic scope
    • JavaScript deep scope chain
    • Variable Scope, Closure, and Chinese translation
    • You Don’t Know JS Yet: Scope & Closures
    • The battle between function scope and block scope

Variable ascension

Variable promotion (as) can place variables and functions into memory at compile time, which can then be used prior to declaration at run time.

  • The document
    • JS variable promotion, the concept of variable promotion
  • Recommend the article
    • JavsScript variable promotion and function promotion, deep parsing variable promotion and function promotion, illustrating variable promotion in various situations
    • It took me two months to understand let, the difference between parse let and Val, and the temporary dead zone of let
    • JavaScript Scoping and collieries, promotion of scope and function declarations and variable declarations in JavaScript

new

The new operator helps us build an instance and bind this.

  • The document
    • new
  • Recommend the article
    • What exactly does JS new do?
    • JavaScript deep new simulation implementation

Call, apply, bind

  • The document
    • Call, the concept of call
    • Apply, the concept of apply
    • Bind, the concept of bind
  • Recommend the article
    • JS in the call, apply, bind method detailed explanation, the use of these three methods, interview questions and specific implementation of detailed explanation
    • Mock implementation of Call and apply, mock implementation of Call and apply to help understand
    • A mock implementation of BIND to help better understand

The prototype

Through prototypes, objects in JavaScript inherit features from other objects.

  • The document
    • The prototype
  • Recommend the article
    • You Don’t Know JS: this & Object Prototypes
    • In-depth understanding of JavaScript prototypes
    • In-depth analysis of the various difficulties in the prototype
    • Bring your own ladder

Class

A class is just syntactic sugar for a prototype chain, not the same thing as a class in any other language.

  • The document
    • Class
  • Recommend the article
    • Understand JavaScript classes
    • How does Babel compile on Class
    • How does Babel compile under Class
    • To be fair to the ES6 Class
    • Should I use Class in JavaScript?

inheritance

Inheritance is one of the three characteristics of object-oriented Language and plays a very important role in JS. There are many ways to implement inheritance, and they all have their advantages and disadvantages.

  • The document
    • inheritance
  • Recommend the article
    • The various ways in which JavaScript extends inheritance and the pros and cons
    • Inheritance in JavaScript requires your own ladder
    • JS class inheritance, and Chinese translation version

modular

This knowledge is a must, and it would be nice to have a look at the history of modularity and an in-depth understanding of the native modularity of ES6.

  • The document
    • Modules
  • Recommend the article
    • [Depth and comprehensive] Front-end JavaScript modular specification evolution, records the evolution of JS modular road
    • JavaScript modules, explain JS modularity from shallow to deep
    • ES Modules: A Cartoon Deep-dive, an in-depth explanation of JS modularity, also available in Chinese

Promise

  • The document
    • Promise
    • Promises/A + specification
  • Recommend the article
  • Callbacks Vs Promises and Basics of JS, need to bring your own ladder
  • Implement Promises with minimal support for asynchronous chained calls (20 lines)
  • Promises/A+ 100 lines of code
  • Github
  • promise-fun

Iterators and generators

  • The document
    • Iterators and generators
  • Recommend the article
    • What is a JavaScript generator? How do I use generators?
    • Understanding Generators in ES6 JavaScript with Examples, need your own ladder
    • A Simple Guide to ES6 Iterators in JavaScript with Examples

async await

  • The document
    • async
    • await
  • Recommend the article
    • Minimal implementation of Handwriting Async await (20 lines)
    • What does Babel compile Generator into

Event loop

We all know that JS is a single-threaded, non-blocking scripting language. This means that the code has only one main thread to handle all tasks at any one time. So understanding the event loop mechanism is very important for us to learn JS.

  • The document
    • Event loop
  • Recommend the article
    • This time, thoroughly understand the JavaScript execution mechanism
    • Learn the Event Loop once
    • Working principle of JavaScript, need to provide their own ladder, and Chinese translation version.
  • Event loop visualization
    • Loupe

Throttling and anti-shaking

Throttling refers to the condition in which events are fired consecutively and the function is executed only once in a certain period of time. Anti-shake means that the callback function is executed after the event is triggered for a certain period of time. If the event is triggered again within a certain period of time, the restart is timed.

  • Recommend the article
    • Function tremble and function throttling
    • Talk about JS anti – shake and throttling
    • Debounce – How to Delay a Function in JavaScript
    • Debouncing and Throttling in JavaScript

Currie,

Currization is the conversion of a function that takes multiple arguments to a function that takes one.

  • Recommend the article
    • Currying
    • Currization of JavaScript topics
    • Understanding Currying in JavaScript, need to bring your own ladder, also available in Chinese translation

The garbage collection

JavaScrip allocates memory when a variable is created and automatically frees it when the object is no longer used, a process known as garbage collection. In addition, we will mainly study the garbage collection mechanism under V8 engine.

  • The document
    • Memory management & garbage collection
  • Recommend the article
    • For an in-depth understanding of Chrome V8 garbage collection, see the references for this article
    • GC in v8
    • How JavaScript works: Memory management + handles 4 common memory leaks

Other scattered but important points

  • 0.1 + 0.2! == 0.3, JS floating point numbers will cause problems

If you find the above helpful, you can go toGithubClick Star to support it.

HTML

semantic

Semantic HTML is to make the content of the page structured, easy to browser, search engine parsing. Without the introduction of the CCS style, it can also be displayed in a document format that is recognizable as a rough representation of content and is easy to read. Search engine crawlers rely on tags to determine the context and the weight of each keyword, which is good for SEO. Make it easier for people reading source code to divide the site into blocks, easy to read maintenance understanding.

  • The document
    • Semantics in HTML, what is HTML semantematization, what are the benefits of HTML semantematization
  • Recommend the article
    • IFE-NOTE: Semantic semantic of page structure, some experience and understanding of semantic semantic of page structure in HTML5
    • In terms of HTML semantics and front-end architecture, HTML semantematization is used in conjunction with the use of CSS structured class names in development to build reusable and composable components

CSS

  • Recommend the article
    • One article combing CSS will be knowledge points

The box model

In CSS, all elements are surrounded by boxes. We use two types of boxes extensively, block boxes and inline boxes, to understand the basic principles of these boxes. Is the key to our use of CSS to achieve accurate layout and handle the arrangement of elements.

  • The document
    • CSS box model, the official documentation provides an in-depth understanding of the CSS box model
  • Recommend the article
    • CSS box model inside margin, border, margin 19 questions, through the example to illustrate the box model of various common forms and problems
    • CSS Box Model, some specifications of the Box Model introduction
    • CSS Box model detail (graphic tutorial), through pictures and examples to illustrate the various parts of the box model and the presentation on the page

The selector

In CSS, selectors are used to specify which HTML elements on a page we want to style. CSS selectors provide a wide variety of methods, so we can be very careful when selecting elements to style.

CSS selectors are the first part of CSS rules. It is the way elements and other parts combine to tell the browser which HTML element should be selected as the CSS attribute value in the applied rule. The element selected by the selector is called the selector object.

  • The document
    • CSS selectors, the official documentation details the different ways selectors can be used and how they work.
  • Recommend the article
    • 30 CSS selectors you must memorize, common CSS selectors in development, after mastering can greatly improve the CSS coding experience
    • In-depth analysis of CSS style priority, detailed introduction of CSS style weight priority, to avoid writing duplicate style and style overwriting does not take effect

Flex

  • The document
    • flexbox
  • Recommend the article
    • A Complete Guide to Flexbox
    • Unknown details of the Flexbox layout
  • In actual combat
    • FLEXBOX FROGGY is a fun little game to learn Flex on the website

grid

  • The document
    • grid
  • Recommend a document
    • A Complete Guide to Grid
    • The Grid layout is the most powerful CSS layout

other

  • Recommend a document
    • Detail on layer composite
    • How do mobile devices achieve true 1px lines?

The framework

Framework generally choose one of in-depth study can be.

Virtual DOM

A Virtual DOM is a Virtual node. Real node objects in DOM are simulated by JS Object, and then rendered into real DOM nodes by specific render methods.

  • The document
    • React
  • Recommend the article
    • How do Virtual Dom and Diff algorithms work in React? , you need to prepare a ladder
    • React Virtual Dom and Diff

routing

Routing is used in the SPA architecture and is implemented using hash and history apis.

  • The document
    • hashchange
    • history
  • Recommend the article
    • Introduction to front-end routing and vue-Router implementation principle, explain the principle of front-end routing and vue-Route library, the principle of routing library of several frameworks are consistent

React

The learning framework must start from the documentation, at least read through some of the initial Demo you have written before looking at other materials.

React recommends learning paths

You can follow the path above, except for the concept-related stuff that you must learn, and the ecology-related stuff that you can learn as you use it.

React Recommend learning materials

  • React Learn the way. You can buy it for $0
  • React lifecycle

How to write a component

  • The document
    • React
  • Recommend the article
    • React function components and class components
    • React Components write React Components
    • Five best practices for writing efficient and readable components
    • designing-react-components-best-practices
    • React composite component

Controlled components and uncontrolled components

  • Controlled components: In HTML, form elements such as input, Textarea, and SELECT typically maintain their own state and are updated based on user input. In React, mutable state is usually stored in the component’s state property and can only be updated by using setState() or props

  • Uncontrolled component: is an internal state that stores its own, and you use the query DOM ref when you need it to find its current value, a bit like traditional HTML

  • The document

    • React

  • Recommend the article

    • Are controlled and uncontrolled components really that hard to understand
    • Controlled components & uncontrolled components

High order Component (HOC)

HOC is an advanced technique used in React to reuse component logic. HOC itself is not part of the React API; it is a design pattern based on the composite features of React.

Specifically, a higher-order component is a function that takes a component and returns a new component.

  • The document
    • React
  • Recommend the article
    • React Advanced Components (HOC) Introduction guide
    • Hoc library recompose
    • Read React advanced components closely

Hooks

Hook is a new feature in React 16.8. It lets you use React features without writing class components.

  • The document
    • React Hooks official documentation
  • Recommend the article
    • React Hook useCallback and useMemo
    • React hooks best practices

Synthetic events

A SyntheticEvent is an event object that React emulates all the capabilities of native DOM events, a cross-browser wrapper for browser-native events. React defines synthesized events according to the W3C specification. It is important to note that there are differences between the synthesized events in V16 and 17.

  • The document
    • React
  • Recommend the article
    • Explore React composite events
    • Big guy, what do we do? Update React17, Toast component no longer works
    • What’s the Difference Between Synthetic React Events and JavaScript Events? , you need to prepare a ladder
    • React 17 removes event pooling in the modern browsers

The React routing

  • React -router indicates the react declarative route
  • Reach Router indicates the next generation React route

React Status Management

React state management is much more than just the libraries listed here. However, many projects do not need to use state management at all, instead increasing the coding complexity. In fact, React Context or React – Query interface request libraries can be used to meet the requirements.

  • Redux, a state container for JS applications, provides predictable state management
  • Mobx, a simple, extensible state management library
  • Recoil, React status management library
  • Xstate, finite state machine
  • Zustand, a simple, fast and scalable bone state management solution

React Interface Request

  • Axios, the traditional interface request library
  • React-query: a library of Hooks interface requests for retrieving, caching, and updating asynchronous data in React
  • SWR, React Hooks library for data requests

React SSR

  • Nest.js, a progressive Node.js framework for building efficient, reliable, and scalable server-side applications.

The React single measurement

  • Jest, elegant, concise JavaScript testing framework, single test required options
  • React-testing-library is a simple and complete test tool for the React DOM

The React CSS scheme

  • Styled – Components, CSS in JS scheme
  • Tailwindcss, Atom CSS scheme

The React principle

  • React-source-code -debug, learn how to debug source code
  • React – illustrations-series, the react source code, with a large number of illustrations, is dedicated to the react principle
  • Just react, React Technology Debunking, a top-down source code analysis book for React
  • Tiny-react, a minimal implementation based on React17

A Blog is recommended

  • Dan Abramov, core developer of React Blog

Vue

The learning framework must start from the documentation, at least read through some of the initial Demo you have written before looking at other materials.

For Vue, the official document content is quite complete, and the whole family bucket is also official, so there is no headache technology stack selection.

Vue recommends learning paths

At present, 3.0 ecosystem is not perfect, and it is necessary to be familiar with the writing method of 2.0 in the company. Therefore, it is recommended that beginners learn 2.0 content first.

  • Novice orientation: Vue 2.0’s suggested learning sequence, especially the learning path written by Yuxi, is still out of date today

Vue recommends learning materials

  • awesome-vue
  • Vue-patterns, useful VUE patterns, tips, tips, and a selection of helpful links

Vue principle

  • Vue-analysis, produced by Miss Huang
  • Vue-design, official staff produced, the domain name has expired, you need to browse the content in the warehouse. It’s a bit of trouble, but the quality is absolutely fine

The browser

When it comes to browsers, it’s usually Chrome. Browser as the front-end indispensable carrier, we are bound to need to learn and master its related knowledge.

In addition, the browser involves a lot of knowledge, and JS execution mechanism, network, performance optimization, security and other fields are associated, so we need to learn this part of the content of the previous knowledge to link up.

architecture

  • Inside Look at Modern Web Browser, this is a series of Google columns, a total of four articles, content on the overall architecture of the browser, down to the page rendering rules are explained again, and there is a Chinese translation

The whole process

  • How browsers work: Behind the Scenes of the new Web browser. It’s an 11-year-old article, but it’s still out of date and widely circulated
  • What happened when…? , classic interview questions, the passage for the process of the relevant content as specific as possible, do not omit any details
  • What happens from the time you enter the URL until the page loads? , this article involves a lot of network and hardware knowledge

Render related

  • If “How browsers work: Behind the Scenes of the New Web Browser” is too long to read or you don’t understand anything, read this article to at least learn something you can use at work
  • Reflow & Repaint for browsers

JS execution mechanism

  • From the browser multi-process to JS single thread, JS running mechanism of the most comprehensive comb, super long, this article can let you on the process thread, browser multi-process, browser kernel multi-threading, JS single thread, JS running mechanism has a good understanding

The cache

  • The document
  • Thoroughly understand the browser caching mechanism, which is closely related to performance optimization

Devtools

  • Chrome DevTools, Google’s manual for DevTools, has a detailed description of how to use each feature
  • Chrome_Devtools_Tricks, introduces the use of Chrome DevTools tips, from different situations to explain how to use Chrome DevTools tips, suitable for readers who are not good at English reading

Browser security

  • The document
  • Article read Web security, a simple introduction to some front-end security knowledge to pay attention to
  • Book-of-secret-knowledge, if you’re interested in security, you can read about this repository

Performance optimization

Performance optimization is a systematic engineering that involves many aspects, not just static file and code optimization.

When you learn this part, you can learn about specific performance optimization methods and specific methods from the recommended articles, and then experiment according to these contents.

Recommended books

In fact, there are not many books related to performance optimization on the market, and the best ones are old books from several years ago, so it doesn’t matter whether you read them or not.

  • The Definitive Guide to Web Performance, 8.9 points on douban, old book
  • Advanced Guide to high performance website construction, 8.9 points on douban, old book

Recommendation site

  • Web. dev, Google’s own blog, where you can learn a lot about performance optimization and how to do a good user experience. In fact, many articles on the market have the shadow of this website

Overall optimization suggestions

  • 24 suggestions for front-end Performance Optimization (2020), similar to the modern Yahoo catch-22
  • Front-end performance optimization tour, a systematic introduction to the means of performance optimization, the reference is also worth learning
  • Front-end Performance Checklist 2021, a popular free PDF, contains many Performance optimization related checklists
  • The React performance optimization | including principle, technique, Demo, tools to use

Performance indicators

  • The document
  • Still reading those old performance tuning articles? With these latest performance metrics in mind, this article introduces seven user experience metrics (or performance metrics) that Google advocates.
  • What metrics do we focus on when doing performance tuning?

Performance monitoring

  • Front-end engineering: from zero to build performance testing library “source code + video”, the means of performance optimization is not enough, how to reflect the value of optimization is also crucial

TypeScript

TypeScript is designed to develop large applications, and TypeScript can be translated into JavaScript. Since TypeScript is a strict superset of JavaScript, any existing JavaScript program is a legitimate TypeScript program.

The document

  • TypeScript official documentation

Recommend the article

  • TypeScript tutorial
  • The flip side of TypeScript: type programming
  • TypeScript Deep Dive is available in Chinese

Recommending Open Source projects

  • Typescript-for-programmers need to bring their own ladders
  • type-challenges
  • TypeScript exercises

Electron

Electron is a framework for creating cross-platform native desktop applications using Web technologies such as JavaScript, HTML, and CSS. With Electron, we can use pure JavaScript to call the rich native APIs.

The document

  • The Electron’s official website
  • Electron Chinese Tutorial

Recommend the article

  • Share the six months ‘experience in Electron application development and optimization
  • Develop cross-platform desktop application with JS, from principle to practice
  • Building a desktop Application with Electron

Recommending Open Source projects

  • Electron resources
  • Electron Playground
  • electron-vue-cloud-music
  • electron-builder

Component library

Component library, as its name implies, is a repository that extracts and integrates multiple common modules or reusable components

Better-known component libraries:

  • antd
  • elementUI

Related documents:

  • lerna
  • Presents the commit specification
  • yarn
  • css variables

Recommended articles:

  • Build a complete front-end React component library from 0 to 1
  • How to standardize your Git Commit?
  • Monorepo workflow based on LERna and Yarn Workspace
  • The FusionNext has been upgraded from the Sass system to support Css Variable

Micro front-end

It is a kind of architecture similar to microservices. It applies the concept of microservices to the browser side, that is, the single-page front-end application is transformed from a single single application to a number of small front-end applications into one application.

Advantage:

  • The codebase is smaller, more cohesive and maintainable
  • Loosely coupled, autonomous teams are more scalable
  • It is possible to gradually upgrade, update, and even rewrite parts of the front-end functionality
  • Develop and deploy independently to narrow the scope of change, thereby reducing the associated risk

Framework:

  • single-spa
  • Ant – Universe
  • Tao – icestark
  • Byte – Garfish
  • Jingdong – micro – app
  • Bit
  • Emp-micro Frontends Solution is based on webpack 5 & Module Federation

Recommended articles:

  • From zero to one to achieve enterprise-level micro-front-end framework, nanny level teaching
  • How did Bytedance land on the micro front end
  • What Are Micro Frontends?
  • Bifrost micro-front-end framework and its practice in Meituan flash purchase
  • Daily Youxian supply chain front end team micro front end transformation
  • Micro front end in meituan takeout practice
  • How We Build Micro Frontends
  • Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit

Recommended learning materials

  • Microfrontend – Resources, 🔥 Recommended information about microfrontend

Across the side frame

The most important meaning of cross-terminal is a set of code to run multi-terminal, reduce duplication of work

At present, the popular frameworks in China are small program, H5 and App, among which UniAPP and Taro are the two most outstanding frameworks. Of course, before Taro3.0, taro and UniApp used compile time to do more, compiling into code that small programs could run.

After Taro3.0 it became the same idea as Remax, doing more at run time and ensuring that the original framework code was fully usable without needing to be compatible in order to convert to other applets.

  • awesome-remax
  • React cross-terminal
  • Jingdong taro

monitoring

When the service becomes stable, the most important thing to do is to monitor all kinds of performance, anomalies, and routine services on the service line to avoid becoming blind after the service is online.

At present, the market is more famous monitoring system:

  • sentry
  • ali node
  • bugly
  • mixpanel
  • Listen to the cloud

Recommended open source libraries:

  • Rrweb, which provides pixel-level recording and playback to help locate exactly how a problem occurred
  • Monitor, 👀 a lightweight SDK that collects page click behaviors, route redirects, interface errors, code errors, and reports to the server
  • mitojsThe abovemonitorA newly maintained library by the author. New plug-and-plug monitoring SDK, clearer code architecture, richer configuration items, highly customizable

Recommended articles:

  • Meituan visualization buried spot scheme
  • How do I monitor Web performance?
  • How does Ant Financial monitor the front-end performance to the extreme?
  • How to monitor front-end exceptions?
  • Front-end monitoring platform series: JS SDK (open source)

Daily charge

  • Best-websites-a- Programmer -should-visit, a website that any good engineer should read

CSS Daily Charging

  • You-need-to-know-css
  • CSS Inspiration
  • CSS Tricks
  • Spinkit must provide its own ladder
  • animista

Github Excellent learning Materials

JS excellent learning materials

  • 33-js-concepts
  • JavaScript Security Guide
  • What the f*ck JavaScript? , a list of interesting JavaScript examples with explanations
  • Clean-code-javascript, elegant code advice for javascript

React Excellent learning materials

  • Not too much was done by react codes

Code style and security

  • Secguide, a code security guide for developers

Productivity tool

The flow chart

  • whimsical

The last

In fact, the content can only be counted as the first edition, not perfect, welcome everyone to contribute content, here is the link of the warehouse