preface

Front-end technology changes with each passing day, with the trend of big front-end, if you want to become a qualified front-end engineer, you need to learn a wide range of things. So in the process of seeking to advance, we should not only continuously consolidate the front-end foundation, but also quickly respond to the update and iteration of technology. Gossip less to say, this time to share some front-end advanced quality learning resources, I hope to help you!

Personal Blog Address🍹 🍰 fe – code

Github quality projects

frontend-tech-list

Whether you are teaching yourself the front end or are proficient in some of the front end technologies but not yet, I hope this list will help you review some of the basics of the front end.

  • github
  • List of front-end technologies
    • 0. Annual report
    • 1. Basic pick-up
      • JavaScript 1.1.
      • 1.2. The CSS
      • 1.3. The browser
    • 2. Engineering and tools
      • 2.1. webpack
      • 2.2. Gulp
      • 2.3. Linter
      • 2.4. Static Typing (Typescript/Flow)
      • 2.5. The Babel
      • 2.6. CSS preprocessing and modularization
    • 3. Performance optimization
      • 3.1. Load performance
      • 3.2. Runtime performance
      • 3.3. Front-end caching
      • 3.4. Performance debugging and practice
      • 3.5. Performance Indicators
    • 4. Security
      • 4.1. XSS
      • 4.2. CSRF
      • 4.3. CSP
      • 4.4. The HTTPS
      • 4.5. Safety record
    • 5. Automate testing
      • 5.1. Unit testing
      • 5.2. End-to-end Testing (E2E)
      • 5.3. Other
    • 6. Frameworks and libraries
      • 6.1. The React
      • 6.2. The Vue
      • 6.3. Story
      • 6.4. RxJS
    • 7. New technology/direction
      • 7.1. PWA
      • 7.2. The CSS Houdini
      • 7.3. The Web Components
      • 7.4. Micro Frontends
      • HTTP / 7.5. 2
      • 7.6. WebAssembly
    • 8. Business relevance
      • 8.1. Data reporting
      • 8.2. Front-end monitoring
      • 8.3. A/B testing
      • 8.4. “Server Push”
      • 8.5. Dynamic effect
    • 9. Good writing that doesn’t categorize

CS-Notes

πŸ“š Tech Interview Guide basic knowledge, Leetcode problem solving, Java, C++, Python, back-end Interview, operating system, computer network, system design

  • github
  • Abstract
algorithm The operating system network object-oriented The database Β Β Β JavaΒ Β Β  The system design tool Coding practices Afterword.
✏ ️ πŸ’» ☁ ️ 🎨 πŸ’Ύ β˜• ️ ️ πŸ’‘ πŸ”§ πŸ‰ πŸ“

✏ ️ algorithm

  • 5. Offer offers
  • Leetcode antithesis
  • algorithm

☁ ️ network

  • Computer network
  • HTTP
  • Socket

javascript-algorithms

JavaScript algorithms and data structures. The repository contains a variety of javascript-based algorithms and data structures. Each algorithm and data structure has its own README with instructions and links for further reading (as well as YouTube videos).

An algorithm is a clear specification of how to solve a class of problems. An algorithm is a set of rules that precisely define a sequence of operations. B – beginner, A – advanced

  • github

  • Abstract

    • B Bit manipulation- Set, get, update, and clear bits, multiply/divide binary bits, and turn negative
    • B factorial
    • B Fibonacci number – classic ε’Œ closedversion
    • B A prime number detection(Elimination method)
    • B Euclidean algorithm- Calculate the greatest common divisor (GCD)
    • B Least common multiple (LCM)
    • B Prime sieve- Finds all primes in any given range
    • B Judge the 2nd power- Check if the number is a power of 2 (native and bitwise algorithms)
    • B Yang Hui triangle
    • B The plural- Complex numbers and their basic operations
    • B Arc and Angle- Conversion between radians and angles
    • B Quick power
    • A Integer split
    • A Cyclotomic surgery- Approximate Ο€ calculation based on N-Gons
    • A The discrete Fourier transform- Parse the time signal into its constituent frequencies

30-seconds-of-code

A selection of snippets of JavaScript code that you can understand in 30 seconds or less

  • github

  • Abstract

    πŸ“š Array

    View contents
    • all
    • allEqual
    • any
    • arrayToCSV
    • bifurcate
    • bifurcateBy
    • chunk
    • compact
    • countBy
    • countOccurrences
    • deepFlatten
    • difference
    • differenceBy
    • differenceWith
    • drop
    • dropRight
    • dropRightWhile
    • dropWhile
    • everyNth
    • filterFalsy
    • filterNonUnique
    • filterNonUniqueBy
    • findLast
    • findLastIndex
    • mapObject
    • maxN
    • minN
    • none

    🌐 Browser

    View contents
    • arrayToHtmlList
    • bottomVisible
    • copyToClipboard
    • counter
    • createElement
    • createEventHub
    • currentURL
    • detectDeviceType
    • elementContains
    • elementIsVisibleInViewport
    • formToObject
    • getImages
    • getScrollPosition
    • getStyle
    • hasClass
    • hashBrowser
    • hide

