This paper is a summary of the author’s Web front-end reading resources. The following labels are classified according to the recognition of individual reading:

  • optional: The content of this article is not universal. Reading this article may broaden your knowledge
  • recommended: The content of this article is general, but not necessarily practical. Reading this article may help you gain the necessary knowledge
  • required: The content is universal and practical, and reading this article may give you the necessary skills to improve
  • The advanced: The content of the article has a certain depth, reading this article requires solid basic knowledge

Tips: the tags listed in this article may not be accurate, for example, the tags given by the author have a BUFF bonus ~

An overview of

In fact, sorting out favorites is also a process of self-summary. Here we update the technical structure chart after the 2019 front-end annual summary:

Tips: The image is large and may be slow to load.

The author article

  • The advanced Vue CLI 3 UI design in combination with Lerna
  • The advanced Based on Vue to achieve a simple MVVM
  • The advanced Introduction to V8 Compilation
  • required Interview sharing: two years of work experience successful interview Ali P6 summary
  • required How did I become an interviewer at Ali
  • required Interview tips
  • required Interview tips
  • required Configure TypeScript projects from scratch
  • recommended Git commit specification
  • recommended Publish using NPM and use CLI tools
  • recommended 2019 Front-end Annual Review
  • recommended Do you really understand $nextTick
  • optional Discussion on the selection of technical scheme based on Express application framework
  • optional Simple JavaScript
  • optional Summary of mixed desktop development
  • optional Share writing skills of technical articles
  • optional Analysis of the problem of Polyfill generation in Vue CLI 3 library construction
  • optional Vue CLI 3 Caches old Vue components (Npm packages)

The interview

  • required Interview sharing: two years of work experience successful interview Ali P6 summary
  • required How did I become an interviewer at Ali
  • required Interview tips
  • required Interview tips
  • required Interview sharing: two years of work experience successful interview Ali P6 summary
  • required How I became an interviewer at Alibaba
  • required Q: If you can understand 80%, please send me your resume
  • required 2018 front end of the interview summary, finish see understand, pay less said plus 3 k | the nuggets technical essay
  • required 2019 Interview Series – Resume
  • required JavaScript – interview
  • required The basic version of the Interview
  • required Jsliang’s 2019 interview preparation
  • required Summarize the interview experience of 100 front-end interviews from the beginning of 2017 to the beginning of 2018 (with answers)
  • required Interview – Web HTTP
  • required Middle and senior front-end factory interview secrets, escort for you gold, silver and four, direct to dacheng (1)
  • required (Part 2) in the advanced front factory interview secrets, winter for your escort, direct factory
  • required Here’s everything you need for a React interview
  • required The big reveal! The Ali side of “scary.” What exactly am I asking
  • required Here are all the Vue interview questions you need.
  • required Interviewer: Have you built your own VUE development environment?
  • required The way to advance the front end[Ebook]
  • optional JS event loop and Macro Micro task queue
  • optional High frequency interview questions for middle and advanced front-end development
  • optional Ali front-end recruitment interview summary
  • optional The front inside
  • optional Ali front-end recruitment interview summary

Awesome

  • recommended awesome-vue
  • recommended awesome-react
  • recommended awesome-javascript
  • recommended awesome-nodejs
  • recommended awesome-css
  • optional awesome
  • optional awesome-awesome​
  • optional awesome-awesome-awesome
  • optional Front-End-Develop-Guide(Mainstream learning resources for languages used in front-end development)
  • optional knowledge(Front-end technology architecture Map)
  • optional awesome-javascript-cn(英 文版)
  • optional awesome-wechat-weapp- summary of wechat applets development resources
  • optional awesome-graphql
  • optional Awesome Redux
  • optional awesome-github-vue
  • optional awesome-github-wechat-weapp(summary of wechat small program open source project library)
  • optional awesome-nuxt
  • optional awesome-nextjs
  • optional awesome-ui-component-library
  • optional awesome-react-components
  • optional awesome-mac
  • optional awesome-vscode
  • optional Awesome-Design-Tools
  • optional awesome-webpack
  • optional awesome-gulp
  • optional awesome-github
  • optional awesome-npm
  • optional awesome-chrome-devtools
  • optional Font Awesome
  • optional awesome-resume(Programmer resume)
  • optional awesome-interview-questions
  • optional awesome-webpack-cn(Webpack excellent Chinese articles)
  • optional awesome-architecture(Architect Technical Map)
  • optional awesome-books(Recommended reading by developers)
  • optional awesome-programming-books(Recommended by classic technical books)
  • optional awesome-bookmarks
  • optional A front-end learning guide for clients
  • optional These years nuggets on the quality of the front end of the article, a classic, a pack away!
  • optional The nuggets | nuggets article ranking top 5000 leaders look here
  • optional Surface by the collection | don’t have to worry about the interview can dig friends melancholy, a batch of fresh ~ big interview experience
  • recommended NodeJS development tool stack(Development toolbox)

TypeScript

  • recommended TypeScript[documents]
  • recommended Understand TypeScript in depth[Ebook]
  • recommended TypeScript advanced techniques
  • recommended TypeScript Deep Dive[Ebook]
  • optional TypeScript tutorial[Ebook]
  • optional 3 Ways to Implement TypeScript Into Your Project
  • optional TypeScript thisThe ginseng
  • optional Is there a compiler for Typescript that makes iT a statically compiled language entirely?
  • optional TS FAQ sorting (more than 60, continuously updated ing)
  • optional Decorate your code with TypeScript decorators

