Engrain by ByteRush

Path A 180 concepts · 45 days at 2–3 h a day · 88 ready now

Senior frontend

Pass senior and staff frontend loops. Concepts are in study order: everything a concept needs comes before it.

Make this my path

1 JavaScript in depth 44 concepts

  1. JS.01.01Call stack and run-to-completionCoreJunior9 min
  2. JS.01.02Tasks (macrotasks) and the task queueCoreJunior9 min
  3. JS.01.03Microtasks: promises, queueMicrotask, MutationObserverCoreJunior10 min
  4. JS.01.04Rendering steps: requestAnimationFrame and framesCoreMid-level10 min
  5. JS.01.05async/await in the event loopCoreMid-level10 min
  6. JS.01.06The Node.js event loop and its phasesCoreMid-level11 min
  7. JS.01.07Scheduling and yielding to the main threadCoreSenior11 min
  8. JS.02.01Lexical scope and the scope chainCoreJunior9 min
  9. JS.02.02Hoisting and the temporal dead zoneCoreJunior9 min
  10. JS.02.03Closures: functions that rememberCoreJunior10 min
  11. JS.02.04Closures and memoryCoreMid-level10 min
  12. JS.02.05Strict mode and the global objectCoreJunior8 min
  13. JS.03.01The four rules of `this`CoreJunior10 min
  14. JS.03.02Arrow functions and lexical `this`CoreJunior9 min
  15. JS.03.03call, apply and bind in depthCoreMid-level10 min
  16. JS.04.01Objects, prototypes and the prototype chainCoreJunior9 min
  17. JS.04.02Constructor functions and `new`CoreJunior10 min
  18. JS.04.03ClassesCoreJunior11 min
  19. JS.05.01Primitive types and `typeof`CoreJunior8 min
  20. JS.05.02Type coercion and ToPrimitiveCoreMid-level10 min
  21. JS.05.03Equality: ==, ===, Object.is, SameValueZeroCoreMid-level10 min
  22. JS.05.04Numbers: floating point, BigInt and precisionCoreMid-level11 min
  23. JS.06.02Map, Set, WeakMap, WeakSet, WeakRefCoreMid-level10 min
  24. JS.06.03Shallow vs deep copyCoreJunior9 min
  25. JS.07.01Higher-order functions and compositionCoreJunior9 min
  26. JS.07.02Currying and partial applicationCoreMid-level10 min
  27. JS.07.03MemoizationCoreMid-level10 min
  28. JS.07.04Recursion and the stackCoreJunior10 min
  29. JS.08.01Destructuring, spread, rest and defaultsCoreJunior9 min
  30. JS.08.02Optional chaining, nullish coalescing, logical assignmentCoreJunior8 min
  31. JS.10.01ES modulesCoreJunior10 min
  32. JS.10.02CommonJS vs ESM and interopCoreMid-level11 min
  33. JS.10.03Dynamic import, top-level await and code splittingCoreMid-level10 min
  34. JS.11.01Promise internals: states, reactions and resolutionCoreMid-level11 min
  35. JS.11.02Error handling in async codeCoreMid-level11 min
  36. JS.11.03Promise combinatorsCoreMid-level11 min
  37. JS.11.04Cancellation with AbortControllerCoreMid-level11 min
  38. JS.11.05Race conditions in the UICoreMid-level11 min
  39. JS.11.06Retry, timeout and backoffCoreMid-level12 min
  40. JS.11.07Concurrency controlCoreSenior10 min
  41. JS.12.03Garbage collectionCoreMid-level11 min
  42. JS.12.04Finding and fixing memory leaksCoreSenior12 min
  43. JS.13.01Error types, cause and custom errorsCoreMid-level10 min
  44. JS.13.02Global error handling and source mapsCoreMid-level11 min

