Media is too big
VIEW IN TELEGRAM
5. Understanding HATEOAS
ThePrimeagen introduces the concept of HATEOAS (Hypermedia as the Engine of Application State) and explains how it differs from the traditional approach of using the HTML state to drive program changes. They also discuss the layers of state in modern web development and how HTML can be used as the engine of application state. The lesson concludes with a brief overview of htmx, including its events, HTML reduction capabilities, and redirection options.
- https://theprimeagen.github.io/fem-htmx/lessons/htmx-basics/htmx-basics#principle-hateoas
#lesson
ThePrimeagen introduces the concept of HATEOAS (Hypermedia as the Engine of Application State) and explains how it differs from the traditional approach of using the HTML state to drive program changes. They also discuss the layers of state in modern web development and how HTML can be used as the engine of application state. The lesson concludes with a brief overview of htmx, including its events, HTML reduction capabilities, and redirection options.
- https://theprimeagen.github.io/fem-htmx/lessons/htmx-basics/htmx-basics#principle-hateoas
#lesson
Media is too big
VIEW IN TELEGRAM
6. Arguments Against HTMX
ThePrimeagen addresses common arguments against using HTMX. They explain that servers already understand the representation of the client through JSON, and accept headers can be used to request data in different formats. They also discuss the process of producing HTML and argue that it is not slower than producing JSON. They also mention the importance of testing and measuring performance and share their thoughts on Node.js templating engines.
- https://theprimeagen.github.io/fem-htmx/lessons/htmx-basics/htmx-basics#common-arguments
#lesson
ThePrimeagen addresses common arguments against using HTMX. They explain that servers already understand the representation of the client through JSON, and accept headers can be used to request data in different formats. They also discuss the process of producing HTML and argue that it is not slower than producing JSON. They also mention the importance of testing and measuring performance and share their thoughts on Node.js templating engines.
- https://theprimeagen.github.io/fem-htmx/lessons/htmx-basics/htmx-basics#common-arguments
#lesson
Media is too big
VIEW IN TELEGRAM
7. Using hx-target with Templates
ThePrimeagen debugs an issue with a web application where the response HTML is being placed in the wrong element. They identify the problem and solve it by setting a target element using the hx-target attribute. They then demonstrate how to make the code more efficient by rendering only the necessary content using a template block. Finally, they show how to further optimize the code by targeting a specific div element for replacement instead of the entire body.
#lesson
ThePrimeagen debugs an issue with a web application where the response HTML is being placed in the wrong element. They identify the problem and solve it by setting a target element using the hx-target attribute. They then demonstrate how to make the code more efficient by rendering only the necessary content using a template block. Finally, they show how to further optimize the code by targeting a specific div element for replacement instead of the entire body.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Building a Form
ThePrimeagen explains how to add interactivity to a basic HTML form using JavaScript. They demonstrate how to create a form that takes in a name and email, and when the user clicks the submit button, the name and email are added to a server and displayed in a list. The instructor also mentions different techniques and frameworks that can be used for interactivity, such as React, htmx, and web components.
- https://theprimeagen.github.io/fem-htmx/lessons/htmx-basics/htmx-swap
#lesson
ThePrimeagen explains how to add interactivity to a basic HTML form using JavaScript. They demonstrate how to create a form that takes in a name and email, and when the user clicks the submit button, the name and email are added to a server and displayed in a list. The instructor also mentions different techniques and frameworks that can be used for interactivity, such as React, htmx, and web components.
- https://theprimeagen.github.io/fem-htmx/lessons/htmx-basics/htmx-swap
#lesson
Media is too big
VIEW IN TELEGRAM
9. Contacts List & Endpoint
ThePrimeagen explains how to create a contacts object and an endpoint for posting contacts in an index.html file. They demonstrate creating a struct for contacts, a function for creating a new contact, and a struct for data. They also show how to append new contacts to the data object and render it on the page.
#lesson
ThePrimeagen explains how to create a contacts object and an endpoint for posting contacts in an index.html file. They demonstrate creating a struct for contacts, a function for creating a new contact, and a struct for data. They also show how to append new contacts to the data object and render it on the page.
#lesson
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