DEV Community: mojatter

Handling Inline Scripts in htmx with Go Templates

mojatter — Sun, 12 Apr 2026 00:59:09 +0000

For the Web Console of S2, I took a small gamble by adopting htmx. At the time, I only had a conceptual understanding, so I relied on Claude Code for the initial implementation. I did a quick review of the code and focused on verifying that things worked before shipping.

Once the core S2 features settled down, I came back to refactor the console — and ran into a specific problem with a solution I think is worth sharing.

The Problem: Script Bloat in index.html

Before the refactor, the structure looked like this:

- index.html — layout, contains scripts for fragment operations
  - buckets/
    - objects.html — htmx fragment

<!-- index.html (layout) -->
<div class="layout">
  <!-- ...table and gallery HTML... -->
</div>

<script>
  function setViewMode(mode) { ... }
  function initGalleryView() { ... }
  document.addEventListener('htmx:afterSettle', function(evt) { ... });
</script>

<!-- objects.html (htmx fragment) -->
<div class="main-view">
  <!-- ...table and gallery HTML... -->
</div>

All the scripts were concentrated in the layout file. These were vanilla JS snippets for things like view mode switching and lazy-loading gallery images — nothing fancy, but they belonged logically with the fragment, not the layout.

Breaking this down, two problems emerge:

As the app grows, the layout's script block gets bloated.
Scripts are physically separated from the fragment they belong to, making development harder.

htmx has a tendency to push scripts toward the layout if you're not careful. Here's why:

Initialization: To avoid re-running <script> tags every time a fragment loads, the easiest approach is to centralize everything in one place (like main.js) using event delegation (htmx.on(...)).
Library dependencies: Heavy libraries like Chart.js or Leaflet can't be reloaded on every fragment swap, so they end up loaded once in the layout.
Global state: Managing things like modal open/close state or notifications naturally drifts toward the shared layout.

The common solutions — Alpine.js or Custom Elements (Web Components) — didn't quite fit:

Alpine.js: Adds another external dependency, and in practice the lazy-loading logic I needed became harder to read.
Custom Elements: No dependencies and it's a web standard, but the class definition/registration boilerplate felt like overkill for this use case.

So I went looking for another way.

Solution 1: Move Scripts into the Fragment

The obvious first idea: just move the scripts into the fragment.

- index.html — layout, event listener registration remains
  - buckets/
    - objects.html — fragment with its own scripts

<!-- index.html (layout) -->
<div class="layout">
  <!-- ...table and gallery HTML... -->
</div>

<script>
  document.addEventListener('htmx:afterSettle', function(evt) { ... });
</script>

<!-- objects.html (htmx fragment) -->
<div class="main-view">
  <!-- ...table and gallery HTML... -->
</div>

<script>
  // Re-executes every time the fragment loads
  function setViewMode(mode) { ... }
  function initGalleryView() { ... }
</script>

This works as intended for the most part, but the <script> block re-executes every time objects.html is loaded.

✅ Scripts don't pile up in index.html

✅ Scripts live with the fragment they belong to

❌ Event listeners still need to live in index.html (because of the re-execution problem)

❌ The script block runs again on every load

Solution 2: External Script Files per Fragment

Next idea: extract scripts into per-fragment external files.

- index.html — layout
  - static/
    - buckets-objects.js — per-screen script
  - buckets/
    - objects.html — fragment, loads static/buckets-objects.js

<!-- objects.html (htmx fragment) -->
<script src="static/buckets-objects.js"></script>
<div class="main-view">
  <!-- ...table and gallery HTML... -->
</div>

✅ Scripts are gone from index.html

✅ Re-execution problem is solved

✅ Event listeners can move out of index.html

❌ Scripts are now separated from the fragment again — back to square one for discoverability

Solution 3: JavaScript Guard Flag

What if we keep scripts inline but guard against re-execution?

- index.html — layout
  - buckets/
    - objects.html — fragment, script guarded inline

