Fundamentals of frontend system design

This a repo for the course published on Frontend Masters https://frontendmasters.com/workshops/systems-design/

How to use the repo

Check-out a specific branch as you follow the workshop exercises. Repo doesn't use any bundler or frameworks. So opening index.html in chrome is enough to complete workshop exercises

Overview

All exercise branches end with begin prefix. If you would like to see a solution to the exercise go to the branch with end prefix.

  1. 1-dom-begin - Basic DOM Operations
  2. 2-intersection-observer-begin - Intersection Observer exercise
  3. 3-mutation-observer-begin
  4. 4-resize-observer-begin
  5. 5.1-virtualization-skeleton-begin - Start of virtualization implementation
  6. 5.2-observer-handling-begin - Register bottom and top observer for the virtualized list
  7. 5.3-property-model-and-loading-begin - Defining a property model of Virtualized List
  8. 5.4-1-elements-pool-and-recycling-begin - Introducing HTMLElement pool
  9. 5.4.2-elements-pool-and-recycling-rendering-begin - Utilizing CSS Transformation to move elements around
  10. 5.5-top-observer-begin - Handle top virtualization

Good luck!