JavaScript

  • requiredECMAScript introduction to 6[Ebook]
  • required ES modules: A cartoon deep-dive(Chinese translation)
  • required Tasks, microtasks, queues and schedules(Macro task, micro task, queue)
  • recommended lodash[文档] A modern JavaScript utility library delivering modularity, performance & extras
  • optional JavaScript and finite state machines(Ruan Yifeng)
  • optional ES Modules && CommonJS specification for modular specifications
  • optional What’s the difference between CommonJS and ES6 Modules?
  • optional CommonJS and ES6 Module Module specification principle analysis
  • optional Chinese translation of the ECMAScript specification[documents]
  • optional Front-end basic Hitchhiker’s Guide[Ebook]
  • optional Front End Engineer Manual[Ebook]
  • optional JS memory model
  • optional 1 NPM wheel learning lRU-cache per week
  • optional codemirror[library]
  • optional debug[library]
  • optional perfect-scrollbar[library]
  • optional superagent[library]
  • optional jQuery[documents]
  • optional zTree[jQuery Tree Plugin]
  • optional SuperAgent Chinese usage document
  • optional InversifyJS Chinese document[documents]
  • optionalRxJS Chinese[documents]
  • optional RxJS[documents]
  • optional Redux-observable[documents]
  • optional Story – Chinese observables[documents]
  • optional Use redux-Observable to implement component autonomy
  • optional Combine RxJS with Redux (1) : Make your own Redux-Observable
  • optional Learning RxJS[Ebook]
  • optional moroshko/rxviz: Rx Visualizer – Animated playground for Rx Observables(Rx visualization tool)
  • optional RxViz – Animated playground for Rx Observables(Rx visualization tool)
  • optional jaredly/rxvision: visualizer debugger for reactive streams(Rx visualization tool)
  • optional staltz/rxmarbles: Interactive diagrams of Rx ObservablesDiagram of (Rx)
  • optional RxMarbles: Interactive diagrams of Rx ObservablesDiagram of (Rx)
  • optional Fisherman and Rxjs story, this time must teach you front-end will Rxjs
  • optional Watch animation and learn RxJS
  • optional RxJS in Action [book]
  • optional Rxjs-cn /rxjs-articles- Translation: RxJS quality translation of articles
  • optional RxJS V6 study Guide
  • optional RxJS learning Chinese materials
  • optional Fully embrace Reactivity: RxJS, RSocket & Svelte
  • optional As a front-end, you need to know about RxJS
  • optional Canvas practice example 2 – sector
  • optional Asynchronous programming in JavaScript
  • optional JavaScript asynchronous programming _ front-end learning
  • optional JavaScript knowledge graph: ECMAScript, DOM, BOM, HTML5, computer network[Ebook]
  • optional From browser multi process to JS single thread, JS running mechanism is the most comprehensive combing(Fully understand JS single thread)
  • optional How to implement a deep copy
  • optional Object()
  • optional Promise is a Promise you can understand
  • optional An in-depth understanding of JavaScript type conversions
  • optionalDo you really understand variables and types
  • optional Remember an interview question, regular expressions (? What does =a) mean?
  • optionalJS mini book type conversion unpacking operation
  • optional7 useful JavaScript tips for Reading in Three Minutes
  • optional How do I write elegant business code
  • optional JS null and undefined; undefined; void 0
  • optional Async /await elegant error handling
  • optional Simplicity of JavaScript code
  • optional Moment.js is a date-handling library

HTML

  • recommended Web Components
  • optional What is a browser sandbox
  • optional Browser sandbox model
  • optional Tutorial for getting started with Web Components(Ruan Yifeng)
  • optional Do you really understand reflux and redraw
  • optional Reflow & Repaint for browsers

CSS

  • recommended BEM[documentation] (Class naming convention)
  • recommended CSS[文档] (MDN web docs)
  • recommended Flex Layout Tutorial(Ruan Yifeng)
  • recommended Less Chinese[documents]
  • recommended Sass[documents]
  • recommended PostCSS[documents]
  • optional SASS Usage Guide(Ruan Yifeng)
  • optional Introduction to CSS in JS(Ruan Yifeng)
  • optional FLEXBOX FROGGY(Learn Flex games)
  • optional CSSOM View Module(Zhang Xinxu)
  • optional CSS relative positioning | z – the index of absolute positioning (5)(Zhang Xinxu)
  • optional Familiar with the getComputedStyle method for obtaining element CSS values- Zhang Xinxu
  • optional My understanding of CSS vertical-align- Zhang Xinxu
  • optional CSS single-line, multi-line text overflow display ellipsis
  • optional I know several kinds of display:table-cell application(Zhang Xinxu)
  • optional These CSS naming conventions will save you a lot of debugging time
  • optional High score column layout summary
  • optional CSS writing recommendations and performance optimization summary
  • optional Location attributes of the CSS
  • optional The current state of Web streaming text typesetting
  • optional Really understand @font face rules in CSS3 context(Zhang Xinxu)
  • optional Introduction to Web fonts: TTF, OTF, WOFF, EOT & SVG

React

  • recommended React[documents]
  • recommended Create React App[documents]
  • recommended React Router[documents]
  • recommended Redux[documents]
  • recommended Redux Toolkit[documents]
  • recommended React Lifecycle​
  • recommended The React principle of Hooks
  • optional How to fetch data with React Hooks?
  • optional React Hooks Complete tutorial
  • optional React performance optimizations (1) When PureComponent encounters ImmutableJS
  • optional React source code[Ebook]
  • optional React source code series (1): A review of the source code and method feelings #1
  • optional React-redux: react-redux: react-redux
  • optional Redux Toolkit[documents]
  • optional reduxjs/cra-template-redux: The official Redux+JS template for Create React App[library]
  • optional redux-toolkit-example-ts(Sample code)
  • optional How to manage a 100,000-line front-end single-page application
  • optionalReact performance optimizations (1) When PureComponent encounters ImmutableJS
  • optional React-redux: react-redux: react-redux
  • optional The Immutable operation practice in React
  • optional Redux Tutorial part 1: Basic Usage(Ruan Yifeng)
  • optional Redux Tutorial ii: Middleware and Asynchronous Operations(Ruan Yifeng)
  • optional Redux tutorial (3) : React-redux(Ruan Yifeng)
  • optional How to fetch data with React Hooks?
  • optional The React Library you should know about in 2020
  • optional How slow are React Hooks?
  • optional React Hooks: ！！！！！
  • optional Some Comparisons and Personal Reflections on Vue and React (middle)
  • optional React development tips: 34 Things to Know
  • optional Reimplement React-redux using 70 lines of code with hooks
  • optional Create a simple version of Redux using React Hooks + Context
  • optional In 2019, we’ve compiled N practical cases to help you quickly migrate to React Hooks
  • optional React Hooks 【 nearly 1W words 】+ project combat
  • optional React16: Hooks overview, embrace functions (this is probably the most complete React Hooks)
  • optional The React hooks practice
  • optional Learn React Hooks in 30 minutes
  • optional Redux-thunk Quick start
  • optional The Immutable operation practice in React
  • optional Use redux-Observable to implement component autonomy
  • optional React Picks: My favorites from 10 popular CSS solutions
  • optional React Pickups: My favorite 10 popular CSS solutions (part 1)
  • optional React Router 4
  • optional React Route authentication
  • optional React-router4 route splitting and on-demand loading based on react-router-config
  • optional Build your Github Pages Personal blog quickly — a one-page practice based on create-React-App
  • optional Quickly build create-React-app scaffolding from 0 to 1
  • optionalReact SSR server rendering and isomorphism
  • optional New 2019 React Bucket
  • optional React Component Design Practice Summary 02 – Component organization
  • optional React Component Design Practice 01 – Type Checking
  • optional 2019 React Redux Complete Guide
  • optional The dirtiest react16. x video tutorial (25,000 words)

