Frontend line

Shared Concepts

Cross-cutting frontend patterns and practices

47 sections

Start: Base Keyword

Foundational 21

  1. Base Keywordsuper is how a derived class reaches its parent: super(...) invokes the base constructor and super.method() extends inherited behavior. The key rule an interviewer checks is that super() must run before any use of this in a derived…, not read
  2. Decorator PatternDecorators wrap an object or function to add behavior without changing the original., not read
  3. Dependency Injection LifetimesAngular's hierarchical injectors decide how long a service instance lives and how widely it's shared: root providers are app-wide singletons, module/feature providers are singletons per feature boundary, and component providers create a…, not read
  4. Factory PatternProvide a single place to create related objects without exposing construction details., not read
  5. FIFO Queues In .NETA FIFO queue processes items in the order they were added — first in, first out. The interview trap is the naive array implementation: Array.push + Array.shift makes dequeue O(n) because every remaining element shifts down. The fix is a…, not read
  6. Mediator PatternThe Mediator pattern introduces a central hub that coordinates interactions between components so they never reference each other directly, replacing a tangle of many-to-many dependencies with a clean star topology. It shines for…, not read
  7. Nameof KeywordJavaScript doesn’t have a nameof keyword. Use constants or keyof to keep names in sync., not read
  8. O1 Constant TimeOperations that execute in a fixed amount of time regardless of input size., not read
  9. Observer PatternObservers subscribe to changes from a subject and react when it emits updates., not read
  10. OLogN Logarithmic TimeO(log n) logarithmic time means each step discards a constant fraction of the remaining work, so cost barely grows even as input explodes — a million elements take only ~20 steps. It's the complexity of binary search and balanced-tree…, not read
  11. ON Linear TimeO(n) linear time means cost grows in direct proportion to input size — double the data, double the work. It's the complexity of a single pass: map, filter, reduce, or one for loop over a collection. Linear is usually the practical…, not read
  12. ON2 Quadratic TimeO(n²) quadratic time means the work grows with the square of the input — doubling the data quadruples the cost. It's the signature of nested loops over the same collection or Array.includes inside a loop, and it's the complexity class…, not read
  13. ONLogN Linearithmic TimeO(n log n) linearithmic time is the cost of doing log-many passes over n elements — the floor for comparison-based sorting and the hallmark of divide-and-conquer algorithms like merge sort and quicksort. It's only slightly worse than…, not read
  14. OverviewThis repository now targets modern frontend development in the order JavaScript → TypeScript → Angular → React. Use this overview to navigate the stack-specific folders and understand how notes, practice prompts, and generators fit…, not read
  15. RabbitMQRabbitMQ is a message broker used for asynchronous workflows, eventing, and background processing., not read
  16. Reflection OverviewReflection is the ability to inspect and manipulate objects dynamically at runtime — enumerating keys with Object.keys, probing membership with in or Object.hasOwn, and reading or writing properties via the Reflect API. It powers…, not read
  17. Sorting AlgorithmsUse this sheet to explain trade-offs quickly and reference JavaScript examples., not read
  18. Space ComplexitySpace complexity measures how much memory an algorithm uses relative to input size., not read
  19. Strategy PatternEncapsulate algorithms behind a shared interface so you can swap behavior without branching logic., not read
  20. Struct Vs Class When To Use WhichUse this guide to explain how primitives and objects behave in JavaScript., not read
  21. TypesUse these notes to explain when to use types, interfaces, and classes in TS., not read

Mid-level 20

  1. TL;DR, not read
  2. How it works, not read
  3. Quick recall Q&A, not read
  4. CLR & Garbage Collector (GC)JavaScript engines use generational garbage collectors to reclaim memory from unreachable objects., not read
  5. CLR & Garbage Collector (GC) Practical ExampleUse this walkthrough to explain how you investigate memory leaks in frontend apps., not read
  6. CQRS PatternCQRS separates command (write) operations from query (read) operations to keep models focused., not read
  7. Dependency Inversion Principle (DIP)DIP says high-level code (components, use-cases) should depend on abstractions, not on the concrete classes that implement them. Injecting a StorageService interface instead of new LocalStorageService() is what makes the component swap…, not read
  8. Forcing Garbage CollectionIn production JavaScript, you generally do not force GC. Let the engine manage it., not read
  9. Frontend ArchitectureUse these patterns across JavaScript, TypeScript, Angular, and React projects to keep codebases maintainable., not read
  10. IDisposable PatternsJavaScript doesn’t have IDisposable, but you still need explicit cleanup for resources., not read
  11. Interface Segregation Principle (ISP)ISP says clients should never be forced to depend on methods they don't use. Split fat interfaces into focused capability slices (Playable, Seekable, Fullscreenable) so an audio player isn't pretending to support fullscreen — and so…, not read
  12. Liskov Substitution Principle (LSP)LSP says any implementation of an interface must be usable wherever the interface is expected, without surprises. Throwing "not supported" from a method you were forced to declare is the classic violation — it pushes type-shaped runtime…, not read
  13. Memory Allocation Discipline ExampleThis example highlights how frequent allocations can impact performance and how to avoid them., not read
  14. Open Closed Principle (OCP)OCP says you should be able to add new behaviour by writing new code, not by editing the code that already works. In practice that means programming against interfaces (payment processors, strategy objects, plugin registries) so a new…, not read
  15. Scalable Responsive DesignBuilding applications that scale gracefully across devices, user loads, and team sizes requires intentional architecture decisions. This guide covers scalability (handling growth) and responsive design (adapting to different contexts)., not read
  16. Scalable Responsive DesignScalable UI systems stay consistent as teams and features grow. Responsive design ensures the UI adapts across devices and layout contexts., not read
  17. Server Vs Workstation GCJavaScript engines tune GC differently depending on environment and workload., not read
  18. Single Responsibility Principle (SRP)SRP says a class, module or component should have one and only one reason to change. In React that usually means splitting fetching, validation, submission and rendering into separate hooks/components, so a UI tweak doesn't risk…, not read
  19. Sorted Collections Interview Notes🧠 Practice Prompt: Explain how you’d pick between SortedList and SortedDictionary for a price ladder updated multiple times per second., not read
  20. Tooling Vite Npm Pnpm NpxSenior interviews often probe whether you understand what runs when, what bundles what, and why your tooling choices matter for DX, CI speed, and production performance., not read

Senior 6

  1. Async Await Deep Diveasync/await is syntactic sugar over promises: an async function always returns a promise, await suspends execution and resumes the continuation as a microtask, and rejected promises surface as ordinary thrown errors. A senior answer…, not read
  2. Memory Allocation Discipline Example AsyncThis example shows how async flows can leak memory when subscriptions aren't cleaned up., not read
  3. Micro FrontendsMicro frontends extend the concept of microservices to the frontend, allowing teams to build, deploy, and maintain independent features or applications that compose into a unified user experience., not read
  4. Micro FrontendsMicro frontends split a large UI into independently owned and deployed slices, composed into a single user experience., not read
  5. NET Generational Garbage Collection (GC) Deep DiveJavaScript engines use generational GC to optimize for short-lived objects., not read
  6. SSR And PrerenderingSSR and pre-rendering are techniques used to generate HTML on the server or at build time, primarily aimed at improving SEO and initial page load performance. However, these approaches come with significant trade-offs that must be…, not read