<!-- objects.html (htmx fragment) -->
<div class="main-view">
  <!-- ...table and gallery HTML... -->
</div>

<script>
  if (!window._objectsScriptLoaded) {
    window._objectsScriptLoaded = true;
    document.addEventListener('htmx:afterSettle', function(evt) { ... });
    function setViewMode(mode) { ... }
    function initGalleryView() { ... }
  }
</script>

✅ Scripts are gone from index.html

✅ Scripts live with the fragment

✅ Functions aren't re-defined thanks to the flag

❌ The <script> block still re-executes (even if the body is skipped)

❌ Every fragment accumulates a low-value if wrapper

Solution 4: Using Go's `{{define}}` (The One I Actually Shipped)

This is the approach I ended up with. It came out of a back-and-forth with Claude Code — it told me "this isn't possible, let's revert" a few times, but I kept pushing and we got there.

- index.html — layout, embeds `{{define}}` blocks via `{{template}}`
  - buckets/
    - objects.html — fragment, scripts wrapped in `{{define}}`

<!-- index.html (layout) -->
<div class="layout">
  <!-- ...table and gallery HTML... -->
</div>
{{template "scripts:buckets/objects.html" nil}}

<!-- objects.html (htmx fragment) -->
<div class="main-view">
  <!-- ...table and gallery HTML... -->
</div>

<!-- define blocks are not rendered when this template executes -->
{{define "scripts:buckets/objects.html"}}
<script>
  document.addEventListener('htmx:afterSettle', function(evt) { ... });
  function setViewMode(mode) { ... }
  function initGalleryView() { ... }
</script>
{{end}}

✅ Scripts are gone from index.html

✅ Scripts live with the fragment they belong to

