The Complete HTMX Course: Zero to Pro with HTMX

Htmx compares to single page frameworks like Reactjs, Vuejs, and Angular by using a hypermedia driven approach that updates the dom natively, unlike JavaScript driven spa.

Use HTMX with hypermedia for apps where most value lives on the server and ui updates via html fragments; avoid it for highly complex front-end interactivity.

Explore how hypermedia APIs, guided by hypermedia as the engine of application state, define the UI state and next actions via links in responses, enabling loose coupling.

Discover HTMX resources: the official website, clear docs and API references, examples, talks, and a recommended book to master ajax, css transitions, web sockets, and hypermedia concepts.

Practice building a hello world with HTMX by posting to a hypermedia API endpoint and injecting the HTML fragment into the page DOM, using HTMX attributes and a REST server.

Learn to make http requests using HTMX attributes for get, post, put, and delete, triggering requests from any element and replacing the calling element with the server response.

Explore request triggers in RM to fire http requests on events beyond click, including mouse enter, mouse leave, and change; learn to use the trigger tag to customize triggers.

Explore trigger modifiers in htmx to control events, use once to fire a request only once, apply delay to schedule actions, and use from to trigger actions on other elements.

Attach a boolean condition to a trigger with trigger filters and a JavaScript expression. Explore numeric and string comparisons, including equals variants, to control API call and DOM update.

Learn htmx special events like load, revealed, and intersect to trigger http requests. See data load on page load and on viewport entry with threshold options and root targeting.

Poll content from the server with HTMX every five seconds, using the every trigger to fetch at intervals and append new content to a target div without replacing existing data.

Add a progress indicator to htmx requests by applying a dedicated class and using css selectors to show latency between client and server, then remove it when the response arrives.

Send data with htmx by using a form tag or inline json payload, and use hx-include to pull values from inputs into the request.

Learn how to use htmx with a confirm dialog to intercept a request, requiring user confirmation before posting to a message endpoint.

Upload files with HTMX by using a form with a file input named file posting to /upload, set multipart form data encoding, and receive hypermedia with the file path.

Master htmx synchronization to control race conditions and order asynchronous requests, using sync, drop, replace, and cue to set precedence between competing requests.

Learn to cancel in-flight htmx requests by wiring a cancel button to abort the targeted seven-second delay request, using a css selector.

See how htmx targets content by using the target attribute to load server responses into a destination div or a div identified by a class selector, preserving the original trigger.

Learn HTMX content swapping, using the swap attribute to replace a destination div with server-provided content, choosing inner HTML by default or outer HTML for a full replacement.

Learn how HTMX swap styles control where hypermedia loads in the destination using after begin, before begin, before end, and after end. Position and refine content loading precisely.

Learn to split server responses across multiple targets with htmx out-of-bound swaps, routing specific content to a second div with the id target two.

Learn to load a subset of a response by using the select attribute to target an element by id, and adjust the backend to support precise content loading.

Discover how htmx enables smooth content animation using css transitions without javascript, swapping a growing box from small to big via an endpoint and keeping the id consistent.

Learn to hook into the page load event with htmx and plain JavaScript, fetch users from an API on load via /users, and log the event to the console.

Hook into htmx before swap and after swap events to run operations around a swap. Log messages and access the swapped element via event.detail.el with the destination div.

Learn how htmx request events let you run code before and after a request using MX.on, display an alert before the request, and log the request headers after the request.

Learn to handle API request failures by listening to htmx's request-failure event for non-200 responses, alerting users, and logging status and status text for diagnostics.

Learn to automatically attach headers and parameters to every HTMX request using request interceptors. Add authorization headers and API keys via the config request event.

Learn to use HTMX's logger to capture every page activity—logging the element, event, and data for debugging and routing logs to an external service.

Explore the full htmx event library, including abort, before request, after swap, onload, after onload, after settle, and response error events to manage http requests.

Build a WebSocket server in nodejs and connect a front end to send and receive data. This project-based chapter covers setting up the server on port 5000 and client connections.

In the complete htmx course, connect the frontend to the websocket server on port 5000 using the ws attribute and localhost, and verify the client connections.

Send data from the front end to the WebSocket server with a chat message form. On the server, listen for the message event and log the chat message.

Learn to receive data from a WebSocket server by wiring the frontend chat box to display server responses and using socket.send with an out-of-bounds swap for bidirectional communication.

Shows streaming data over a persistent websocket connection with HTMX, sending messages every second and appending updates to the client in real time using before end.

Discover how HTMX pushes the current page state onto the browser history before an ajax call, enabling back and forward navigation between pre-click and loaded states.

Discover how htmx caches server responses out of the box by using the last-modified header and if-modified-since, demonstrated with a live demo of cached versus fresh requests.

Learn how HTMX security tools mitigate XSS, disable malicious HTML and JavaScript, and enforce domain-only requests using config options like allow script, allow evil, history, and self requests only.

Browse HTMX configuration options in the docs, adjusting history, history cache size, refresh on history miss, swap style, and timeout controls, customize request and indicator classes, and disable script tags.

Set up a full stack html todo app: dockerized mysql, seed tasks, and a node/express server using ejs templates with mysql2; create a base route to verify the setup.

Learn to load tasks in an HTMX app by returning HTML fragments from a server route and injecting them into a home page with the task list and form.

Add tasks with HTMX by rendering an add task form, posting the new task to the server, and refreshing the task list with fetch tasks.

Learn to implement task updates with HTMX by building an update form, loading it via ajax with a task id, and posting changes to the server to refresh the list.

Learn to add a delete endpoint and button to a to-do app using HTMX, including dynamic id handling, post requests, and returning an updated task list.