This media is not supported in your browser
VIEW IN TELEGRAM
13. MutationObserver
Evgenii explains how the Mutation Observer API detects changes to elements in the DOM subtree. The types of mutations include changes to direct children, attributes, textContent, or any descendants in the subtree.
#lesson
Evgenii explains how the Mutation Observer API detects changes to elements in the DOM subtree. The types of mutations include changes to direct children, attributes, textContent, or any descendants in the subtree.
#lesson
Media is too big
VIEW IN TELEGRAM
14. MutationObserver Exercise
Students are instructed to create a mutation observer to detect text input and replace any supported tags with their corresponding HTML element.
#lesson
Students are instructed to create a mutation observer to detect text input and replace any supported tags with their corresponding HTML element.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
15. ResizeObserver
Evgenii explains there are two methods for tracking when the window or elements are resized. The resize event and corresponding media queries fire when the window size changes. CSS Container Queries and the Resize Observer API fire when elements are resized.
#lesson
Evgenii explains there are two methods for tracking when the window or elements are resized. The resize event and corresponding media queries fire when the window size changes. CSS Container Queries and the Resize Observer API fire when elements are resized.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
16. ResizeObserver Exercise
Students are instructed to create a Resize Observer to monitor the size of box elements as they are resized. If their width and height is below 150 pixels, a border radius is added so they appear as a circle. This lesson also includes a summary of the ResizeObserver API
#lesson
Students are instructed to create a Resize Observer to monitor the size of box elements as they are resized. If their width and height is below 150 pixels, a border radius is added so they appear as a circle. This lesson also includes a summary of the ResizeObserver API
#lesson
Media is too big
VIEW IN TELEGRAM
17. Virtualization Technique
Evgenii introduces virtualization, a UI optimization technique involving keeping data in memory while rendering only a limited subset to the screen. The virtualization code exercises are introduced. The beginning code project and steps required to implement the virtualization are explained.
#lesson
Evgenii introduces virtualization, a UI optimization technique involving keeping data in memory while rendering only a limited subset to the screen. The virtualization code exercises are introduced. The beginning code project and steps required to implement the virtualization are explained.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
18. Coding Virtualization from Scratch
Evgenii implements the top and bottom observers for the virtualization container. These observers determine when to load and display additional cards. The handleIntersectionObserver method loops through all the entries and checks if any entry intersects either observer.
#lesson
Evgenii implements the top and bottom observers for the virtualization container. These observers determine when to load and display additional cards. The handleIntersectionObserver method loops through all the entries and checks if any entry intersects either observer.
#lesson
Media is too big
VIEW IN TELEGRAM
19. Loading New Data
Evgenii continues the virtualization exercise by loading data and displaying cards in the container. The initial data set is loaded and displayed. When the bottom observer comes into view, the next set of cards is loaded and displayed.
#lesson
Evgenii continues the virtualization exercise by loading data and displaying cards in the container. The initial data set is loaded and displayed. When the bottom observer comes into view, the next set of cards is loaded and displayed.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Creating a Virtualization Pool
Evgenii implements a virtualization pool that manages how elements are stored in memory. This allows elements to be reused rather than generating a new element for every card in the data.
#lesson
Evgenii implements a virtualization pool that manages how elements are stored in memory. This allows elements to be reused rather than generating a new element for every card in the data.
#lesson
Media is too big
VIEW IN TELEGRAM
21. Recycling Elements
Evgenii recycles the elements in the virtualization exercise to avoid creating new elements. The new element positions are calculated based on the previous/next element values plus the margin offset. Absolute positioning is used for reordering the elements so the GPU is leveraged to ensure the best performance.
#lesson
Evgenii recycles the elements in the virtualization exercise to avoid creating new elements. The new element positions are calculated based on the previous/next element values plus the margin offset. Absolute positioning is used for reordering the elements so the GPU is leveraged to ensure the best performance.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
22. Virtualization Pool Q&A
Evgenii answers questions about virtualization, including the types of applications where virtualization is beneficial and the differences between virtualization and other lazy loading techniques.
#lesson
Evgenii answers questions about virtualization, including the types of applications where virtualization is beneficial and the differences between virtualization and other lazy loading techniques.
#lesson