As you all know, the front circle is getting more and more curly, and there are so many different technologies that you can’t keep up with them. Maybe many like me, for a time, see this also want to learn, see that also want to learn, what is the final result? That is: nothing!

So I’ve spent a couple of days putting together a list of front end must-read articles, which can also serve as a knowledge map to fill in gaps.

This information is suitable for:

  • Those who want to learn front-end knowledge step by step and systematically (elementary -> intermediate -> advanced);
  • Those who want to check and fill gaps in their knowledge map;
  • Hope to be used as an interview manual for knowledge review;

This article is mainly the author consulted a lot of information and combined with their own understanding, sorted out and become, please actively discuss, criticism, supplement.

I would like to thank all the authors who have contributed to the development of this community.

HTML

  • Learning HTML: Guides and tutorials
  • Very good HTML learning materials
  • This section describes how to use HTML meta tags and attributes
  • Understand inline and block-level elements thoroughly, without having to memorize them

CSS

  • Complete introduction to the CSS box model
  • CSS selectors, one is enough
  • 10 minutes Understanding the PRINCIPLE of BFC
  • Position. The Position
  • Basic flex layout concepts
  • You must understand CSS style weights and priorities
  • Deep understanding of grail layout and twin wing layout
  • Range of new features
  • In-depth understanding of cascading context and cascading order in CSS
  • (most complete ever) several methods for div centralization
  • Take you through CSS floats
  • Learn 16 ways to center CSS horizontally and vertically
  • 49 CSS facts you may not know
  • Use CSS development techniques flexibly
  • I write CSS animation routine
  • 45 collectible CSS shapes
  • 7 Ways to fix the 1px border on the Mobile Retina Screen
  • Organizing the CSS Modularity
  • CSS Performance Optimization

JavaScript

  • JavaScript tutorial
  • The array of JS
  • The object of JS
  • Reintroducing JavaScript
  • Do you really know JavaScript data types that you’re often asked about?
  • JS regular expression complete tutorial
  • Haven’t you learned javascript prototypes and prototype chains yet?
  • JavaScript inheritance
  • There are eight inheritance schemes commonly used in JavaScript
  • JavaScript scope chain
  • JavaScript closures
  • JavaScript variable object
  • Javascript this
  • JavaScript: Execute function expressions now (IIFE)
  • Brief introduction to the realization principle of Instanceof and Typeof
  • JavaScript deep simulation of call and apply
  • Explain the differences and uses of call, apply and bind
  • JavaScript in-depth simulation of bind implementation
  • JavaScript deep floating point precision
  • JavaScript deep new simulation implementation
  • Explain the Event Loop mechanism in JavaScript
  • This time, thoroughly understand the JavaScript execution mechanism
  • From browser multi process to JS single thread, JS running mechanism is the most comprehensive combing
  • Please arrange the JS event cycle for me
  • How to write a deep copy that will impress your interviewer?
  • JS anti – shake and throttling
  • Three lines of code to achieve JS Currization
  • A simple understanding of collerization and anti-Collerization in JavaScript
  • Consolidate your native JS foundation with some important API implementations in JS
  • You don’t know the power of json.stringify ()
  • JavaScript Design Mode ES6 (23 types)
  • 28 JavaScript Skills a qualified intermediate front-end engineer needs to master
  • 41 Tips you Must Know for JS Development
  • How does JavaScript affect DOM generation
  • JavaScript event model
  • Learn more about JavaScript memory leaks

ES6

  • ES6 Tutorial
  • ES6 features (updated ES2020)
  • New features of ES6, ES7, ES8, ES9, and ES10
  • In-depth Understanding of ES6 study notes complete edition
  • This time, understand the Promise principle once and for all
  • 45 Promise interview questions
  • Start with a Promise interview question that keeps me up at night and dive into the Promise implementation details
  • An in-depth understanding of Generators
  • Write a Promise,Generator,async and await by hand

TypeScript

  • TypeScript Chinese manual
  • TypeScript tutorial
  • TypeScript for the first time
  • TypeScript quick tutorial
  • Great TypeScript tutorial for getting started
  • Understand TypeScript in depth
  • Advanced uses of TypeScript
  • TypeScript advanced techniques
  • Learn about TypeScript generics and applications
  • The TypeScript practice
  • TypeScript – A way of thinking
  • Starting today, pick up TypeScript and be a wheel maker

