Media is too big
VIEW IN TELEGRAM
10. Error Handling
ThePrimeagen discusses the problem of displaying form errors and handling form submissions in an HTMX application. They demonstrate how to handle form errors by returning a 422 status code from the server and updating the form with error messages. They also show how to use the `hx:BeforeSwap` event to customize the behavior of HTMX when handling 422 responses.
#lesson
ThePrimeagen discusses the problem of displaying form errors and handling form submissions in an HTMX application. They demonstrate how to handle form errors by returning a 422 status code from the server and updating the form with error messages. They also show how to use the `hx:BeforeSwap` event to customize the behavior of HTMX when handling 422 responses.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Out-of-Band Updates
ThePrimeagen demonstrates how to implement out-of-band updates using HTMX. They discuss the concept of out-of-band updates and show how to use the hx-swap-oob and afterbegin to update specific parts of the DOM without replacing the entire page. They also address some common issues that may arise when implementing out-of-band updates.
#lesson
ThePrimeagen demonstrates how to implement out-of-band updates using HTMX. They discuss the concept of out-of-band updates and show how to use the hx-swap-oob and afterbegin to update specific parts of the DOM without replacing the entire page. They also address some common issues that may arise when implementing out-of-band updates.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Swaps Recap
ThePrimeagen reviews some HTML code and discusses potential errors or mistakes that may have been made. They also provide some tips and recommendations for testing and debugging HTMX code. The lesson also briefly touches on the use of the Echo framework for HTML serialization.
#lesson
ThePrimeagen reviews some HTML code and discusses potential errors or mistakes that may have been made. They also provide some tips and recommendations for testing and debugging HTMX code. The lesson also briefly touches on the use of the Echo framework for HTML serialization.
#lesson
Media is too big
VIEW IN TELEGRAM
13. Adding a Delete Icon
ThePrimeagen discusses adding a delete icon to a contact address using HTMX. They explain how HTMX allows the use of actual verbs for endpoints, eliminating the need for complex path structures. The instructor also demonstrates how to style the delete icon and add a pointer cursor effect.
- https://theprimeagen.github.io/fem-htmx/lessons/htmx-basics/deleting-and-events
#lesson
ThePrimeagen discusses adding a delete icon to a contact address using HTMX. They explain how HTMX allows the use of actual verbs for endpoints, eliminating the need for complex path structures. The instructor also demonstrates how to style the delete icon and add a pointer cursor effect.
- https://theprimeagen.github.io/fem-htmx/lessons/htmx-basics/deleting-and-events
#lesson
Media is too big
VIEW IN TELEGRAM
14. Deleting Contacts
ThePrimeagen explains how to implement inline deleting in HTML using the hx-delete attribute. They demonstrate how to specify the endpoint and target element for the delete request, and also discuss the use of the hx-swap and hx-target attributes to control the behavior of the deletion. They also show how to handle the delete request on the server side and update the UI accordingly.
#lesson
ThePrimeagen explains how to implement inline deleting in HTML using the hx-delete attribute. They demonstrate how to specify the endpoint and target element for the delete request, and also discuss the use of the hx-swap and hx-target attributes to control the behavior of the deletion. They also show how to handle the delete request on the server side and update the UI accordingly.
#lesson
Media is too big
VIEW IN TELEGRAM
15. hx-indicator & Swap Delays
ThePrimeagen demonstrates how to add interactivity to a web page using HTMX. They start by adding a time delay to make the interaction more noticeable and then introduce the concept of indicators to show the progress of a request. They also explain how to use swap delays to create smooth transitions when elements are swapped out on the page.
#lesson
ThePrimeagen demonstrates how to add interactivity to a web page using HTMX. They start by adding a time delay to make the interaction more noticeable and then introduce the concept of indicators to show the progress of a request. They also explain how to use swap delays to create smooth transitions when elements are swapped out on the page.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Controlling the URL & Redirection
ThePrimeagen demonstrates how to create a contacts page with the ability to delete contacts and update the URL accordingly. Additionally, they explain how to handle infinite scrolling and filtering using HTMX. They emphasize the engineering aspect of HTMX and encourage a step-by-step approach to problem-solving.
- https://theprimeagen.github.io/fem-htmx/lessons/htmx-patterns/patterns
#lesson
ThePrimeagen demonstrates how to create a contacts page with the ability to delete contacts and update the URL accordingly. Additionally, they explain how to handle infinite scrolling and filtering using HTMX. They emphasize the engineering aspect of HTMX and encourage a step-by-step approach to problem-solving.
- https://theprimeagen.github.io/fem-htmx/lessons/htmx-patterns/patterns
#lesson
Media is too big
VIEW IN TELEGRAM
17. Wrapping Up
ThePrimeagen wraps up the course by discussing various topics related to HTMX, including the use cases where HTMX may not be suitable, the integration of HTMX with other frameworks like React, preserving state without form submission, and the use of CSS syntax. The instructor also answers some questions from the audience.
#lesson
ThePrimeagen wraps up the course by discussing various topics related to HTMX, including the use cases where HTMX may not be suitable, the integration of HTMX with other frameworks like React, preserving state without form submission, and the use of CSS syntax. The instructor also answers some questions from the audience.
#lesson
Title: Blazingly Fast JavaScript
Description: Learn advanced JavaScript performance optimization: garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Learn performance-driven programming, preparing you to write blazingly fast and efficient code!
Link: https://frontendmasters.com/courses/blazingly-fast-js/
Time: 3 hours, 32 minutes
Lessons: 20 / 20
Tags: #course #frontendmasters #720p
Description: Learn advanced JavaScript performance optimization: garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Learn performance-driven programming, preparing you to write blazingly fast and efficient code!
Link: https://frontendmasters.com/courses/blazingly-fast-js/
Time: 3 hours, 32 minutes
Lessons: 20 / 20
Tags: #course #frontendmasters #720p
Frontendmasters
JavaScript Performance Optimization Techniques
Learn advanced JavaScript performance optimization: garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Learn performance-driven programming, preparing you to write blazingly fast and efficient code!
❤1
Media is too big
VIEW IN TELEGRAM
1. Introduction
ThePrimeagen introduces the topic of JavaScript performance optimization. They discuss the misconception around premature optimization and the importance of thinking about efficiency. The instructor also mentions that the course will focus on using tools available in Chrome to identify bottlenecks and make performance improvements.
- https://theprimeagen.github.io/fem-jsperf/
#lesson
ThePrimeagen introduces the topic of JavaScript performance optimization. They discuss the misconception around premature optimization and the importance of thinking about efficiency. The instructor also mentions that the course will focus on using tools available in Chrome to identify bottlenecks and make performance improvements.
- https://theprimeagen.github.io/fem-jsperf/
#lesson
Media is too big
VIEW IN TELEGRAM
2. Requirements
ThePrimeagen provides instructions for installing Rust, Golang, and the required versions of Node.js. The optimizations will be available in different branches, allowing students to follow along even if they encounter difficulties.
- https://github.com/ThePrimeagen/js-perf-example
#lesson
ThePrimeagen provides instructions for installing Rust, Golang, and the required versions of Node.js. The optimizations will be available in different branches, allowing students to follow along even if they encounter difficulties.
- https://github.com/ThePrimeagen/js-perf-example
#lesson
Media is too big
VIEW IN TELEGRAM
3. Web Sockets Game Demo
ThePrimeagen provides an overview of a basic game program they have created. The lesson also covers the code for the server, runner, ticker, and game loop, as well as addressing questions from the audience. The instructor mentions a problem with frames overflowing or underflowing and sets a goal to reduce this issue to below 25%.
- https://theprimeagen.github.io/fem-jsperf/lessons/shooter-program/our-first-program
#lesson
ThePrimeagen provides an overview of a basic game program they have created. The lesson also covers the code for the server, runner, ticker, and game loop, as well as addressing questions from the audience. The instructor mentions a problem with frames overflowing or underflowing and sets a goal to reduce this issue to below 25%.
- https://theprimeagen.github.io/fem-jsperf/lessons/shooter-program/our-first-program
#lesson
Media is too big
VIEW IN TELEGRAM
4. Running Benchmarks
ThePrimeagen discusses the concept of measuring performance in JavaScript. They introduce a utility they have created to visualize server performance, explain the importance of adjusting the file limit, and proceed to run tests with different numbers of connections to observe the server's performance. They also emphasize the need for multiple measurements to understand how performance changes with increasing input.
#lesson
ThePrimeagen discusses the concept of measuring performance in JavaScript. They introduce a utility they have created to visualize server performance, explain the importance of adjusting the file limit, and proceed to run tests with different numbers of connections to observe the server's performance. They also emphasize the need for multiple measurements to understand how performance changes with increasing input.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Inspecting & Debugging Performance
ThePrimeagen discusses an example of hotspot optimizations and how they can be used to improve the performance of a program. They demonstrate how to open the Chrome Debugger and use the performance and memory tabs to analyze the performance of a Node server. They provide examples and walk through the process of analyzing the performance of a program using the Chrome Debugger.
#lesson
ThePrimeagen discusses an example of hotspot optimizations and how they can be used to improve the performance of a program. They demonstrate how to open the Chrome Debugger and use the performance and memory tabs to analyze the performance of a Node server. They provide examples and walk through the process of analyzing the performance of a program using the Chrome Debugger.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Optimizing Code: Sets vs Array
ThePrimeagen discusses the performance of using sets versus arrays in JavaScript and analyzes a code example that compares the speed of finding unique characters using sets and arrays. They demonstrate that arrays can be faster than sets for smaller data sizes, but sets become more efficient as the data size increases. The importance of choosing the appropriate data structure based on the specific use case to optimize performance is also discussed in this segment.
#lesson
ThePrimeagen discusses the performance of using sets versus arrays in JavaScript and analyzes a code example that compares the speed of finding unique characters using sets and arrays. They demonstrate that arrays can be faster than sets for smaller data sizes, but sets become more efficient as the data size increases. The importance of choosing the appropriate data structure based on the specific use case to optimize performance is also discussed in this segment.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
7. Refactoring Set to Array
ThePrimeagen updates the code to use an array instead of a set for storing bullets in a game. They explain the changes they made to the code, including removing the bullet set from the player state, creating a public bullets array, updating the update function to iterate over the bullets array, and modifying the createBullet function to push bullets into the array. They also run tests to ensure that the changes did not introduce any errors and measure the performance improvement of the updated code.
#lesson
ThePrimeagen updates the code to use an array instead of a set for storing bullets in a game. They explain the changes they made to the code, including removing the bullet set from the player state, creating a public bullets array, updating the update function to iterate over the bullets array, and modifying the createBullet function to push bullets into the array. They also run tests to ensure that the changes did not introduce any errors and measure the performance improvement of the updated code.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Garbage Collector
ThePrimeagen discusses garbage collection in JavaScript and how it affects performance. They explain the difference between major and minor garbage collection, as well as the generational hypothesis. The instructor also mentions the impact of garbage collection on servers and shares their experience with optimizing for reduced GCs.
- https://theprimeagen.github.io/fem-jsperf/lessons/i-promise-performance/gc
#lesson
ThePrimeagen discusses garbage collection in JavaScript and how it affects performance. They explain the difference between major and minor garbage collection, as well as the generational hypothesis. The instructor also mentions the impact of garbage collection on servers and shares their experience with optimizing for reduced GCs.
- https://theprimeagen.github.io/fem-jsperf/lessons/i-promise-performance/gc
#lesson
Media is too big
VIEW IN TELEGRAM
9. Memory Profiling
ThePrimeagen demonstrates how to use memory profiling tools to analyze memory allocation and identify areas of potential optimization. They also explain the significance of different memory regions and highlight the memory usage of certain functions and objects.
#lesson
ThePrimeagen demonstrates how to use memory profiling tools to analyze memory allocation and identify areas of potential optimization. They also explain the significance of different memory regions and highlight the memory usage of certain functions and objects.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Event Loop & Promises
ThePrimeagen discusses the impact of promises on performance in Node.js. They analyze the code and identify that a significant portion of the code execution and memory usage is related to promises. They also explain how promises are processed in the event loop and highlight that promises are not free and can have adverse effects on performance.
#lesson
ThePrimeagen discusses the impact of promises on performance in Node.js. They analyze the code and identify that a significant portion of the code execution and memory usage is related to promises. They also explain how promises are processed in the event loop and highlight that promises are not free and can have adverse effects on performance.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Refactoring Timer to Remove Promises
ThePrimeagen makes changes to improve the performance of the game loop. They remove the use of timers and instead create a ticker class that returns the next time the game loop should run. They also create a map of expiry callbacks and update the game loop function to use callback recursion instead of an async loop. The goal is to reduce the number of promises created and improve memory and CPU efficiency.
#lesson
ThePrimeagen makes changes to improve the performance of the game loop. They remove the use of timers and instead create a ticker class that returns the next time the game loop should run. They also create a map of expiry callbacks and update the game loop function to use callback recursion instead of an async loop. The goal is to reduce the number of promises created and improve memory and CPU efficiency.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Analyzing Results & Removing Async
ThePrimeagen discusses the results of the optimizations made in the previous lessons. They analyze the performance improvements and compare the before and after results. They also identify some remaining issues and discuss the importance of considering both performance and memory optimizations.
#lesson
ThePrimeagen discusses the results of the optimizations made in the previous lessons. They analyze the performance improvements and compare the before and after results. They also identify some remaining issues and discuss the importance of considering both performance and memory optimizations.
#lesson