Vue

  • recommended Vue. Js 3 Chinese[documents]
  • recommended Vuex[documents]
  • recommended Vue Router[documents]
  • recommended Vue CLI [documents]
  • recommended Vue Loader[documents]
  • recommended Vue.js [documents]
  • recommended Vue plug-in development guide[documents]
  • recommended eslint-plugin-vue[documents]
  • recommended VuePressVue driven Static web site generator
  • optional Analyze the internal operation mechanism of vue.js[Ebook]
  • optional DMQ/MVVM(Analysis of Vue implementation principle, how to achieve bidirectional binding MVVM)
  • optional In-depth analysis: How to implement a Virtual DOM algorithm
  • optional Vue. Js technology revealed[Ebook]
  • optional Vue SSR guide[documents]
  • optional Nuxt[文档] (Vue. Js server render)
  • optional Vue ApolloIntegrate GraphQL with vue.js application
  • optional Vue I18n[Documentation] (Internationalization plug-in)
  • optional Vue Test Utils[文档] (Vue. Js official unit testing utility library)
  • optional vue-cli-plugin-i18n[library]
  • optional nuxt-property-decorator[library]
  • optional Why can Proxy optimize vUE’s data listening mechanism
  • optional How does vue.js’ computed and Watch work?
  • optional In-depth understanding of Vue’s watch implementation principle and implementation method
  • optional New vue + typescript projects start(Vue 2.x version)
  • optional Vue + typescript advanced(Vue 2.x version)
  • optional Meituan comments on ordering nuxT.js combat(Vue 2.x version)
  • optional Talk about using Vue to build front-end 10W + code amount of single page application development bottom layer(Vue 2.x version)
  • optional The Road to Discovery for Vue2.0 – Some understanding of the lifecycle and hook functions(Vue 2.x version)
  • optional Vue-cli3 project from build optimization to Docker deployment(Vue 2.x version)
  • optional I did not understand the confusion in the development process of VUE project until I resigned(Vue 2.x version)
  • optional Vuex brings a new programming experience(Vue 2.x version)
  • optional Vue-cli3 from construction to optimization(Vue 2.x version)
  • optional Boy, do you wank the cat(Vue 2.x version)
  • optional Combine vuE-CLI to talk about webpack packaging optimization(Vue 2.x version)