Vue

  • Official Document V2
  • Official Documents V3
  • Vue-Router
  • VueX
  • Vue Cli
  • Element UI
  • Ant Design Vue
  • iView
  • Vue TypeScript support
  • Best practices for getting started with TypeScript before Vue3.0
  • Vue3.0 Family bucket Basic Guide
  • Quick access to Vue3’s latest 15 commonly used apis
  • 36 Tips you must Know for Vue development
  • Vue Project Performance Optimization – A practical guide
  • Vue project issues and solutions that hit you hard
  • Some tips for encapsulating Vue components
  • Vue 8 component communication modes, worth collecting!
  • This is how I configured the Vue in my project
  • The most comprehensive knowledge of Vue, interview essential (basic to advanced, covering VUe3.0
  • Summarize some basic optimizations I made for the launch of Vue project
  • Learn these Vue tips and leave work early for a date with the goddess
  • Understand the differences between computed, Watch and methods in Vue and their source code implementation
  • In-depth analysis of Vue source code – Vue slot
  • Full analysis of Vue’s computed and Watch details
  • Implementation principle of Vue nextTick
  • Thoroughly understand the keep-alive magic in Vue
  • Analyze the VUe2 diff algorithm
  • Vue3.0 DiFF algorithm in detail
  • Read Vue source code
  • Vue source intensive reading
  • In-depth analysis of Vue source code – responsive system building
  • Vue(V2.6.11) million lines of source code raw gnaw, just hard!
  • Take you a comprehensive analysis of vue-Router source code
  • Vuex source code analysis
  • Achieve a simple version of VUE2
  • Vue 3 source code guide
  • Vue.js 3.x source code parsing forerunner
  • Read the Vue3 source code
  • Vue3 source code analysis

React

  • The official documentation
  • The React. Js little book
  • React Router
  • React Redux
  • React React
  • React development: 34 Tips you must Know
  • React API introduction and Basic practice
  • Remember to read before writing React Hooks
  • Learn React Hooks in 30 minutes
  • Now I understand React Hooks
  • The React Hooks,
  • Learn how to use React Hooks. Learn how to use React Hooks
  • React-hooks, custom hooks design patterns and their actions
  • React Hooks best practices
  • React synthesizes events from shallow to deep
  • Eight year-end optimizations for React developers
  • React project performance analysis and optimization
  • React Exception Handling
  • Learn more about React advanced components
  • Virtualdom Diff algorithm implementation analysis
  • 【React in-Depth 】setState execution mechanism
  • Learn how react events work
  • React High order Component (HOC)
  • Learn the react-hooks principle
  • React Fiber architecture and source code
  • React Technology revealed
  • React source code
  • This is probably the most popular way to open React Fiber
  • React-router 4.0
  • React-redux source code analysis
  • Implement React yourself
  • Build your own React
  • Handwritten React the Router
  • Redux/ React-Redux/Redux middleware
  • React + TypeScript practices
  • TypeScript uses summaries in React
  • Probably the 50 React + TypeScript specs and experience you need
  • Redux Core Principles
  • Redux from design to source

Computer network

  • OSI 7 layer model and TCP/IP 4 layer model
  • All that TCP stuff
  • UDP,
  • The past and present of HTTP
  • Read this article for an in-depth understanding of the HTTP2.0 protocol!
  • HTTP3.0 and the QUIC protocol
  • How to explain HTTPS to you in plain English?
  • The differences between HTTP1.0, HTTP1.1, and HTTP2.0
  • Graphic HTTP caching
  • Websocket protocol details and packet analysis
  • Ajax knowledge system overview
  • There are two front-end routing modes: Hash mode and history mode
  • Interviewer: What do you know about front-end cross-page communication?

Data structures and algorithms

  • JavaScript algorithms and data structures
  • How does the front end prepare data structures and algorithms?
  • How do front-end engineers systematically practice data structures and algorithms
  • You might need a summary of the front-end algorithms
  • Write front-end algorithm advanced guide, I am how two months zero basis brush 200 questions
  • Fibonacci numbers
  • Combine two dimensional ordered numbers to form one dimensional ordered array
  • Linked lists: Reverse linked lists
  • Linked lists: Linked lists have rings
  • Stack queue: Determines whether the parenthesis string is valid
  • Returns the KTH largest element in the array
  • Find n numbers that neutralize sum in the array
  • Greedy: The smallest string with a given value
  • Binary tree: maximum depth
  • Binary tree: Hierarchical traversal
  • Flip the binary tree
  • Pruning: Determine whether sudoku is valid
  • Binary search: Solve the square root
  • Dictionary tree: Implement a dictionary tree
  • Stair climbing problem
  • The shortest distance
  • The LRU cache
  • Implement a trim method
  • Addition of large Numbers
  • Pat down array
  • Array to heavy
  • Check whether it is palindrome number
  • Implement a template engine
  • Determine whether a number is prime
  • Gets all prime numbers up to n
  • Implement a deepClone method
  • Add (1) (2) (3)
  • Realize the anti – shake function
  • Implement throttling function
  • String flipping

engineering

  • Front-end Modular Details (Full version)
  • Tree-Shaking Performance Optimization Practices – Principles
  • How is JS code compressed
  • Webpack will not knock the code is not fragrant
  • Hand to hand with you to master the new version of Webpack4.0 details
  • Webpack 4 configuration best practices
  • A dozen more Webpack interview questions
  • The react development environment is optimized in 30 webPack4 steps
  • Deep Unlock Webpack series (Basics)
  • Unlock the Webpack series in depth
  • 14 facts about webpack4, honestly
  • Detail the process section of Webpack
  • Understand webpack principles and write a 100-line Webpack by hand
  • Webpack – Miscellany of plugin mechanisms
  • Webpack loader mechanism
  • Rollup package tool (super detailed, super basic, super simple code screenshots)
  • Front-end components/library package sharp rollup use and configuration combat
  • All that Rollup stuff
  • Will Vite be the most popular front-end tool in 2021?
  • Preparation for 2021: Vite engineering practice, suggested collection
  • Vite source code analysis
  • The next generation of packaging tools, esbuild
  • From Babel to AST
  • Talk about Babel?
  • Babel7 knowledge not to be missed
  • Walk you through the AST abstract syntax tree
  • AST details and application

Performance optimization

  • Front-end performance optimization – Performance analysis with RAIL model
  • Front-end performance optimization means
  • Rearrange and redraw
  • Animation performance
  • Render composition layer
  • Lots of image loading optimizations
  • hang

image

  • Canvas tutorial
  • Three. Js animation tutorial
  • Canvas animated clock
  • How to draw a chart with JavaScript and HTML5 Canvas
  • Canvas Chart detail series: bar chart
  • Diy draw a line chart control ChartView
  • Summary of Web image technology, front-end development of the advantages and disadvantages of the introduction of various pictures and examples
  • 14 of the best JavaScript data visualization libraries
  • Some thoughts on web front-end and visualization

The browser

  • Front-end development what you should know about browsers
  • The front end stores family buckets –cookie, sessionStorage, localStorage, and indexedDB focus sets
  • Find out about garbage collection for V8 engines
  • Thoroughly understand the browser caching mechanism
  • Chrome Architecture
  • How browsers work: Behind the scenes of the new Web browser
  • Browser rendering: Process and Rationale
  • How to deal with the disconnection of the browser?
  • 11 browser principles interview questions

Web security

  • Front-end Security Series 1: How do I Prevent XSS attacks?
  • Front-end Security Series 2: How do I Prevent CSRF Attacks?
  • What you need to know about Web security
  • Six common Web security attacks and defenses are analyzed
  • Read Web security

Node

  • Node. Js v14.16.1 document
  • Express document
  • Koa document
  • An Egg. Js document
  • Ali open source framework egg.js introduction and actual combat
  • Middle and advanced front-end advanced speed clearance koA2 full stack core content
  • Front-end separation Vue + NodeJS(Koa) + MongoDB, from production to development
  • Learn more about the Nodejs module mechanism
  • Require () source code interpretation
  • Node.js event loop
  • Deep analysis of cluster module source code and Node.js multi-process
  • Have an in-depth understanding of Node Stream internals
  • Application and implementation principle analysis of Nodejs Stream Pipe
  • Nodejs authoring daemon
  • Nodejs interprocess communication
  • Some practices for Node.js exception catching
  • Deno document

Across the development

  • React-native Learning Guide
  • React Native Notes
  • React Native Performance Optimization Guide
  • Full description of Flutter development
  • The Ebook of Flutter In Action
  • Flutter | old meng
  • Flutter | the elder brother of the cat
  • Flutter | state management guide – the Provider
  • Use Flutter GetX — simple charm!
  • Applets: Native or framework (WEpy/MPvue /uni-app/taro)?
  • Taro Introduction
  • UniAPP introductory tutorial
  • Uni-app Development Experience (updated)

Design patterns

  • Collating common design patterns in JavaScript
  • JavaScript Design pattern
  • Front end dregs talk about design patterns in front ends (real world examples)
  • JavaScript Design Mode ES6 (23 types)

Git

  • Git basic operation, one article is enough!
  • Git common operations summary
  • Git-flow workflow
  • How to use Git gracefully
  • A summary of the most common Git problems and action lists
  • This is the real Git — Git internals

books

  • You don’t know javascript up and down
  • JavaScript Advanced Programming fourth edition
  • JavaScript design pattern and development practice
  • Javascript DOM programming art
  • JavaScript Ninja Secrets (version 2)
  • The essence of JavaScript
  • Introduction to ES6 standards
  • Understand ES6 in depth
  • CSS world
  • Definitive GUIDE to CSS
  • The CSS revelation
  • The definitive guide to Web Performance
  • The illustration of HTTP
  • Learn JavaScript data structures and algorithms

other

  • If I am the front end team Leader, how can I make the front end collaboration specification
  • How do front-end people keep learning
  • How do programmers learn and grow?
  • How should programmer protect eye vision?
  • How do programmers protect cervical vertebrae, lumbar vertebrae?
  • What kind of chair does a programmer need?
  • How should programmers exercise after work?
  • How can a single programmer find a partner?
  • How to Negotiate salary with HR?

Learning roadmap

The last

I am aware of non, spent a few days, sorted out this information, if you feel helpful, please give me a thumbs up 😄