preface

Yes, it’s a bit clickbait. The reason is that in the wechat group, some friends asked me, how do you learn front-end? Can we share some learning methods? One sentence also quite touched me, I really is not what big guy, for learning front-end knowledge, I can not say that I have mastered what shortcut. Of course, my personal learning method this article has been written, is expected to be released in my personal official account this weekend. And before this, I want to show (gong) show (xiang) once, I usually browse each technical website, the article which records down. If you can digest one article a day, you may be able to get offers from major companies in just one year!

Not by emotion, good article too much! How can we waste our time and complain all day?

Personal collection of good essays

Collection deadline: 2019-07-24 11:50:49

typescript

  • [] TypeScript for the first time

  • [x] might be the 50 specs and experience you need for React + typescript

    • Some usage specifications

CSS

  • [] Does CSS load block
  • [] Incredible pure CSS scrolling progress bar effect
  • [] 1010 ways to implement horizontal and vertical centralization of CSS
  • [] REM layout parsing
  • [] The next innovation in layout
  • [] Word break, word-wrap, white-space
  • [] Thoroughly understand CSS cascading context, cascading level, cascading order, z-index
  • [] Does CSS load block?
  • [] From bronze to king 10 CSS3 pseudo-class using skills and use, understand a ha
  • [] 8 tips for CSS performance optimization
  • [] Personal Summary (cSS3 new features)
  • [] CSS Settings in the middle of the scheme summary – complete
  • [] Web developers need to know CSS Tricks
  • [] CSS common techniques

Front-end Engineering (Architecture, soft power)

  • [] Front-end caching best practices
  • [] Architecture article for the front-end (1) : MVC VS Flux
  • [] Front-end data verification starts from modeling
  • [] The front end also needs to understand JSONP security
  • [] Website performance optimization combat — from 12.67s to 1.06s story
  • [] 5 minutes for a front-end performance monitoring tool
  • [] Browser page resource loading process and optimization
  • [] modernization lazy loading way
  • [] Preloads page resources with preload
  • [] Dry stuff! All kinds of common layout + well-known site instance analysis
  • [] Front-end data structure and algorithm
  • [] Why do front-end engineers learn compilation principles?
  • [] The principle and implementation of JSONP
  • [] Lazy loading and preloading
  • [] 50 lines of MVVM, feel the art of closures
  • [] Excuse me! Take ten minutes of your time and let MVVM principles return to you
  • [] 2018 Front-end performance Optimization list
  • [] webpage picture loading optimization scheme
  • [] Front-end monitoring to the extreme
  • [] How to gracefully handle front-end exceptions
  • [] What happens from URL input to page presentation
  • [] Thinking and practice of front-end isomorphic rendering
  • [] Front-end build secrets
  • [] Brief Introduction to front-end architecture of Large Projects
  • [] self-inspection list of a [qualified] front-end engineer

The React technology stack

  • [] React
  • [] Build React family bucket framework from zero
  • [] Get the virtual DOM and dom-diff out of your way
  • [] React Source Code Parsing series is over!
  • [] How to learn React? Implement React by yourself
  • [] Experience the design idea of React team from the discussion of setState promise
  • [] React
  • [] How do you evaluate Time Slice and Suspense?
  • [] React Fiber is the new React engine
  • [] React source code (3)
  • [] Transaction in React
  • [] React Transition
  • [] How to improve the performance of your React application
  • [] optimized React application to 60fps
  • [] How to write better React code?
  • [] React Optimization practices for mid-sized projects

  • [x] React Source Code Analysis series – The art of life Cycle Management

    • The lifecycle is managed by MOUNTING, RECEIVE_PROPS, and UNMOUNTING

  • [x] Into the React lifecycle (part 1) : The Birth stage (Mount)

    • Generating the React component alone will not trigger a lifecycle call
    • ComponentWillMount and Render parent components are called first, in exactly the opposite order to componentDidMount

  • [x] Update the React lifecycle

    • Although the change of props will cause componentWillReceiveProps call; But componentWillReceiveProps call does not mean that the props really changed.
  • [x] Do you really understand React (part 1) how to design components and the important lifecycle
  • [x] React V16.3
  • [] React Ref
  • [] Talk about key in React
  • [] React Mixin’s past life
  • [] Do you really understand React (middle) communication between components and React optimization
  • [] In-depth framework origin series — Virtual Dom
  • [] Explore the past and present of Virtual DOM
  • [] In-depth framework origin series — Virtual Dom

  • React Diff [x] React Diff

    • The comparison of the two lists is still in-depth, which can be focused on
  • [x] domDIff diagram for shallow entry and shallow exit

  • [X] In-depth analysis: How to implement a Virtual DOM algorithm

    • The code implementation is for reference

  • [x] React Source Code Analysis series – Decrypt setState

    • SetState is synchronous and transactions need to know
  • [x] setState secret
  • What happened after [x] setState
  • [X] Do you really understand setState?
  • [] React high-order components and their application scenarios
  • React Best practices
  • [] Fully understand React Fiber
  • [] React Fiber architecture
  • [] React Fiber
  • [] You don’t know about the Virtual DOM series
  • [] Learn the React function component from the Recompose library
  • [] React-redux
  • [] React setState
  • [] React setState
  • [] React with 160 lines of JAVASCRIPT
  • [] I’m still using Redux. Why not try GraphQL and Apollo
  • [] React isomorphism practice and thinking
  • [] React implement Table thinking
  • [] React Practice – Component Generator
  • [] ReactEurope 2016
  • [] ReactEurope 2016
  • [] The realization principle of Mobx idea, and comparison with Redux
  • [] Component Library Design Practice – Complex component design
  • [] Redux Middleware
  • [] Understand the React-Router routing system in depth
  • [] Immutable mutable
  • [] React-redux

