Table of Contents
IntroductionThePrimeagen introduces HTMX and shares personal experiences in the web programming world, reflecting on the evolution of technologies like jQuery and React. They express discontent with certain aspects of modern web development and explain why they find HTMX appealing for its simplicity and ease of use. The lesson covers various topics, including some history of hypermedia, the speaker's journey in web development, and their reasons for favoring HTMX.
Project SetupThePrimeagen provides instructions for setting up the necessary tools and dependencies for the course. They also emphasize the importance of actively engaging with the material and encourage students to use the Chrome debugger for troubleshooting.
Creating an HTTP ServerThePrimeagen guides the students through building a simple HTTP server using the Echo framework in Go. They explain how to set up the server, create an index page using HTML templates, and render the template with data. The final result is a server that displays a count of how many times the page has been requested.
Understanding HATEOASThePrimeagen 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.
Arguments Against HTMXThePrimeagen 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.
Using hx-target with TemplatesThePrimeagen 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.
Contacts List & EndpointThePrimeagen 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.
Error HandlingThePrimeagen 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.
Out-of-Band UpdatesThePrimeagen 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.
Swaps RecapThePrimeagen 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.
Adding a Delete IconThePrimeagen 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.
Deleting ContactsThePrimeagen 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.
hx-indicator & Swap DelaysThePrimeagen 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.
Controlling the URL & RedirectionThePrimeagen 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.
Wrapping UpThePrimeagen 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.