preface

Nealyang/PersonalBlog

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
  • Probably the 50 react + typescript specs and experience you need
    • 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
  • Thoroughly understand word-break, word-wrap, and white-space
  • Thoroughly understand CSS cascading context, cascading hierarchy, cascading order, and 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)
  • Summary of middle CSS Settings – Super complete
  • Web developers need to know CSS Tricks
  • CSS Tips

Front-end Engineering (Architecture, soft power)

  • Front-end caching best practices
  • Architecture article for the front-end (1) : MVC VS Flux
  • Front-end data validation starts with modeling
  • The front end also needs to understand JSONP security
  • Site performance optimization – 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
  • Preload page resources with preload
  • Dry! All kinds of common layout + well-known site instance analysis
  • Front-end data structures and algorithms
  • Why do front-end engineers learn compilation principles?
  • Jsonp principle and implementation
  • 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
  • Page picture loading optimization scheme
  • Do the best front-end monitoring
  • How to gracefully handle front-end exceptions
  • Classic interview question: What happens from URL input to page presentation
  • Thinking and practice of front-end isomorphic rendering
  • Front-end build tips
  • Brief Introduction to front-end Architecture of Large Projects
  • A self-inspection list of a [qualified] front end engineer

The React technology stack

  • React source code
  • React family bucket framework from scratch
  • Let the virtual DOM and dom-diff not stand in 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 App Design tips – Curry the way
  • How do you evaluate React’s new features Time Slice and Suspense?
  • React Engine — What is React Fiber
  • React source code: unqueue transactions and update queues
  • The React of the Transaction
  • React Transition React Transition
  • How can you improve the performance of your React application
  • Optimized the React application to 60fps
  • How to write better React code?
  • Optimization practices for React mid-sized projects
  • React Source Code Analysis series – The art of managing the lifecycle
    • The lifecycle is managed by MOUNTING, RECEIVE_PROPS, and UNMOUNTING
  • Deep 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
  • Deep into the React lifecycle (2)
    • Although the change of props will cause componentWillReceiveProps call; But componentWillReceiveProps call does not mean that the props really changed.
  • Do you really understand React (1) how components are designed and the important lifecycle
  • React V16.3: New lifecycle functions
  • React Ref’s past life
  • Talk about keys 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 – React Diff
    • The comparison of the two lists is still in-depth, which can be focused on
  • Shallow entry and shallow exit diagram domDIff
  • In-depth analysis: How to implement a Virtual DOM algorithm
    • The code implementation is for reference
  • React source code analysis series – Decrypt setState
    • SetState is synchronous and transactions need to know
  • The secret of the setState
  • What happened after setState
  • Do you really understand setState?
  • High-order components in React and their application scenarios
  • React Best Practices
  • Fully understand React Fiber
  • The React Fiber architecture
  • React Fiber Architecture Overview
  • You don’t know about the Virtual DOM series
  • Learn the React function component from the Recompose library
  • React-redux source code analysis
  • React setState
  • React setState
  • Implementing a React with 160 lines of JAVASCRIPT
  • Still using Redux, why don’t you try GraphQL and Apollo
  • React isomorphism Practice and Thinking
  • React implements 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,
  • In-depth understanding of the React-Router routing system
  • Immutable; React; Immutable
  • React-redux source code analysis