2 TypeScript 9 concepts

  1. TS.02.02Discriminated unions and exhaustive checksCoreMid-level10 min
  2. TS.02.03User-defined type guards and assertion functionsCoreMid-level10 min
  3. TS.02.04as const, satisfies and literal inferenceCoreMid-level10 min
  4. TS.05.01keyof, typeof and indexed access typesCoreMid-level9 min
  5. TS.05.02Conditional types and inferCoreMid-level11 min
  6. TS.05.03Mapped types and key remappingCoreMid-level10 min
  7. TS.06.02Implementing utility typesCoreMid-level12 min
  8. TS.08.03Typing hooks, reducers and contextCoreMid-level11 min
  9. TS.08.04Runtime validation at boundariesCoreMid-level11 min

3 The web platform 33 concepts

  1. WEB.01.01Browser processes and navigationCoreMid-level10 min
  2. WEB.01.02Parsing HTML and CSS: DOM and CSSOMCoreMid-level11 min
  3. WEB.01.03Style, layout, paint and compositeCoreMid-level11 min
  4. WEB.01.04Forced synchronous layout and layout thrashingCoreMid-level10 min
  5. WEB.01.05The critical rendering pathCoreMid-level11 min
  6. WEB.02.02Efficient DOM updatesCoreMid-level11 min
  7. WEB.04.01IntersectionObserverCoreMid-level10 min
  8. WEB.05.01Cookies in depthCoreMid-level12 min
  9. WEB.06.01Web Workers + SharedArrayBuffer, Atomics and cross-origin isolationCoreMid-level13 min
  10. WEB.06.03Service worker lifecycleCoreMid-level12 min
  11. WEB.06.04Caching strategies and offlineCoreMid-level12 min
  12. WEB.07.01Forms in depthCoreMid-level11 min
  13. WEB.07.02dialog, popover and detailsCoreMid-level11 min
  14. WEB.08.01The cascade, specificity and inheritanceCoreMid-level11 min
  15. WEB.08.03Custom properties and modern selectorsCoreMid-level11 min
  16. WEB.09.01Formatting contexts and margin collapsingCoreMid-level10 min
  17. WEB.09.02Positioning and containing blocksCoreMid-level10 min
  18. WEB.09.03Stacking contexts and z-indexCoreMid-level10 min
  19. WEB.09.05Overflow, scrolling and containmentCoreMid-level10 min
  20. WEB.10.01Responsive images and mediaCoreMid-level11 min
  21. WEB.10.02Container queries and fluid designCoreMid-level11 min
  22. WEB.12.01HTTP semantics in depthCoreMid-level12 min
  23. WEB.12.02TCP, TLS and connection setupCoreMid-level11 min
  24. WEB.12.03HTTP/1.1, HTTP/2 and HTTP/3CoreMid-level11 min
  25. WEB.13.01HTTP caching headersCoreMid-level12 min
  26. WEB.13.02Cache layers: memory, disk, service worker, CDNCoreMid-level11 min
  27. WEB.14.01Same-origin policy, sites and originsCoreMid-level10 min
  28. WEB.14.02CORS in depthCoreMid-level12 min
  29. WEB.15.01REST API design for frontend engineersCoreMid-level12 min
  30. WEB.16.01Polling, long polling and Server-Sent EventsCoreMid-level11 min
  31. WEB.16.02WebSocketsCoreMid-level12 min
  32. WEB.17.01Request, Response, headers and bodiesCoreMid-level11 min
  33. WEB.18.01History API and hash routing + Navigation API and MPA vs SPACoreMid-level13 min

