diff --git a/public/img/blog/en/htmx-01/music-player-01.jpg b/public/img/blog/en/htmx-01/music-player-01.jpg new file mode 100644 index 0000000..fb27f07 Binary files /dev/null and b/public/img/blog/en/htmx-01/music-player-01.jpg differ diff --git a/public/img/blog/en/htmx-01/music-player-02.jpg b/public/img/blog/en/htmx-01/music-player-02.jpg new file mode 100644 index 0000000..7fdc318 Binary files /dev/null and b/public/img/blog/en/htmx-01/music-player-02.jpg differ diff --git a/public/img/blog/en/htmx-01/music-player-03.jpg b/public/img/blog/en/htmx-01/music-player-03.jpg new file mode 100644 index 0000000..b0efb2e Binary files /dev/null and b/public/img/blog/en/htmx-01/music-player-03.jpg differ diff --git a/public/img/blog/en/htmx-01/types-01.jpg b/public/img/blog/en/htmx-01/types-01.jpg new file mode 100644 index 0000000..2f17214 Binary files /dev/null and b/public/img/blog/en/htmx-01/types-01.jpg differ diff --git a/src/pages/blog/en/over-engineered-cruds.mdx b/src/pages/blog/en/over-engineered-cruds.mdx index 945c1b6..d6de71b 100644 --- a/src/pages/blog/en/over-engineered-cruds.mdx +++ b/src/pages/blog/en/over-engineered-cruds.mdx @@ -136,7 +136,47 @@ hiding buttons in the frontend should be enough. > Me: ๐Ÿคจ๐Ÿ˜‘๐Ÿคฎ๐Ÿซ  -to be continued... +## Using whatever feels fast + +Something I've noticed is that, apparently, my colleages don't know +any of what is going on with the codebase. Or at the very least, they +don't know how it works. + +When implementing a new feature they will do something like: + +- ask chatgpt to implement the feature +- copy pasta the code provided by chat gpt +- get errors because duh +- copy pasta the errors into chatgpt +- copy pasta the chatgpt output into the codebase +- repeat until feature is done + +And so, I believe that because of this, either they don't really +feel the impact of all the complexity, or they don't know it exists, +because it is all chat gpt. +## Why no htmx? + +To be expanded on the next blog post. + + +## In conclusion + +I think that the trend of using React everywhere, and the arrival of +chat gpt have doomed "modern" web development. Those 2 things have +enabled developers to build a prototype **blazingly fast**, without +concerning with efficiency, security, mantainability, etc. Since +they can just make chat gpt do their work for them, they don't +understand the severity of the choices they make, don't learn +about new, better ways to do the same, and continually build +bloated software applications. + +It also doesn't help that either they are not able, or willing, +to learn new things. Hell, most of my colleages struggle with +reading simple error messages, and some can't seem to be able to +figure out how typescript or react work. + +So it's not fully chat gpt's fault. But it has enabled those +developers to become complacent, and stop improving. diff --git a/src/pages/blog/en/real-htmx-01.md b/src/pages/blog/en/real-htmx-01.md new file mode 100644 index 0000000..726e60d --- /dev/null +++ b/src/pages/blog/en/real-htmx-01.md @@ -0,0 +1,240 @@ +--- +layout: ../../../layouts/BlogLayout.astro +title: Why it might be hard to adopt htmx +description: | + Adopting htmx is not as simple as it seems, specially if your focus is on + development speed rather than quality. +pubDate: "2024-10-27" +tags: ["javascript", "htmx", "hyperscript", "alpine", "demo"] +image: + url: "" + alt: "" + caption: "" +--- + + + +TLDR: htmx viability is limited by its environment: hyperscript, alpine, etc. + + +Ever since I was evangelized by the htmx x's (formerly twitter) posts, +I wanted to use htmx on a real project. And a CRUD would be the right +chance to do so, right? + +However, I found that htmx would not be so easy to adopt. These are not +htmx faults, rather, faults with the htmx ecosystem, so to speak. + +These are the things that I found made it difficult to use htmx: + +## Lack of a UI library like shadcn + +htmx is not a UI library. However, it requires the UI to exists. +When I tried implementing my CRUDs with plain html, building the UI +was a problem. Unless I'm blind, most modern UI libraries focus either +on React or other JS frameworks. You get React code, not html+css. + +So, if I want to implement a table, I have to write the html+css +from scratch. In react, I can just `npx shadcn add form` and +use it immediately. It handles responsiveness, dark-theme, +animations, etc. There is no such thing for plain HTML. + +And btw, this is the motivation for one of my new side-projects, +[htmxui](https://ui.araozu.dev). I want a CLI that is able to +generate UI components like shadcn, but instead of react it's +capable of emitting code for any templating language: go temple, +rust maud, elixir HEEx, etc. + + +## Hyperscript is not good enough + +Personally, I like the idea of hyperscript. It allows you to do +some light scripting, pairs nicely with htmx and it's DSL, once +you get used to it, is easy to use. + +However, 2 things come to main as disadvantages: + +- It has a DSL. It's yet another programming language to learn, +and it does't have the best way to debug errors. The average dev +can barely handle Typescript, I wonder if they could learn something +like this. + +- It's not good enough for anything other than basic scripting. +For example, I build a music player for navidrome using only htmx +and hyperscript. +If every last piece of UI you will render is done on the backend, +hyperscript is good. But if you ever want to render UI exclusively +on the frontend, hyperscript stops being so useful. + + +### Alpine doesn't integrate as well with htmx + + +## Case study: my own music player. + +I built a web player that consumes data from a Navidrome server. +It is written with Go+Templ, uses tailwind for styling. I wanted +to see if it was possible to build a (relatively) dynamic application. + +The initial pages are all really easy to build. Rendering html +on the server without having to have a complete turing machine +that handles loading state and error states and all is so +refreshing. + +![UI of my music player](/img/blog/en/htmx-01/music-player-01.jpg) + +However, as soon as I began to work on the player itself, many +problems appeared. + +The music must play on the client (duh), and so the music player +must be handled by client side javascript. + +First, I wanted to have a mini music player. When the user clicks on +a song (1), the music player will show it's cover, title, artist, and +music controls (2). + +![UI of my music player, pt2](/img/blog/en/htmx-01/music-player-02.jpg) + +Hyperscript is uncapable of doing something like this, easily. +Instead, I had to write a `