HTMX & Go

Table of Contents

• 

  Introduction

  00:00:00 - 00:07:02 View Transcript

  ThePrimeagen 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 Setup

  00:07:03 - 00:11:01 View Transcript

  ThePrimeagen 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 Server

  00:11:02 - 00:21:52 View Transcript

  ThePrimeagen 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.
• 

  Moving from HTML to HTMX

  00:21:53 - 00:25:50 View Transcript

  ThePrimeagen explains how to change from using HTML to using HTMX and demonstrates adding a post endpoint, removing incrementing from the GET route, and adding a button to the HTML that triggers a post request. They also mention using the HTMX JavaScript library and provide instructions on how to include it in the website.
• 

  Understanding HATEOAS

  00:25:51 - 00:30:22 View Transcript

  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.
• 

  Arguments Against HTMX

  00:30:23 - 00:36:33 View Transcript

  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.
• 

  Using hx-target with Templates

  00:36:34 - 00:43:03 View Transcript

  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.

• 

  Building a Form

  00:43:04 - 00:49:39 View Transcript

  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.
• 

  Contacts List & Endpoint

  00:49:40 - 00:54:40 View Transcript

  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.
• 

  Error Handling

  00:54:41 - 01:12:54 View Transcript

  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.
• 

  Out-of-Band Updates

  01:12:55 - 01:19:49 View Transcript

  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.
• 

  Swaps Recap

  01:19:50 - 01:24:27 View Transcript

  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.
• 

  Adding a Delete Icon

  01:24:28 - 01:28:21 View Transcript

  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.
• 

  Deleting Contacts

  01:28:22 - 01:35:46 View Transcript

  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.
• 

  hx-indicator & Swap Delays

  01:35:47 - 01:43:02 View Transcript

  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.

• 

  Controlling the URL & Redirection

  01:43:03 - 01:52:22 View Transcript

  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.

• 

  Wrapping Up

  01:52:23 - 02:01:12 View Transcript

  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.