javascript-questions

List of JavaScript advanced questions, from basic to advanced, to test how much you know about JavaScript, refresh your knowledge, or help with your coding interview! πŸ’ͺ πŸš€ I will update new questions under this warehouse every week.

  • github

  • Abstract

      1. What is the output?
    function sayHi() {
console.log(name)
console.log(age)
var name = 'Lydia'
let age = 21
}

sayHi()
Copy the code
    • A: Lydia ε’Œ undefined
    • B: Lydia ε’Œ ReferenceError
    • C: ReferenceError ε’Œ 21
    • D: undefined ε’Œ ReferenceError
    The answer

    Answer: D

    Inside the function, we first declare the name variable through the var keyword. This means that the variable is raised (the memory space is set during creation) and the default value is undefined until the program runs to where the variable is defined. Because the name variable has not been executed to the point where it is defined when we print it, the value of the variable remains undefined.

    Variables declared with the let and const keywords are also promoted, but unlike var, they are not initialized. They are not accessible until we declare (initialize) them. This behavior is called a temporary dead zone. JavaScript will throw a ReferenceError when we try to access them before declaring them.

      1. What is the output?
    for (var i = 0; i < 3; i++) {
setTimeout((a)= > console.log(i), 1)}for (let i = 0; i < 3; i++) {
setTimeout((a)= > console.log(i), 1)}Copy the code
    • A: 0 1 2 ε’Œ 0 1 2
    • B: 0 1 2 ε’Œ 3 3 3
    • C: 3 3 3 ε’Œ 0 1 2
    The answer

    Answer: C

    Due to JavaScript’s event loop, the setTimeout callback is executed after the loop is completed. Because the traversal I in the first traversal is declared by the var keyword, this value is globally scoped. During the traversal, we increment the value of I each time by the unary operator ++. When the setTimeout callback executes, the value of I is equal to 3.

    In the second traversal, the traversal I is declared by the let keyword: variables declared by the let and const keywords have block-level scope (anything in {}). During each iteration, I has a new value, and each value is in scope within the loop.

Daily-Interview-Question

Every day to fix a front-end factory interview questions, I wish you every day progress, a year later, you will see a different version of yourself.

  • github
  • Abstract

2019-07-26

114: Programming problem to find the most consecutive characters and numbers in a string (Mogustreet)

'abcaakjbb'= > {'a':2.'b':2}
'abbkejsbcccwqaa'= > {'c':3}
Copy the code

114


2019-07-25

113: Programming problem, write an array to remove the function according to the following requirements (Mogujie)

  1. If the array element is [123, “meili”, “123”, “mogu”, 123], the output is [123, “meili”, “123”, “mogu”].

  2. Such as incoming array element for [123, [1, 2, 3], [1, “2”, 3], [1, 2, 3], “meili”], the output: [123, [1, 2, 3], [1, “2”, 3], “meili”]

  3. Such as incoming array element for [123, {a: 1}, {a: {b: 1}}, {a: “1”}, {a: {b: 1}}, “meili”], the output: [123, {a: 1}, {a: {b: 1}}, {a: “1”}, “meili”]

113


learnVue

Vue. Js source code analysis

  • github

vue-design

Renderers, and a line-by-line source analysis for Vue in the repository, are dry goods.

  • github
  • Directory listing
    • Component nature
    • Design Vnode
    • H function to assist in creating a VNode
    • Mount the renderer
    • Patch for renderer
    • The core Diff algorithm for the renderer
    • Custom renderers and asynchronous rendering

CS-Interview-Knowledge-Map

Front-end interview atlas

  • github
  • Online address

react-interpretation

React source code. This parsing is done in two parts: the first is to add the Chinese annotations of the code, and the second is to support the corresponding article.

  • github

Front-end-Web-Development-Interview-Question

Here I will collect all the front-end interview questions I have done, and provide answers according to their own understanding, as well as some front-end job hunting experience.

  • github
  • Abstract
Try a link Summary of the original tag Update the status
1.md Front End Web Development QuizThe CSS part CSS Is over: v:
2.md Front End Web Development QuizHTML part HTML Is over: v:
3.md FEX interview questions General To improve the punch:
4.md Frequently asked questions about front-end interviews General To improve the punch:
5.md Front-end interview with HTML related questions HTML Is over: v:

Advanced front end advanced

