├── .gitignore ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Evgenii Ray 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Front-End System Design Course 2 | 3 | This is a companion repository for the [Front-End System Design](https://frontendmasters.com/courses/frontend-system-design) course on Frontend Masters. 4 | [![Frontend Masters](https://static.frontendmasters.com/assets/brand/logos/full.png)](https://frontendmasters.com/courses/frontend-system-design) 5 | 6 | ## How to use the repo 7 | Check-out a specific branch as you follow the workshop exercises. 8 | Repo doesn't use any bundler or frameworks. So opening `index.html` in chrome 9 | is enough to complete workshop exercises 10 | 11 | ## Overview 12 | All exercise branches end with `begin` prefix. If you would like to see a solution 13 | to the exercise go to the branch with `end` prefix. 14 | 15 | 1. `1-dom-begin` - Basic DOM Operations 16 | 2. `2-intersection-observer-begin` - Intersection Observer exercise 17 | 3. `3-mutation-observer-begin` 18 | 4. `4-resize-observer-begin` 19 | 5. `5.1-virtualization-skeleton-begin` - Start of virtualization implementation 20 | 6. `5.2-observer-handling-begin` - Register bottom and top observer for the virtualized list 21 | 7. `5.3-property-model-and-loading-begin` - Defining a property model of Virtualized List 22 | 8. `5.4-1-elements-pool-and-recycling-begin` - Introducing HTMLElement pool 23 | 9. `5.4.2-elements-pool-and-recycling-rendering-begin` - Utilizing CSS Transformation to move elements around 24 | 10. `5.5-top-observer-begin` - Handle top virtualization 25 | 26 | ## View All Exercises & Solutions 27 | 28 | 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. 29 | 30 | Good luck! --------------------------------------------------------------------------------