I was honored to be able to present at the conference and my presentation “HTMX: Web 1.0 with the benefits of Web 2.0 without the grift of Web 3.0” was selected. In this post I’m giving you the cliff notes of the presentation and the slides, as we eagerly await the upload of the recorded video.
These are the slides:
HTMX is a client side javascript library that extends HTML using attributes to enable interactivity and dynamic web pages.
Current web archicture focusses on oodles of JavaScript and SPA’s to work around the limitations of HTML as a client side application platform:
Effectively HTML is stuck in 1995. SPA’s solve the “stuck in 1995” problem by working around HTML. HTMX solves the problem by extending HTML
HTMX provides the following to extend HTML, augment the client-server communication and allow you to provide rich user experiences.
In the presentation I gave some examples for each of these HTMX additions, and then I proceeded to give a live demo.
The live demo consisted of two parts:
You can find the code at github (see the links).
With HTMX a backend developer can now make HTML pages more dynamic without having to switch to a full client-side application build. You just render out HTML and progressively enhance the application with HTMX tags and such to make a rich application.
I heartily recommend checking out HTMX and give it a 9/10.
]]>]]>The revolutionary ideas that empowered the Web
A simpler approach to building applications on the Web and beyond with htmx and Hyperview
Enhancing web applications without using SPA frameworks
To check if the signature is (in)valid you can use this Terminal command:
$ pkgutil --check-signature /Applications/Eclipse\ 2023.09.app
Package "Eclipse 2023.09":
Status: package is invalid (checksum did not verify)
When the signature is invalid, you need to recalculate the signature:
$ codesign --force --deep --sign - /Applications/Eclipse\ 2023.09.app
/Applications/Eclipse 2023.09.app: replacing existing signature
And voilà! your Eclipse will start again.
]]>]]>If you use React right, it’s gonna work out… Just like communism, agile and being a Scotsman
It is a JavaScript library that enables Hypertext As The Engine Of Application State (HATEOAS) in the browser by using attributes to declaritively specify what actions need to be taken and which element needs to be replaced by the HTML response of the action. HTMX issues mostly AJAX requests and integrates with the history API. It is fully HTML driven, no additional JavaScript is necessary, only if you want pure clientside functionality.
<div hx-get="/banana" hx-target="#strawberry">Click me</div>
<div id="strawberry">gets replaced by the HTML that is returned after the AJAX GET</div>
Clicking the Click me
text inside the first div
element will issue an AJAX GET request to the /banana
endpoint on the server.
The request should respond with a HTML fragment that will replace the strawberry
div.
HTMX takes care of all the plumbing.
<script>
taghx-XYZ
attributes on your DOM elementsAs you might know I have a pretty strong Wicket background. So the serverside rendering component of HTMX and low-JavaScript usage appeals to me considerably. I have to re-learn some stuff to actually get good in the HTMX and HATEOAS mindset, and to combine multi-element updates instead of relying on full page refreshes (which HTMX takes good care of!)
I have created an already quite complicated UI with:
And all these items are linked together already, with a minimum of Java code, HTML and no JavaScript of my own.
Tally for now:
The fun part when compared to writing Wicket pages is that you can easily edit the HTML templates to add functionality. It is further enhanced by the quick reloading of my currently 3 Java classes by Quarkus’ development mode.
The hardest part for me is to figure out how to make this all maintainable and discoverable. The Qute templating engine is nice, and Quarkus has some decent defaults, so probably I need to adhere to those standards more.
The next weeks will be fun and filled with learning!
]]>I put the JPA entities on the test class path:
src/main/java/banana/CliCommand.java
src/test/java/banana/model/Tenant.java <|-- Entity
src/test/java/banana/model/TenantAccount.java <|-- Entity
Unfortunately when I start Quarkus in dev mode, Hibernate complains that it can’t find any entities, so it disables itself:
WARN [io.qua.hib.orm.dep.HibernateOrmProcessor] (build-27) Hibernate ORM is disabled because no JPA entities were found
I tried googling for this, but couldn’t come up with an answer, so I asked the question on Stack Overflow, and within 30 minutes or so I got the answer:
Just put the
io.quarkus:quarkus-hibernate-orm-panache
dependency on the<scope>test</scope>
scope, and everything will work as you intended.
And that works!
]]>So I’ve updated my blog template to use open graph protocol headers identifying the blog posts. I also updated the default protocol for my blog to be HTTPS instead of HTTP (so 2017).
Here’s to hoping the updated headers make my blog posts preview prettier on Mastodon!
]]>cmd + shift + .
Awesome: this makes for example searching for JDKs installed using SDKman much easier, or finding custom Maven settings.
]]>No more! Apparently the code signature of the Eclipse.app
package is not equal to the contents of the package, preventing it from starting up.
Using the following shell command you can re-sign the Eclipse.app package (if you’re sure it should be resigned of course), enabling it to restart again:
sudo codesign --force --deep --sign - /Applications/Eclipse.app
It took quite a while on my machine to complete, but that time was a lot shorter than having to download and re-install.
Many thanks to the folks at stackoverflow.com for having an anwser readily available.
]]>Git grep is an awesome tool in your toolbox: it is blazingly fast at finding stuff and pretty flexible it turns out.
Java (and other programming languages) will often split a line of code across multiple lines because our common width of files typically doesn’t exceed 120 characters in editors. So you get split constructor calls, or using the stream API you want to all places where you sort and make the results unique:
people.stream()
.distinct()
.sorted(Comparator.comparing(Person::getLastName)
.collect(Collectors.toList());
If you want to find this, a naive attempt would be to search for these terms directly:
% git grep -e "distinct()" --and -e "sorted("
But this will only find files that have the terms distinct()
and sorted(
on a single line, and that is not what we want.
Fortunately git grep has a solution for that: --all-match
in combination with --or
:
% git grep --all-match -e "distinct()" --or -e "sorted("
This will find all files that have a line with distinct()
or sorted(
.