HTMX + Flask: Modern Python Web Apps, Hold the JavaScript

3h 3m 5s
English
Paid
March 27, 2024

htmx is one of the hottest properties  in web development today, and for good reason. This framework, along with the libraries and techniques introduced in this course, will have you writing the best Python web apps you've ever written: clean, fast, and interactive without all that frontend overhead.

More

If you are a Python web developer that has wanted to build more dynamic, interactive apps, but just don't want to (or can't) write a significant portion of your app in a rich frontend JavaScript framework, you'll absolutely love htmx. This library lets you write Python code you love and still add that clientside interactive aspect. 

What's this course about and how is it different?

htmx is a very compelling technology. It's one of the first legitimate libraries that delivers on the promise of dynamic, interactive web applications without complex JavaScript. htmx allows us to write server-side code in any language (Python in our case) and, through a few simple HTML attributes, bring our pages to life.

This is the only course (that we're aware of) that shows you the full lifecycle of building Python and Flask-based applications centered around htmx. Unlike basic tutorials where you'll find only just quick coverage of a simple feature, we take a full-fledged web app and extend it by adding three real-world features all building upon htmx.

Moreover, we show you the right way to use htmx with Flask and Python. The resulting code is incredibly clean and would impress almost any professional web developer.

What will we build

In the course, we will add a bunch of htmx-powered features to an existing application. This app, called Video Collector, is a beautiful Flask web app that allows us to save, explore, search, and play videos we've collected from YouTube.

What topics are covered

In this course, you will:

  • See how htmx differs from common JavaScript front-end frameworks such as Vue and React.
  • Understand the server-side exchange enabled by htmx attributes (e.g. ).
  • Add click to edit to an existing data-driven Flask application.
  • Learn about the  package to refactor our jinja2 templates (with or without htmx).
  • Add deep linking to our dynamic web application, allowing us to share links into interactive segments.
  • Add active search to an existing data-driven Flask application.
  • Implement browser history for htmx actions (allowing back and forth navigation).
  • Add infinite scroll to our app.
  • Distinguish between full page requests and partial htmx requests within a single view method in Flask.
  • And lots more

Watch Online HTMX + Flask: Modern Python Web Apps, Hold the JavaScript

Join premium to watch
Go to premium
# Title Duration
1 Introduction to the course 02:29
2 What is htmx? 05:04
3 The HOWL stack 01:36
4 The big ideas covered in this course 03:04
5 Student prerequisites 01:22
6 Vue, React, and htmx: A quick comparison 02:52
7 Git the source code 00:55
8 Meet your instructor: Michael Kennedy 01:10
9 A tour of htmx examples 01:09
10 Example: Infinite scroll 02:41
11 Example: Active search 03:29
12 Example: Lazy loading 02:37
13 Example: Bulk update 03:18
14 Introducing our web app: Video Collector 01:27
15 Setting up and running the Flask app 03:38
16 Key elements of code organization 05:50
17 Concept: Pydantic models 02:04
18 Concept: View models 02:18
19 Concept: Code organization 01:32
20 Our first feature: Click to edit 00:50
21 Introduction to building the non-htmx form 00:57
22 Adding the HTML for the add video form 06:35
23 'Add video' view methods 07:10
24 Creating the new video in the database 03:36
25 Installing htmx 02:27
26 A clean, enable add button, without the form 04:56
27 Server returns the form on-demand 03:42
28 Changing our mind, adding a cancel option 05:59
29 Concept: Showing the edit UI 02:05
30 Concept: Creating or canceling the video creation 01:51
31 Concept: Processing the form submission on the server 01:37
32 What do you mean by partials? 01:49
33 The jinja-partials package 02:06
34 Partials: A more realistic example 01:50
35 Installing jinja-partials 03:49
36 Removing duplication of add video HTML 03:54
37 Concept: Using partials 01:25
38 Introducing active search 00:48
39 Where we're headed with active search 02:01
40 Create the search page skeleton 04:06
41 Search text is better as an optional URL element 01:29
42 Performing the server-side search 04:15
43 HTML input controls for search 02:29
44 Searching as they type with htmx 07:10
45 Rendering the videos found in search 04:29
46 Search history in the address bar 02:21
47 Deep linking to search results 04:01
48 Concept: Triggering the search with htmx 01:14
49 Concept: Is a request htmx originated? 01:24
50 Concept: Supporting deep linking 02:02
51 Introducing infinite scroll 00:53
52 Popular sites using infinite scroll 01:53
53 Reorganizing the feed HTML for infinite scrol 04:18
54 Returning a limited set of videos 03:23
55 The htmx scroll trigger 05:23
56 Implementing more videos on the server 03:54
57 Concept: Triggering another page as you scroll 02:24
58 HOWL for the finish line 01:59
59 Examples first, docs second 01:04
60 Core elements of the starter Flask app 03:14
61 Click to edit functionality 01:54
62 Jinja-partials package 02:11
63 Active search with htmx 02:16
64 Partial or full response? 01:59
65 Infinite scroll with htmx 02:19
66 Thank you and goodbye 00:59

Similar courses to HTMX + Flask: Modern Python Web Apps, Hold the JavaScript

#100DaysOfCode with Python course

#100DaysOfCode with Python courseTalkpython

Duration 17 hours 27 minutes 49 seconds
Python 3: Deep Dive (Part 2 - Iteration, Generators)

Python 3: Deep Dive (Part 2 - Iteration, Generators)udemy

Duration 34 hours 42 minutes 47 seconds
The Software Designer Mindset (COMPLETE)

The Software Designer Mindset (COMPLETE)ArjanCodes

Duration 14 hours 32 minutes 58 seconds
Python Django Dev To Deployment

Python Django Dev To DeploymentudemyBrad Traversy

Duration 11 hours 7 minutes 11 seconds
Object-Oriented Programming

Object-Oriented Programmingprogrammingexpert.io

Duration 4 hours 36 minutes 7 seconds