For a side project I had to add some advertisements, and while I was at it, I also added Google Ads onto my blog. Not so much as to make money (I don’t expect a lot of traffic here) but to learn how to do it in various environments. It can be a very useful skill if you are running a free website to cover hosting or if you want to provide this as a service to others.

Using htmx with Bootstrap is mostly a seamless experience, but I’ve encountered a few places where a bit of extra effort is needed to smooth everything out. Since I could not find a concise description of the required fix, I’ve created this quick post to outline the issue and the remedy.

Bootstrap

Since I work mostly on business-to-business administrative web applications, I need to build many interfaces, yet a slick or custom styling is usually not the highest priority. We need a well rounded set of standard component that enables data presentation with clarity. So let’s just pretend we still live in the ’10s and use Bootstrap. A benefit is that all the scraping-trained AI’s are now all Bootstrap experts, meaning that stamping out entire dashboards is trivial.

For my full-stack projects I like to use Server-Side rendering with Javalin, j2html and htmx. Together, these libraries allow you to write interactive full-stack web applications in vanilla java. In this post I’d like to explain how the j2html library fits in this setup, go over a few benefits, and link a converter that I wrote to make building the user interface easier.

Server Side Rendering

While the last decade was dominated by client-side frameworks, many applications could perhaps have saved a lot of development time by using server-side rendering. This means that the resulting html is built on the server, including its data, styling and behaviour.

If you’re on a website and you see a link, how do you figure out where that link will take you? Just hover over it right? Try to hovering this Totally Legitimate Link. If you dare, click it.

If you’ve clicked the link, welcome back! Refresh the page to have the link in it’s initial state again. Not everything is what it seems, and this is also very true when browsing the web.