Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with: Selene Bainum
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with: Selene Bainum@selenebainum )

Recent Blog Posts by Ben Nadel

Hello World With The CLI, AoT, Lazy Loading Routes, Differential Loading, And Ivy In Angular 8.1.0-beta.2

Up until now, all of my recent Angular demos have been built using a small Webpack configuration file that consumed the AngularCompilerPlugin() provided by @ngtools/webpack . But, with the introduction of Angular 8, there are features that don't fit neatly into my approach. Features like "d... read more »


The Hope Of Using JVM Metrics To Drive The Readiness Check In Kubernetes (K8) And ColdFusion

Earlier this week, I looked at how you can measure JVM metrics like CPU load, garbage collection times, and thread state in ColdFusion . Normally, this kind of measurement is performed implicitly by Java agents like FusionReactor . But, in the world of Kubernetes (K8), I had hoped that such metri... read more »


Gathering CPU Load, Garbage Collection Time, Thread Dumps And Other JVM Metrics In ColdFusion

A few months ago, I looked at generating a Java thread dump programmatically using ColdFusion . I was doing that as part of an ongoing effort to find processing bottlenecks in the main ColdFusion application that we have at InVision . Along with those Thread Dumps, I've also been collecting a myr... read more »


Keeping Prepared Statements Consistent Even With Dynamic Parameterized Queries In MySQL And ColdFusion

Yesterday, in response to my post about [SQL queries and code duplication], Phill Nacelli demonstrated that you could keep the "shape" of a prepared statement consistent even with a dynamic set of query criteria. I had never seen this approach before and I found it completely fascinat... read more »


SQL Queries That Look The Same Are Not Violating The DRY Principle

A couple of months ago, I tried to list out several lessons that I wish I had learned much earlier in my web development career . One of the more important lessons in that list is the proper application of the DRY principle; otherwise known as the, "Don't Repeat Yourself", principle.... read more »


Romanticizing The Idea Of Old-Man Vengeance In A Fast-Paced Web Development World

I love a good underdog story. But, there's a particular type of underdog that holds a special place in my heart. Let's call it the " old-man vengeance " context. In this kind of story an over-the-hill character is thrust into a harrowing situation and must use his or her wisdom, experien... read more »


Accessibility And Styled Anchor Links vs. Styled Buttons In Angular 7.2.15

After reading Accessibility For Everyone by Laura Kalbag , I've become more aware of the accessibility short-comings in my application interfaces. Of particular note is the fact that Anchor Links aren't keyboard accessible; at least, not by default. Yesterday, I demonstrated how to make anchor li... read more »


Giving (click) Anchor Links Tab-Access Using A Directive In Angular 7.2.15

Ever since reading Accessibility For Everyone by Laura Kalbag , I've become much more aware of the accessibility failings in my own user interface (UI) architecture. One of the first things that jumped out at me was the fact that anchor links <a> that use the (click) directive in Angular... read more »


Software Application Layers And Responsibilities, 2019 Edition

The other day, Joshua Caito tweeted about how he still loves writing ColdFusion code . And the truth is, so do I. ColdFusion is not perfect; but, it does a lot of stuff right. And its flexibility has made creating large, robust applications a thing of pleasure. With my recent switch to Lucee (at w... read more »


Adding My Blog As A Custom Search Engine In Google Chrome's OmniBox

I've been blogging for quite a while now. And, as much as I try to, I simply can't keep all of it in my head. In fact, that's one of the major benefits of blogging - being able to create a sort-of "scratch disk" for my tiny caveman brain. So, I often find myself searching my own blog arch... read more »


Pasting Images Into Your App Using File Blobs And URL.createObjectURL() In Angular 7.2.15

In the past couple of months, I've been playing around a lot more with File handling in Angular. Things like reading a drag-and-drop text File , uploading a single File with HttpClient and, uploading multiple File objects as a single Form Post all turn out to be somewhat simple in Angular. A... read more »


The 12th Annual Regular Expression Day - June 1st 2019

Oh snap, can you feel it? That magic in the air?! Those groovy vibes?! That indescribable feeling of joy and wonderment currently coursing through your veins?! It's June 1st; which means, it's Regular Expression Day 2019 !!! Woot woot! That one day of the year in which we take pause and give thank... read more »


Creating An Inline Auto-Complete Directive Using NgModel And A Control Value Accessor In Angular 7.2.15

A few weeks ago, I demonstrated that you could create a custom ControlValueAccessor in Angular in order to change the behavior of File Inputs such that NgModel would emit the selected Files objects rather than just the file paths. More than anything, this was a testament to how powerful and f... read more »


Desktop Safari Seems To Add Extra Padding To CSS Flexbox Item Inside List Item

Earlier this morning, in a post about trying to center-align a text-overflow: ellipsis effect using CSS Flexbox , I mentioned that I ran into a really odd desktop Safari behavior that appeared to add extra padding to the first Flexbox item if it was contained within a list item. When I Googled f... read more »


Trying To Center A Text-Overflow Ellipsis Using CSS Flexbox In Angular 7.2.15

The other day, after reading Accessibility For Everyone by Laura Kalbag , I started to re-think the accessibility and usability of text-overflow: ellipsis . As much as possible, I think that an application interface should be flexible enough to handle user-provided content. However, in cases wh... read more »


Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox

The other day, while basking in the awesome power of Flexbox, I took a stab at trying to style a movie cast list using a Definition List and CSS Flexbox . My approach used a pseudo-element and nested flexbox containers, which worked well. But, in response to my post, Ilya Streltsyn and Sime Vid... read more »


Reconsidering "text-overflow: ellipsis" As A Design Smell And Accessibility Concern

When I first came across the CSS property, text-overflow: ellipsis , I thought it was amazing! Finally, there was a clean and easy way to prevent a user's content from "breaking the design." This mindset took root in the "pixel perfect" design requirements handed-down from the ... read more »


A Book Apart: Accessibility For Everyone By Laura Kalbag

On a recent episode of the JavaScript Jabber podcast, Chris DeMars talked about the importance of website accessibility . The panel discussion became a little bit contentious as the group boiled accessibility down to a "moral" issue; and, whether or not you "think right" towar... read more »


Styling A Movie Cast List Using A Definition List And CSS Flexbox

For me, Flexbox is a game-changer. It's probably the most exciting thing to happen to CSS since absolutely-positioned elements and rounded corners. Last night, while reflecting on the power of Flexbox, I had an idea for a fun little code-kata: trying to recreate the styling of a movie cast list -... read more »


Managing Confirm And Prompt Modals Outside Of The Router In Angular 7.2.15

The other day, I made a strong statement that most of your modal windows should be accessible by route in Angular 7.2.15 . This is something I've come to believe quite strongly after working on a complex Single-Page Application (SPA) for 7-years. That said, not all modal windows are created equal.... read more »


Most Of Your Modal Windows Should Be Directly Accessible By Route In Angular 7.2.15

After years of working on various InVision SPAs (single-page applications) in Angular, I have come to believe - quite strongly - that most of the modal windows within an application should be directly accessible by route. This requires the modal windows to be architected with an eye towards flexi... read more »


The Location() Function URL-Encodes The Hash If The URL Also Contains A Query-String In Lucee 5.3.1.102

Yesterday, I ran into a rather strange regression from our migration of Adobe ColdFusion to Lucee CFML. It seems that Lucee 5.3.1.102 will URL-encode the Hash (or Fragment) portion of a location() function call; but, if and only if the requested URL also contains a query-string. If the requested ... read more »


Performing A SublimeText-Inspired Fuzzy Search For String Matching In Angular 7.2.15

At InVision , my team is considering working on a new search feature. And, when it comes to "search", one of the most delightful user experiences that I've come across is the "fuzzy search" performed by SublimeText's "Goto Anywhere" command . The "Goto Anywhere" anywhere command takes your search... read more »


Considering Ways To Embed Widgets In My Markdown Using Flexmark 0.42.6 And ColdFusion

As I mentioned yesterday, I am trying to move my publishing workflow over from an ActiveX context (that requires me running XStandard in IE 11 on a Windows Virtual Machine) to a Markdown context that uses Flexmark 0.42.6 and ColdFusion . Markdown is fairly powerful when it comes to authored cont... read more »


Cool Things I Learned From Reading The CommonMark Spec For Markdown

About a year ago, I finally enabled a limited set of Markdown syntax in my blog comments . This feature improvement is powered by the Flexmark Java library , which converts Markdown into HTML which I then validate with the OWASP AntiSamy project . Ever since I got that all working, I've been ena... read more »


Using replaceUrl To Persist Search Filters In The URL Without Messing Up The Browser History In Angular 7.2.14

I am a strong believer that when building a web-based application, as much state should be pushed into the URL as possible. This allows the Browser's Back Button to provide a more intuitive experience for the end-user. Of course, this is only true if the Browser's history is well aligned with the u... read more »


Creating A Proxy For Analytics Libraries In Order To Defer Loading And Parsing Overhead In Angular 7.2.13

When an Angular application loads, you want your "Time to First Interaction" (TTFI) to be as small as possible. This is the delay between the user's request for the application and the time at which the user can start interacting with said application. To keep this delay small, we employ strategies... read more »


Viewing The LaunchDarkly Feature Flag Evaluation Process As A Pure Function

For the last few years, InVision has been using LaunchDarkly as its feature flag service ; and, to be honest, it's completely revolutionized the way that we approach development and deployment. At this point, I can't imagine working without it. But, after almost 4-years of usage, I still see peopl... read more »


Thought Experiment: Partially-Applying Ng-Template References In Angular 7.2.13

Yesterday, I ran a sanity check that nested Ng-Template references maintain lexical binding in Angular 7.2.13 . It was nice to see that my "closure"-like mental model was sufficient. But, it got me thinking: what if an Ng-Template reference needed to consume a variable that wasn't in its lexical s... read more »


Sanity Check: Nested Templates Maintain Lexical Binding In Angular 7.2.13

A couple of years ago, I looked at the Ng-Template construct in Angular 2 RC 1 and demonstrated that templates appear to maintain lexical binding even when passed out-of-scope . And, since that exploration, my mental model for TemplateRef's has been parallel to that of the JavaScript closure. Howe... read more »