Best of HTMX — July 2024

1. 1
   Article

   Hacker News·2y

   Modern web applications in pure Python

   FastHTML enables the creation of modern web applications using pure Python, leveraging solid web foundations and offering seamless scalability. With the ability to utilize any Python or JS library, FastHTML provides flexibility and speed, making it ideal for various applications from dashboards to scalable SPAs. Deployment options are versatile, supporting any service or server compatible with Python, and users familiar with FastAPI will find transitioning to FastHTML intuitive. Additionally, incorporating HTMX can enhance functionality by filling in web browser gaps with a lightweight JavaScript library.

   84
2. 2
   Article

   TestDriven.io·2y

   Using HTMX with FastAPI

   Learn how to integrate HTMX with FastAPI by creating a simple todo app. This guide covers setting up the environment, creating endpoints to handle CRUD operations, and deploying the app on Render. The combination of FastAPI and HTMX facilitates efficient server-side rendering, minimizing client-side logic and providing a seamless user experience. Included are techniques for rendering HTML conditionally based on request headers and leveraging Jinja2 templates for dynamic content.

   61

   1
3. 3
   Video

   Net Ninja·2y

   HTMX Tutorial for Beginners #1 - What is HTMX?

   HTMX is a JavaScript library for creating dynamic web applications using a hypermedia-driven approach. It extends HTML's hypermedia controls, enabling interactions with the server through simple attributes without extensive client-side JavaScript. The tutorial introduces HTMX, compares it to other frameworks like React, and sets the stage for building a reading list application using Node.js and Express for the backend.

   37

   1
4. 4
   Video

   Net Ninja·2y

   HTMX Tutorial for Beginners #4 - Using hx-swap & hx-target

   Learn how to use the hx-swap and hx-target attributes in HTMX to control how and where HTML content is injected on a webpage. This guide explains swapping content within elements and targeting specific areas for content injection using CSS selectors. Various swap strategies and target keywords are discussed to give you full flexibility in manipulating HTML responses.

   18
5. 5
   Video

   Net Ninja·2y

   HTMX Tutorial for Beginners #2 - Starter Project Setup

   This tutorial guides beginners on setting up a starter project using Node.js and Express. It covers initializing the project, installing dependencies, and setting up the Express app with basic configurations. The tutorial also introduces templating using JavaScript template strings and integrates HTMX for future HTML manipulations. Additional resources and a data file for dynamic content are provided for further steps.

   14
6. 6
   Video

   Net Ninja·2y

   HTMX Tutorial for Beginners #7 - Events & hx-on

   Learn how to react to events using JavaScript within HTMX. The tutorial covers adding event listeners to elements, handling standard browser events, and using HTMX-specific events such as 'afterRequest'. Understand how to clear form fields after submitting a request and accessing event objects for more control over interactions.

   13

   1