4 React 32 concepts

  1. RCT.01.01Render vs commit; React elementsCoreMid-level10 min
  2. RCT.01.02State as a snapshot and batchingCoreMid-level10 min
  3. RCT.01.03Purity, StrictMode and idempotent rendering + Class components and lifecycle (legacy)CoreMid-levelBeing written
  4. RCT.02.01Reconciliation and keysCoreMid-levelBeing written
  5. RCT.02.02Fiber architectureCoreSeniorBeing written
  6. RCT.02.03Concurrent rendering: transitions and deferred valuesCoreSeniorBeing written
  7. RCT.03.01How hooks work: order and the rulesCoreMid-levelBeing written
  8. RCT.03.02useState and useReducerCoreMid-levelBeing written
  9. RCT.03.03useRef and DOM refsCoreMid-levelBeing written
  10. RCT.03.04useMemo, useCallback, memo and the React CompilerCoreMid-levelBeing written
  11. RCT.03.05useContext and its performanceCoreMid-levelBeing written
  12. RCT.03.06Other hooksCoreMid-levelBeing written
  13. RCT.04.01Effects synchronise with external systemsCoreMid-levelBeing written
  14. RCT.04.02You might not need an effectCoreMid-levelBeing written
  15. RCT.04.03Stale closures, dependencies and effect eventsCoreMid-levelBeing written
  16. RCT.04.04Fetching in effects correctlyCoreMid-levelBeing written
  17. RCT.05.01Actions, useActionState and useOptimisticCoreMid-levelBeing written
  18. RCT.05.02use, Suspense and error boundariesCoreMid-levelBeing written
  19. RCT.06.01CSR, SSR, SSG, ISR and streamingCoreMid-levelBeing written
  20. RCT.06.02Hydration and its errorsCoreMid-levelBeing written
  21. RCT.06.03React Server ComponentsCoreSeniorBeing written
  22. RCT.06.04Server Functions and securityCoreSeniorBeing written
  23. RCT.07.01App Router fundamentalsCoreMid-levelBeing written
  24. RCT.07.02Data fetching and caching in Next.js 16CoreSeniorBeing written
  25. RCT.08.01Composition, children and slotsCoreMid-levelBeing written
  26. RCT.08.02Compound components and controlled/uncontrolledCoreSeniorBeing written
  27. RCT.09.01Kinds of state and where they liveCoreMid-levelBeing written
  28. RCT.09.02Server-state libraries: TanStack Query and SWRCoreMid-levelBeing written
  29. RCT.10.01Form approachesCoreMid-levelBeing written
  30. RCT.10.02Accessible, resilient formsCoreMid-levelBeing written
  31. RCT.11.01Profiling React appsCoreMid-levelBeing written
  32. RCT.11.02Lists, virtualisation and code splittingCoreMid-levelBeing written

5 Quality 1 concepts

  1. QLT.05.01Threat model and the OWASP Top 10 for frontendCoreMid-levelBeing written

6 React 1 concepts

  1. RCT.14.02Accessibility patterns in ReactCoreMid-levelBeing written

7 Quality 18 concepts

  1. QLT.01.01Core Web Vitals: LCP, INP, CLSCoreMid-levelBeing written
  2. QLT.01.02Optimising LCPCoreMid-levelBeing written
  3. QLT.01.03Optimising INPCoreMid-levelBeing written
  4. QLT.01.05JavaScript and asset budgetsCoreMid-levelBeing written
  5. QLT.03.02Semantics, the accessibility tree and namesCoreMid-levelBeing written
  6. QLT.03.05Forms, errors and accessible authenticationCoreMid-levelBeing written
  7. QLT.04.01Disclosure, accordion and tabsCoreMid-levelBeing written
  8. QLT.04.02Menus, listbox and comboboxCoreSeniorBeing written
  9. QLT.04.03Dialogs, live regions, toasts and tooltipsCoreMid-levelBeing written
  10. QLT.05.02XSS: types and preventionCoreMid-levelBeing written
  11. QLT.05.03Content Security Policy and security headersCoreMid-levelBeing written
  12. QLT.05.04CSRF and cookie securityCoreMid-levelBeing written
  13. QLT.05.05Authentication: sessions, tokens, OAuth, OIDC, passkeysCoreMid-levelBeing written
  14. QLT.06.01Testing strategyCoreMid-levelBeing written
  15. QLT.06.03End-to-end tests with PlaywrightCoreMid-levelBeing written
  16. QLT.07.03CI/CD pipelines and deploymentsCoreMid-levelBeing written
  17. QLT.08.01Logging, error tracking and RUM + Tracing and OpenTelemetry for frontendCoreMid-levelBeing written
  18. QLT.12.02Component APIs, documentation and versioning + Adoption and governanceCoreSeniorBeing written

