Recent Blog Posts by Ben Nadel
Trying To Get ChatGPT 4 To Solve My Hotwire Form Submission Problem
As I've been updating my ColdFusion blog to use Hotwire, I've been running into compatibility issues that need to be addressed. For the most part, these issues are easy to solve; but, I have one that I can't quite get working: When Turbo Drive submits a form, it scrolls back to the top of the page (to be expected). However, my form action historically uses a fragment to scroll the user back down to the form element. Unfortunately, Turbo Drive does not honor this fragment. Everyone has been talking about how awesome ChatGPT is at writing code. So, I figured this might be a good opportunity to sign-up for Open AI and give it a shot... read more →
Disabling Turbo Drive In A Subdirectory Of Your ColdFusion Application
As is the expectation, moving from theory into practice always reveals new trials and truths about a given topic. Or, as Mike Tyson put it: "Everyone has a plan until they get punched in the mouth." Migrating my ColdFusion blog over to using Hotwire is no different. I'm hitting all kinds of edge-cases that I need to adapt to; one of which is that I have loads of old demos that I've built over the years. These demos are not Hotwire compatible; and, I don't intend to update them anytime soon. As such, I needed a way to progammatically disable Turbo Drive on any link that points to one of these demos... read more →
Russian Doll Content Wrapping With CFSaveContent In ColdFusion
In web development, the term "Russian Doll" is sometimes used to refer to content that is wrapped inside another piece of content of the same type. This is based on the Russian Doll toy (Matryoshka), which has a multitude of smaller toys contained within it. In the past, I've looked at using the Russian Doll pattern for error handling in Node.js as well as for error handling in ColdFusion. But, its value extends beyond just errors - I often use the CFSaveContent tag to build up a content payload from the outside in. And, I thought it would make for a nice example... read more →
Working Code Podcast - Episode 119: Potluck
On today's show, we all bring something juicy to consider. Carol kicks things off with some trepidation about becoming an independent contractor and having people rely solely on her to find business; Tim shares an article on Technical Debt and digs into the subtle differences between tech debt and bad code; I am befuddled by the fact that "common sense" is apparently wildly subjective; and, Admin introduces us to Bloom Filters... read more →
Incrementally Applying Hotwire To An Existing ColdFusion Application
Over the past few months, I've been exploring the Hotwire framework from Basecamp. Hotwire includes the use of Turbo for enhanced performance and Stimulus for dynamic interactions. There is something very enticing about the Hotwire philosophy and the way it drives progressive enhancement. But, dropping Hotwire into a ColdFusion application isn't seamless. File extension limitations and form processing redirects, for example, mandate at least some changes to the way you architect your Controller layer. I'd like to start using Hotwire on my ColdFusion blog; but, I know my code isn't "Hotwire ready". As such, I wanted to look at how I can incrementally apply Hotwire to my existing ColdFusion application... read more →
I've Never Had A Good Story For View-Rendering Helpers In ColdFusion
As I've been digging into the Hotwire framework, I've been looking at a lot of Ruby on Rails code (which is where Hotwire originated). Coming from a ColdFusion background, grokking Rails code is somewhat challenging because it's (seemingly) like 99% "view helpers" and syntactic sugar. CFML, on the other hand - with its majestic tag support and encodeFor* functions - feels more accessible. But, the other day in a Stimulus controller demo, I had to write this in a CFML template:.. read more →
Working Code Podcast - Episode 118: Things We Should Be Doing
As web developers, we're all high-functioning, motivated people. And, we certainly have a good sense of what we should be doing with our time (both personally and professionally). But, theory rarely survives contact with reality. And, on today's show, we talk about all that sweet, sweet stuff we ought to be doing; and, why we can't quite motivate to get any of it done! Topics include backing up computers; creating reproducible systems; reading educational books; upgrading all the things; learning analytics; and, meeting other hoomans!.. read more →
Using Nested Stimulus Controllers With Hotwire And Lucee CFML
The other day, on the Hotwire Dev Forum, I was having a discussion about communicating across Stimulus controllers. Most of my explorations so far have revolved around Turbo and progressively enhancing a ColdFusion application. As such, I didn't have much to offer in the way of advice. In order to help flesh out my mental model for Stimulus controllers, I wanted to put together a demo that explores a few different ways to communicate between a child controller and a parent controller in a Hotwire application... read more →
Using "return" To Short-Circuit A CFML Template In ColdFusion
At work, we use Framework One (FW/1) to route and render our ColdFusion requests. As such, our "controller layer" is implemented as a series of ColdFusion components (CFCs). And, since each request maps to a method invocation on said components, I'm used to using a return statement when short-circuiting my controller actions. Yesterday, when working on my Hotwire + ColdFusion demos - which uses simple CFML templates as its controller layer - I accidentally used a return statement to short-circuit the control flow. And it worked! This was unexpected; and, I wanted to see if it worked in both Adobe ColdFusion and Lucee CFML... read more →
Rendering A Fly-Out Form Panel Using Turbo Frames With Hotwire And Lucee CFML
When using Hotwire to progressively enhance "normal" ColdFusion pages, the process is quite seamless: as long as you're returning a non-200 status code on failed form submissions, everything just works! It's only when you start transcluding forms from one page into another page that things get tricky. This is doubly-true when the transcluded form is transient, such as with a modal window or a fly-out panel. To start getting comfortable with this concept, I wanted to try and render a form inside a fly-out panel in a Hotwire enhanced ColdFusion application... read more →
Working Code Podcast - Episode 117: Champions Of Truth
On episode 114 of the show, in an effort to balance out the somber tone of Carol's unfortunate layoff, we decided to have a little fun and play Two Truths and a Lie. On today's episode we review the listener submissions and crown the one winner who correctly selected all of our lies. And the prize goes to.... listen to find out!.. read more →
Styling Submit Buttons During Form Submission With Hotwire And Lucee CFML
When you submit a form in a Hotwire enhanced ColdFusion application, several things happen: The progress bar may be rendered if the request takes a while; the targeted submit button will be disabled (in order to prevent double-submissions); and, as of the Turbo v7.3.0 release, you can now alter the innerHTML of the targeted submit button while the form is being processed. Since I haven't explored these latter behaviors yet, I wanted to put together a quick demo using Lucee CFML... read more →
Rendering A Persistent Dismissible Banner Using Hotwire And Lucee CFML
When operating a Single Page Application (SPA) in Angular, I will often need to render a persistent banner across the top of page, alerting the user to some sort of state change or a call-to-action (CTA). Now that I know that Hotwire can define persistent Turbo Frames; and, that we can use custom Turbo Stream actions to visit those Turbo Frames; I wanted to see if I could use a persistent frame to render a dismissible banner in a Hotwire-enhanced ColdFusion application... read more →
Dynamically Adding Stimulus Controllers To Static Content Using Hotwire And Lucee CFML
As I'm digging into the Hotwire framework, I'm trying to keep an eye on how I might eventually convert this ColdFusion blog over to using it. And, one of the things that I currently have to contend with (on this blog) is progressively enhancing the "static content" within each blog post (ex, resizing code-blocks on mouseenter). The "Stimulus way" seeks to create small, targeted controllers instead of large, over-reaching "page" controllers. As such, I wanted to see if I can dynamically attach Stimulus Controllers to targeted elements within my static content... read more →
The User Experience (UX) Of Disabled Form Buttons
By default, form buttons aren't disabled. When you render a form, everything "just works". That is, until, a web developer decides to get "clever" and starts disabling buttons, pending some desired form state. Unfortunately, many developers are not quite as clever as they think they are; and, buttons often remain disabled even when a form has been completed filled-out. This obviously leads to a terrible user experience (UX)... read more →
Transcluding A Form Into A Turbo Frame Using Hotwire And Lucee CFML
In the Hotwire framework, we can use Turbo Frames to create small, independent, dynamic areas of a page. Turbo Frames can be used for things like lazy-loading user-specific content for better caching and including (or "transcluding") forms from one page into another page. This latter concept - transcluding forms - can unlock a lot of different user experiences. But, rendering a form inside a Turbo Frame can make post-submission redirections more complicated. Fortunately, I recently learned about creating custom Turbo Stream actions, which can help us bridge the redirection gap in our ColdFusion applications... read more →
Working Code Podcast - Episode 116: State Of Developer Conferences
Brian Rinaldi, Developer Experience Engineer at LaunchDarkly and long time friend of the show, recently wrote a blog post that was picked up in the TL;DR newsletter. His post, titled The State of Developer Conferences, shares a theory as to why both online and IRL (In Real Life) conferences are struggling to reach pre-pandemic attendance. Brian, who's been running conferences for 15-years, has a keen understanding of who attends events; and, why the demographics of attendees might be shifting. Conference organizers around the world are reading Brian's post and are nodding in strong agreement... read more →
Creating Custom Turbo Stream Actions In Hotwire And Lucee CFML
The Hotwire Turbo framework uses <turbo-stream> elements to apply targeted DOM (Document Object Model) manipulations to the current page. These Turbo Stream elements can be rendered in response to a Form POST; or, as we saw yesterday, they can be returned inline in any page response. The default Turbo Stream actions are all DOM-related. However, we can define our own custom actions as well. To explore this, I'm going to create a custom Turbo Stream action that invokes Turbo.visit()... read more →
Async Communication Is Great, Except For When It's Awful
Async (asynchronous) communication at the work place is having a moment. The pandemic acted as a forcing function, demonstrating that remote work isn't only possible but — in many cases and for many people — both preferable and more productive. Remote work, however, lead to an ever-more remote workforce which lead to a diversity of time zones which lead to collaboration issues. Async communication is intended to resolve some of these issues; and, to provide workers with more uninterrupted, deep-thought time. And, to be clear, I am a fan of async communication. But, I believe that there is an overused toxic form of async communication: Consensus building... read more →
Including Inline Turbo-Stream Actions In Hotwire And Lucee CFML
In my first exploration of Turbo Streams in Hotwire, I was generating a dedicated response of type, text/vnd.turbo-stream.html, which was being returned within a Form POST response. Based on the Turbo documentation, I had thought that this was the only way in which to use Turbo Streams. But, I recently came across a post on the Hotwire developer forum where people were talking about including Turbo Stream elements inline with any kind of response (top-level page or Turbo Frame). This is a very interesting proposition that I wanted to explore in Lucee CFML... read more →
Persisting An IFrame-Based Video Player Across Page Visits With Hotwire And Lucee CFML
One really nice feature of the Hotwire framework is that you can mark elements as "permanent". This persists the element in its current state across navigation events (both application and restoration). Unfortunately, this feature doesn't play very nicely with IFrames due to the fact that the browser will reload any <iframe> whenever it is moved around in the DOM (Document Object Model). However, if we render the IFrame in between the <head> and <body> elements, we can get around this issue in Hotwire using Lucee CFML... read more →
Working Code Podcast - Episode 115: Self-Care For Developers
After drinking close to 12 Mountain Dews in a single day, Adam started to wonder if - just maybe - he was using caffeine as a way to self-medicate. Upon discussing this with his doctor, Adam was diagnosed with ADHD (Attention-Deficit / Hyperactivity Disorder) - a condition very common in the world of programming (a fact that we inspect on the show). In light of these findings, we thought it would be nice to reflect on how we've all changed during the pandemic; and, share the little things that we do in order to keep our wits about us... read more →
Rendering Elements After The HEAD Tag In JavaScript
The other day, when I was exploring the progress bar in Hotwire, I noticed that the <div> implementing the progress bar was injected into the DOM (Document Object Model) after the <head> tag and before the <body> tag. I didn't know that it was possible to render elements outside of the Body tag. And, in fact, statically rendered elements outside of the Body will be "moved" into the Body (by the browser) as the HTML is parsed. However, it turns out that you can render elements between the Head and Body tags at runtime using JavaScript... read more →
Updating Permanent Elements On Page Navigation In Hotwire Turbo And Lucee CFML
In a Hotwire Turbo application, when you add the data-turbo-permanent attribute to an element (accompanied by an id attribute), this element will be cached and then replaced into subsequent pages that contain an element with the same id. Element permanence is awesome when you want to, for example, lazy-load a Turbo-Frame once and then have it persist across pages. But, it means that updating the content of said element gets tricky. I wanted to explore this idea in the context of "Toast Messages" in Lucee CFML... read more →
Parsing File Paths As Slash-Delimited Lists In MySQL
I've been working on populating a temporary MySQL database table that contains file paths of files that need to be deleted. And, since deleting data is always terrifying, I wanted to write a validation SQL statement that would take the files in the temporary table and then cross-reference them against other tables in the database. In order to do this, I needed to parse the file paths and extract various path segments. And, by using a combination of calls to SUBSTRING_INDEX(), I was able to treat each file path as a delimited list in MYSQL... read more →
Working Code Podcast - Episode 114: Carol Got Laid Off
Amid the frenzy of industry lay-offs, we here at the Working Code podcast were devastated to hear that our very own Carol Weiler has been affected by a down-turning real estate market. A few weeks ago, while attending a virtual All Hands meeting, her Slack account was suddenly locked, momentarily followed by her computer. It turns out that she, along with a majority of her engineers, were part of an unexpected reduction in force (RIF). On today's show, Carol graciously and courageously joins us to talk about her experience, the ensuing emotional roller coaster, and some of the fascinating steps that she's taken to help improve her outcome... read more →
Using Stimulus To Preload Links On Hover In Hotwire And Lucee CFML
From what I've been reading, when building a Stimulus controller in Hotwire, the key to success is thinking in terms of small, composable behaviors. So, instead of creating a controller that manages an entire View, we should seek to extract aspects of said view that might make sense in a wider variety of use-cases. To practice this mindset, I wanted to try building a Stimulus controller that will preload a given link target if the user hovers over an element for some period of time. And, of course, we'll be doing this in Lucee CFML... read more →
Defer Loading Using Permanent Turbo Frames In Hotwire And Lucee CFML
In a Hotwire application, you can use Turbo Frames to "decompose your page" into islands of information. These islands can be replaced dynamically and loaded asynchronously from the parent page. This reduces the amount of information that blocks the main page render. But, this async loading can also cause a lot of "content flashing" during navigation (as the Turbo Frame content loads / reloads). In order to defer the initial loading of the Turbo Frame content while removing the subsequent reloading, we can mark the Turbo Frame as permanent. This will persist the Turbo Frame DOM (Document Object Model) element across page requests. Let's explore this concept in Lucee CFML... read more →
Extending The Current Request Timeout In ColdFusion / CFML
The request timeout determines how long the current request / CFThread can execute before the request throws a timeout exception. For the most part, this value is either never set (which then uses the default timeout defined in the ColdFusion admin); or, it's set once at the top of the request. Sometimes, however, I run into situations where I need to dynamically update the timeout of the current page. Unfortunately, the CFSetting tag doesn't support this; as such, I wanted to outline ways in which this can be hacked into the request in either Adobe ColdFusion or Lucee CFML... read more →
Exploring Turbo Drive Back-Button Caching Behavior In Lucee CFML
When you enable Hotwire Turbo Drive in your ColdFusion application, link clicks and form submissions are intercepted and then subsequently executed via the fetch() API. Hotwire continues to maintain expected browser behaviors by pushing the relevant URLs onto the browser's History API. Then, if the user presses the Back Button, Turbo Drive pulls the previous rendering out of its cache and restores the previous <body> content and scroll offset. In this post, I want to take a closer look at when the page cache is populated; and, what events get triggered when a cached page is re-rendered... read more →