❌ (none that I've found)

This pattern is only possible because the project uses Go's html/template. Here's how it works end to end.

How It Works

Page load (GET /)
  └→ Render index.html
       └→ {{template "scripts:buckets/objects.html" .}} embeds the script block

Bucket click (htmx swap)
  └→ GET /buckets/foo → render objects.html
       └→ {{define "scripts:..."}} produces no output
            └→ No function re-definition, no duplicate listeners

The key insight: when Go renders a template, {{define}} blocks within that template are registered but not output. They only produce output when explicitly called via {{template}}. So when htmx swaps in the fragment, the script definition is silently ignored — no re-execution, no guards needed.

Why This Pattern Works Well

Concern	How it's handled
Locality	Scripts live in the same file as the HTML they control
No re-execution	`{{define}}` blocks are never output during fragment renders — guaranteed by the language
No guards needed	No `{{if}}` wrappers, no flag variables
Discoverability	`scripts:` prefix makes them trivially grep-able
Single source of truth	`{{template}}` in the layout is the one registration point

Wrap-up

By combining Go's {{define}} and {{template}}, I found a way to keep fragment scripts co-located with their HTML while ensuring they load exactly once.

If you're building an htmx app and running into the "where do I put my scripts" problem, it's worth looking at what your server-side templating engine can do — the answer might already be there.

Hope this is useful for anyone else working with Go + htmx!

S2 – My MinIO Alternative Built with AI in a Few Days

mojatter — Tue, 07 Apr 2026 07:54:29 +0000

I built an alternative and named it S2 (Simple Storage).
https://github.com/mojatter/s2

More details below, but here's a quick look — it works almost like MinIO via docker compose:

services:
  s2:
    image: mojatter/s2-server
    ports:
      - "9000:9000"
    environment:
      S2_SERVER_USER: myuser
      S2_SERVER_PASSWORD: mypassword
      S2_SERVER_BUCKETS: assets,uploads
    volumes:
      - s2-data:/var/lib/s2

volumes:
  s2-data:

Why I Built It

I've been using MinIO across several projects, but it went into code freeze and I wasn't comfortable staying pinned to a specific version indefinitely.

What I Learned Pairing with AI

I know most of you are already getting the most out of AI/LLMs — I'm a late starter here.

I kicked things off casually using Google Antigravity (an agent-first IDE powered by Gemini 3.1 Pro) with no paid plan. I wrote the initial codebase myself, and leaned on it heavily for English documentation since that's not my strong suit.

I pushed through to the first commit with Antigravity, but hit the free tier limits pretty quickly. I'd paid for Gemini once before and blew through $200 in two days, so I switched to Claude Code to keep going.

I fully intended to write all the Go code myself — but Claude Code is remarkably capable. Give it a direction and the code comes back almost exactly as you envisioned.

At first I let it handle git commit. Then before I knew it, I was handing off git push and PR creation too. By that point, I'd basically stopped writing code myself.

As I kept delegating, it suggested creating a docs/api-audit.md. I had no idea what that was — apparently it's standard practice in the OSS world. That kind of discovery kept happening, and then it started proposing API redesigns. When I dug into the reasoning, every point made sense. It felt like a new hire who was honestly more capable than me had just joined the team.

Eventually my workflow became: describe what I want at a high level, skim the PR, click merge.

I'd figured it would take a month of working in spare moments to get something functional. Instead, something better than I'd planned was done in a matter of days.

I used to picture myself writing code well into old age. Turns out that may not be how things go. 😄

About S2

Let me get to the actual pitch.

S2 offers both a MinIO-like server and a general-purpose storage client interface.

MinIO-like S2 Server

It covers the essentials: multipart upload, SigV4 authentication, presigned URLs. Advanced features like ACL and versioning aren't supported, but for "I just want to use an S3 client as-is in local dev and staging" use cases, it holds up well.

Swapping out production S3 or MinIO is just an endpoint URL change.

If you have Docker, one line gets you a running server with a web console at localhost:9000:

docker run --rm -p 9000:9000 mojatter/s2-server

General-Purpose Storage Client: s2env

Backends are swappable via config, giving you something close to Laravel's Storage facade. Switch between S3 in production and osfs locally without touching your code.

// s2.json
{
  "assets": { "type": "osfs", "root": "/var/data" },
  "prod":   { "type": "s3",   "root": "my-bucket" }
}

// Same interface regardless of backend
storages, _ := s2env.Load(ctx, "s2.json")
assets := storages["assets"]
assets.Put(ctx, s2.NewObjectBytes("hello.txt", []byte("hello")))

For testing, swap in memfs and you can test object storage code without spinning up Docker at all.

strg, _ := s2.NewStorage(ctx, s2.Config{Type: s2.TypeMemfs})
// Same code as production — no Docker needed

Wrap-up

I became a MinIO refugee and built a replacement with AI. Here's what I found:

The speed and accuracy were remarkable — I ended up handing almost everything over.
It gave me new insights along the way and I genuinely learned things.
The end result was better than what I originally had in mind.

It's a fascinating time to be building software. Give S2 a try!

Credits

The header image was generated with Google Gemini. It includes the Go Gopher mascot, originally designed by Renée French and licensed under CC BY 3.0.

Pipe output and getting exit status

mojatter — Fri, 29 Sep 2023 08:26:06 +0000

The tee command is convenient and often used, but it does not get exit status.

#!/bin/sh
(echo 'fail' && false) | tee out.txt

As discussed on Stack Overflow, if you are using bash, you can solve this problem by using PIPESTATUS.

I have been running into this problem often for a long time, looking for an easier way, and finally found it.

#!/bin/sh
ret=0
(echo 'fail' && false) > out.txt || ret=$?
cat out.txt && rm -rf out.txt && [ $ret ] && exit $ret

FastHttpd - Alternate nginx

mojatter — Tue, 23 Aug 2022 05:09:00 +0000

Introduction

I was looking for a reverse proxy to replace nginx and found valyala/fasthttp.

I had just developed jarxorg/tree, so I started developing fasthttpd/fasthttpd, thinking that if I combined the two, I could create a product that would meet my needs.

Features

Serve static files
Simple routing
Access logging
Reverse proxy
Customize headers
Support TLS
Virtual hosts
YAML configuration

Getting started

Specify the configuration file.

fasthttpd -f path/to/config.yaml

Use build-in configuration and some customization.

fasthttpd -e root=./public -e listen=:8080

Installation

Using homebrew.

brew tap fasthttpd/fasthttpd
brew install fasthttpd

In addition, binaries, deb, rpm and docker image are available.

Refer to https://github.com/fasthttpd/fasthttpd#installation

Alternate nginx example

The following is nginx.conf.

upstream backend {
    server 127.0.0.1:8000;
}

server {
    listen 80 default_server;
    return 302 https://$host$request_uri;
}

server {
    listen 443 default_server;
    ssl on;
    ssl_protocols      TLSv1 TLSv1.1 TLSv1.2;
    ssl_certificate  /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
    location ~ ^/(404|50.).html {
        root /usr/share/nginx/html;
        internal;
    }
    location ~ ^/(.*)\.(ico|css|git|jpg|jpeg|png|js)$ {
        alias /app/public/$1.$2;
    }
    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Port $server_port;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_intercept_errors on;
        proxy_pass http://backend;
    }
}