webpack/babel

  • [] Webpack source code (a) – Tapable and event stream
  • [] Hand by hand teach you a Webpack Loader
  • [] Interviewer: Have you heard about Babel? Have you ever written a Babel plug-in? A: No. pawn
  • [ ] Write Better JavaScript With Webpack
  • [] Hand by hand teach you a simple webpack

  • [X] introduces you to the World of Webpack and becomes the number one Webpack player

    • Webpack optimization method explains more, prod/dev configuration file, loader/plugin simple preparation introduction
  • [] Webpack after the file is too large solution
  • [] Webpack details

  • [x] WebPack4 – Play with it eleven times

    • From zero configuration, base configuration, C3 prefix, hot update, extract common code, etc

  • [x] React Development Environment based on Webpack

    • Take a simple lesson from Webpack-Merge
  • [] Getting started with Babel — Implementing an ES6 class converter
  • [] The 5 most confusing points in webpack
  • [] 14 facts about webpack4, honestly

Test

  • [] The rules in ESLint taught me not to program without rules

JavaScript

  • [] Publish and subscribe is more powerful at work than you might think
  • [] Who says front-end doesn’t need to understand -Nginx reverse proxy with load balancing
  • [] The cold stuff in the CSS world
  • [] It’s time to show your best side
  • [] socket. IO allows anyone to develop their own im
  • [] How does WebSocket work? Why can persistent connection be implemented

  • [X] How JavaScript works: An overview of the engine, runtime, call stack

    • Understand the JavaScript call stack

  • [X] understand execution context and execution stack in JavaScript

    • Execution context, variable context, lexical context look again
  • [X] This time, thoroughly understand the JavaScript execution mechanism
  • [] 33 concepts JavaScript developers should know
  • [] Front-end JS string/picture/Excel file download
  • [] a more elegant way to write complex JavaScript judgments
  • [] Sexy Promise, hug him and strip him
  • [] ES6 grammar knowledge point supplement nearly 10,000 words
  • [] The ultimate quest for deep copy (90% of people don’t know)
  • [] Basic principle of front-end route jump
  • [] The implementation principle of nine cross-domain methods
  • [] Discover the power of closures in JavaScript
  • [] You may not be familiar with the JS summary
  • [] The power of higher-order functions in JavaScript
  • [] Xiao Shao teaches you to play JS oriented object
  • [] AST Abstract syntax tree — the most basic javascript knowledge that 99% of people don’t know
  • [] ES6, ES7, ES8 features one pot stew
  • [] How to use arrays better in JavaScript
  • [] 7 min To understand the throttling, anti-shaking and application scenarios of JS
  • [] ECMAScript 6
  • [] javascript: Airbnb javascript code specification
  • [] Promise implementation principle
  • [] Probably the best tutorial note on regular expressions ever…
  • [] Some JavaScript code tips
  • [] Quick JavaScript full stack tutorial
  • [] Understanding the beauty of asynchrony — Promise and async await (III)
  • [] ES9 has come.
  • [] Use native JavaScript to build a state management system
  • [] I Promise I will. (10 题)
  • [] JS regular expressions
  • [] Principle analysis of anti-shake and throttling
  • [] JavaScript practical tips and writing suggestions
  • [] Write your own code base (implementation and encapsulation of common javascript instances)
  • [] import, require, export, module.exports
  • [] WebSocket: 5 minutes from beginner to master
  • [] JavaScript operation principle analysis
  • [] A brief introduction to JavaScript garbage collection
  • [] Remember js’s 6 regular methods at once
  • [] several JS code handwritten problems and some code implementation
  • [] Principle of JSBridge
  • [] Interviewer: Do you know anything about front-end routing?
  • [] In-depth analysis of JavaScriptCore
  • [] The underlying mechanism of JavaScript closures
  • [] Multithreading in JavaScript – Web workers
  • [] Unlocks multiple JavaScript arrays to go heavy poses
  • [] Promise won’t…? Look here!! The most accessible Promise ever!!
  • [] The realization method of the front end converting data into barrage effect
  • [] Brief introduction to the realization principle of Instanceof and Typeof
  • [] Write A Promise that Promises/A+ Promises from scratch
  • [] Front-end performance related: anti-shake, throttling
  • [] 7 methods to implement array deduplication
  • [] How to implement an HTTP request library — AXIos source code reading and analysis
  • [] React/Vue can use Event Bus to communicate with components.
  • [] Higher order function, how can you be so beautiful!
  • [] Interviewer: Please implement a deep clone
  • [] Front-end modularization: CommonJS,AMD,CMD,ES6
  • [] Xiao Shao teach you to play promise source code
  • [] Implement a Promise object
  • [] HTTP/2 Server Push
  • [] Develop better JavaScript modules
  • [] a more elegant way to write complex JavaScript judgments
  • [] I never understood JavaScript closures until someone explained it to me like this
  • [] Rediscover constructors, stereotypes, and stereotype chains
  • [] How do I send Ajax requests when the Web closes a page
  • [] Use Proxy to track JavaScript classes
  • [] “Mid-advanced front-end interview” JavaScript handwritten code unbeatable secret
  • [] JavaScript environment model
  • [] Interviewer (6): Did you write “Common front-end components”?
  • [] Sorry, learn Proxy can really do anything
  • [] 28 JavaScript skills that intermediate front-end engineers must master
  • [] Front-end routing principle analysis and implementation
  • [] Do not memorize regular expressions
  • [] Front-end will know will know – URL manipulation black technology
  • [] 43 JavaScript interview questions for you

