"Read my lips, no more JavaScript"

Except when you need it :)

JavaScript… love it or hate it, the truth is JavaScript isn’t going anywhere soon as I have mentioned before. Microsoft’s Blazor aims to “reduce” the reliance on JavaScript, but it still seems to manage to find its way into most projects (certainly ones with UI’s).

HTMX aims to get rid of JavaScript for most of the key things you need to do when using plain old HTML. HTMX sprinkles in a few new HTML attributes to unlock a whole world of new opportunities.

By the way, this discovery was most definitely down to fireship.io and a lovely 100 seconds video which you can check out here. I have a summary below if you wish to read…

In the video "htmx in 100 seconds" by Fireship, the focus is on introducing htmx, a UI library for web applications. The video starts by highlighting the idea that HTML is more powerful than many realize, as every time a link is clicked or a form is submitted, an HTTP request is automatically sent to the server, and the response is rendered in the UI.

htmx aims to simplify web development by replacing complex JavaScript code and frameworks with the simplicity of HTML. It embraces the architectural constraint called Hypermedia as the Engine of Application State, which involves adding attributes to HTML to handle the complex requirements of modern user interfaces. These new attributes enable making server requests from any element by specifying an HTTP verb and URL endpoint. htmx can replace the content of an element asynchronously, or specify a target element for replacement.

htmx also provides customization options, such as specifying the event that triggers the request and modifiers like delay and throttle to control how the request is sent. It also keeps track of loading states, allowing developers to show spinners and apply CSS transitions for animations. Additionally, htmx utilizes the HTML validation API to validate forms.

The video mentions that htmx includes a client-side router called boost, which can make traditional web applications feel faster by creating a single-page application experience. htmx also offers extensions for advanced features like websockets and integrations with other HTML frameworks like Alpine.

To install htmx, one simply needs to import it using a script tag in the HTML document. Additionally, a server that returns HTML text as a response is required.

The video demonstrates making requests to endpoints using the HX get attribute and replacing elements using HX swap. It explains that swapping doesn't have to be limited to replacing outer HTML but can also involve appending or prepending the response to the existing UI. htmx provides the HX Target attribute to move the UI to a different element, which can be easily identified using CSS selectors and additional syntax like next and closest.

htmx also offers an event system that allows developers to listen to custom events using JavaScript. The HX on attribute can be used to bind a JavaScript function to any element.

The video concludes by highlighting how htmx can be used to build highly polished and full-stack HTML applications. Viewers are encouraged to share their thoughts and feedback in the comments.

In summary, "htmx in 100 seconds" provides an overview of htmx, emphasizing its ability to simplify web development, utilize the power of HTML, and enhance user interfaces in a straightforward manner.