The following is a configuration of fasthttpd.

host: example.com
listen: ':80'

routes:
  - path: ^/(.*)$
    match: regexp
    rewrite: https://example.com/$1
    status: 302
---
host: example.com
listen: ':443'
root: /usr/share/fasthttpd/html
ssl:
  autoCert: true

errorPages:
  '404': /err/404.html
  '5xx': /err/5xx.html

handlers:
  'backend':
    type: proxy
    url: http://localhost:8080/
  'public':
    type: fs
    root: /app/public
    indexNames: [index.html]

routes:
  - path: ^/(.*)\.(ico|css|git|jpg|jpeg|png|js)$
    match: regexp
    handler: public
  - path: /
    handler: backend

I would be happy to get your feedback, Thank you!

Tree - A simple structure for dealing with dynamic or unknown JSON/YAML in Go

mojatter — Tue, 09 Aug 2022 05:44:00 +0000

Introduction

Go can parse dynamic json/yaml using the standard map[string]interface{}, etc. However, nested interface{} tends to result in ugly code.

Tree is one solution to this problem.

Features

Parses json/yaml of unknown structure to get to nodes with fluent interface.
Syntax similar to Go standard and map and slice.
Find function can be specified the query expression.
Edit function can be specified the edit expression.
Bundled 'tq' that is a portable command-line JSON/YAML processor.

Examples in Go

Marshal and Unmarshal

func ExampleMarshalJSON() {
    group := tree.Map{
        "ID":     tree.ToValue(1),
        "Name":   tree.ToValue("Reds"),
        "Colors": tree.ToArrayValues("Crimson", "Red", "Ruby", "Maroon"),
    }
    b, err := json.Marshal(group)
    if err != nil {
        log.Fatal(err)
    }
    fmt.Println(string(b))

    // Output:
    // {"Colors":["Crimson","Red","Ruby","Maroon"],"ID":1,"Name":"Reds"}
}

func ExampleUnmarshalJSON() {
    data := []byte(`[
  {"Name": "Platypus", "Order": "Monotremata"},
  {"Name": "Quoll",    "Order": "Dasyuromorphia"}
]`)

    var animals tree.Array
    err := json.Unmarshal(data, &animals)
    if err != nil {
        log.Fatal(err)
    }
    fmt.Printf("%+v\n", animals)

    // Output:
    // [map[Name:Platypus Order:Monotremata] map[Name:Quoll Order:Dasyuromorphia]]
}

Get

func ExampleGet() {
    group := tree.Map{
        "ID":     tree.ToValue(1),
        "Name":   tree.ToValue("Reds"),
        "Colors": tree.ToArrayValues("Crimson", "Red", "Ruby", "Maroon"),
        "Nil":    nil,
    }
    fmt.Println(group.Get("Colors").Get(1))
    fmt.Println(group.Get("Colors", 2))
    fmt.Println(group.Get("Colors").Get(5).IsNil())
    fmt.Println(group.Get("Nil").IsNil())

    // Output:
    // Red
    // Ruby
    // true
    // true
}

