scriptogre

Fix: stale hx-* handlers on re-process

problem

htmx wire listener when process() run. attribute change after that? old listener stay. new listener also add. now two listener. bad.

<button hx-on:click="doV1()">click</button>

scriptogre

Background

Run tasks and publish events from your FastAPI app. Plain functions, sane defaults, swap backends when you're ready.

Package name TBD. Examples below use background_lib as a placeholder.

---

Your First Task

scriptogre

NixOS Homelab on a ThinkCentre M90Q

This is how I set up my homelab, step by step, in roughly the order I actually did it. Each step builds on the previous one. Read until you hit where you're at and stop.

Step 1: A minimal NixOS flake that just works

The first thing to get right is flake.nix. This is your entire system config: users, networking, firewall, packages, services. Everything in one file.

Here's a minimal starting point. Set a static IP so your other devices can always find the server. Enable Docker and SSH. Disable sleep. That's it.

scriptogre

htmx 4.0 Architecture Proposal

The Problem

Currently:

hx-swap      →  own parser, storage, handling logic
hx-target    →  own parser, storage, handling logic
hx-headers → own parser, storage, handling logic

scriptogre

htmx-live (Alternative Syntax)

Client-side reactivity via a single hx-live attribute. Hyperscript-inspired syntax with DOM literals.

Same functionality as LIVE.md, different syntax.

---

In Action

scriptogre

{% from "jobs/job_block.html" import render_job_rows %}

<table id="job-table" class="..."
       sse-connect="/jobs/events"
        {# Fixes race-condition when the job finishes before connection to /job/events is made #}
       hx-get="/jobs/table"
       hx-trigger="load once delay:500ms"
       hx-swap="morph"
       hx-disinherit="*"
>

scriptogre

WebSockets Extension Design

Overview

The WebSockets extension provides bidirectional real-time communication for htmx, following the same patterns established by the built-in SSE (Server-Sent Events) streaming support.

Core Principles

1. Consistency with SSE - Incoming messages use the same swapping behavior (hx-target, hx-swap, <hx-partial>)
2. Leverage existing attributes - Reuse hx-vals, hx-include, hx-trigger, hx-config

scriptogre

{# 
Pure CSS responsive tabs using a templating engine (e.g., Jinja2); supports mobile (select) and desktop (radio) views, with tab visibility controlled via :has() selectors and loop-based dynamic CSS generation.
#}

<style>
	/* Hide panels by default */
	.tab-panels > .tab-panel { display: none; }

	{% for _ in tabs %}
		@media (max-width: 639px) {

scriptogre

# config/jinja2.py

"""
Ports Django 5.1's `{% querystring %}` template tag (https://docs.djangoproject.com/en/5.1/releases/5.1/#querystring-template-tag)
to a Jinja2 global function for `django-jinja`.

Add this to `config/jinja2.py`, then in your settings file:
TEMPLATES = [
    {
        'BACKEND': 'django_jinja.jinja2.Jinja2',

scriptogre

"""
django_widget_tweaks.py

This module provides a migration of the functionalities of `django-widget-tweaks` to be compatible with Jinja2 and Django-Jinja.
The need for this migration arose because `render_field` was not easily migratable to Jinja2 otherwise.

To use this in your project, save this code into a Python file and then add it to your INSTALLED_APPS in settings.py:
INSTALLED_APPS += ["path.to.your.module.django_widget_tweaks"]

Example usage in a Jinja2 template: