Recent Blog Posts by Ben Nadel
Extracting JSON Embedded Within A Generate HTML File In ColdFusion
Yesterday, I looked at decoding the output of encodeForJavaScript() in ColdFusion. That post was a stepping stone for today's exploration; which is extracting said serialized JSON payload from a generated HTML file in ColdFusion... read more →
Decoding The EncodeForJavaScript() Output In ColdFusion
In ColdFusion, I often embed JSON payloads in a JavaScript context using the built-in encodeForJavaScript() function. This function makes sure to escape the given value such that a persisted cross-site scripting (XSS) attack cannot be perpetrated. On the JavaScript side, I then consume this encoded string value using JSON.parse()—note that JSON (JavaScript Object Notation) is the intermediary representation format... read more →
Less CSS Won't Import The Same File Twice When Globbing
When organizing my Less CSS files in a multi-page web application (MPA), I often have a folder full of modules in which each .less file represents a unique component. For the most part, the order in which these modules are imported is irrelevant since they represent isolated definitions. The exception to this rule is the theming and design system modules. In order to work with the CSS cascade, it's important that these design system modules be imported first such that other modules can override properties locally without having to worry about CSS selector specificity. Thankfully, Less CSS makes this easy with its automatic (default) deduplication of import paths... read more →
Forking Hotwire Turbo To Make It ColdFusion Compatible
For a while now, my blog has been running on the Hotwire stack of client-side technologies which includes Turbo. Turbo seeks to push a lot of the rich interactivity back to the server-side, making robust applications easier to develop. Only, it doesn't work with the .cfm file extension used by ColdFusion. And, for reasons that remain unclear, the Turbo maintainers seem highly resistant to providing a configuration option for file extensions. As such, I wanted to fork Turbo in order to make it play nicely with ColdFusion... read more →
Understanding RegExp Capture Groups When Using .split() In JavaScript
Yesterday, I was trying to take a plain-text value and split it into paragraphs using a regular expression in JavaScript. At first, it seemed to be working. But, on closer inspection of the rendered output, I notice that I was inserting an empty paragraph in between each populated paragraph. After 30 minutes of debugging and looking through the MDN documentation, I realized that I had an incomplete mental model for how String.prototype.split() works when using a regular expression delimiter... read more →
Playing With MutationObserver In JavaScript
It easy to lose track of just how far the web has come. Especially when you're working on a long-running piece of software. In my mind, the MutationObserver is still a "new" technology. However, when you look at CanIUse.com, it's been broadly available for over a decade. Even IE11 had support for it. If anything, the MutationObserver API is an old technology—it's only new to me personally. As such, I wanted to do a little experimentation with it in order to remove some of that mystery and move it into the realm of the mundane... read more →
Using VALUES / ROW To Create Derived Table From Static Values In MySQL 8.0.19
Most of the time, when writing SQL statements, I'm working with data that is wholly contained within the database itself. But, when running reports or helping the Support team debug an issue, I sometimes need to write a SQL statement that provides temporary table data as part of the SQL statement itself. This has always been possible in MySQL (for as long as I can remember). However, in the recent releases of MySQL 8, the VALUES / ROW data manipulation language (DML) statements have greatly reduced the verbosity of such statements... read more →
On Ending Path Variables With A Slash (Or Not) In ColdFusion
After many years of programming, I have a lot of strong opinions about how I like to organize my code. But, one aspect of application architecture that I'm constantly flip-flopping on is whether or not to include a slash (/) at the end of my path variables... read more →
Using CFModule To Render Templates With Isolation In ColdFusion
ColdFusion custom tags are often discussed in terms of creating reusable chunks of code. For example, I make heavy use of custom tags in my HTML Email DSL. But, custom tags can serve a much more mundane purpose: they can be used to render a single-use template with strong isolation boundaries. Meaning, they can be used to give each template its own, unique variables scope and page context... read more →
Working Code Podcast - Episode 171: Strategy Vs. Tactics
Tim just completed his quarterly strategy review meeting at work. As such, he's in the perfect head space to teach Adam and me what strategy is; how strategy differs from tactics; and, how OKRs (Objectives and Key Results) can be used in order to ensure that the work to be done actually rolls-up to one of the company's core strategies. In the end, I still have no idea what's going on (as per usual); but, Adam seems down to clown... read more →
Magic Life-Cycle Test In Alpine.js
So far, I haven't done much with Magics in Alpine.js. I've used some of the built-in magics for things like $el and $refs. But, I haven't created a custom magic yet; so, I don't have much of a mental model for how they work. As such, I wanted to run though a quick life-cycle test to see how often they are instantiated; and, whether or not any implicit caching / memoization is being used... read more →
Code Kata: Parsing Time Spans In ColdFusion
In ColdFusion, the createTimeSpan() function is used to define a duration. This is often used to help define properties like the application and session idle timeouts. In ColdFusion, a time span is expressed as a number of "fractional days". So, for example, a time span of one day would be expressed as 1; and, a time span of 12 hours (half a day) would be expressed as 0.5. As a fun Sunday morning code kata, I wanted to create a user defined function (UDF) that parses a time span back into its original inputs... read more →
Code Kata: Alpine.js Calendar Component
When learning a new JavaScript application framework, it's hard to get a sense of the patterns until you actually start building stuff. In that spirit, I wanted to try and build a small calendar component using Alpine.js. The concept of a calendar is complex enough to work the muscles; but, not so complex that it becomes overwhelming... read more →
HTML Templates Can Be Mutated Just Like Any Other DOM
I've always thought of the HTML <template> element as being static. And, if I needed to modify a template's contents, the modification would be performed after the template content was cloned (and before it was injected into the DOM). As such, I've never thought too deeply about the template mechanics themselves. I was, therefore, delightfully surprised this morning when I went to modify a template's content and it just worked—just like any other DOM (Document Object Model) mutation... read more →
CSS Enter Animations Follow The 80/20 Rule
Most animations on the web are unnecessary. But, I do believe that some small set of animations are helpful. And, I believe that CSS "enter animations" using @keyframes follow the 80/20 rule. That is, 80% of the value of the animations can be realized with only 20% of the effort (if even that much)... read more →
Reading Element Attributes Collection In JavaScript
For as long as I can remember, I've been using JavaScript to interact with individual attributes stored in the Document Object Model (DOM). This includes abstractions such as jQuery's .attr() method; and, native DOM methods like .getAttribute(), .setAttribute(), .removeAttribute(), and .hasAttribute(). But, I've never worked with attributes as a collection. Having used several frameworks that make heavy use of custom attributes (Angular, Alpine, HTMX, etc), I'm now curious to better understand the meta-programming mechanics that these frameworks are using... read more →
Working Code Podcast - Episode 170: Product Design With Thelma Van
On today's show, we talk to Thelma Van about integrating design into the product development workflow. This includes User Experience (UX) design, User Interface (UI) design, scope negotiation, and user validation through interviews. It turns out, even if you can only talk to five of your customers, the limited feedback can have a massively out-sized impact on your overall design and development trajectory... read more →
Working Code Podcast - Episode 169: Earning Potential Of Spaces
Several years ago, Stack Overflow noticed a small but surprising trend within their 2017 Developer Survey data. Even when attempting to adjust for several factors, it seems that the programmers who indent their code with spaces (as opposed to with tabs) have a higher earning potential. As an example of programmers who love using tabs, the hosts of the show offer up theories about this strange finding... read more →
Adding One-Click Unsubscribe SMTP Headers To My Comment Emails In ColdFusion
Last year, Google announced that it would start enforcing easy unsubscribe functionality for people sending bulk emails. On my blog, I don't send bulk emails; however, each blog post represents a subscription opportunity for my readers. As such, I thought it would be a fun learning opportunity to add the required one-click unsubscribe SMTP headers to my outbound ColdFusion emails... read more →
I Broke The Comment Subscription System For The Last Year
Apparently, when I updated my blog to use Hotwire Turbo, I broke the comment subscription system. That is, I accidentally removed the logic wherein people were automatically subscribed to receive notifications about new comments on posts that they had participated in. I never noticed the break because I always receive notifications (even when I haven't commented on a post previously)... read more →
Using The Angular.js Parser To Comply With CSP In Alpine.js 3.13.5
The Alpine.js library allows for expressions that run arbitrary JavaScript code. This is because, under the hood, Alpine.js is programmatically creating Function definitions using said code as the function body. This is very clever; but, it doesn't work in an application that blocks unsafe-eval using a Content Security Policy (CSP). The Alpine project has a CSP-compatible build. However, the consumable syntax is so reduced as to be almost unusable. As an experiment, I wanted to see if I could restore most of the non-CSP syntax—while staying CSP compliant—by stealing the Angular.js parser... read more →
Recursive JSON Explorer In Alpine.js 3.13.5
When I'm learning a new front-end JavaScript framework, I like to try building a JSON data structure explorer. I've built one in Angular 9; and, just recently in Svelte 4. It's a fun project because it's small enough in scope to be doable; but, it's complex enough in its functionality to make it a true learning experience. I've recently unblocked some technical limitations in Alpine.js. And so, I wanted to try building a JSON explorer in Alpine.js 3.13.5... read more →
Using Alpine.js To AJAX'ify HTML Fragments Served From ColdFusion
Over on Chris Ferdinandi's blog, I've been reading about how he "AJAX'ifies" his form submissions by wrapping his <form> elements in a custom HTML web component: <ajax-form>. He's a huge fan of web components because they are "the web platform"; but, I don't see why I can't do the same thing using an Alpine.js directive. As such, I wanted to start exploring some AJAX'ification of my own by swapping out ColdFusion generated content within a given branch of the Document Object Model (DOM)... read more →
DateGetTime() To Get UTC Milliseconds From Date In ColdFusion
As of recent updates to Adobe ColdFusion 2021 / 2023, MySQL queries are no longer reporting dates as timestamps. For native ColdFusion logic, this isn't much of a problem. However, in my ColdFusion applications, I'm often preparing data for consumption in JavaScript. And, in those cases, I serialize ColdFusion timestamps as UTC milliseconds using the .getTime() method on the underlying java.util.Date instance. But, now that the MySQL dates are coming back as strings, this .getTime() method isn't available. As such, I wanted to create a more ColdFusion-native way to access this Epoch notation... read more →
ColdFusion 2021 MySQL Query No Longer Returning Dates As Dates
Yesterday, I went to my site and was greeted with a Bad Request - Request Too Long error. IIS was rejecting my request because my HTTP request headers exceeded 16Kb in size. When I looked at my cookies, I had dozens upon dozens of cookies that should not have been there. And, when inspecting the cookies, they all had expiration dates in 2092. After a few hours of digging, I discovered that my MySQL database queries were no longer returning date/time values as date/time values. Instead, the ColdFusion query object was presenting them as strings; which was breaking my CFCookie settings in a very subtle way... read more →
Working Code Podcast - Episode 168: Memory Safe Mandate
On today's show, we talk about two major announcements relating to the technology world. First, the government released a report calling on programmers to start using memory safe languages (see: Future Software Should Be Memory Safe). Second, Apple announced that it will halt work on Titan, its autonomous electric vehicle project. We also talk about the pros-and-cons of a Computer Science degree in relation to the web development industry... read more →
Ask Ben: Fisher-Yates Shuffle Algorithm In ColdFusion
I have been using code you shared on the internet to generate random passwords for a club site for years. Now my ISP all of the sudden changed the ColdFusion security to deny java.util.Collections. Is there an easy work around I am missing?.. read more →
Exploring DOM Mutation Observation In Alpine.js 3.13.5
When your document first renders, Alpine.js traverses the DOM (Document Object Model) tree and activates any existing directive bindings. After this initial activation phase, Alpine.js uses the MutationObserver API to listen for subsequent changes to the DOM structure. And, when it observes changes, it will initialize new directive bindings and teardown old directive bindings as needed. Let's take a closer look at these mechanics in action... read more →
Various Ways To Get ColdFusion Data Into An Alpine.js Component
So far, all of my Alpine.js explorations have been client-side focused. But, my ultimate goal is to see if Alpine.js is a good companion framework for a ColdFusion-based multi-page application (MPA). As such, I wanted to spend some time thinking about various ways in which to get my ColdFusion data into an Alpine.js component... read more →
Recursive Template Rendering In Alpine.js 3.13.5
Yesterday, I created a "template outlet" directive in Alpine.js. This directive allows me to take a template reference and render it at any arbitrary point within the document and provide it with local data bindings. This opens the door for recursive template rendering since the template definition can include a template outlet which is a reference back to the current template definition. Let's take a quick look at this recursive template rendering in Alpine.js 3.13.5... read more →
