Media is too big
VIEW IN TELEGRAM
9. Deopt Explorer & Fixing a Deopt
Miško introduces a tool called deopt explorer, which provides insights into the performance of JavaScript code running in V8, the JavaScript engine used in Node.js. How to generate a log of V8's compilation and optimization events and how to analyze this log using deopt explorer is also covered in this segment.
#lesson
Miško introduces a tool called deopt explorer, which provides insights into the performance of JavaScript code running in V8, the JavaScript engine used in Node.js. How to generate a log of V8's compilation and optimization events and how to analyze this log using deopt explorer is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Object Shapes & Hidden Classes
Miško discusses the performance implications of property reads in JavaScript objects and the impact of polymorphic behavior and inline caching. How JavaScript objects are represented internally in V8 and how hidden classes are used to optimize property access are also discussed in this segment.
#lesson
Miško discusses the performance implications of property reads in JavaScript objects and the impact of polymorphic behavior and inline caching. How JavaScript objects are represented internally in V8 and how hidden classes are used to optimize property access are also discussed in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Object Shapes & Inline Caching
Miško demonstrates the performance implications of using inline caching, discusses how inline caches work, and how they can optimize property access. Consider the shape of objects in your code and how inline caches can impact real-world performance, especially in complex frameworks and applications.
#lesson
Miško demonstrates the performance implications of using inline caching, discusses how inline caches work, and how they can optimize property access. Consider the shape of objects in your code and how inline caches can impact real-world performance, especially in complex frameworks and applications.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Inspecting Inline Caches with Deopt Explorer
Miško demonstrates using deopt explorer to analyze JavaScript code, highlighting various aspects such as inline caches, deoptimizations, and object shapes The significance of monomorphic and polymorphic reads in optimizing code execution is also discussed in this segment.
#lesson
Miško demonstrates using deopt explorer to analyze JavaScript code, highlighting various aspects such as inline caches, deoptimizations, and object shapes The significance of monomorphic and polymorphic reads in optimizing code execution is also discussed in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
13. Double & Triple Equals
Miško discusses how JavaScript's equality operators, triple equals (strict equality) is generally faster than double equals (loose equality) due to the absence of type coercion. A demonstration of how adding properties to objects or prototypes can unexpectedly impact the performance of double equals comparisons is also provided in this segment.
#lesson
Miško discusses how JavaScript's equality operators, triple equals (strict equality) is generally faster than double equals (loose equality) due to the absence of type coercion. A demonstration of how adding properties to objects or prototypes can unexpectedly impact the performance of double equals comparisons is also provided in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
14. Object & Array Copying
Miško discusses using JSX, which converts into object literals, leading to potential performance issues when converting these object literals into DOM attributes. Benchmark comparisons between different approaches, such as using objects, arrays, and copying objects, to highlight the performance differences and considerations when working with JSX in real applications are also provided in this segment.
#lesson
Miško discusses using JSX, which converts into object literals, leading to potential performance issues when converting these object literals into DOM attributes. Benchmark comparisons between different approaches, such as using objects, arrays, and copying objects, to highlight the performance differences and considerations when working with JSX in real applications are also provided in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Negative Numbers
Miško explores a JavaScript behavior where using negative zero (-0) can lead to slower performance compared to performing zero minus X (0 - X). This phenomenon arises from how JavaScript handles negative zero as a floating-point number, which can disrupt compiler optimizations when accessing properties or arrays with integers, resulting in performance differences between browsers.
#lesson
Miško explores a JavaScript behavior where using negative zero (-0) can lead to slower performance compared to performing zero minus X (0 - X). This phenomenon arises from how JavaScript handles negative zero as a floating-point number, which can disrupt compiler optimizations when accessing properties or arrays with integers, resulting in performance differences between browsers.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Holey Arrays
Miško discusses the concept of "holy arrays" in JavaScript, which are arrays that contain holes or undefined values. Reading values from holy arrays can lead to performance issues due to the need to traverse the prototype chain to resolve undefined values, making optimization challenging for JavaScript engines.
#lesson
Miško discusses the concept of "holy arrays" in JavaScript, which are arrays that contain holes or undefined values. Reading values from holy arrays can lead to performance issues due to the need to traverse the prototype chain to resolve undefined values, making optimization challenging for JavaScript engines.
#lesson
Media is too big
VIEW IN TELEGRAM
17. Amdahl’s Law
Miško discusses Amdahl's Law, which highlights the importance of optimizing code that has a significant impact on the overall application performance rather than just focusing on small, infrequently executed portions. How modern CPUs and virtual machines work together to create the illusion of running JavaScript is also discussed in this segment.
#lesson
Miško discusses Amdahl's Law, which highlights the importance of optimizing code that has a significant impact on the overall application performance rather than just focusing on small, infrequently executed portions. How modern CPUs and virtual machines work together to create the illusion of running JavaScript is also discussed in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
18. Wrapping Up
Miško wraps up the course by discussing tools for static analysis and performance evaluation. The complexities of CPU caching and modern compiler optimizations is also covered in this segment.
#lesson
Miško wraps up the course by discussing tools for static analysis and performance evaluation. The complexities of CPU caching and modern compiler optimizations is also covered in this segment.
#lesson
Title: CSS Projects
Description: Looking to practice your CSS skills? Work through five distinct projects to practice writing semantic HTML, mobile-first designs, media queries, and CSS layout techniques.
Link: https://frontendmasters.com/courses/css-projects/
Time: 5 hours, 1 minutes
Lessons: 31 / 31
Tags: #course #frontendmasters #720p
Description: Looking to practice your CSS skills? Work through five distinct projects to practice writing semantic HTML, mobile-first designs, media queries, and CSS layout techniques.
Link: https://frontendmasters.com/courses/css-projects/
Time: 5 hours, 1 minutes
Lessons: 31 / 31
Tags: #course #frontendmasters #720p
Frontendmasters
CSS Projects Deep Dive | Practice Layouts & Responsive Design with Jen Kramer
Looking to practice your CSS skills? Work through five distinct projects to practice writing semantic HTML, mobile-first designs, media queries, and CSS layout techniques.
Media is too big
VIEW IN TELEGRAM
1. Introduction
Jen Kramer introduces the course by providing an overview of the course material and answering student questions regarding frameworks, the latest CSS features, and how to practice CSS. Each course project is broken into 4 steps: study the screenshots, semantic HTML, mobile layout, and additional layouts.
- https://projects.css.education/
#lesson
Jen Kramer introduces the course by providing an overview of the course material and answering student questions regarding frameworks, the latest CSS features, and how to practice CSS. Each course project is broken into 4 steps: study the screenshots, semantic HTML, mobile layout, and additional layouts.
- https://projects.css.education/
#lesson
Media is too big
VIEW IN TELEGRAM
2. Style Guide Overview
Jen walks through a screenshot of a finished version of the Style Guide project and the starting CodePen content. Students are instructed to complete the instructions for the Style Guide challenge 1A.
- https://projects.css.education/ch1.html
- https://codepen.io/jen4web/pen/yLQddYV
#lesson
Jen walks through a screenshot of a finished version of the Style Guide project and the starting CodePen content. Students are instructed to complete the instructions for the Style Guide challenge 1A.
- https://projects.css.education/ch1.html
- https://codepen.io/jen4web/pen/yLQddYV
#lesson
Media is too big
VIEW IN TELEGRAM
3. Style Guide: Fonts & Font Sizes
Jen walks through the solution to the font and font sizes portion of the Style Guide project. Creating a font scale, CSS variables, and utilizing calc() is also covered in this segment.
- https://projects.css.education/ch1.html
- https://codepen.io/jen4web/pen/yLQddYV
#lesson
Jen walks through the solution to the font and font sizes portion of the Style Guide project. Creating a font scale, CSS variables, and utilizing calc() is also covered in this segment.
- https://projects.css.education/ch1.html
- https://codepen.io/jen4web/pen/yLQddYV
#lesson
Media is too big
VIEW IN TELEGRAM
4. Style Guide: Image & Links
Jen demonstrates styling the image and links in the Style Guide project, including the image size and rounding the image corners. Inheritance, the box model, and styling the header are also covered in this segment.
#lesson
Jen demonstrates styling the image and links in the Style Guide project, including the image size and rounding the image corners. Inheritance, the box model, and styling the header are also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Style Guide: Colors
Jen adds a highlight color with a gradient to the fancy-text class and adds styling to the color blocks. The selector for all immediate children and border-box sizing are also discussed in this segment.
#lesson
Jen adds a highlight color with a gradient to the fancy-text class and adds styling to the color blocks. The selector for all immediate children and border-box sizing are also discussed in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Columns & Cover Overview
Jen walks through a screenshot of a finished version of the Columns & Cover project and the starting CodePen content. Students are then instructed to write the semantic HTML for challenge 1B.
- https://projects.css.education/ch1.html
- https://codepen.io/jen4web/pen/yLQmeQG
#lesson
Jen walks through a screenshot of a finished version of the Columns & Cover project and the starting CodePen content. Students are then instructed to write the semantic HTML for challenge 1B.
- https://projects.css.education/ch1.html
- https://codepen.io/jen4web/pen/yLQmeQG
#lesson
Media is too big
VIEW IN TELEGRAM
7. Column & Cover: Semantic HTML
Jen walks through defining the Column and Cover project's semantic HTML and answers a student's question regarding the target attribute. Semantic HTML elements clearly describe the meaning of their contents in a human and machine-readable way.
#lesson
Jen walks through defining the Column and Cover project's semantic HTML and answers a student's question regarding the target attribute. Semantic HTML elements clearly describe the meaning of their contents in a human and machine-readable way.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Column & Cover: Mobile Layout
Jen instructs students to define the mobile layout for the Column and Cover project and then walks through the solution. Student questions regarding if grid can have dynamic rows, changing a grid item's display order, and using a figure instead of a div element are also covered in this segment.
#lesson
Jen instructs students to define the mobile layout for the Column and Cover project and then walks through the solution. Student questions regarding if grid can have dynamic rows, changing a grid item's display order, and using a figure instead of a div element are also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Column & Cover: Media Queries
Jen instructs students to utilize media queries and create the tablet version of the application. The solution to the tablet layout and student questions regarding object-fit and object-position are also provided in this segment.
#lesson
Jen instructs students to utilize media queries and create the tablet version of the application. The solution to the tablet layout and student questions regarding object-fit and object-position are also provided in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Columns & Cover: Desktop Layout
Jen instructs students to define the CSS for the desktop version of the application and then walks through the solution. Utilizing grid columns to automatically divide text and what happens when a selector is in two different breakpoints is also covered in this segment.
#lesson
Jen instructs students to define the CSS for the desktop version of the application and then walks through the solution. Utilizing grid columns to automatically divide text and what happens when a selector is in two different breakpoints is also covered in this segment.
#lesson