Django & HTMX - Building Hypermedia Web Applications!

Learn the basics of HTML in a Django app, covering get and post, target and swap, event triggers, hypermedia content, HTML over the wire, template partials, and view transitions.

Clone the starter Django project from GitHub, create a virtual environment, and install Django and extensions. Run the development server to view the index and about pages.

Install the HTML library in Django by adding a simple script tag from a CDN. Explore base templates and static files, and test Ajax attributes with endpoints like /about.

Explore how Ajax requests power dynamic, background updates without full page reloads, using HTML attributes for get, post, put, and fetch API, with practical examples.

Learn to use hx-get to issue ajax get requests with HTML, letting an anchor tag fetch and replace content without a full page reload from Django views.

Demonstrate how an Ajax request returns HTML over the wire from the Django back end, swapping a template fragment via hypermedia, and using partial templates.

Learn how the hx-target attribute directs where server responses are injected by targeting a CSS selector or id. Build dynamic hypermedia content in Django by replacing specific page regions.

Explore how hx-swap controls Ajax response content swapping into a target element using inner HTML, outer HTML, and options like before end and after begin.

Explore how HTMX view transitions enable smooth content swaps in a multi-page app, using the swap attribute with transition true to animate between old and new DOM states.

Learn how the hx-trigger attribute determines when an Ajax request fires, using events such as click or mouseover, with modifiers like delay and once, plus defaults and polling notes.

Discover how the hx-select attribute swaps specific content from a server response into the page, using selectors or ids, alongside hx-get, hx-swap, hx-target, and hx-trigger.

Explore using the post attribute to submit forms with post requests in htmx, including CSRF handling in Django, form serialization, and how responses swap into the page body.

Handle post requests in a Django app by detecting HTML requests through headers, reading post data, and returning a partial HTML fragment (a product row) swapped into the table body.

Learn how the hex on attribute enables inline scripts for any JavaScript event, highlighting locality of behavior and use cases like the DMX after request event.

Explore how the hex boost attribute enables progressive enhancement by boosting anchors and forms to use Ajax with a safe fallback when JavaScript is disabled, preserving basic content.

Build a prototype book tracker with Django and HTML, featuring CRUD operations, tailwind css and daisy ui styling, plus alpine js, gsap, and sweet alert for dynamic interactions.

Clone chapter three starter code, rename to final code, push to final branch, then create a python venv, install Django and dependencies, and run the server to view book tracker.

Explore the starter Django project, review urls, views, and templates, and configure tailwind and daisy ui, plus Django all auth for login, register, and logout flows.

Learn how to model books in Django, define fields and choices, set created and updated timestamps, and create a many-to-many relationship between users and books, with migrations and admin integration.

Register user and book models with the Django admin, create a super user, and manage books and users through the admin UI, then link books to users and display them.

Display the authenticated user's books on their home page by querying request.user.books and rendering a Django template table with name and genre. Redirect anonymous users to the login page.

Build a Django book form with name and genre fields, using genre choices and Daisy UI, rendered in index.html, submitted via post, and linked to users by a many-to-many field.

Learn to customize Django form rendering with manual HTML: include CSRF token, render non-field errors, and display labeled fields inside a Daisy UI fieldset with a submit button.

Submit a form with hx-post in a Django app and inject the new book row at the top of the table using a partial and after begin swap.

Use hx-on to automate post requests, reset forms after requests, highlight new table rows with after settle, and apply dynamic styles via JavaScript.

Learn to handle Django form errors with htmx by validating submissions in a clean method, preventing duplicates, and returning the form with errors through a partial.

Learn to call custom JavaScript from HTML with hx-on to clear non-field errors and reset form fields, using Django static files and a main.js function.

Explore Django forms field-level validation by implementing a clean_name method to enforce a book name length between 5 and 10 characters, raising forms.ValidationError and displaying errors in the template.

Fix the empty table bug by removing the empty message when the first book is added, using a new remove empty books message function in JavaScript.

Add a delete button for each book in the user list using hx-delete. Wire a Django view and URL with CSRF handling to return a 204 response.

Explore how the hx-confirm attribute prompts before the Ajax delete request to prevent accidental deletions, and note Sweet Alert 2 as a zero-dependency improvement.

Integrate Sweet Alert two into a Django and HTML app, replacing browser confirms with customizable popups. Configure icons, themes, and button text, and wire actions via HTMX triggers.

Showcases an opacity transition for deleting a table row by fading it out with JavaScript and removing it from the DOM after one second.

Explore building spa-like interactivity in a Django app using htmx and alpine.js to fetch and update book details without full page reloads, including history push and dynamic forms.

Learn to fix hx-push-url page refresh by rendering a book detail partial for html requests and a full page for non-html requests, using a partials template and base extension.

Build responsive layouts with tailwind grid by adjusting column spans and order at breakpoints, ensuring mobile-friendly interfaces and adaptive front-end design for a table and form.

Explore active search with htmx in a Django app. Add a Daisy UI search input above the books table and send a get request to search URL to filter results.

Learn how to integrate gsap with htmx in html, applying simple tweens and timelines to animate delete actions, button scaling, and element transitions using a cdn-based setup.

