preface
The quality articles I have read in the past year are summarized and scored according to the necessity and difficulty of reading (1-5 points), with reading suggestions under each article as reference. Hope to help you from the small white toward the road of engineers to bring a little inspiration, if it is helpful to you, click 👍 and collect it ❤️
JavaScript
Summary of core knowledge of javascript Advanced Programming
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: Beginners are advised to read the Ruby book once or twice, but not the Rhino book for a while.
ES6 Tutorial
Need: ⭐️⭐ ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Ruan big guy open source boutique, strong push!
Detailed explanation of JavaScript Event Loop mechanism and practical application in vue.js
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️
Advice: SUPPLEMENTARY explanation of JS event loop mechanism
This, apply, call, bind
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Should advise: JS easy wrong point, easy to confuse the point
Full tutorial on regular expressions
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: This is probably the most complete and in-depth article I’ve read about regex, but it’s also the most difficult. I recommend it as a manual query
Understand the execution context and execution stack in JavaScript
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Should advise: JS implementation mechanism of the article, to eliminate bugs are very helpful
WebAssembly is complete – learn about wASM in its past and present
Necessity: ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Recommend: It’s hard to write in C, it’s a supplement to JS, it can bring better performance to the Web. Used in Google Earth, Unity, etc
TypeScript
TypeScript Official Chinese documentation
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: As a superset of JS, TS provides powerful functions such as type check, which is more conducive to the maintenance of large projects. Chinese official website is a good introduction to learning documents (systematic + examples + continuous iteration ✅)
Ts Decorator – Metaprogramming Tips: How to exploit decorator features to develop frameworks?
Necessity: ⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: I like the way the decorator is written, it is still a test feature in TS, if you are interested, please check it out
H5
Do you really understand front-end routing?
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️
Advice: Easy to understand, drinking tea time to learn a very practical knowledge point
CSS
CSS knowledge and skills
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: very good CSS knowledge summary, suitable for review, not suitable for beginners ~
Rolling parallax? CSS is no problem
Necessity: ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Recommending: Interesting CSS optimization ideas, much more practical than those strange strange technology (non black, I also like those sexy operation before, just for practical fun, manual dog head to save life)
Use ONLY CSS to speed up page rendering
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: Tao department of optimization guide, dry goods full
React
React official Chinese document
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: React is a great framework concept innovation, and the website is always the first step to learning
8 k word | Redux/react – story/Redux middleware design implementation
Necessity: ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: For inquisitive babies who like to ask questions
When to use useMemo and useCallback
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Recommend: This is from Code Review. My colleague suggested that we build a useCallback, so it’s not necessary. We can’t do negative optimization
React Context
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: It’s not that common, but there are a lot of good libraries out there, so it’s good to know how it works
Let the virtual DOM and dom-diff not stand in your way
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: more classic concept differentiation (this aspect of the article is a little more, many water injection, the essence of the same thing, choose an interesting article to read on)
React Advanced8 tips for React developers
Necessity: ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advise: React optimize dry goods
network
10 must-know and must-know questions about TCP/IP
Need: ⭐️⭐ ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: front-end network knowledge necessary
Let’s get cookie straight
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️
Advice: easy to understand, easy to consult
Cookie, Session, Token, JWT
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: A distinction between some confusing concepts
Details on the SSL/TLS handshake process
Necessity: ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: how to shake the TLS handshake in HTTPS
(Recommended intensive reading) HTTP soul questions, consolidate your HTTP knowledge system
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Three yuan of products, will be a boutique
Git
Git Notes – Git notes that all programmers need to know
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️
Advice: Read the Git tool guide in detail
Webpack
Shallow in and shallow out webpack
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: Webpack’s little white text, as a start tutorial pretty good
Vue project Webpack optimization practice, construction efficiency increased by 50%
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: Webpack is a very comprehensive optimization of the article, but it is a little bit time-consuming to read, recommend to use when query
Vite
Vite source code analysis (4) : Vite hot update principle analysis
Necessity: ⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: read the source of auxiliary materials, suitable for students who want to read the source code
Eslint
Eslint in A Nutshell – What I learned about ESLint
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: Eslint’s little white text
Write an ESLint plugin and learn how ESLint works
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: Suitable for students and plug-in fans who want to build their own team programming style
Data structures & algorithms
I have been exposed to front-end data structures and algorithms
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: Recharge your brain
Front end algorithm slag salvation road 🚀
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Should say: Brush two or three questions, occasionally beat yourself up is good
The browser
(1.6W word) browser soul ask, how many can you catch?
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Yuan YYds
Understand Shadow DOM V1 in depth
Necessity: ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: An elegant solution for DOM partitioning
Here’s what you need to know about mobile adaptation
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Recommending: You’re going to have a fit problem, right?
test
Use Jest for React unit tests
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: single test tool Jest small white text
Test React Native App
Necessity: ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: System comprehensive RN test article, like ~
The interview
Q: If you can understand 80%, please send me your resume
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: more soul torture
In those years, I didn’t answer the react interview question
Necessity: ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: Mainly react direction, other technical direction can be ignored
Full of sincerity front-end interview summary
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Note: a very comprehensive summary, is the article typesetting can be optimized, the time in the past to thumb up collection | | the same exit
More front-end interview questions? Just read these articles (Updated June 2019)
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: Easy to read, but the knowledge is a little too much and miscellaneous, some of the knowledge is a little old, looking forward to update ~
Cracking the front-end interview (80% fail series) : Start with closures
Necessity: ⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: In-depth explanation of a single knowledge point
Crack the front-end interview (80% fail series) : Start with DOM
Necessity: ⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: In-depth explanation of a single knowledge point
Tool Installation Tutorial
VSCode front-end common plug-in installation and setting details
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️
Advice: Install the Vs Code plugin
Prerequisites For Front-end Development (Mac OS)
Necessity: ⭐️⭐️ ️⭐ ⭐
Difficulty: ⭐ ️
Advice: Mac under development environment build small white text
To build the wheels
Front-end page visualization is the wheel of the tool industry
Necessity: ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️
Advice: Visual wheel research report, didn’t understand the difference between low code structure and this so far…
The project of actual combat
🔥 Develop “netease Cloud Music PC” project based on React Family Bucket combat (I)]
Necessity: ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advise: React training program, suitable for beginners
Implement front-end automatic deployment of Nodes from scratch
Necessity: ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: Node deployment small white text
Open Source project learning
These open source projects make it easy for you to tackle ten work scenarios
Necessity: ⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: There are a lot of fun front-end toys out there
110K Star! Top 10 front-end learning resource projects with the largest annual growth!
Necessity: ⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: Special brain-burning front end toys ~
Design draft (UI view) automatic code generation scheme exploration
Necessity: ⭐️⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Advice: Good project idea, but how to ensure the quality of the generated code is a problem
Flowers live
How to write a deep copy that will impress your interviewer?
Necessity: ⭐️
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️
Advice: CTRL C + CTRL V: One item for a public library: ؏؏☝ᖗ乛 plateitem 乛ᖘ☝؏؏
Use CSS to draw basic shapes such as triangles, trapezoids, sectors, arrows, and ellipses
Necessity: ⭐️⭐️ port
Difficulty: ⭐ ️ ⭐ ️ ⭐ ️
Pleader: More practical spend live, but have this time to find UI key map is not faster…
reference
A good front end should read these articles