Locality of Behaviour (2020) (htmx.org)

I know the HTMX guy has opinions on this, but I also like how React (and similar frameworks) give you locality of behavior.

    <button onClick={() => fetch(‘/clicked’)}>

To me that feels like less magic to remember than

    <button hx-get=“/clicked”>

But ultimately let’s be honest: Experienced engineers can write good code in anything and inexperienced engineers can write bad code in anything. Simplicity takes time.

    const b = document.querySelector('button');
    b.addEventListener('click', () => fetch('/clicked'));

"spooky action at a distance" sounds bad, but this is how most frameworks that embrace convention over configuration work. You add a dependency to your SpringBoot application and suddenly your app actually has new endpoints and config for them and so on.

I remember learning separation of concerns and then react popped in and just threw that out the window and yet everyone adopted it. I still haven't recovered from the idea that these guidelines are very bendable etc.

The bad ID naming `d1` is convenient for the argument...

Doing separated CSS/JS does not imply in automatic breaking of LoB.

You just need to come up with CSS and JS that are not _specific_, but _layered_ instead, which is hard.

Bad:

    .one-specific-button-from-the-nav-bar { color: blue; }
    <input class="one-specific-button-from-the-nav-bar"/>

Good (only this button):

    <input style="color: blue"/>

Better (all buttons on nav are the same):

    nav form button { color: blue; }

What if I want two kinds of buttons on the navigation bar?

Then you have two options:

- Abandon the idea. Do something simpler.

- Come up with a generic CSS rule for it.

For this idea to work, _you have to accept limitations_, which means you cannot design whatever looks you want, or make pixel-perfect layouts, etc. You have to work within some constraints.

It's kind of an expression of the success of an abstraction. If an abstraction is good (hx-get="/clicked"), it feels local. If an abstraction is bad (id="d1"), it's spooky action at a distance.

Sorry in advance for bringing AI into this but... this is context engineering in a nutshell. DRY and SoC really mess with an agent's ability to efficiently gather context. If you limit all layers of a feature into a small area (e.g. folder) it's much easier to work with. Vertical Slice Architecture is a good example of this too.

One would like to see the word “modularity” somewhere here.

Styles are also part of the behavior of a piece of markup. Not the interactivity behavior but certainly the rendering behavior.

One of the most pleasant experiences I had writing code, is early AI days when we did hyperscript SSE. Super locality of behavior, super interesting way of writing Server Sent Events code.

eventsource demo from http://server/demo

    on message as string
        put it into #div
    end

    on open
        log "connection opened."
    end

    on close
        log "connection closed."
    end

    on error
        log "handle error here..."
    end

end https://hyperscript.org/features/event-source/

Yet another article that misrepresents DRY.

(DRY was never about code repetition).