Thursday, September 7, 2023

htmx Can Be Awkward

I spent a bit of time in the last few days trying to convert a little app React app that I use to track my expenses to my new favourite stack: htmx and deno.

Unfortunately I ran into a few roadblocks.

In my design I have two lists of data (expense categories, expense date periods) which when clicked update themselves and the expense data.

They are

overflow: scroll

blocks.

My original implementation essentially updates the whole app when you click on an item in the list which I think is what htmx encourages you to do.

What this does when you're scrolled to the end of an overflow scroll block is that it resets this content block to its original state (essentially scrolling the content block back to the top) as it's sending fresh HTML back to the client. This makes for a slightly janky user experience.

React does a better job of handling this problem with useState.

Basically what this has made me realise is that for websites that are more like "apps" React is still the better choice. For more basic user experiences htmx is superior but you kind of need to design with htmx in mind. You need to make a "website" and not an "app".