Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at CFinNC 2009 (Raleigh, North Carolina) with: Andy Matthews and Doug Hughes
Ben Nadel at CFinNC 2009 (Raleigh, North Carolina) with: Andy Matthews@commadelimited ) and Doug Hughes@doughughes )

Recent Blog Posts by Ben Nadel

Positioning And Constraining A Fixed-Position Element Relative To An Absolute-Positioned Element In Angular 9.0.0-rc.2

Historically, when I need to position a transient element, like a drop-down menu or a pop-up, I usually embed said element in the DOM (Document Object Model) directly next to its trigger element; and then, position the transient element "relative" to the trigger element using absolute pos... read more »


Maintaining Scroll Offsets When Adding Content Above The User's Viewport In Angular 9.0.0-rc.2

Last week, inspired by a wonderful GitHub user experience (UX), I took a look at maintaining scroll offsets when collapsing sticky elements in Angular . This week, I wanted to follow-up with the somewhat-related concept of maintaining the scroll offset of the user's browser when new content is add... read more »


Component Queries Metadata Appears To Be Broken When The Ivy Renderer Is Enabled In Angular 9.0.0-rc.2

UPDATE - 2019-11-17 : The @Component() .queries metadata appears to work if the --prod flag is enabled. As such, this works for a production build ; but, it doesn't work in the development server . So, perhaps this is actually a bug in the dev server, not in Ivy? The other day, I tho... read more »


Component View-Template Fragments Retain Bindings And Can Be Moved Around In The DOM In Angular 9.0.0-rc.2

Yesterday, while "walking" the dog , I had the most random thought: What happens if I take an Element Reference from one of my Angular Components and just move it into the document.body after the Component has been initialized? Would it continue to work? Or, would it blow-up? Well, aft... read more »


Closure Variable-Access Changes With Function Expressions vs. Function Declarations In Lucee CFML 5.3.3.62

Yesterday, I came across an interesting Closure behavior in Lucee CFML. It seems that the way in which you define a Closure completely changes the variables that the Closure has access to (ie, the variables that it "closes over" ). Specifically, function expressions close-over the expe... read more »


Collapsing Sticky Elements And Maintaining Scroll Offsets In Angular 9.0.0-rc.2

One of the best user experience (UX) features that GitHub has added recently is the "stickiness" of the file-header in the Pull Request (PR) review mode. And, part of what makes this feature so enjoyable is the fact that as the user collapses the content of a given file, the Window mainta... read more »


ColdFusion Performance Experiment: Caching Per-Application Settings In Lucee CFML 5.3.3.62

At InVision , the amount of work that we do in the Application.cfc ColdFusion framework component is a bit staggering. Not only are we setting up all of the Lucee CFML mappings, custom paths, data-sources, SMTP servers, and cache configurations, we're also defining hundreds of FW/1 routes. T... read more »


Confusion Over this.mappings And expandPath() Not Working In Lucee CFML 5.3.3.62

So, I've spent the last 3-hours this morning trying to understanding why my this.mappings configuration in my Application.cfc ColdFusion component "wasn't working" in Lucee CFML 5.3.3.62. After much trial-and-error and many Google searches, it seems that the evaluation of the this.ma... read more »


Superficial Performance Comparison Between ColdFusion Query-of-Queries (QoQ) And Array Functions In Lucee CFML 5.3.3.62

CAUTION : You should always take a controlled performance comparison with a grain of salt . These were not done in a production environment; they were not done under load; and the performance at small scale for either approach is significantly fast. Worrying about your choice here is not merit... read more »


Replacing ColdFusion Query-of-Query (QoQ) INNER JOIN And LEFT OUTER JOIN With Array Functions In Lucee CFML 5.3.3.62

Earlier this week, I took a look through the InVision codebase, pulled-out several ColdFusion Query-of-Query (QoQ) examples, and then demonstrated how those query-of-queries could be re-implemented using Array functions in Lucee CFML . I wanted provide a quick follow-up post about re-implementin... read more »


Safe Navigation Operator Works In Comparison Expression Even When NULL In Lucee CFML 5.3.3.62

While there is a version of the Lucee CFML syntax that treats null as a first-class citizen, null has, historically, been a tricky value to work with in the ColdFusion world. As such, my instinct is always to treat a potentially null value with kid-gloves. That said, I discovered this morning... read more »


Replacing ColdFusion Query-Of-Queries (QoQ) With Array Functions In Lucee CFML 5.2.9.31

Last week, on the Modernize Or Die ColdFusion Podcast , Gavin Pickin and Brad Wood reminded us that ColdFusion is not a query engine . And that - despite the simplicity of the ColdFusion Query-of-Queries (QoQ) - there are much more performant ways to achieve the same results. There's no doubt... read more »


Serializing A MySQL RecordSet As A Set Of INSERT Statements Using Lucee CFML 5.2.9.40

This past week at InVision , some data was accidentally deleted from one of our MySQL databases. In order to get the data back, our Data Services team had to restore one of the backups. And then, I had to write a ColdFusion script that would transfer a slice of the data from the restored-databas... read more »


Adding A TTL To All Persistent Keys In Redis Using LaunchDarkly Feature Flags And Lucee CFML 5.2.9.40

The other week, I created a Redis key scanner using Jedis and Lucee CFML 5.2.8.50 . I did this because I saw that one of our production Redis databases seemed to have a steady number of keys (about 14M); and, I wanted to see if they were all supposed to be there. By using the key scanner, I discov... read more »


Delaying Loading Indicators Using CSS Animations In Angular 9.0.0-next.14

