Discover more from David’s Substack
Except when you need it :)
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 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
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.