Module 1 - Introduction
1. Welcome to the course2. Why Go3. Why start and build a blog?4. What about React/Vue/Angular?5. Getting setup and source filesModule 2 - Tech Stack Walkthrough
1. Introduction to Golang Part 12. Introduction to Golang Part 23. Introduction to Golang Part 34. Structuring Golang Applications5. Templating with Templ6. Just enough interactivity with HTMX7. Getting started with postgres8. Servers, routers and endpointsModule 3 - Creating the MVP
1. What are the minimal requirements?2. Doing some initial plumbing3. Embedding static assets4. Creating our first views5. Tailwind & Utility-first CSS6. Styling the Landing Page7. Styling the Article PageModule 4 - Managing Content
1. Choose your own adventure2. Writing in Markdown3. Parsing Markdown to HTML4. Frontmatter and Meta Information5. Making our code examples look nice6. Adding error pagesModule 5 - Adding the Database
1. What is a Migration?2. Our first migration: articles table3. Creating the Database Layer4. Showing the Latest Posts5. Slugs and Human Readable URLsModule 6 - Managing the Blog
1. What are the minimum requirements?2. A new layout approaches3. Introduction to authentication4. Our second migration: Users Table5. Storing passwords securely6. Authenticating users Part One7. Authenticating users Part Two8. Remember me/Forget me9. Managing posts using a hypermedia API10. Our third migration: Altering Posts Table11. Only show posts marked readyModule 7 - Adding Subscribers
1. What are the minimum requirements?2. Our fourth migration: Subscribers Table3. Creating the subscription form4. Adding some interactivity with HTMX5. Saving new subscribers in the database6. Verifying subscriber emails7. Our fifth migration: Tokens Table8. Email validation view9. Email validation tokens10. Sending validation emails with SES11. Making it all come togetherTech Stack Walkthrough
Just enough interactivity with HTMX
Summary
In this video, I provide a short introduction to HTMX, following up on my discussion from module 1 about alternatives to React, Vue, and Svelte. I demonstrate how HTMX allows us to build modern, interactive applications with less complexity and a 67% smaller codebase compared to React. I show a simple example of a UI where clicking buttons triggers surgical updates to specific page elements without full page refreshes. Using code examples, I explain how HTMX attributes like HX-GET, HX-TARGET, and HX-SWAP enable elements beyond just anchor tags and forms to make HTTP requests. I promise that while this introduction might seem complex, HTMX usage will become clearer as we continue building our blog throughout the course.
Transcript
In module 1, I talked about how I don't think you should use something like React or Vue or Swelt to build all of your applications, and how using a tool like HTMX, we can still build modern applications that have just enough interactivity without a lot of complexity overhead. So in this video, I want to give you a short introduction to HTMX. We are going to be doing something very simple, and we're not going to be diving too deep into it because it will come throughout the rest of the course. So this will just give you a feeling of what HTMX tries to do and how it works. Let's start by taking a look at the HTMX website. And as we can see here, HTMX gives us access to Ajax, to CSS Transitions, to WebSockets, to Servers and Events. We get a dependency that is dependency-free, so we don't have anything downstream that can potentially be a security threat or break our application. It also has a reduced code base. And as you can read here, 67% compared to React. So this is a big, big reduction, right? And the motivation is we want to be able to, or it would be nice at least, to be able to make HTTP requests with more elements than just the anchor tag and the form element. And we would like to be able to do things on events other than click and submit. And we would like to be able to delete requests and put requests. And I think the last point is probably one of the most important in terms of a modern UI is we don't want to replace the entire screen every time we make a change, right? So HTMX allows us to surgically update, let's just use that word, the UI with the elements that need to be updated. So let's jump in and see like a very simplified example of a UI that only updates what needs to get updated. This is a very bare-bone UI. I basically just added Tailwind, added some colors, placed it for a navbar and a footer, and then two components where we have one to showcase article cards and to load new articles, and then a red one over here that will show whatever article is selected. So if I now click on IAM Article 1, you can see that only this component over here gets updated, and you can see that we have IAM Article 1. If I now press Load Articles, we get in a new one. If I press that, again, we only update this one over here. This one doesn't update unless I click Load Articles. Again, a third article gets updated over here. I can go back to 2, 1, and we don't have a full page refresh. This feels very interactive. It feels very smooth and quick, and this is what HMX allows us to do, and we can do way more crazy stuff than this. We can update elements that are completely foreign to the flow that we're doing, so some action can influence a lot of other elements on the page, not only one element as we see here. So how this works is basically we can send back fragments whenever we do a request, and HMX allows us to do these requests from elements that are not an anchor tag or a form element. So let me show you how this works in the code. Let's start in main.go file, where most of these things should start to look pretty familiar to you. We just have some handlers that we register on some routes, some endpoints, and then we just serve this application on port 8080. However, you can see that I now have these things that I have chosen to call fragments, so an article card fragment and an article fragment that we serve under load articles and then load article with a specific article number. This is not really too relevant to how HMX works, but essentially this is all just a GET request to fetch some data. Now, if we jump out and into our views.templ file, you can see that we now have a little bit more than last time, but we basically again have the base template and then our home or home page or home component. If you look at this button right here, we can see that we now have some new attributes that is not really normal in the standard HTML. So we have this HX GET and HX TARGET and HX SWAP. And what this does is whenever we click this button, it will trigger a request to the endpoint load articles, and then we can target a specific element of the UI and we can be very flexible. We can use CSS selectors. So here I basically tell it pick the next span element you find and then swap it out before it begins. So this is where what you saw before where we have article number one card and then another one comes on top and another one and another one. And then we basically have the same thing here in our article card fragments where we now again have a HX GET request. So this is just an HMX request. Our target where we now target an ID and then we just swap the inner HTML. So we find the container or the element with this ID and then whatever is inside it, we swap out with what it receives. And what it receives whenever we call the load article and then article number was this one right here, the article fragment that we didn't pass some data. So this one will basically get inserted inside this diff right here because this diff has the article container. So if we go back to our main.go file, we can see that our load articles has this handler that calls it. It returns this article card fragment that we saw up here. And this one just gets added or appended before each one. So we always have the latest one. And then whenever we click one of these, we call the as you can see, we call the load article with a number and the load article with an article number is this one that has this handler where we we pass the article number out of the request and then we pass it to this article fragment that we didn't return. And this one then, as we have now made it quite clear, it gets inserted here and replaces all the content. So this is how you can start to think of updating specific elements of your page. You literally specify a target that you want to update with some sort of response. So your hypermedia API starts to look a lot more like what you see here with a article card fragment or an article fragment. It becomes these little pieces of UI components that you swap out, but you're still using endpoints. And these endpoints is so tightly coupled to how your applications work that you will notice right away if something doesn't work and you only have to make it work on your browser, right? Then it will work on all the other clients because it's the same environment. And this makes the whole process of working with a UI very intertwined into the rest of the workflow. Because as we'll see later on when we start to add the database, service logic, all of that, our handler, our controller will literally just take in a request, do whatever it needs to do, and then return the data. And you'd stay in the same code throughout the entire flow. And this makes working with application in this way go very, very fast. So this is a very short introduction to HCMX. I hope it's not too confusing. We will be using HCMX quite a lot throughout this course. So if you're still in a bit of doubt or don't really understand what is going on, I promise you it will start to make sense as we start to build out our blog and our UI more.