Node

  • [] One article to build your NodeJS knowledge
  • [] More than 200 lines of code to implement the Websocket protocol
  • [] What is the difference between the browser and Node Event Loop
  • [] NodeJS and module system

Flutter

  • [] Flutter video – Mobile e-commerce
  • [] Implementation principle of EVENT_bus in FLUTTER
  • [] Flutter

Http

  • [] Design an airtight browser caching solution: About ideas, details, ServiceWorker, and HTTP/2
  • [] The front end you should know about — caching
  • [] HTTP caching mechanism one two three
  • [] The difference between GET and POST is 9102
  • [] Use HTTP headers to perform various operations
  • [] Nine questions from getting started to becoming familiar with HTTPS
  • [] Talk about HTTPS
  • [] If you dare to make trouble for me on post and get, don’t blame me for pretending to be pushy
  • [] Diagram of TCP three handshakes and four breakups
  • [] This is a comprehensive walkthrough of the basics of computer networking
  • [] Brother, sister, I have a TCP/HTTP interview guide do you want it?
  • []
  • [] Minutes to let you understand HTTPS
  • [] Brother, sister, I have a TCP/HTTP interview guide do you want it?
  • [] HTTP2 Basic concept study notes
  • [] The difference between GET and POST in 2019
  • [] HTTP protocol for front-end basics
  • [] What is the interviewer trying to ask us about three handshakes and four waves
  • [] What you need to know about Web security
  • [] Do you really understand cookies and sessions
  • [] Require, import and export

The browser

  • [] The front-end must understand the browser caching mechanism
  • [] Reflow & Repaint for browsers
  • [] Simple browser rendering principles
  • [] Ditch console.log() and embrace the browser Debugger

The interview

  • [] Three common interview questions!
  • [] Crack the front-end interview: Start with DOM
  • [] Interview confidence comes from a solid foundation
  • [] The most detailed handwritten Promise tutorial ever
  • [] Crack the front-end interview: Start with closures
  • []
  • [] Middle and senior front-end factory interview secrets, escort for you gold, silver and four, direct to dacheng (1)
  • [] 2018 dACHang advanced front end test questions summary
  • [] 2018 front-end interview summary, read after understand, salary said less plus 3K
  • [] 2018 Spring Recruitment
  • [] Many front-end interview questions? These articles are enough
  • [] JS interview questions that 80% of applicants fail
  • [] Understand the Event Loop once
  • [] Middle and senior front-end factory interview secrets, escort for you gold, silver and four, direct to dacheng (1)
  • [] [bimonthly] Summary of front-end high-frequency interview questions and answers
  • [] a basic problem ignored by the front end, do not believe you will see a few questions
  • [] Tencent school recruit front three, abuse continue to masturbation
  • [] 2018 Alibaba front-end interview summary
  • [] Some advanced front end questions
  • [] 26 selected JavaScript interview questions
  • [] A summary of questions and answers

Data structures and algorithms

  • [] Front-end written test & interview climbing pit series — algorithm
  • [] What is a red black tree

other

  • [] April front-end knowledge collection
  • [] How do Web projects collaborate with Git
  • [] Chrome plugin
  • [] Build your own project scaffolding with Yeoman
  • [] Weex into the hole guide: hand by hand compile Playground
  • [] What is PWA
  • [] Create your own CNPM/NPM installation and generate a custom project architecture
  • [] Imitate vue-CLI to build their own scaffolding
  • [] teach you to build a front-end scaffolding tool from scratch
  • [] Experience in scaffolding tool development based on Node.js
  • [] Build scaffolding from scratch
  • [] React component steps from scaffolding to release in NPM

conclusion

The above includes the records I have read but have not moved to read (mainly because I feel I need to go again). All articles, I will study hard, there is no way, after all, compared dishes. There is so much to learn.

Welcome to follow my personal wechat public number: full stack front end selection

I will recommend a variety of good articles and an interview question each day. (The program only started today)