hypermedia.systems

Examples from building the Contacts app in the book Hypermedia Systems.

The code here is slightly different from the book, as I try to use types where I can, and check for them using Mypy, a static type checker for Python.

PyTest is used for testing. While inside an example directory simply run pytest to run the tests for that example.

Running an Example

Clone the repo...

git clone https://github.com/juliojimenez/hypermedia.systems
cd hypermedia.systems

Install dependencies...

pip3 install -r requirements.txt

Go to an example...

cd chapter-3/1-simple-hello-world/

And run it...

python3 app.py

Each example runs on a different port. Run multiple examples simultaneously and compare them in the browser!

Examples

Chapter 3

• Simple Hello World
• Simple Hello World to a Redirect
• Showing a Searchable List of Contacts
• Adding a New Contact
• Viewing the Details of a Contact
• Editing a Contact
• Deleting a Contact

Chapter 4

• Installing HTMX as a Third Party Dependency
• Triggering HTTP Requests
• HTMX vs. Plain HTML Responses
• Targeting Other Elements
• Swap Styles
• Using Events
  • mouseenter
  • click and keyup
• Passing Request Parameters
  • Enclosing Forms
  • Including Inputs
  • Inline Values
• History Support

Chapter 5

• Installing HTMX as a Vendored Dependency
• Adding hx-boost to Contacts.app
• A Second Step: Deleting Contacts With HTTP DELETE
• Next Steps: Validating Contact Emails
  • Update Our Input Type
  • Inline Validation
  • Validating Emails Server-Side
  • Taking The User Experience Further
  • Debouncing Our Validation Requests
  • Ignoring Non-Mutating Keys
• Another Application Improvement: Paging
  • Adding Paging Widgets
  • Click To Load
  • Infinite Scroll

Chapter 6

• Adding Active Search
  • Targeting The Correct Element
  • Paring Down Our Content
  • HTTP Headers In HTMX
  • Factoring Your Templates
  • Using Our New Template
  • Updating The Navigation Bar With "hx-push-url"
  • Adding A Request Indicator
• Lazy Loading
  • Pulling Out The Expensive Code
  • Adding An Indicator
  • But That's Not Lazy!
• Inline Delete
  • Narrowing Our Target
  • Updating The Server Side
  • Taking Advantage of "htmx-swapping"
• Bulk Delete
  • The "Delete Selected Contacts" Button
  • The Server Side for Delete Selected Contacts

Chapter 7

• Beginning Our Implementation
• Adding The Archiving Endpoing
• Conditionally Rendering A Progress UI
• Using Polling To Update The Archive UI
• Downloading The Result
• Downloading The Completed Archive
• Our Smoothing Solution
• Dismissing The Download UI
• An Alternative UX: Auto-Download

Chapter 9

• VanillaJS in Action: An Overflow Menu
• Alpine.js
• _hyperscript
• Integrating Using Callbacks
• Integrating Using Events

Chapter 10

• Our First JSON Endpoint: Listing All Contacts
• Adding Contacts
• Viewing Contact Details
• Updating & Deleting Contacts

Support

Python 3.11+

Dependencies

• HTMX v1.9.5
• missing.css v1.0.10
  • Not sure what's going on with the package hosting for this, but I had to grab the artifact from the latest tag in the repo.
  • It was working fine when I started this repository. If it starts working again, please submit an issue or hit me up on X.