Build a real-time chat app with django and html using WebSocket, Django channels, and Redis, store media on S3, style with Tailwind CSS and Daisy UI, and deploy to Render.

Install the chapter four starter code and set up a virtual environment for a Django project with allauth authentication. Migrate the database and run the server.

Define a Room model with a unique name and auto slug, and a Message model linked to room and user with content and created_at, then register in admin.

Query all chat rooms in the Django view, pass them as rooms to the template, and render each as a Daisy UI link with the room name.

Learn to build chat room detail page in Django and HTMX app, using slug routing, authenticated access, and navigation to a list page for messaging with WebSockets and Redis.

Display chat messages in a Django room by building a dynamic chat interface with Daisy UI and Tailwind, rendering each message's user, time, and content from the database.

Add a bottom-sticky chat form with a text input. Style it with Tailwind and Daisy UI, and enable HTML WebSocket submission to store messages and broadcast to chat room users.

Learn how the html websocket extension enables bidirectional chat by connecting to a websocket endpoint, sending form data, and broadcasting messages to all connected clients with django channels and redis.

Enable Django to handle WebSocket connections with Django channels and Daphne, adopting ASGI to bridge HTTP and WebSocket protocols and support duplex messaging via protocol type routers.

Enable real-time chat by applying HTMX WebSocket attributes to the chat form, connect to a dynamic room slug URL, and send messages through a Django channels consumer.

Define a Django channels consumer class to handle WebSocket connections, messages, and disconnect events, and wire routing to enable a chatroom WebSocket with connect and receive handling.

Save chat messages to the database by associating them with the chatroom and the authenticated user, using a WebSocket receive flow in Django Channels, and plan HTML responses as hypermedia.

Render an html message partial with render_to_string in the WebSocket receive method, then swap it into the chat box using before end, enabling real-time html updates.

Channel layers in Django channels enable communication between app instances and broadcasting to groups via group send, using in-memory or Redis backends for real-time chatrooms.

Configure Redis as the Django channels channel layer backend using Docker, install channels_redis, and test real-time messaging via the Django shell to enable pub sub communication between app components.

Broadcast chat messages to all users in a room using Django channels groups, with Redis as the channel layer backend, and group_send to broadcast.

Extend the user model with a profile picture image field, configure media settings, and build a settings page with a Django model form to upload profile pictures.

Learn how HTMX handles file uploads with hx-encoding to multipart form data, swapping the post response with the form to update Django user details and profile pictures.

Move Django media storage to Amazon S3 using Django storages, configure a bucket, IAM credentials, and environment variables, and ensure public read access via a bucket policy for seamless scaling.

Prepare static assets for production by self-hosting CSS and scripts for deployment to render, and configuring Django static directories for collectstatic. Build Tailwind and Daisy UI locally with npm.

Enable production-ready static asset delivery by integrating Whitenoise with a Django project deployed on Render, compressing assets via Brotli and gzip, and configuring static routes and storage.

Deploy a Django app on Render with a build script, Postgres and Redis for channels, and production security using environment variables, allowed hosts, and CSRF origins.

Deploy a Django app on render using a render.yaml infrastructure as code file to define web services, a Postgres database, and a Redis compatible key value store.

Deploy a Django web app to production on render, linking git, blueprints, and a render yaml, configuring environment variables, s3 media storage, and Django channels for real-time chat.

Learn to implement polling with HTML and Django to auto update the DOM from the backend, refreshing data every 30 seconds using template partials and the Django HTML package.

Set up a python virtual environment, install Django, create a polling demo project with a sports app, define a fixture model, run migrations, register in admin, and start the server.

Create a Django view and template to display fixtures by fetching all fixtures with the ORM, map a URL, and render them using a base template and Tailwind styling.

Use polling with htmx to auto-update in-progress scores by sending hx-get requests every two seconds to a Django URL and swapping the response into a target div.

Learn to replace full fixture responses with a Django template partial block using Django template partials and inline partials, supported by Django html middleware to serve partials on html requests.

Demonstrate building a responsive user interface with Tailwind CSS and CSS grid to align fixtures, borders, padding, and centered scores, while implementing polling to fetch updates from Django HTMX backend.

Discover how HTMX uses HTML and CSS transitions to animate content swaps with the HTML swapping class, swap timing, and fade in and out effects.

Demonstrate hx-indicator by using the HTML request class to show a spinner and status text during HTMX polling, with Flow Bite components and artificial latency for in-flight feedback.

Implement server-sent events in a Django and HTMX app to stream live updates from the server to the client via a streaming HTTP response, using the HTMX SSE extension.

Replace periodic polling with server-sent events in a django 6 app, using the htmx sse extension to stream live fixture updates via a text/event-stream connection.

Wrap the SSE endpoint's infinite generator loop in a try block to catch generator exit and other exceptions, perform cleanup on disconnects, and log disconnection events.

Explore htmx v4 core streaming with server-sent events and readable streams. Trigger streaming responses using text/event-stream, innerHTML swaps, and hxConfig reconnection in Django.