I don't really know much about React. And, I certainly know nothing about the upcoming "Suspense" feature. But, from what I've heard various people say on various podcasts, it seems that one of the features provided by Suspense is the ability to delay the rendering of "Loading Indi... read more »


Creating An Interactive JSON Explorer Using CSS Grid In Angular 9.0.0-next.14

At work , I spend a lot of time combing through Logs . Which means, I spend a lot of time looking at JSON (JavaScript Object Notation) payloads . Some of these payloads are rather large, which is why I do things like create Loggly bookmarklets for better Log rendering . Partly as a fun Code Kat... read more »


Loading And Using Remote Feature Flags In Angular 9.0.0-next.12

The other day, I wrote about using feature flags to conditionally render routable components in Angular 9 . After that post, it occurred to me that I've talked a lot about how much we love feature flags here at InVision ; but, I've never really looked at how we get feature flags into an Angular... read more »


Using RegEx To Filter Keys With Redis Key Scanner In Lucee CFML 5.2.8.50 And Jedis

Earlier this week, I wrote about Redis Key Scanner , which is a small Lucee CFML app that allows me to safely and efficiently iterate over the key-space of a Redis database such that I can get a sense of what keys exist, how long they will be persisted (ie, what is their Time To Live), and where t... read more »


Remote Work Increases Intimacy And Amplifies A Shared Sense Of Humanity

Last week, I was invited by Scott Gellman (COO and CFO) to give a talk at Kurtosys about the journey of InVision . Of the many topics discussed, one that I thought would be worth re-sharing is my perspective on remote work . InVision has been an all-remote company since day one. We are now on... read more »


Building A Simple Redis Key Scanner Using Lucee CFML 5.2.8.50 And Jedis

The other day at work , I noticed that our production Redis instance was holding steady, on balance, at about 7GB of memory usage and 14M keys. Anything "holding steady" in Redis makes me suspicious, especially over the course of several months, as I would expect the Redis resource consu... read more »


Thought Experiment: Splitting A Single Data Table Up Into High-Writes And High-Reads For Better Performance In MySQL

CAUTION : This post is just me thinking out-loud about an interesting MySQL database performance problem that I have faced at work. At InVision , we store a date/time stamp that represents the last request that each user makes to the application. We used to use this data-point to indicate "... read more »


Playing With Lists And Blocking Pop Operations In Redis And Lucee 5.2.9.40

I have a really embarrassing confession to make: until just recently, I thought that the Redis List data-type worked like the ColdFusion List data-type. Which is to say, I assumed that it was just an abstraction over simple, delimited string values. This wasn't based on anything that I read -... read more »


CFQueryParam "Fails Silently" With Empty Lists And IN Clauses In Lucee 5.2.9.40

About a year ago, we converted our production app from Adobe ColdFusion to Lucee CFML. The conversion itself took several months (depending on how hard you squint); and, since the conversion, we've occasionally stumbled over a few inconsistencies between Adobe ColdFusion and Lucee CFML. Yesterday, ... read more »


Proof-Of-Concept: InVision Breadboarding In Angular 9.0.0-next.9

Two months ago, I read Shape Up: Stop Running in Circles and Ship Work That Matters by Ryan Singer . This is the latest book from Basecamp; and, like their other books , it's filled with wonderfully thought-provoking concepts and perspectives. One idea that I really loved was the concept of "... read more »


Experiment: Using A Feature Flag To Conditionally Render Routable Components In Angular 9.0.0-next.8

As I've mentioned before, I love using feature flags . They have truly revolutionized the way that me and my team deploy changes to production. That said, on the front-end of our application, I've only used feature flags to enable or disable portions of an existing User Interface (UI) - typica... read more »


Tracking Page Request Metrics With Framework One (FW/1) And Lucee CFML

At work, we use StatsD to record page request metrics in our Lucee CFML and Framework One (FW/1) application. One of the great features of FW/1 is that it favors convention over configuration. This makes it simple in terms of getting started with the happy path; but, when it comes to recording re... read more »


JavaLoader Needs Access To Internal ColdFusion Java Components In ColdFusion 2018

This past week, I updated my blog from ColdFusion 10 to ColdFusion 2018. ColdFusion is generally backwards compatible; so I figured this would be a seamless transition. However, I ended up running into an issue with JavaLoader , which I wanted to share because my Google searches for the related er... read more »


Using CSS Overscroll-Behavior To Prevent Scrolling Of Parent Containers From Within Overflow Containers

In the past, I've looked at how the scroll-wheel seems to randomly stop working in an overflow container . This phenomena is related to a browser feature called scroll chaining ; and, it can be overcome if you prevent the wheel event's default behavior . Of course, tapping into the wheel and... read more »


Using An Immediately Invoked Function Expression (IIFE) And CachedWithin To Easily Cache Steps In A Procedural Script In Lucee 5.3.2.77

As I've demonstrated before, the cachedWithin function memoization feature can be applied to Closures in Lucee 5.3.2.77. I've also demonstrated that Immediately Invoked Function Expressions (IIFE) work In Lucee . These two features can be combined to easily cache steps in a procedural script w... read more »


Discriminated Unions Don't Seem To Work In Angular 9.0.0-next.5 When fullTemplateTypeCheck Is Enabled

As part of the latest version of Angular 9.0.0-next.5 and its CLI (Command-Line Interface), the tsconfig.json file now contains a compile option called, fullTemplateTypeCheck . This feature uses TypeScript to validate the Angular expression bindings in your component templates. And, from what I ... read more »