HTTP

  • optional Computer knowledge[Ebook]
  • optional Cross-domain resource sharing (CORS(Ruan Yifeng)
  • optional Browser cache knowledge summary and application
  • optional The difference between GET and POST methods
  • optional Graphic: HTTP range request, assist breakpoint continuation, multithreaded download core principle
  • optional Resource preloading – Performance optimization needs to know ~
  • optional Preload page resources with preload
  • optional Preload and prefetch
  • optional Cookie
  • optional Know the IP address thoroughly, distinguishing localhost, 127.0.0.1, and 0.0.0.0
  • optional The front end is organized across domains

Git

  • recommended Git tutorial(Liao Xuefeng)
  • recommended Your AI pair programmer​
  • recommended How does Git modify a commit
  • recommended commit_msg(Git hook documentation)
  • recommended Semantic version 2.0.0(Semantic version control specification)
  • optional Git SubModule Usage Guide
  • optional Git reverses the commit and saves the previous changes
  • optional .gitignore invalid solution
  • optional Git hooks: Customize your workflow
  • optional Git branch – Rebase
  • optional cz-cli(cz)
  • optional cz-customizable(CZ adapter)
  • optional @commitlint/config-conventional(CZ adapter)
  • optional commitlint(CZ calibration tool)
  • optional commitlint-config-cz(Verification rules for the CZ verification tool)
  • optional validate-commit-msg(CZ calibration tool)
  • optional conventional-changelog(CZ Log Generator)
  • optional How to make your GitHub project look professional
  • optional Git-flow workflow
  • optional How do I use Issue management software projects?(Ruan Yifeng)
  • optional Git Workflow(Ruan Yifeng)
  • optional Create an efficient Git workflow for the wireless front-end team

Node.js

  • recommended Node.js[documents]
  • recommended ts-node[library]
  • recommended NodeJS development tool stack[Awesome] (Development Kit)
  • recommended awesome-nodejs [Awesome]
  • optional mongoose[documents]
  • optional Mongoose Chinese[documents]
  • optional ORM example tutorial
  • optional TypeORM[library]
  • optional TypeORM Chinese[documents]
  • optional linkerd2[documents]
  • optional Express[documents]
  • optional Koa[documents]
  • optional Egg[documents]
  • optional Socket.io[documents]
  • optional Node Redis[documents]
  • optional Midway[documents]
  • optional GraphQL[documents]
  • optional Prisma OSS Documentation[documents]
  • optional Apollo Client[documents]
  • optional Ali Midway officially released Serverless V1.0, 50% improvement in R&D efficiency
  • optional A brief analysis of node.js VM module and running distrust code
  • optional node-inspectorNode.js debugger based on Blink Developer Tools
  • optional Learn more about processes and threads in Node.js
  • optional execa[library]
  • optional parse-json[library]
  • optional gitbeaker[library]
  • optional node-fetch[library]
  • optional node-inspector[library]
  • optional Forcing Garbage Collection in node.js and JavaScript(Mandatory garbage collection)
  • optional Mongoose the Typescript way… ?
  • optional Mongoose Population with table/associated use
  • optional Node.js environment performance monitoring
  • optional Develop Node.js in TypeScript
  • optional Understand GraphQL core concepts in 30 minutes
  • optional Open Sourcing GraphQL Middleware – A Library to Simplify Your Resolvers
  • optional RPC vs REST vs GraphQL
  • optional GraphQL from start to action
  • optional Teach you how to make a reptile
  • optional For crawlers, seal the keyboard
  • optional PHP, Python, node.js which is better for writing crawlers?
  • optional Simple and efficient NodeJS crawler model

CI/CD

  • recommended How do you develop and deploy front-end code in large companies?(Zhang Yunlong)
  • optional GitHub Actions[documents]
  • optional GitHub Actions tutorial(Ruan Yifeng)
  • optional pm2 (The Most Advanced Production Process Manager for Node.js)
  • optional What are GitHub’s new Actions? Use him for automated tests?
  • optional Jenkins
  • optional How does Jenkins trigger remote builds
  • optional Jenkins build trigger details – Do not log in trigger remote build details
  • optional Jenkins note 2: Remote build
  • optional Jenkins+Node.js continuous integration
  • optional nginx[documents]
  • optional Nginx development from beginner to master[Ebook]
  • optional Nginx: How to Get started with Nginx
  • optional Essential Nginx knowledge for front-end developers
  • optional How to deploy front-end applications using Docker
  • optional How does front-end development make continuous integration/continuous deployment (CI/CD) work
  • optional Build docker+ Jenkins + Node.js automatic deployment environment from zero
  • optional Build docker+ Jenkins + Node.js automatic deployment environment from zero

Font

  • optional Font Awesome
  • optional Font Awesome
  • optional Free Icons
  • optional Simple SVG

test

  • recommended Jest[documents]
  • recommended javascript-testing-best-practices
  • recommended JavaScript program testing(Ruan Yifeng)
  • optional Nightwatch.js[documents]
  • optional Mocha[documents]
  • optional Chai[documents]
  • optional Karma[documents]
  • optional awesome-jest [Awesome]
  • optional Test Driven Development (TDD) Summary – Principles
  • optional Front-end testing framework Jest
  • optional New to front-end testing? Start at the top of the pyramid!
  • optional ui-testing-best-practices
  • optional Test framework Mocha example tutorial(Ruan Yifeng)
  • optional What exactly is the use of testing coverage?

Chrome DevTools

  • recommended Chrome DevTools Protocol[documents]
  • recommended Chrome DevTools Frontend[Ebook]
  • optional Chrome DevTools Chinese manual[Ebook]
  • optional Chrome Development Tool Guide[Ebook]
  • optional Chrome Developer Tools Chinese manual
  • optionalNode Debugging Guide – Inspector Protocol
  • optional chii(Remote debugging tool)
  • optional devtool
  • optional Debug Node.js in Chrome Developer Tools
  • optional Understand the Inspector of Node.js
  • optional devtools-protocol[library]
  • optional chrome-remote-interface[library]
  • optional awesome-chrome-devtools [Awesome]
  • optional devtools-frontend[library]
  • optional Reveal remote browser debugging techniques

Service Worker

  • optional Service Worker from entry to exit
  • optional Offline practice of homogeneous project Service Worker
  • optional Build a completely offline website with PWA

extension

  • recommended What is microkernel architecture design?
  • recommended Plug-in development guide | Vue CLI[documents]
  • optional Chrome Extension official[documents]
  • optional How to build a plugin system on the web and also sleep well at night
  • optional Exploration of plug-in architecture for large Web applications

Component library

  • recommended Ant Design[documents]
  • recommended Element PlusVue 3 component library for designers and developers
  • recommended ElementEle. me desktop component library based on Vue2.0
  • recommended Ant Design Vue[documents]
  • recommended Ant Design Pro[Documentation] (Out-of-the-box mid-platform front-end/design solution)
  • recommended Antd ProComponents[documents]
  • optional Salt UI[Document] (Efficient and concise mobile UI component library)
  • optional Ant Design Mobile 5.0[documents]
  • optional ant-design-pro-vue[Documentation] (Out-of-the-box mid-platform front-end/design solution)
  • optional vue-antd-admin[Library] (an out-of-the-box mid-back end/design solution)
  • optional Fusion[documents]
  • optional Muse-UIVue 2.0 elegant Material Design UI component library
  • optional Vue Material[documents]
  • optional Bootstrap[documents]
  • optional Bootstrap Table[documents]
  • optional Bulma[documents]

Performance optimization

  • optional Compression 11000 keys reduce 7.2m, how to achieve i18N front-end volume optimization
  • optional The front-end technology that will blow the boss away
  • optional An incomplete guide to front-end optimization

engineering

  • recommended Git in Chinese[documents]
  • recommended Webpack Chinese[documents]
  • recommended Gulp in Chinese[documents]
  • recommended NPM Chinese[documents]
  • recommended Yarn in Chinese[documents]
  • recommended Lerna Chinese[documents]
  • recommended Lerna document[Ebook]
  • recommended Babel[documents]
  • recommended Flyice – React based development solution[documents]
  • recommended ESLint(Assembles JavaScript and JSX inspection tools)
  • recommended Prettier (An opinionated code formatter)
  • optional Easy to understand Webpack[Ebook]
  • optional webpack-chain[Library] (Chained SET of apis that generate and modify Webpack configuration information)
  • optional CKEditor 4 (Smart WYSIWYG HTML editor)
  • optional 75 Best Node.js Command Line Apps & Utilities | FireBear [Awesome]
  • optional Node.js CLI modules
  • optional Getting started with Webpack is enough
  • optional Webpack starter refers to fans
  • optional Code Splitting for Webpack(Reduce packing volume)
  • optional Completely solve Webpack packaging performance problems
  • optional Let your Webpack take off – Koala members backstage Webpack optimization practice
  • optional Import, require, export, module.exports
  • optional Front-end build tips
  • optional Combine vuE-CLI to talk about webpack packaging optimization
  • optional Summary of htMl-webpack-plugin usage
  • optional Unlock the Webpack series in depth
  • optional Play with Webpack and increase your packing speed by 90%
  • optional After reading this article, the interview is no longer afraid of being asked about Webpack hot updates
  • optional Introduction to webpack4
  • optional @vue/babel-preset-app(Babel plugin for Vue CLI3)
  • optional @babel/preset-env(Babel plug-in set)
  • optional Do you really know how to use Babel?(Learn more about Babel.)
  • optional Goodbye, Babel – preset – 2015
  • optional Deploying ES2015+ Code in Production Today
  • optional​Babel, I’m sending you a mask
  • optional Build your own scaffolding from 0 /CLI Knowledge system (10,000 words)
  • optional Front-end engineering practice – enterprise level CLI development
  • optional Front-end engineering – configurable template management
  • optional Full guide to the development of front-end scaffolding drainage pit [front-end efficiency must be dry goods]
  • optional Node.js+commander develop command line tools
  • optional Node.js command-line program development tutorial(Ruan Yifeng)
  • optional This is seen the best vuE-CLI source code analysis, absolutely benefit
  • optional Vue ClI source exploration | Vue Learn to Share[Ebook]
  • optional A rollup. Js in Chinese[documents]
  • optional gulp-typescript[library]
  • optional All the NPM knowledge you need is here
  • optional How do NPM publish specific folders as package roots
  • optional Why your company shouldn’t use Git submodules
  • optional Discussion on ES module and Webpack Tree-shaking
  • optional Tree-shaking the road to advancement
  • optional Tree-Shaking Performance Optimization Practices – Principles
  • optional Tree Shaking: From Principle to implementation
  • optional Your tree-shaking is not good for eggs
  • optional Talk about the Module field in package.json
  • optional Research and exploration of thermal overload principle
  • optional The Secret of Flutter Hot Reload
  • optional How does the Hot Reload of Flutter work
  • optional After reading this article, the interview is no longer afraid of being asked about Webpack hot updates
  • optional Webpack plugin (1) — webpack-dev-server
  • optional Break the casserole: Sourcemap in Webpack
  • optional Json you don’t know the browser, Module, and main fields priority
  • optional Introduction and brief analysis of peerDependencies
  • optional Prettier just read this one
  • optional Module Federation
  • optional Module debugging tips you didn’t know – NPM Link
  • optional Everything you want to know about package-lock.json
  • optional Beautify Vue code with ESLint & Prettier
  • optional Configuration options for esLint prettier
  • optional Prettier introduction and basic usage of Prettier
  • optional The economics of NPM – First half
  • optional Front-end engineering (5) : All the NPM knowledge you need is here
  • optional Workspaces in Yarn
  • optional Why you should use a single repository for all your company’s projects(Multi-project single warehouse thinking)
  • optional Open Sourcing CloudFlare’s UI Framework(Use Lerna open source UI framework design)
  • optional Monorepo new wave | introduce lerna(Lerna introduction)
  • optional Why is Babel a monorepo?
  • optional Lerna best practices for managing front-end Packages

Monitoring & Stability

  • optional Build front-end performance monitoring system in 7 days
  • optional Do the best front-end monitoring
  • optional Panoramic reduction error application | real-time monitoring very different online user behavior back function
  • optional The “front-end + application” two monitoring tools, the first commercial ARMS, led the APM market
  • optional Monitoring through buried pages without affecting performance? Decrypt the technical insider of ARMS front-end monitoring data reporting
  • optional UEM probe technology and user experience management
  • optional Good front-end quality assurance system
  • optional Front-end code quality – Cyclomatic complexity principles and practices
  • optional Want to enter big factory? Front-end grayscale release must be known
  • optional The stability guarantee of small program from the front programmer’s perspective

The client

  • recommended Because Chinese website
  • optional Flutter of actual combat[Ebook]
  • optional Analysis of cross-platform framework access of domestic large manufacturers in mobile terminal
  • optional Is the flutter cold?
  • optional Breaking barriers, How does Flutter and the Web ecosystem connect?
  • optional Introduce Chromium, CEF, Webkit, JavaScriptCore, V8, Blink
  • optional Start by developing PC clients with AngularJS
  • optional Internet: Desktop client framework technology selection
  • optional Ramble on the UI framework for Windows desktop clients
  • optional Little white must see, JSBridge preliminary study
  • optional Share the six months ‘experience in Electron application development and optimization
  • optional Electron goes from zero to one
  • optional A brief discussion on the advantages and disadvantages of Native, Web App, Hybrid, RN and Weex
  • optional Develop cross-platform desktop application with JS, from principle to practice
  • optional Hybrid APP architecture design idea
  • optional Front-end construction desktop-level application (QQ Music)
  • optional Hybrid Development: JsBridge – Bridge between Web and client
  • optional JSBridge of actual combat
  • optional High concurrency IM system architecture optimization practice
  • optional A front-end learning guide for clients
  • optional 20 million daily orders behind: Meituan takeout client high availability construction system
  • optional Js at your fingertips – Multi-touch Web Front-end Development # 3: Handling complex gestures
  • optional H5 keyboard compatibility summary
  • optional Learn Android WebView again
  • optional Web mobile layout stuff
  • optional Mobile layout ADAPTS
  • optional Here’s what you need to know about mobile adaptation

Micro front-end

  • recommended Core values of the micro front end
  • recommended Thinking in Microfrontend
  • recommended Micro Frontends
  • recommended qiankun[documents]
  • recommended single-spa[documents]
  • optional Probably the most complete microfront-end solution you’ve ever seen
  • optional Explore the scene limits of the microfront end
  • optional Micro front end introduction
  • optional What is a microfront end
  • optional Micro front end

Small program

  • optional Minifish

Rust

  • recommended Rust [documents]
  • recommended The Rust community’s crate registry
  • recommended Rust Programming Language (Simplified Chinese)
  • recommended Rust by Example
  • recommended Command line apps in Rust
  • optional rustfmt[library]
  • optional Rust Blog
  • optional This Week in Rust

visualization

  • optional OpenLayers[documents]
  • optional OpenLayers 3 Primer[ebook] (Introduction to OpenLayers 3)
  • optional Appearance level is justice! These libraries change the way you think about data interaction

Low code

  • optional The third make up | los dust – PC site building system – how to design the Schema
  • optional 3) | the early chat to build to build my harvest? (last)
  • optional 3) | the early chat to build to build my harvest? (the next)
  • optional React has no thresholds for drag-and-drop layouts and form designers
  • optional Format verification tool: Introduction to JSON Schema
  • optional JSON Schema and form validation
  • optional The JSON-Schema visual editor has been released

Style guide

  • recommended JSDoc Chinese[documents]
  • recommended TypeDoc[documents]
  • optional Google JavaScript Code Style Guide
  • optional Simplicity of JavaScript code
  • optional Front-end team code review CheckList

Programming guide

  • required Functional programming is north[Ebook]
  • recommended Scalable, homogeneous Javascript code
  • recommended Below the interface: Restore the true MV* mode
  • optional A probe into functional programming(Ruan Yifeng)
  • optional Functional programming introductory tutorial(Ruan Yifeng)
  • optional Pointfree programming Style Guide(Ruan Yifeng)
  • optional A primer on simple JavaScript functional programming
  • optional Functional programming smells good
  • optional This time, write an IoC container from scratch
  • optional IOC– What is IOC
  • optional Basic concepts of IoC and DI and introduction to InversifyJS
  • optional Java SPI mechanism in detail
  • optional InversifyJS[documents]
  • optional InversifyJS/ecosystem.md
  • optional How to implement inversion of control in TypeScript
  • optional Reflect Metadata
  • optional reflect-metadata[library]
  • optional Reflect
  • optional Decorators for ES6 classes
  • optional Programming Paradigm
  • optional What is the precise definition of programming paradigm?
  • optional Major programming examples
  • optional Programming paradigms for dummies: what every programmer should know | the morning paper
  • optionalGrand Unified Programming Theory based on mathematics: Pure function piped data Streams and principles-based warehouse/shop models
  • optional Programming paradigms — the ideas behind programming languages
  • optional Interface oriented Programming (1)
  • optional All those years of responsive programming we missed
  • optional Practice of responsive programming
  • optional What is Reactive Programming?
  • optional Functional programming – Implementing a responsive framework
  • optional What is responsive programming?
  • optional Reactive programming
  • optional What exactly is responsive programming?
  • optional An overview of responsive programming
  • optional Front-end architecture design for Model programming
  • optional Understanding JavaServer Pages Model 2 architecture
  • optional GUI Architectures
  • optional Javascript Design patterns series
  • optional What will replace JavaScript?

The solution

  • recommended Step into modern Web Development (Full text of GMTC 2021 lecture “Modern Web Development Practices of Bytedance”)
  • recommended Manga: What is Zhongtai?
  • recommended IaaS, PaaS, SaaS differences(Ruan Yifeng)
  • optional What is the Middle Platform and what are the problems to be solved?
  • optional MicroSoft Power Platform(Low code)
  • optional Practice of domain driven design in Internet business development
  • optional The DDD model has gone from esoteric to practical
  • optional Introduction to microservices Architecture
  • optional Introduction to Microservices
  • optional Build BFF using GraphQL under microservices
  • optional Big front-end architecture thinking and selection
  • optional How to design the database architecture of a highly concurrent system that supports millions of daily users? [Architectural Notes of Huperia]
  • optional Serverless brings new front-end technology changes
  • optional There are three service models for cloud computing: IaaS, PaaS and SaaS
  • optional “True ® Full Stack Road” Back-end guide to Web front-end development

Compiler dependence

  • recommended Front-end compilation principle and application scenarios (Babel, PostCSS) analysis
  • recommended ANTLR 4 Concise tutorial[Ebook]
  • optional ANTLR[documents]
  • optional MiniDecaf compilation experiment[Ebook]
  • optional antlr4[library]
  • optional grammars-v4[library]
  • optional antlr4ts[library]
  • optional riscv-pk[library]
  • optional minidecaf[library]
  • optional RISC-V GNU Compiler Toolchain[library]
  • optional homebrew-riscv[library]
  • optional ANTLR: Play parsing in the browser
  • optional In-depth understanding of RISC-V ISS Spike based simulation systems: Explore Spike, PK, and FESRV
  • optional Antlr4 profile
  • optional antlr4-demo
  • optional Antlr4 concise use tutorial
  • optional The Visitor pattern and its use in Java Parser
  • optional Antlr4 Easy and quick start
  • optional Write a calculator with ANTLR4 and a dozen lines of Python code
  • optional Antlr4 front-end application and practice
  • optional ANTLR: Play parsing in the browser

tool

  • recommended Google translate(Chrome plug-ins)
  • recommended Vue.js devtools(Chrome plug-ins)
  • optional Homebrew[documents]
  • optional sindresorhus/emoj: Find relevant emoji from text on the command-line[library]
  • optional uTools
  • optional WoX
  • optional Alfred
  • optional O’RLY Cover Generator(Book Cover Generator)
  • optional Octotree(Chrome plug-ins)
  • optional Ma Kefei like(Chrome plug-ins)
  • optional Can I use(Check browser compatibility)
  • optional ESLint(VS Code plug-in)
  • optional Prettier(VS Code plug-in)
  • optional Vuetur(VS Code plug-in)
  • optional Function image drawing tool
  • optional Desmos
  • optional coolors(Color matching design)
  • optional ohmyzsh
  • optional iterm2
  • optional dash
  • optional Worktile- Teamwork
  • optional The chart shows
  • optional Build a better Mac OS from the front end development perspective of the siege lion
  • optional Oh-my-zsh makes the terminal fly
  • optional Concise VIM training guide