Focus on one front-end interview every week

  • github
  • Abstract
    • Understand the execution context and execution stack in JavaScript
    • JavaScript delves into context stacks and variable objects
    • JavaScript in-depth detailed illustration of memory space
    • JavaScript takes you deep into the memory mechanism
    • 4 Common memory Leaks in JavaScript and how to Avoid them

The front-end craftsmen

Strive to create a series of quality articles suitable for junior engineers to understand

  • github
  • Browser related 1. Simple browser rendering principle 2. Deep understanding of browser storage 3. 4. What happens from URL input to page presentation? Javascript 1. Front-end modular details (full version) 2. Nine cross-domain implementation principles (full version) 4. In-depth understanding of JavaScript scopes and scope chains

libpku

Github Go to College series

  • github
  • Abstract
    • Course Strategy Sharing Program of Zhejiang University
    • Hovercraft Project — a free, decentralized database of past Peking University problems
    • Database of Academic Department of Peking University Information Science Student Union
    • Peking University computer course assignments
    • Tsinghua University Computer Department curriculum introduction
    • Curriculum Sharing program of Southeast University
    • Course resources of School of Computer Science, University of Science and Technology of China
    • Shanghai Jiao Tong University course materials sharing
    • Sun Yat-sen University course materials sharing
    • Nanjing University course review materials
    • Zhengzhou University course review materials

weekly

Front end close reading weekly

  • github
  • Abstract
    • Intensive reading JS modular development
    • Best practices for perusing modal boxes
    • Close reading “Writing Resilient Components”
    • Close reading of React Hooks
    • React-code Neatness

mobileHack

This is a collection of various potholes encountered on mobile terminals

  • github

  • Mobile Web single page application development practice — page structure

    Mobile Web Product Front-end Development formula — “Fast”

    Mobile Web development, 4 lines of code to check whether the browser supports position: Fixed

    Use border-image to implement a 1px bottom edge similar to iOS7

    Summary of the problem of using Position: Fixed on the mobile web page

underscore-analysis

Underscore -1.8.3.js

  • github

awesome-vue

A collection of various articles related to vue.js

  • github

free-programming-books-zh_CN

πŸ“š Free computer programming Chinese books

  • github

airbnb/javascript

JavaScript Style Guide

  • github

Other recommended

The article

  • CSS specification Chinese translation
  • CSS 3 tutorials
  • ICSS – not just CSS
  • Graphic design patterns
  • How browsers render
  • Hand by hand teach you a simple Webpack
  • Take you into the webpack world, become the number one Webpack player.
  • Webpack4 – use it for the first time, click it together 11 times
  • Build React development environment based on Webpack
  • How JavaScript works: An overview of the engine, runtime, and call stack
  • In-depth analysis: How to implement a Virtual DOM algorithm
  • Brief Introduction to front-end Architecture of Large Projects
  • Site performance optimization – from 12.67s to 1.06s story
  • Q: If you can understand 80%, please give me your resume
  • Hand to hand, take you with vue lift backstage series
  • Analysis of Vue implementation principle – how to achieve bidirectional binding MVVM
  • Yuba’s JavaScript series

books

  • JS functional programming guide
  • You don’t know JS
  • ECMAScript introduction to 6
  • JavaScript regular Expressions mini-book
  • Illustrated HTTP
  • The Definitive GUIDE to HTTP
  • Refactoring – Improving the Design of Existing Code
  • Javascript Advanced Programming
  • The Definitive Javascript Guide
  • “JavaScript Functional Programming”
  • JavaScript Design Patterns and Development Practices
  • Learning JS Data Structures and Algorithms
  • CSS World
  • CSS Revealed
  • Node.js
  • The Code Clean Way
  • Ninja Secrets
  • Sword Finger Offer

video

You can pay attention to the public account – front-end engine, reply “learning”, you can get rich video learning materials.

Communication group

Qq front-end communication group: 960807765, welcome all kinds of technical exchanges, looking forward to your joining;

Wechat group: Students in need can add my wechat (Q1324210213) and reply “add group”.

Afterword.

If you see here, and this article is a little help to you, I hope you can move a small hand to support the author, thank 🍻. If there is something wrong in the article, we are welcome to point out and encourage each other. Thanks for reading. See you next time!

  • The article warehouse 🍹 🍰 fe – code
  • Social chat system (vue + Node + mongodb) – πŸ’˜πŸ¦πŸ™ˆVchat

Previous articles:

  • 【 from head to toe 】 Front-end implementation of multi-person video chat — WebRTC combat (multiplayer)
  • 【 】 from head to foot WebRTC + Canvas to achieve a double collaborative Shared sketchpad essay | the nuggets technology
  • [2019 Front-end advanced road] In-depth Vue responsive principle, from the source analysis
  • Vue component communication mode complete version

Interested students can pay attention to my public number front-end engine, fun and material.