Logo

dev-resources.site

for different kinds of informations.

Trending Tech: HTMX

Published at
9/21/2023
Categories
html
webdev
programming
ajax
Author
jameslau
Categories
4 categories in total
html
open
webdev
open
programming
open
ajax
open
Author
8 person written this
jameslau
open
Trending Tech: HTMX

DEFINITION

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext - htmx.org

I first heard of this technology from Siegfried, deploy! podcast, episode #41. Didn’t think too much about it until another recent article came up in my feed today from Infoworld. This got me thinking about the uniqueness of HTML attributes again. Adding those extra bits of HTML markup really helps define the boundaries of what the front-end has to offer.

I do recall, lines and lines of thick HTML code that were laced into an open-source project. In the past attributes have been used for a variety of things for the front-end. From, data attributes that tie in nicely with JavaScript for special functionalities, to ARIA attributes for accessibility purposes.

Then there is the massive additional HTML attributes library. It almost feels like, attributes is an ongoing extension of HTML, minus the bloated JavaScript libraries that we all know and love today.

LESS OVERHEAD, PERHAPS?

Going back to server-side rendered, with just a simple call through HTML markup? Didn’t the web community spend over half a decade perfecting front-end loaded frameworks such as React.js, Vue.js, etc. in order to offload functional components on the client side?

Aren’t we going backward here? An avid Drupal friend of mine said, “what else is new hmm. isn’t that just isomorphic.” He mentioned that this was already somewhat of a thing baked into Drupal 8.3.

Out with the old…in with the…old? It is possible but with a twist!

AJAX requests are a popular method for pinging the server, whenever needed. A great example is the use of Google Maps. You don’t need the whole map unless you move the cursor to a new spot. This then grabs the data from the server again. Here’s where the HTMX hx-trigger attribute comes into play.

There’s something called Standard Event Filter, which is like a call to a JavaScript library, then you can add an additional boolean bracket to the attribute called Standard Event Modifier to enhance its behavior after the event.

This is just one interesting aspect of the technology that made sense to me. It is still new to me, but intriguing nonetheless because it modifies HTML.

KEEP ME APPRISED

I’ll be sure to keep HTMX on my tech radar. There are already so many new things happening within the front-end space, that it is hard to keep up. I can go down a reference rabbit hole with new CSS nesting, but let’s save that for another post!

This was initially published on my site at jameslau.com. Please come by and check out more of my writing and other works!

Thanks for reading!

ajax Article's
30 articles in total
Favicon
How to Load More data using ajax pagination on scroll in laravel 11 Example
Favicon
Ajax: Revolutionizing Web Interaction - A Comprehensive Guide
Favicon
How to create ajax How to create ajax dependent dropdown in laravel 11
Favicon
A Comprehensive Guide with XHR, Fetch API, Axios and jQuery AJAX
Favicon
Vaadin, the battery-included server-side AJAX framework
Favicon
Augmenting the client with Alpine.js
Favicon
Augmenting the client with Vue.js
Favicon
A short history of AJAX and SSR
Favicon
Experimenting with AJAX and APIs: A Comprehensive Guide for Beginners
Favicon
Asynchronous Requests in JavaScript: AJAX, JQUERY, FETCH and AXIOS.
Favicon
JS: Geek Out with AJAX
Favicon
Exploring django-ajax: Simplifying AJAX Integration in Django
Favicon
Exploring The Power Of AJAX Flex In Web Development
Favicon
Laravel 11 Ajax Form Submit With Validation
Favicon
com.girl.brashcrab
Favicon
Some uncommon Ajax techniques that most people don't know
Favicon
A Simple Guide to Developing AJAX-Driven Plugins for WordPress
Favicon
Do you know AJAX?
Favicon
419 Page expired Laravel 10|9 postman, Ajax Post, Form Submit Login
Favicon
crud operation using ajax in laravel 10 with popup modal
Favicon
How do I get my text to connect to the ajax call I am trying to connect from the ajax call to the controller?
Favicon
Trending Tech: HTMX
Favicon
Send Form Data With Ajax
Favicon
Dependent Country State City Dropdown using jQuery Ajax in Laravel 10
Favicon
What is AJAX in JavaScript ?
Favicon
Laravel 10 Ajax Crop and Upload Image using Croppie js
Favicon
Laravel 10 Ajax CRUD with Image Upload Tutorial
Favicon
Tab Content Structure with Ajax and PHP
Favicon
Create a mini facebook clone in laravel and ajax
Favicon
How To Cancel an AJAX Request in JavaScript Using the AbortController

Featured ones: