List of things to learn (interview) - @frangelli notes

A while back, I posted a mind map of the frontend things that were appearing the most in senior interviews outside of Brazil. I think it would also be useful to have a small list of the type of questions that are most common. I will create a document or blog post to document this but for now, it will be here because it can help someone who is about to be interviewed:
  1. this context: In various different ways, they will try to make "tricks" with it... calling functions in different ways.. arrow function, inside a literal object (method), inside an instance like new MyObject, borrowing the function from somewhere else like: const m = myObject.m; m();...
  1. Promise API... they are keeping a close eye on this... and in 3 different places, they asked to write my own Promise.all that takes an array of promises and returns an array with the results in the SAME ORDER as the array of promises.
  1. Event Loop / Execution Context... Classic trick questions like: What order will the following functions be called:
fn1(); fn2(); setTimeout(() => { fn3(); }, 0);
And also questions like: If javascript is a "single-threaded language," how does it handle more than one task at the same time...
  1. REACT: Component vs PureComponent? What's a HOC? Can you please write one? Which component composition methodologies do you know? (render props, HOC, function as children...)
  1. Event Delegation: is a technique in front-end web development where an event handler is attached to a parent element rather than individual child elements. This allows the event handler to capture events that occur on the child elements and handle them efficiently.
  1. VanillaJS DOM manipulation: They like it when they see a createDocumentFragment() 7. Master the reduce, map, filter... of life... 8. Closures: The last one I saw was: Create a function called redGreen that when called without any parameter once it returns red and the other time it returns green. Do not use ANY place outside the function to store any variables and also do not change the way the function is called:
redGreen(); //red redGreen(); //green redGreen(); //red redGreen(); //green

List to learn

  • Rx.js
  • TypeScript
  • JavaScript
  • ES6
  • Destructuring
  • Class
  • Static properties
  • Arrow functions
  • let / const
  • Spread operator
  • IIFE
  • Design patterns
  • Revealing module pattern
  • Dependency injection
  • Underlying of language
  • Prototypes
  • Stack / Event Loop
  • Memory leaks / GC
  • Hoisting
  • Differences between let, const, and var
  • this scope
  • Promises
  • Web Workers
  • Service Workers
  • Data structures
    • Map
    • WeakMap
    • Literal objects
    • Arrays
    • Set
  • Iterables
    • for
    • for...in
    • for...of
    • .forEach
    • .map
    • .reduce
    • .filter
  • Event bubbling
  • Event delegation
  • Date API
  • localStorage / sessionStorage
  • CSS / SCSS
    • flexbox
    • positioning
  • Responsiveness
  • Media queries
  • HTML5
  • Use of semantic components
    • header
    • section
    • article
    • ...
  • HTTP Protocol
    • GET vs POST
  • Webpack
    • Minification
  • Babel
    • presets
    • loaders
  • The DOM
  • Accessing nodes
    • NodeList vs Array
    • Traversing the DOM
    • DocumentFragment
  • Loading sequence
    • Script at the bottom of the page
    • defer and async attribute of script
  • Testing
    • TDD
    • Jest
    • Enzyme
    • Assertions
  • Types of testing
    • Unit
    • Integration
    • e2e
  • Security
    • CSRF
    • CORS
    • XSS
    • OWASP
  • React
    • Styled components
  • Redux
    • Middlewares
    • Hooks
    • Context API
notion image