Find

func ExampleFind() {
    group := tree.Map{
        "ID":     tree.ToValue(1),
        "Name":   tree.ToValue("Reds"),
        "Colors": tree.ToArrayValues("Crimson", "Red", "Ruby", "Maroon"),
    }

    rs, err := group.Find(".Colors[1:3]")
    if err != nil {
        log.Fatal(err)
    }
    for _, r := range rs {
        fmt.Println(r)
    }

    // Output:
    // Red
    // Ruby
}

Edit

func ExampleEdit() {
    var group tree.Node = tree.Map{
        "ID":     tree.ToValue(1),
        "Name":   tree.ToValue("Reds"),
        "Colors": tree.ToArrayValues("Crimson", "Red", "Ruby", "Maroon"),
    }

    if err := tree.Edit(&group, ".Colors += \"Pink\""); err != nil {
        log.Fatal(err)
    }
    fmt.Printf("Append Pink to Colors:\n  %+v\n", group)

    if err := tree.Edit(&group, ".Name = \"Blue\""); err != nil {
        log.Fatal(err)
    }
    fmt.Printf("Set Blue to Name:\n  %+v\n", group)

    if err := tree.Edit(&group, ".Colors ^?"); err != nil {
        log.Fatal(err)
    }
    fmt.Printf("Delete Colors:\n  %+v\n", group)

    // Output:
    // Append Pink to Colors:
    //   map[Colors:[Crimson Red Ruby Maroon Pink] ID:1 Name:Reds]
    // Set Blue to Name:
    //   map[Colors:[Crimson Red Ruby Maroon Pink] ID:1 Name:Blue]
    // Delete Colors:
    //   map[ID:1 Name:Blue]
}

tq

tq is a portable command-line JSON/YAML processor. For more information please refer to jarxorg/tree.

Usage

tq is a command-line JSON/YAML processor.

Usage:
  tq [flags] [query] ([file...])

Flags:
  -e, --edit stringArray       edit expression
  -x, --expand                 expand results
  -h, --help                   help for tq
  -U, --inplace                update files, inplace
  -i, --input-format string    input format (json or yaml)
  -O, --output string          output file
  -o, --output-format string   output format (json or yaml, default json)
  -r, --raw                    output raw strings
  -s, --slurp                  slurp all results into an array
  -t, --template string        golang text/template string
  -v, --version                print version

Examples:
  % echo '{"colors": ["red", "green", "blue"]}' | tq '.colors[0]'
  "red"

  % echo '{"users":[{"id":1,"name":"one"},{"id":2,"name":"two"}]}' | tq -x -t '{{.id}}: {{.name}}' '.users'
  1: one
  2: two

  % echo '{}' | tq -e '.colors = ["red", "green"]' -e '.colors += "blue"' .
  {
    "colors": [
      "red",
      "green",
      "blue"
    ]
  }

DEV Community: mojatter

Handling Inline Scripts in htmx with Go Templates

The Problem: Script Bloat in index.html

Solution 1: Move Scripts into the Fragment

Solution 2: External Script Files per Fragment

Solution 3: JavaScript Guard Flag

Solution 4: Using Go's {{define}} (The One I Actually Shipped)

How It Works

Why This Pattern Works Well

Wrap-up

S2 – My MinIO Alternative Built with AI in a Few Days

Why I Built It

What I Learned Pairing with AI

About S2

MinIO-like S2 Server

General-Purpose Storage Client: s2env

Wrap-up

Credits

Pipe output and getting exit status

FastHttpd - Alternate nginx

Introduction

Features

Getting started

Installation

Alternate nginx example

Tree - A simple structure for dealing with dynamic or unknown JSON/YAML in Go

Introduction

Features

Examples in Go

Marshal and Unmarshal

Get

Find

Edit

tq

Usage

Solution 4: Using Go's `{{define}}` (The One I Actually Shipped)