Mike's Notes
The Pipi 9 CMS Engine (CMS) uses HTMX in the rendered User Interface (UI). HTMX interacts directly with the DOM.
Recently, Ben Nadel has been running a fascinating series of posts on his blog about his coding experiments with HTMX.
He shares a lot of CFML code on his blog, which can be freely reused. I learn a lot from Ben.
I will update this page with more references to Ben's posts about HTMX.
Resources
- https://www.bennadel.com/
- https://www.bennadel.com/blog/4794-using-stale-while-revalidate-cache-control-headers-in-htmx-and-coldfusion.htm
- https://www.bennadel.com/blog/4793-keyboard-command-extension-in-htmx-and-coldfusion.htm
- https://www.bennadel.com/blog/4792-exploring-extensions-in-htmx.htm
- https://www.bennadel.com/blog/4791-using-scope-to-identify-the-host-element-in-queryselectorall.htm
- https://www.bennadel.com/blog/4790-using-hx-preserve-to-persist-elements-across-swaps-in-htmx.htm
- https://www.bennadel.com/blog/4789-previous-next-css-selector-both-use-a-depth-first-algorithm-in-htmx.htm
- https://www.bennadel.com/blog/4788-fetch-api-will-propagate-non-post-methods-upon-redirect.htm
- https://www.bennadel.com/blog/4787-using-alpine-js-in-htmx.htm
- https://www.bennadel.com/blog/4785-filtering-hx-trigger-server-events-in-htmx-and-coldfusion.htm
- https://www.bennadel.com/blog/4784-conditionally-preventing-hx-boost-in-htmx-using-an-extension.htm
- https://www.bennadel.com/blog/4783-comparing-undefined-values-with-optional-chaining-in-javascript.htm
- https://www.bennadel.com/blog/4782-http-get-and-http-post-are-sufficient-for-me-in-coldfusion.htm
- https://www.bennadel.com/blog/4769-hypermedia-systems-by-carson-gross.htm
- https://www.bennadel.com/blog/tags/6-javascript-dhtml-blog-entries.htm
References
- Hypermedia Systems by Carson Gross
Repository
- Home > Ajabbi Research > Library > CFML
- Home > Handbook >
Last Updated
07/05/2025
Ben Nadel on HTMX
A Passionate Web Developer With 26 Years Experience.
"I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self! - Ben Nadel"
Using Stale-While-Revalidate Cache-Control Headers In HTMX And ColdFusion
By Ben Nadel on May 6, 2025
In my ColdFusion applications, unless I'm generating dynamic images that need to be cached, I almost never use the Cache-Control HTTP headers. Historically, all of my "caching needs" for perceived performance have been handled in my client-side Angular controllers. But, the HTMX JavaScript framework is all about leaning on the web platform to drive application mechanics. As such, I wanted to see how I might use the stale-while-revalidate response directive to boost performance in an HTMX and ColdFusion application...
Keyboard Command Extension In HTMX And ColdFusion
By Ben Nadel on May 3, 2025
Earlier this week, I took a look at using extensions in an HTMX and ColdFusion application. Extensions allow us to tap into the event life-cycle of nodes withing the document object model (DOM); which, in turn, allows us to augment the document behavior as HTMX swaps content into and out of the rendered page. For this follow-up post, I take inspiration from the Docket app by Mark Story. Mark's HTMX and PHP app allows keyboards events to trigger DOM interaction. I wanted to try building something similar for a ColdFusion demo...
Exploring Extensions In HTMX
By Ben Nadel on May 1, 2025
The HTMX JavaScript framework operates by traversing your Document Object Model (DOM) looking for elements that match a set of criteria, such as the existence of an hx-get or an hx-post attribute; and then, processes the matching elements by applying new behaviors. As it orchestrates these modifications, it emits a series of events on the DOM. Informally, these events can be a way for any JavaScript library to hook into the HTMX life-cycle by consuming the DOM as an event-bus; but, HTMX also provides an official way of doing this by using extensions...
Using :scope To Identify The Host Element In .querySelectorAll()
By Ben Nadel on April 29, 2025
Here's a helpful tip that I learned the other day. When using a Document Object Model (DOM) method to query for HTML elements using a CSS selector (ex, .querySelectorAll()), the :scope pseudo-class can be used to identify the host element on which the method is being called. This allows us to use the direct descendant selector (>) to target children of the host element...
Using hx-preserve To Persist Elements Across Swaps In HTMX
By Ben Nadel on April 27, 2025
With HTMX, you can use the hx-boost attribute to AJAX'ify navigation in your ColdFusion applications. Boosting pages increases the complexity of the application and can lead to some strange JavaScript behaviors. But, this trade-off in complexity ushers in the ability to maintain some state across pages. And one way to maintain state in HTMX is with the hx-preserve attribute...
Previous / Next <CSS Selector> Both Use A Depth-First Algorithm In HTMX
By Ben Nadel on April 26, 2025
In the HTMX JavaScript framework, the hx-target attribute can reference other elements in the DOM (Document Object Model) by using CSS selectors, convenience keywords (such as this and next), and a combination thereof. Most of these are relatively straightforward; but, I ran into surprising results when using previous {CSS selector} and next {CSS selector}. I had read the documentation and interpreted it as meaning that the targeted elements were direct descendants of the same parent element. But, this is incorrect. Internally, HTMX is using a depth-first traversal algorithm—from the document root—to find the target nodes; and then, selects the one closest to the trigger element based on a depth-first node traversal order...
Fetch API Will Propagate Non-POST Methods Upon Redirect
By Ben Nadel on April 26, 2025
In the book Hypermedia Systems by Carson Gross, the authors mention that the browser will propagate the HTTP Method upon redirect. In all my years of programming, I had never seen this; so, I sanity checked it and put the issue to rest in my head. Then, yesterday, I was listening to the Remote Ruby podcast with Chris Oliver and Andrew Mason, and they too mentioned this HTTP method propagation specifically for the JavaScript fetch() API. I feel like I was taking crazy-pills; so, I went to sanity check it again; and, discovered that the fetch() API will propagate the HTTP method; but, only for non-GET/POST methods...
Using Alpine.js In HTMX
By Ben Nadel on April 25, 2025
The HTMX JavaScript framework allows us to move a lot of state management out of the browser and back into the ColdFusion server where the "source of truth" resides. But, not all interactions—and not all state—need to be sourced from the server. In such cases, we can use Alpine.js to provide light-weight state management and event binding in the browser. That said, both HTMX and Alpine.js want to "manage the DOM" and the event-bindings. As such, it's not obvious that they'll play well together. To get a sense of where the points-of-friction might lie, I wanted to put together a small demo that uses both HTMX and Alpine.js as well as the hx-boost attribute to "AJAX'ify" the page navigation
Filtering HX-Trigger Server Events In HTMX And ColdFusion
By Ben Nadel on April 22, 2025
When building Single-Page Applications (SPA) with Angular and ColdFusion, one common pattern that I used was to return an event in every mutation-based API response. This event was then triggered on a client-side event-bus; and, various Angular components could respond to it as needed. In an HTMX multi-page application (MPA), we can use the HTTP response header, HX-Trigger, to achieve similar outcomes. And, we can use the filtering capabilities of the client-side hx-trigger attribute to limit the scope of this client-side response...
Conditionally Preventing HX-Boost In HTMX Using An Extension
By Ben Nadel on April 19, 2025
In an HTMX application, the built-in hx-boost attribute tells HTMX to intercept all form and anchor interactions and "AJAX'ify" them. That is, prevent the default browser behavior and re-implement it using AJAX and the History API in order to side-step a full page-load. This is a neat feature; but, it doesn't have any hooks (that I can find) to conditionally prevent hx-boost from acting on a given link. Such a hook would be necessary when integrating content that comes out of a content management system (CMS). To try and add such a hook, I've created my first HTMX extension, prevent-boost, that can conditionally prevent boosting based on RegEx patterns and / or filter callbacks...
Comparing Undefined Values With Optional Chaining In JavaScript
By Ben Nadel on April 17, 2025
Yesterday, while working on some HTMX experiments, I stumbled upon a feature of JavaScript that I didn't known: the undefined value, when compared to Booleans and numbers, always returns false. I've always thought of undefined as a falsy value (which it is); so, I was very surprising to see that undefined did not soft equal false. But, this turns out to be hugely beneficial when it comes to the optional chaining operator (aka, the safe navigation operation) in JavaScript...
HTTP GET And HTTP POST Are Sufficient (For Me) In ColdFusion
By Ben Nadel on April 14, 2025
As of this writing, HTML supports two different HTTP methods: GET and POST. And for the last 25-years, I've been building web-based applications very successfully on top of these two operation. Many people, however, are not satisfied with these limitations; and, would like to see PUT, PATCH, and DELETE added to the list of natively supported methods in HTML. Personally, I'm quite satisfied with GET and POST and haven't really experience any pain-points. So, I thought it might be interesting to try and articulate my perspective....
ColdFusion And HTMX Contact App
By Ben Nadel on April 13, 2025
A couple of weeks ago, I read Hypermedia Systems by Carson Gross. The book is an introduction to HTMX - a JavaScript library that extends the HTML specification and brings dynamic single-page application (SPA) type features to a traditional multi-page application (MPA) architecture. Some of the aspects of HTMX are fairly simple; but, some require a sizable mindset shift. As such, I thought it would be helpful (for me) to take the "contacts app" that Carson builds in the book and translate it into a ColdFusion application context....
Hypermedia Systems By Carson Gross
By Ben Nadel on February 18, 2025
Last week, Peter Amiri - maintainer of the CFWheels framework for ColdFusion - sent me a hardcover copy of Hypermedia Systems by Carson Gross, Adam Stepinski, and Deniz Akşimşek. This book argues for the benefits of "Hypermedia Driven Applications" (HDA); and how leaning into the foundational nature of the web as a unified interface and hypermedia platform makes applications easier to build and more accessible while still achieving a high-bar of interactivity. This book is clear, concise, and quite compelling. Coming in at around 300 pages, I finished reading it in two day—I just couldn't put it down.....
No comments:
Post a Comment