Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2013 (Bloomington, MN) with: Nathan Blixt
Ben Nadel at cf.Objective() 2013 (Bloomington, MN) with: Nathan Blixt

Recent Blog Posts by Ben Nadel

Rendering A List Of Mixed Types Using NgFor And NgTemplateOutlet In Angular 9.0.0-rc.5

Earlier this year, I looked at rendering a list of mixed-types using ngFor and ngSwitch in Angular 7. The technique outlined in that post is the technique that I generally use. However, as of late, I've been doing a lot of experimentation with various use-cases for ng-template ; and, it rece... read more »


Rendering A TemplateRef As A Child Of The Body Element In Angular 9.0.0-rc.5

CAUTION : The concept that I explore here goes outside my area of expertise. As such, please take this with a grain of salt and forgive anything that is grossly inaccurate. A few weeks ago, I discovered that you could translocate Angular DOM nodes without breaking template bindings . This kind ... read more »


Using $any() To Temporarily Disable Type-Checking Within A Component Template In Angular 9.0.0-rc.4

In recent releases of Angular, type-checking has been extended to include our component templates. Which is awesome for catching compile-time bugs. However, the type-checking within our template is not quite as clever as the type-checking within our TypeScript code. For example, type-checking does... read more »


The Elvis Operator Can Be Chained Multiple Times In A Single Expression In Lucee CFML 5.3.3.62

In Lucee CFML, the "Elvis operator" - ?: - is a binary operator that returns the first operand if it is non-null; otherwise, it evaluates and returns the second operand. I haven't used the Elvis operator all that much, so I am still getting used to how it works. And, historically, I've ... read more »


Capturing Pointer Events Using Bookmarklets

As a web application developer, I spend a lot of time looking at the source code of HTML pages. This includes pages that my team has created; and, pages that I find in the wild about which I am curious. In either case, there's nothing more frustrating than right-clicking on an Element with the inte... read more »


Monolith To Microservices: Evolutionary Patterns To Transform Your Monolith By Sam Newman

Three years ago, I read Building Microservices by Sam Newman . And, in the years since then, I've been trying - and struggling - to wrap my head around the concept of microservices and distributed systems. While I think I understand microservices at a conceptual level, I continually find mysel... read more »


Fixing Connection Failure: Unable To Determine MIME Type Errors With sslCertificateInstall() In Lucee CFML 5.3.3.62

Yesterday, I took a look at tracking feature flags in New Relic Transactions as part of a Lucee CFML application. As part of that write-up, I had a CommandBox Lucee Server hitting my local development environment in order to simulate a steady stream of external HTTP traffic. At first, the traff... read more »


Tracking Feature Flags In New Relic And NRQL Using The Java Agent In Lucee CFML 5.3.3.62

Over the last few years, I've talked a lot about how much I love using LaunchDarkly feature flags . Feature flags have completely changed the way that we deploy changes here at InVision . One of the common use-cases we have for feature flags is to add code that we think will lead to a performance... read more »


TypeScript And .parentNode vs .parentElement

For years (?decades?), I've been using .parentNode to travel up the DOM (Document Object Model) tree. And, to be honest, I thought that was the only traversal option we had. However, over the weekend as I was perusing the Mozilla Developer Network (MDN) documentation - as you do - I happened ... read more »


Customizing A Select Component Using TemplateRef And NgTemplateOutlet In Angular 9.0.0-rc.3

A few weeks ago, Stephen Cooper was on the Adventures in Angular podcast discussing the use of the NgTemplateOutlet Directive as a means to customize components in Angular. This is a topic that I've touched-on briefly in the past ; but, it's been quite a while. And, since I just finished an ... read more »


Creating A Custom Select Component With The Options-Menu In The Root Stacking Context In Angular 9.0.0-rc.3

Over the last few weeks, I've performed a number of experiments in Angular 9 in an attempt to work towards a particular solution: how can I create a custom Select / Dropdown component in which the Options menu mimics the stacking-order provided by the native <select> element? This is tricky... read more »


Having Fun With Position: Fixed And Element.getBoundingClientRect() In Angular 9.0.0-rc.2

Over the years, I've gotten more confident in my ability to position elements, both fixed and absolute . But, for the most part, these elements are all predictably positioned within the web page. Where I still lack confidence is in my ability to position an element based on another arbitrary ele... read more »


Using MySQL's Null-Safe Equality Operator With CFQueryParam's Null Option In Lucee CFML 5.3.3.62

The other day, I was in the middle of writing a "typical" conditional MySQL query that had special handling for NULL values when it suddenly occurred to me that I was doing more work than I had to. I don't work with NULL values very often in SQL and ColdFusion; so, I fear that my inst... read more »


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 »