Christian Tanul 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

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

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

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

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.

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.

	#!/bin/bash

	# ---------------------------------------------------------------------------
	# Commit Reminder Script for Linux
	# Author: Christian Tanul
	# GitHub Gist: https://gist.github.com/scriptogre/1d97f599da72efa5e39731eaf5e4da96/
	#
	# Description:
	# This script aids developers in transitioning to the atomic commit approach,
	# especially those who tend to write code chaotically. It's designed to be used

	"""
	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:

	# 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',

	{#
	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) {

	{% 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="*"
	>