Front-End System Design Course

This is a companion repository for the Front-End System Design course on Frontend Masters.

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

View All Exercises & Solutions

You can check out the 5-6-scroll-preservation-end branch to see all the begin and end directories to avoid switching branches for each exercise.

Good luck!