algorithm

  • optional Introduction to Algorithms[Ebook]
  • optional Table of contents: algorithms and data structures[Ebook]
  • optional javascript-algorithms[library]
  • optional CLRS[library]
  • optional Introduction to MathJax and LaTex Formulas (reproduced)
  • optional MathJax basic tutorial and quick reference
  • optional Why is the base of the logarithm always 2 in the asymptotic complexity of the algorithm
  • optional How does the front end prepare data structures and algorithms?
  • optional LeetCode Walkthrough – First half of July 2019 (Walkthrough 55)

Little skill

  • recommended CMD command quick reference manual
  • optional MacOS /Linux environment variable Settings
  • optional 30 minutes introduction to Shell scripting
  • optional File system formats available in Disk Tools on the Mac(Whether file name case sensitive)
  • optional ESLint couldn’t determine the plugin uniquely.
  • optional In programming #! What does this meme mean?
  • optional 127.0.0.1 vs 0.0.0.0 vs localhost vs host IP address
  • optional SCP or SFTP: Which one?
  • optional Understand CRLF, LF
  • optional UML Modeling Sequence Diagram
  • optional Programmers must draw skills – sequence diagram
  • optional UML series
  • optional Windows install Charles and set up the HTTPS proxy

conclusion

  • recommended 2021 JavaScript Rising Stars(Including Github Star projects from 2016 to 2021)
  • recommended State of JS 2020
  • recommended State of JS 2021
  • optional After graduating in 2016, ER applied for a job in Ing in Hangzhou
  • optional The three years I did the front end of Taobao – the first year
  • optional I do the front end of Taobao in the three years – the second year
  • optional I do the front end of Taobao three years – the third year
  • optional Ali front end recruitment interview summary of a front end 2018 PubG story
  • optional Today’s chat: Why did you fail to get promoted
  • optional How to become an independent engineer in a company
  • optional What does a qualified programmer look like
  • optional 25 years old, graduation writing front-end these three years
  • optional The second gay | building hall main – how to push the front team infrastructure
  • optional Front-end API layer architecture, maybe you haven’t done enough
  • optional If I am the front-end Leader, talk about the construction of the front-end framework system
  • optional Praised best practices for open source projects
  • optional Technology stack: How is the technology stack on the front end planned and evolved
  • optional Didi post-market front-end technology system
  • optional Brief Introduction to front-end Architecture of Large Projects
  • optional Front-end production methods: Review of the past decade and outlook for the next decade
  • optional Review of the big events in 2019: The future is predictable
  • optional A set of more complete front-end technology selection, need to standardize what things, do you know?
  • optional Panoramic outlook of front-end technology
  • optional Overview of front-end technology system
  • optional Close reading “The Future of the Front End”
  • optional What are the opportunities for the front end in the future?
  • optional What technologies will determine the future of front-end developers?

V8 engine

Compilation principle

  • recommended V8: Connect Ignition to Turbofan [PPT]
  • recommended Ignition: Quick-start V8 interpreter [PPT]
  • recommended Ignition: V8 interpreter [PPT]
  • recommended Firing up the Ignition interpreter
  • recommended Understanding V8 ‘s the Bytecode
  • recommended Introduction to the speculative optimization mechanism in V8
  • recommended TurboFan Compiler Overview
  • recommended Anti-optimization in V8
  • recommended TurboFan: V8’s new code generation architecture
  • recommended Launching Ignition and TurboFan(Fully using Ignition + TurboFan and the benefits it brings)
  • optional Delve deeper into TurboFan JIT
  • optional The story of TurboFan
  • optional Ignition + TurboFan and ES2015
  • optional TurboFan IR
  • optional TurboFan ‘s JIT design
  • optional Fast algorithms for dynamic languages
  • optional Code cache
  • optional Internship experience on laziness mechanisms: Optimizing lazy disconnection of functions
  • optional Lazy optimization internship experience [PPT]
  • optional The background to compile(Multi-threaded compilation improves compilation speed)
  • optional Improved code caching
  • optional JIT-less V8
  • optional Blazingly fast parsing, part 1: optimizing the scanner(Scanner performance optimization)
  • optional Blazingly fast parsing, part 2: lazy parsing(Pre-parsing performance optimization)

The garbage collection

  • optional Free access to garbage collection
  • optional Jank Buster Part ONE(How to improve the performance of garbage collection mechanism)
  • optional Jank-busters Part II: Orinoco
  • optional Orinoco: Recycling for the new generation
  • optional V8’s concurrency token
  • optional Talk about GC: the new Orinoco garbage collector
  • optional High performance garbage collection (GC) in C++

Performance optimization

  • required The fast attribute in V8
  • required Element types and performance optimization in V8
  • recommended Code caching guidelines for JavaScript developers
  • recommended The story of a V8 performance cliff in React
  • optional V8 extras(Create V8’s built-in JavaScript API)
  • optional Optimized V8 memory consumption
  • optional How V8 measures real-world performance
  • optional Temporarily disabling escape analysis
  • optional Optimizing hash tables: hiding the hash code(Index storage optimization in hash table)
  • optional Lazy deserialization(Lazy built-in and deserialization)
  • optional Trace from JS to DOM and back(Tips for debugging memory leaks)
  • optional One small step for Chrome, a lot for V8(Memory leak related)
  • optional High-performance ES2015 and beyond
  • optional Fast for-in in V8
  • optional Embedded builtins(Reduce the running memory of the built-in API)
  • optional Improved DataView performance in V8
  • optional Getting things sorted in V8(Performance optimization of sorting algorithm in V8)
  • optional Accelerate […spread] operation
  • optional Faster asynchronous functions and promises
  • optional The Performance Overhead of JavaScript (Version 2019)
  • optional The lighter V8
  • optional Released V8 v7.8
  • optional Pointer compression in V8
  • optional Faster JavaScript calls
  • optional Super fast super property access
  • optional Short built-in call

