📝 Quantum Entangled

So here I am, after working all weekend to get this blog project up and running — all in the hopes of achieving a few things:

• Practice some of my rusty skills in the Java ecosystem — file uploads, REST, OAuth2, Spring Security, Flyway, Docker, and more.
• Have some fun with CSS animations (did you see that title when the page loaded?).
• Build a blog using Markdown to write and display posts in a cooler way.
• Try to understand how HTMX works

But I have to confess something: LLMs did most of the heavy lifting here — and I still don’t exactly understand how HTMX works. But hey, it works!

• Also, this gave me a break from trying to finish the Outer Wilds DLC — I'm stuck! (Credits goes to u/Strange_Lettuce)

Let’s get back to HTMX. In the GitHub repository where I’ve uploaded the code, you’ll find this snippet inside templates/writepost.html:

<form hx-post="/upload-image" hx-trigger="change" hx-target="#upload-result" enctype="multipart/form-data">
  <input type="file" name="image" accept="image/*" />
  <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
</form>

<div id="upload-result"></div>

I can only guess some of this works, based on inference and past web development experience:

• hx-post is the POST method I created under FileUploadController.java, so it's fair to say it's executed when the form is submitted.
• hx-trigger is some sort of mechanism that tells when to execute the POST method in this case or submit the form.
• hx-target would be the element that will be updated?

The th:name and th:value attributes are from Thymeleaf — nothing to do with HTMX — so I’ll ignore them here.

Let's ask ChatGPT to see if my guesses are correct!

And voilà! The explanation matched up pretty well with what I thought:

hx-post="/upload-image"

• When this form is triggered, HTMX makes an HTTP POST request to the /upload-image URL.
• It submits the form data (including the file) via AJAX, without a full page reload.

hx-trigger="change"

• This tells HTMX when to fire the request.
• Here, the event is change on the form element. Practically, when the user selects a file in the <input type="file">, the form detects a change * and triggers the POST automatically.

hx-target="#upload-result"

• This tells HTMX where to put the response from the server.
• The server response (usually HTML) will be inserted inside the element with id upload-result (your <div id="upload-result"></div>).
• So, for example, if the server responds with <p>Upload successful!</p>, that content will replace whatever is inside the #upload-result div.

Now, we all know that this could be a lie or hallucination. So I'll let it up for you to research on these HTMX tags further.

But in the end this gives a very critical hint on the way things will and are already changing in the future:

You don’t need to know every detail to begin using new technology — but without a solid grasp of the fundamentals, we risk building on shaky ground.

Understanding the “why” empowers us to guide LLMs with purpose, and to create things that are secure, efficient, and built to last. Not only to "work"

And this last bold phrases where not written by me. I just wanted to give some smart and more concise conclusion to this blog post before I go to sleep!

So good night 💤