This media is not supported in your browser
VIEW IN TELEGRAM
26. Serverless Use Cases
Erik provides various use cases for serverless computing including real-time file processing, ETL (Extract, Transform, Load) processes, and serving static websites. He emphasizes the cost-effectiveness and ease of management that serverless offers for these use cases.
#lesson
Erik provides various use cases for serverless computing including real-time file processing, ETL (Extract, Transform, Load) processes, and serving static websites. He emphasizes the cost-effectiveness and ease of management that serverless offers for these use cases.
#lesson
Media is too big
VIEW IN TELEGRAM
27. Evolution of Backend System Architectures
Erik discusses the evolution of backend system architectures, starting with a monolith, splitting the monolith into services, and finally, serverless architecture.
#lesson
Erik discusses the evolution of backend system architectures, starting with a monolith, splitting the monolith into services, and finally, serverless architecture.
#lesson
Media is too big
VIEW IN TELEGRAM
28. Amazon & Netflix Backend Systems
Erik discusses how Amazon utilizes a microservices architecture and how they built their own infrastructure and software to solve instead of leaning on another provider. He also discusses how Netflix employs a hybrid of serverless and microservice architectures and how they have designed their architecture to solve specific problems within the company.
#lesson
Erik discusses how Amazon utilizes a microservices architecture and how they built their own infrastructure and software to solve instead of leaning on another provider. He also discusses how Netflix employs a hybrid of serverless and microservice architectures and how they have designed their architecture to solve specific problems within the company.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
29. Google & Uber Backend Systems
Erik explains how Google's search engine architecture has evolved over time, starting with a monolithic architecture and eventually transitioning to microservices. He also highlights how Uber expanded its services by transitioning from a monolithic to a microservice architecture, allowing them to scale and customize their services for different markets.
#lesson
Erik explains how Google's search engine architecture has evolved over time, starting with a monolithic architecture and eventually transitioning to microservices. He also highlights how Uber expanded its services by transitioning from a monolithic to a microservice architecture, allowing them to scale and customize their services for different markets.
#lesson
Media is too big
VIEW IN TELEGRAM
30. Wrapping Up
Erik wraps up the course by discussing the importance of seeking out blogs and resources from reputable sources to expand your understanding and exposure to new ideas and backend architectures. He also highlights the main conclusions to take away from this course, including systematic planning, flexibility and scalability, and continuous learning.
#lesson
Erik wraps up the course by discussing the importance of seeking out blogs and resources from reputable sources to expand your understanding and exposure to new ideas and backend architectures. He also highlights the main conclusions to take away from this course, including systematic planning, flexibility and scalability, and continuous learning.
#lesson
Title: Front-End System Design
Description: Learn best practices for building scalable, high-performance web applications. Deep dive into front-end engineering: DOM APIs, virtualization, state management, and performance.
Link: https://frontendmasters.com/courses/frontend-system-design/
Time: 4 hours, 37 minutes
Lessons: 35 / 35
Tags: #course #frontendmasters #720p
Description: Learn best practices for building scalable, high-performance web applications. Deep dive into front-end engineering: DOM APIs, virtualization, state management, and performance.
Link: https://frontendmasters.com/courses/frontend-system-design/
Time: 4 hours, 37 minutes
Lessons: 35 / 35
Tags: #course #frontendmasters #720p
Frontendmasters
Front-End System Design: Advanced UI, Performance & Architecture Techniques to Ace Interviews
Learn best practices for building scalable, high-performance web applications. Deep dive into front-end engineering: DOM APIs, virtualization, state management, and performance.
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
1. Introduction
Evgenii Ray begins the course with an overview of front-end systems design, which includes API communication, UI data management, user interface interactions, and asset management. The course will dive into these areas and conclude with a simulated systems design interview exercise.
- https://github.com/EvgeniiRay/fundamentals-of-frontend-system-design
-
- https://static.frontendmasters.com/resources/2024-05-29-systems-design/frontend-system-design-fundamentals.pdf
#lesson
Evgenii Ray begins the course with an overview of front-end systems design, which includes API communication, UI data management, user interface interactions, and asset management. The course will dive into these areas and conclude with a simulated systems design interview exercise.
- https://github.com/EvgeniiRay/fundamentals-of-frontend-system-design
-
- https://static.frontendmasters.com/resources/2024-05-29-systems-design/frontend-system-design-fundamentals.pdf
#lesson
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
2. Box Model
Evgenii reviews the box model that every DOM element follows. Based on the box-sizing rule, an element's border and padding affect its measured content width. Inline elements do not respond to width and height properties. Block elements have an intrinsic height and default to 100% of the parent container width.
#lesson
Evgenii reviews the box model that every DOM element follows. Based on the box-sizing rule, an element's border and padding affect its measured content width. Inline elements do not respond to width and height properties. Block elements have an intrinsic height and default to 100% of the parent container width.
#lesson
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
3. Browser Formatting Context
Evgenii introduces the concept of a formatting context within a container. Elements within a context are shielded from the rules of external contexts, and new rulesets can be added by creating a new context. For example, setting a container's display property to flex or grid.
#lesson
Evgenii introduces the concept of a formatting context within a container. Elements within a context are shielded from the rules of external contexts, and new rulesets can be added by creating a new context. For example, setting a container's display property to flex or grid.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
4. Browser Positioning
Evgenii explains that the position CSS property allows elements to be removed from the "normal flow" of the page. The static property is the default and maintains the normal flow position. The relative property maintains the normal flow position. However, the final position is determined based on the values of the top, right, bottom, and left offsets. Other properties like absolute, fixed, and XXX completely remove the element from the normal flow, and the final position is based on the containing block.
#lesson
Evgenii explains that the position CSS property allows elements to be removed from the "normal flow" of the page. The static property is the default and maintains the normal flow position. The relative property maintains the normal flow position. However, the final position is determined based on the values of the top, right, bottom, and left offsets. Other properties like absolute, fixed, and XXX completely remove the element from the normal flow, and the final position is based on the containing block.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Reflow
Evgenii demonstrates the rendering pipeline as reflow occurs on the webpage. After the initial DOM and CSSOM subtrees are built, reflow will work through style, layout, paint, and composite phases. The pipeline required to paint the screen will rely either on the CPU or GPU, depending on the CSS properties used. GPU-based rendering will perform better than CPU-based rendering.
#lesson
Evgenii demonstrates the rendering pipeline as reflow occurs on the webpage. After the initial DOM and CSSOM subtrees are built, reflow will work through style, layout, paint, and composite phases. The pipeline required to paint the screen will rely either on the CPU or GPU, depending on the CSS properties used. GPU-based rendering will perform better than CPU-based rendering.
#lesson
❤1
Media is too big
VIEW IN TELEGRAM
6. Composition Layers
Evgenii explains the difference between render and graphic layers. A graphic layer is constructed when a render layer has 3D or perspective transform CSS properties. Graphic layers are also responsible for video, canvas, opacity animations, CSS filters, and z-index compositing. Graphic layers can drastically increase a web page's memory but perform better since they rely on the GPU.
#lesson
Evgenii explains the difference between render and graphic layers. A graphic layer is constructed when a render layer has 3D or perspective transform CSS properties. Graphic layers are also responsible for video, canvas, opacity animations, CSS filters, and z-index compositing. Graphic layers can drastically increase a web page's memory but perform better since they rely on the GPU.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
7. Browser Rendering
Evgenii revisits the browser rendering exercise and walks through building all formatting contexts, detecting elements outside normal flow, building a stacking context, and completing the DOM, RenderObject, RenderLayer, and GraphicLayer trees.
#lesson
Evgenii revisits the browser rendering exercise and walks through building all formatting contexts, detecting elements outside normal flow, building a stacking context, and completing the DOM, RenderObject, RenderLayer, and GraphicLayer trees.
#lesson
Media is too big
VIEW IN TELEGRAM
8. DOM & Querying
Evgenii reviews the global objects and class hierarchy in the DOM API. Query methods are also discussed, and their time complexity, memory cost, and algorithms are compared. In general, getElementById provides the best space and time complexity performance. The querySelector and querySelectorAll have slightly worse performance, but due to caching and browser optimizations, the performance will improve with repetitive runs.
#lesson
Evgenii reviews the global objects and class hierarchy in the DOM API. Query methods are also discussed, and their time complexity, memory cost, and algorithms are compared. In general, getElementById provides the best space and time complexity performance. The querySelector and querySelectorAll have slightly worse performance, but due to caching and browser optimizations, the performance will improve with repetitive runs.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
9. DOM Performance Best Practices
Evgenii shares some performance best practices when querying DOM elements. Simplifying query selectors or using IDs for core containers can provide easy performance gains. This lesson also discusses the performance costs of adding and removing elements.
#lesson
Evgenii shares some performance best practices when querying DOM elements. Simplifying query selectors or using IDs for core containers can provide easy performance gains. This lesson also discusses the performance costs of adding and removing elements.
#lesson
Media is too big
VIEW IN TELEGRAM
10. DOM Templating Exercise
Evgenii live codes an exercise that implements a card template. The HTML template element creates a fragment that can be manipulated without causing a reflow. Once the template is ready, it's added to the DOM using the appendChild method.
#lesson
Evgenii live codes an exercise that implements a card template. The HTML template element creates a fragment that can be manipulated without causing a reflow. Once the template is ready, it's added to the DOM using the appendChild method.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
11. Observer API
Evgenii introduces the Observer API, which includes APIs for detecting intersection, mutation, and resizing of elements. He walks through the Intersection Observer API. An observer is created from the IntersectionObserver constructor and configured with a callback and an object containing an element to check the intersection against and a threshold for the intersection.
#lesson
Evgenii introduces the Observer API, which includes APIs for detecting intersection, mutation, and resizing of elements. He walks through the Intersection Observer API. An observer is created from the IntersectionObserver constructor and configured with a callback and an object containing an element to check the intersection against and a threshold for the intersection.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Infinite Scroll with IntersectionObserver
Students are instructed to implement an infinite scroll behavior using an intersection Observer. The observer is an element at the bottom of the pages. When it intersects the viewport, the next page of data will be loaded, and new card elements will be populated.
#lesson
Students are instructed to implement an infinite scroll behavior using an intersection Observer. The observer is an element at the bottom of the pages. When it intersects the viewport, the next page of data will be loaded, and new card elements will be populated.
#lesson
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