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
Media is too big
VIEW IN TELEGRAM
23. Handle Top Virtualization
Evgenii concludes the virtualization exercise by handling intersections with the top observer. As the container is scrolled up, the elements are recycled to the top of the list. The scroll height calculation is used to maintain the same scroll position on the page.
#lesson
Evgenii concludes the virtualization exercise by handling intersections with the top observer. As the container is scrolled up, the elements are recycled to the top of the list. The scroll height calculation is used to maintain the same scroll position on the page.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Application State Design
Evgenii discusses strategies for managing state in an application. Understanding the trade-offs between IndexedDB, SessionStorage, and LocalStorage and normalizing forms will help optimize access costs. Indexes should be used if an in-app search is required.
#lesson
Evgenii discusses strategies for managing state in an application. Understanding the trade-offs between IndexedDB, SessionStorage, and LocalStorage and normalizing forms will help optimize access costs. Indexes should be used if an in-app search is required.
#lesson
Media is too big
VIEW IN TELEGRAM
25. Network Connectivity
Evgenii reviews UDP and TCP protocols and explains UDP doesn't guarantee the order of the data packets received across the network. Other network considerations are discussed, including energy consumption and latency. This lesson also includes the pros and cons of using long polling
#lesson
Evgenii reviews UDP and TCP protocols and explains UDP doesn't guarantee the order of the data packets received across the network. Other network considerations are discussed, including energy consumption and latency. This lesson also includes the pros and cons of using long polling
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
26. Server-Sent Events
Evgenii discusses server-sent events, which are one alternative to long polling. Server-sent events have automatic reconnection handling and are more battery-efficient. They are also a good alternative to Web Sockets and very effective for large text-data streams.
#lesson
Evgenii discusses server-sent events, which are one alternative to long polling. Server-sent events have automatic reconnection handling and are more battery-efficient. They are also a good alternative to Web Sockets and very effective for large text-data streams.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
27. Web Sockets
Evgenii explains that Web Sockets are one of the fastest ways to send data between the client and the server. They are bi-directional and will use TCP to send binary packets. The drawbacks of Web Sockets are the infrastructure cost and computing resources required to maintain constant TCP connections. The lesson concludes with a discussion of which networking strategy is best for the application's API.
#lesson
Evgenii explains that Web Sockets are one of the fastest ways to send data between the client and the server. They are bi-directional and will use TCP to send binary packets. The drawbacks of Web Sockets are the infrastructure cost and computing resources required to maintain constant TCP connections. The lesson concludes with a discussion of which networking strategy is best for the application's API.
#lesson
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
28. Classic REST & GraphQL
Evgenii compares classic REST APIs with GraphQL. Adding a GraphQL API introduces additional complexity, including requiring client libraries, caching layers, client state management for syncing data with the server, and the potential impact on JavaScript bundle size. GraphQL can also reduce complexity by providing a single API for client applications but multiple network implementations on the server.
#lesson
Evgenii compares classic REST APIs with GraphQL. Adding a GraphQL API introduces additional complexity, including requiring client libraries, caching layers, client state management for syncing data with the server, and the potential impact on JavaScript bundle size. GraphQL can also reduce complexity by providing a single API for client applications but multiple network implementations on the server.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
29. Performance Optimization
Evgenii discusses the core web vital metrics that help developers identify where to apply performance optimizations. Metrics include Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. This lesson also includes performance differences between http/1.1, http/2, and http/3.
#lesson
Evgenii discusses the core web vital metrics that help developers identify where to apply performance optimizations. Metrics include Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. This lesson also includes performance differences between http/1.1, http/2, and http/3.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
30. JavaScript Bundling & Loading
Evgenii highlights strategies for optimizing JavaScript bundle size. The strategies include a multi-bundle compiler, code splitting, code prefetching, and code minification/compression. Other in-application techniques like deferred script loading are also discussed.
#lesson
Evgenii highlights strategies for optimizing JavaScript bundle size. The strategies include a multi-bundle compiler, code splitting, code prefetching, and code minification/compression. Other in-application techniques like deferred script loading are also discussed.
#lesson
Media is too big
VIEW IN TELEGRAM
31. CSS, Images & Rendering
Evgenii covers optimization techniques for assets such as CSS stylesheets and images. Similar JS optimizations like splitting, minifying, and compressing can be applied to CSS. Image optimization strategies depend on the type of image asset. The WEBP format is designed to replace PNG, JPG, and GIF usage on web pages. This lesson also includes performance optimizations for fonts and rendering performance.
#lesson
Evgenii covers optimization techniques for assets such as CSS stylesheets and images. Similar JS optimizations like splitting, minifying, and compressing can be applied to CSS. Image optimization strategies depend on the type of image asset. The WEBP format is designed to replace PNG, JPG, and GIF usage on web pages. This lesson also includes performance optimizations for fonts and rendering performance.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
32. Requirements & Mock-Up
Evgenii simulates an interview environment for designing a social media application news feed similar to Twitter. The application requirements and a mock-up of the virtualization are designed. The requirements include both functional and non-functional items.
#lesson
Evgenii simulates an interview environment for designing a social media application news feed similar to Twitter. The application requirements and a mock-up of the virtualization are designed. The requirements include both functional and non-functional items.
#lesson
Media is too big
VIEW IN TELEGRAM
33. Application State & API
Evgenii continues the system design for the social media news feed. The state layer and the API are designed. Stories will be managed in a global state with their associated comments and media attachments. The API will use GET requests with server-side events.
#lesson
Evgenii continues the system design for the social media news feed. The state layer and the API are designed. Stories will be managed in a global state with their associated comments and media attachments. The API will use GET requests with server-side events.
#lesson