8 Data structures & algorithms 18 concepts

  1. DSA.04.02Merge sort, quicksort and heapsortCoreMid-levelBeing written
  2. DSA.06.01Pattern 1: Two pointersCoreJuniorBeing written
  3. DSA.06.02Pattern 2: Sliding windowCoreMid-levelBeing written
  4. DSA.06.03Pattern 3: Prefix sumsCoreMid-levelBeing written
  5. DSA.06.04Pattern 4: Hashing and countingCoreJuniorBeing written
  6. DSA.07.01Pattern 5: Binary search (on index and on answer)CoreMid-levelBeing written
  7. DSA.07.02Pattern 6: Stack and monotonic stack/queueCoreMid-levelBeing written
  8. DSA.08.01Pattern 7: Linked list techniques (fast/slow, reversal, dummy)CoreMid-levelBeing written
  9. DSA.08.02Pattern 8: Intervals and greedyCoreMid-levelBeing written
  10. DSA.09.01Pattern 9: Heap / top-KCoreMid-levelBeing written
  11. DSA.10.01Pattern 11: Tree DFSCoreMid-levelBeing written
  12. DSA.10.02Pattern 12: Tree BFSCoreMid-levelBeing written
  13. DSA.11.01Pattern 14: Graph traversal (BFS/DFS on graphs and grids)CoreMid-levelBeing written
  14. DSA.11.02Pattern 15: Topological sortCoreMid-levelBeing written
  15. DSA.12.01Pattern 17: BacktrackingCoreMid-levelBeing written
  16. DSA.12.02Pattern 18a: Dynamic programming — 1DCoreMid-levelBeing written
  17. DSA.13.01DOM trees as data structuresCoreMid-levelBeing written
  18. DSA.13.02JSON traversal and transformationCoreMid-levelBeing written

9 Machine coding & LLD 2 concepts

  1. MC.01.01The machine-coding methodCoreMid-levelBeing written
  2. MC.01.02The rubric interviewers useCoreMid-levelBeing written

10 System design 7 concepts

  1. SD.01.01What frontend system design interviews testCoreMid-levelBeing written
  2. SD.01.02RADIO step by stepCoreMid-levelBeing written
  3. SD.01.03Communicating designs and trade-offsCoreSeniorBeing written
  4. SD.02.01Rendering and delivery architectureCoreSeniorBeing written
  5. SD.02.02Data fetching, caching and state architectureCoreSeniorBeing written
  6. SD.02.03Real-time, offline and syncCoreSeniorBeing written
  7. SD.02.04Performance, accessibility, i18n and security as design concernsCoreSeniorBeing written

11 AI-era frontend 5 concepts

  1. AIF.01.01How LLM streaming works on the wireCoreMid-levelBeing written
  2. AIF.01.02Parsing and rendering token streamsCoreMid-levelBeing written
  3. AIF.02.01Model output is untrusted: XSS and injection via renderingCoreMid-levelBeing written
  4. AIF.06.02Reviewing and testing AI-generated code + Measuring and explaining AI productivityCoreMid-levelBeing written
  5. AIF.07.01AI-assisted coding roundsCoreMid-levelBeing written

12 Interviews & career 10 concepts

  1. CAR.05.01STAR and its variantsCoreJuniorBeing written
  2. CAR.05.02Building a story bankCoreJuniorBeing written
  3. CAR.05.03Answering the hardest behavioural questionsCoreMid-levelBeing written
  4. CAR.06.01The project deep-dive roundCoreMid-levelBeing written
  5. CAR.06.02Senior and staff leadership signalsCoreSeniorBeing written
  6. CAR.07.01A method for production debuggingCoreMid-levelBeing written
  7. CAR.07.02Frontend debugging scenariosCoreMid-levelBeing written
  8. CAR.08.01Rubrics for every roundCoreMid-levelBeing written
  9. CAR.12.01Clear spoken English for technical interviewsCoreJuniorBeing written
  10. CAR.12.02Technical vocabulary and explaining conceptsCoreJuniorBeing written