WebAssembly

  • optional Experimental support for WebAssembly in V8
  • optional WebAssembly browser preview
  • optional Liftoff: a new baseline compiler for WebAssembly in V8(WebAssembly baseline compiler Liftoff)
  • optional Code caching for WebAssembly developers
  • optional Emscripten and the LLVM WebAssembly backend
  • optional Outside the web: standalone WebAssembly binaries using Emscripten
  • optional What is WASM? Introduction to WASM decompilation
  • optional Up to 4GB of memory in WebAssembly
  • optional Faster JS-to-Wasm calls

ECMAScrit specification

  • optional Understand the ECMAScript specification, Part 1
  • optional Understanding the ECMAScript spec, part 2
  • optional Understanding the ECMAScript spec, part 3
  • optional Understanding the ECMAScript spec, part 4

Other resources

  • recommended JavaScript engine fundamentals: Shapes and Inline Caches
  • recommended JavaScript engine fundamentals: optimizing prototypes
  • recommended How browsers work: Chrome V8 makes you more JavaScript savvy
  • recommended How does V8 work – object representation in V8
  • recommended V8 blogs[column]
  • optional V8 at the BlinkOn 6 conference
  • optional Google comic
  • optional Celebrating 10 years of V8(Overview of V8’s 10-year history)
  • optional How does JavaScript work?
  • optionalLift the veil on JavaScript engines
  • optional How does V8 work – V8’s JavaScript execution pipeline
  • optional I met JavaScriptCore JIT
  • optional C object files and executables (ELF files)
  • optional JIT Compilation: Understanding and implementation
  • optional AOT,JIT difference, their pros and cons, mixed compilation
  • optional In-depth understanding of the JVM (vii) – execution engine (interpreter and JIT compiler)
  • optional Compiler and Interpreter
  • optional JIT compiler quick start
  • optional Jit-dynamic versus AOT-static compilation: Java/Java/JavaScript/Dart nonsense
  • optional JavaScript – V8 engine
  • optional The opening words | how to learn Google high-performance V8 JavaScript engine?
  • optional Get inside Chrome and see how the V8 engine works
  • optional V8 has a new ultra-fast non-optimized JS compiler with performance improvements of 5-15%
  • optional V8 Engine Series (1) : Interpreter/Compiler Pipeline
  • optional TurboProp Mid-Tier Compiler
  • optional Ignition Design Doc
  • optional 03 | fast and slow attribute: V8 is how to improve object attribute access speed?
  • optional JavaScript engine basics: Shapes and Inline Caches
  • optional Fast attributes and inline caching in V8
  • optional V8 how quickly the torsion properties and arrays | Roger Leung ‘s Epcot
  • optional One of V8, object access mode optimization
  • optional Introduction to Supporting Optimization in V8
  • optional Introduction to guess-based optimization in V8 engines
  • optional Is JavaScript an interpreted or compiled language?
  • optional How does JavaScript work?
  • optional JavaScript: V8 compilation process
  • optional Getting to know the V8 engine
  • optional JAVASCRIPT AST VISUALIZER
  • optional How is JavaScript code executed

The computer

  • optional The relation between register and stack
  • optional Stacks and registers in CPU architecture?
  • optional The JVM architecture | stacked instruction set and register instruction set what is the difference?
  • optional The architectural model of the JVM (distinguishing the stack instruction set schema from the register instruction schema)
  • optional Serialization is simple to understand
  • optional The pitfalls of DSL
  • optional Talk about DSLS and DSL applications (CocoaPods as an example)
  • optional Front-end DSL Practice Guide (Part 1)
  • optional What is Turing complete?
  • optional How to design a programming language?
  • optional Intermediate Representation
  • optional Compilation principle
  • optional Compilation principle of portal | an article understanding compilation process
  • optional Overview of compilation principles
  • optional Compiler principles and language basics that developers should know
  • optional The diffuse CPU instruction set architecture
  • optional What is the relationship between processor architecture, instruction set, and assembly language?
  • optional The internal architecture and working principle of the CPU
  • optional CPU processor architecture and working principle analysis
  • optional DRAM, SDRAM and SRAM differences
  • optional How does the CPU work?
  • optional Thoroughly understand the memory structure in the CPU
  • optional Computer Cache and Cache Line details
  • optional CPU Cache
  • optional Instruction cycles, machine cycles, and clock cycles
  • optional Computer composition principle: clock cycle, machine cycle and instruction cycle
  • optional The difference between ROM, FLASH and RAM
  • optional What is a Virtual Machine?
  • optional A brief discussion on the start-up process of STM32
  • optional ARM seven mainstream compilers (ARMCC, IAR, GCC for ARM) in detail
  • optional cross-compilation
  • optional Introduction to cross-compiling for Linux

blog

  • optional Hexo(Hexo is a fast, concise and efficient blogging framework)
  • optional Next (Elegant Theme for Hexo)
  • optional icarus (A simple, delicate, and modern theme for the static site generator Hexo)
  • optional LeanCloud(Blog comments)
  • optional Markdown common formula (Github edit formula)

books

  • optional What is the most influential book that every programmer should read?
  • optional What is the single most influential book every programmer should read?
  • optional Compiler Design (Douban)

weekly

  • optional This Week In React
  • optional Strange dance weekly
  • optional HelloGitHub

community

  • optional Vue Chinese text forum
  • optional Vue.js Professional Chinese community
  • optional VueConf(Vue.js Developer Conference)

The author notes,

  • optional Jquery 2.0.3 source analysis note
  • optional Design patterns
  • optional JavaScript classes and inheritance
  • optional How can I make JavaScript run better
  • optional ES6 Study Notes
  • optional JavaScript advanced programming
  • optional The Definitive JavaScript Guide
  • optional Introduction to algorithms and JavaScript implementation
  • optional Data structures and algorithms
  • optional Definitive GUIDE to CSS
  • optional CSS world
  • optional Proficient in CSS
  • optional Regular expression