webpack/babel

  • Webpack source (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
  • Take you into the webpack world, become the number one Webpack player
    • Webpack optimization method explains more, prod/dev configuration file, loader/plugin simple preparation introduction
  • Webpack after the file too large solution
  • Webpack,
  • Webpack4 – use it for the first time, click it together 11 times
    • From zero configuration, base configuration, C3 prefix, hot update, extract common code, etc
  • Build 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 think
  • Who says the front end doesn’t need to understand -Nginx reverse proxy with load balancing
  • All that cold stuff in the CSS world
  • WebSocket 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
  • How JavaScript works: An overview of the engine, runtime, call stack
    • Understand the JavaScript call stack
  • Understand the execution context and execution stack in JavaScript
    • Execution context, variable context, lexical context look again
  • 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
  • Nearly 10,000 words ES6 grammar knowledge supplement
  • The ultimate quest for deep copy (90% of people don’t know)
  • Basic principles of front-end route jumping
  • Nine cross-domain implementation principles
  • Discover the power of closures in JavaScript
  • You may not be familiar with the JS summary
  • The magic of higher-order functions in JavaScript
  • Xiao Shao teaches you to play JS oriented object
  • AST Abstract Syntax tree – one of the most basic javascript essentials that 99% of people don’t know at all
  • ES6, ES7, and ES8 features are stewed in one pot
  • How to use arrays better in JavaScript
  • 7 minutes to understand the throttling, anti-shaking and application scenarios of JS
  • ECMAScript 6 Cet 6
  • Javascript: Airbnb javascript code specification
  • Promise implementation principle (source code attached)
  • Probably the best tutorial notes 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 arrived. Are you ready?
  • Build a state management system using native JavaScript
  • I Promise I will (10 questions)
  • Full tutorial on regular expressions
  • Analysis of anti – shake and throttling principle
  • JavaScript practical tips and writing tips
  • 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
  • Learn a little about JavaScript garbage collection
  • Remember js’s 6 regular methods at once
  • Several JS code handwritten problems and some code implementation
  • The principle of JSBridge
  • Interviewer: Do you know anything about front-end routing?
  • In-depth analysis of JavaScriptCore
  • The underlying mechanics of JavaScript closures
  • Multithreading in JavaScript – Web Workers
  • Unlock multiple JavaScript arrays to go heavy poses
  • Promise won’t…? Look here!! The most accessible Promise ever!!
  • The front end of the data into the implementation of the effect of the barrage
  • Brief introduction to the realization principle of Instanceof and Typeof
  • 1. Write A Promise that Promises/A+ Promises from scratch
  • Front-end performance related: anti – shake, throttling
  • There are seven ways to implement array de-duplication
  • How to implement an HTTP request library — AXIos source code reading and analysis
  • Interviewer: React/Vue can communicate with components using Event Bus. Can you implement this?
  • Higher order function, how can you be so beautiful!
  • Interviewer: Please implement a deep clone
  • Front-end modular: CommonJS,AMD,CMD,ES6
  • Xiao Shao teach you to play promise source code
  • Promise principle explains && 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 this way
  • Rediscover constructors, stereotypes, and stereotype chains
  • How do I send Ajax requests when the Web closes a page
  • Use Proxy to track JavaScript classes
  • “Intermediate and advanced front-end interview” JavaScript handwritten code unbeatable secrets
  • JavaScript environment model
  • Interviewer (6): Did you write “Common front-end components”?
  • Sorry, Proxy learning can really do whatever it wants
  • 28 JavaScript Skills an Intermediate Front-end Engineer must Master
  • Front-end routing principle analysis and implementation
  • Don’t memorize regular expressions
  • The front end must know must know – the black technology that manipulates URL
  • 43 JavaScript interview questions for you

Node

  • Build your NodeJS body of knowledge in one article
  • More than 200 lines of code to implement the Websocket protocol
  • What’s the difference between browser and Node Event loops
  • NodeJS and the module system

Flutter

  • Flutter Action Video – Mobile e-commerce
  • Implementation principle of EVENT_bus in FLUTTER
  • Flutter interview tips

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
  • It’s 9102 years ago and you’re asking the difference between GET and POST
  • Perform various operations using HTTP headers
  • Nine questions from getting started to getting familiar with HTTPS
  • Talk about the HTTPS
  • If you dare to make trouble for me on post and get, don’t blame me for pretending to be a pussy
  • TCP three handshakes and four breakups
  • Interview with you: this is a comprehensive overview of the basics of computer networking
  • Little brother, little sister, I have a TCP, HTTP interview guide do you want?
  • Look at the picture to learn HTTPS
  • A minute to understand HTTPS
  • Little brother, little sister, I have a TCP, HTTP interview guide do you want?
  • HTTP2 Basic concepts study notes
  • It’s 2019 and ask the difference between GET and POST
  • 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
  • HTTP protocol for front-end basics- []Do you really understand cookies and sessions
  • You may still be confused about 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

  • The three most frequently asked Javascript interview questions!
  • Crack the front-end interview (80% fail series) : Start with DOM
  • Interview confidence comes from a solid foundation
  • Classic INTERVIEW Questions: The most detailed handwritten Promise tutorial ever
  • Cracking the front-end interview (80% fail series) : Start with closures
  • Finish the front end test questions
  • 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 summary
  • 2018 front-end interview summary, read and understand, the salary said less plus 3K
  • 2018 Spring Recruitment interview
  • More front-end interview questions? These articles are enough
  • JS interview questions that 80% of applicants fail
  • Learn the Event Loop once (Once and for all)
  • Middle and senior front-end factory interview secrets, escort for you gold, silver and four, direct to dacheng (1)
  • 【 semimonthly 】 Summary of 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
  • Several advanced front end questions analysis
  • 26 selected JavaScript interview questions
  • Summary of high-frequency interview questions and answers

Data structures and algorithms

  • Front-end written test & interview climbing pit series – algorithm
  • Comics: What is a red black tree

other

  • April front End knowledge collection
  • How do Web projects conduct Git collaborative development
  • Chrome plugin
  • Build your own project scaffolding with Yeoman
  • Weex into the hole guide: hand by hand to compile the Playground
  • What is the PWA
  • Build your own CNPM/NPM installation and generate your own custom project architecture
  • Build your own scaffolding by imitating vue-CLI
  • Teach you to build a front-end scaffolding tool from scratch
  • Node.js based scaffolding tool development experience
  • Build scaffolding from scratch
  • The 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)