Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at dev.Objective() 2015 (Bloomington, MN) with: Gregory Bruce Jones
Ben Nadel at dev.Objective() 2015 (Bloomington, MN) with: Gregory Bruce Jones@greg_r_e )

Recent Blog Posts by Ben Nadel

What If The User Experience (UX) Of My InVision Projects Page Looked More Like Basecamp

I haven't used Basecamp in about 5-years. But, I can't help but feel haunted by the "Projects" page design that was introduced in Basecamp 2. It seemed so perfect to me: it bisected the page into "the stuff I care about" (aka, favorites) and "everything else". And, what's more, it drew a hard lin... read more »


Experiment: Using Service Barrels As A De Facto Dependency-Injection Container In Vue.js 2.5.22

Coming from an Angular.js / Angular background, one of the first things I that noticed in Vue.js is that Dependency-Injection (DI) is not a first-class citizen of the framework. There is some DI in Vue.js ; but, it only pertains to the component tree - not to the services that drive the applicatio... read more »


Creating SVG Icon Components And SVG Icon Sprites In Angular 7.2.0

CAUTION: This post is mostly a note-to-self as I am building up a better mental model for SVG. Do not assume that anything in this post represents a "best practice." SVG (Scalable Vector Graphics) is one of those web technologies that is super exciting; but, remains mostly a blind-spot in my day... read more »


Using Embedded Data To Provide Request-Specific Application Configuration In Angular 7.2.0

Earlier this week, I looked at using the encodeForJavaScript() function in ColdFusion as a way to embed a JSON payload in a page response such that it could provide request-specific configuration for a Single-Page Application (SPA). Today, I want to close the loop on that concept by looking at ho... read more »


Using encodeForJavaScript() To Embed A JSON Payload As Configuration For A Single-Page Application in ColdFusion

Five years ago, Sr. Security Engineer David Epler pointed out that my use of JsStringFormat() in conjunction with HtmlEditFormat() for encoding untrusted user-provided content could be more effectively done using the OWASP (Open Web Application Security Project) Encoder. At the time, I was only... read more »


Animating Elements In From A Mouse-Event Location In Vue.js 2.5.21

Over the weekend, I re-created the Pandora Radio station list animation using Vue.js 2.5.21 . Only, I didn't really "do" anything; because, as it turns out, this list "move" animation is supported right out of the box in Vue.js. To be honest, this kind of blew me away. So, I wanted to experiment w... read more »


Creating A Pandora Radio Station List Animation In Vue.js 2.5.21

In the morning, when I'm doing my Research & Development, I tend to listen to a Pandora radio station based on the song, Say My Name by Odesza . Then, when it comes to doing work, I switch over to either classical music or Gregorian chant. The other morning, while making this switch, I started... read more »


Creating A Bind-Once Structural Directive In Angular 7.1.4

Over the weekend, I posted my review of Vue.js Up And Running by Callum Macrae . This was my first look at Vue.js; but, coming from an Angular background, many of the concepts discussed in the book felt very familiar. In fact, Vue's "v-once" directive, for one-time binding, is something that I mis... read more »


Calling Canonicalize() On An Empty-String Returns NULL In Lucee 5.2.9.31

For the last couple of weeks, we've been working to migrate some Adobe ColdFusion 10 code over to Lucee 5 code. And, we've been debugging little discrepancies along the way . Yesterday, I ran into another small divergence in the behavior between the two platforms. It seems that calling the canonic... read more »


Updating Reactive Values Can Cause Some Non-Reactive Values To Re-Render In Vue.js 2.5.21

CAUTION : This post is primarily a note-to-self. Yesterday, while trouble-shooting some Vue.js code with my esteemed colleague, Daniel Selans , I noticed a behavior that I didn't expect to see: an injected service value was being re-rendered in the component template. This was unexpected because... read more »


Creating A Vue.js Inspired Event-Modifier DOM Plug-In In Angular 7.1.4

Over the holiday break, I took my first look at Vue.js by reading Vue.js Up and Running by Callum Macrae . One Vue.js feature that caught my eye was the ability to add modifiers to event-bindings that influenced the way in which the underlying event was managed. For example, you could add ".preven... read more »


Vue.js Up And Running By Callum Macrae

In the last couple of months, there have been a few high-profile surveys about the state of JavaScript in 2018. And, on the various web-development podcasts that have discussed the results of said surveys, one datum that has been brought up several times is the relative growth of Vue.js. While Vue.... read more »


CSS Custom Properties (aka CSS Variables) Don't Make CSS Preprocessors Obsolete

NOTE : This post is more of an invitation for conversation than it is a hard statement. I am confused about this topic; and, I would love to hear other developer's point of view on the matter. As of late, I've heard a number of thought-leaders in the Web Development community talk about CSS custo... read more »


Creating A DOM Events Plug-In That Configures Host Bindings Outside Of The Angular Zone In Angular 7.1.4

So, this morning, I created an Angular Directive that synthesized a "hesitate" event based on a collection of native DOM (Document Object Model) events. And, since I didn't need to trigger a change-detection digest for the underlying DOM event-handlers, I bound them outside of the core Angular Zo... read more »


Creating A Mouse-Over Hesitation Directive In Angular 7.1.4

Almost a decade ago, I used jQuery's custom event types to synthesize a "hesitate" event . This "hesitate" event was triggered when a user moused-into a target element and then remained inside the bounding-box of the element for some period of time without performing any other actions. As a fun en... read more »


If You Trust Your Developers To Deploy Code, You Should Trust Your Developers To Toggle Feature Flags

At InVision , we've been using LaunchDarkly as our Feature-Flags-as-a-Service (?FFaaS?) provider for several years now and it's completely changed the way that we think about our application development and deployment work-flow . Almost all features are coded behind a feature flag so that we ca... read more »


Shared-Array Iteration Can Cause Thread Deadlocks In Lucee ColdFusion 5.2

Yesterday, as we migrated some ColdFusion code from the Adobe ColdFusion 10 engine over to the Lucee ColdFusion 5 engine, we saw a lot of JVM threads enter a BLOCKED state once the code was put under load. Upon investigation of the corresponding thread dumps , all of the BLOCKED threads appeared t... read more »


Refactoring UI By Adam Wathan And Steve Schoger

Last week, I happened to see on Twitter that a number of the people that I follow had all liked a tweet about the same thing: a new book called Refactoring UI by Adam Wathan and Steve Schoger . As someone who has a profound respect for application design ; and, as someone who likes to think o... read more »


In A Unidirectional Data Flow, How Should A Selection Component Handle Incompatible Rendering Options?

When it comes to unidirectional / one-way data flow, I understand the idea that a component should never change data directly. Instead, it should alert the desired change to the calling context; and then, leave it up to the calling context to decide whether or not the desired change should be appli... read more »


Enabling The Second-Click Of A RouterLink Fragment Using onSameUrlNavigation Reload In Angular 7.1.3

SPECIAL THANKS : The ideas contained in this post are from Vasiliy Mazhekin . I am only codifying them here for my own reference and mental model. By default, when you enable anchor / fragment scrolling in your Angular 7.1.3 application, the fragment link works on the first click; but, upon clic... read more »


Trapping The Wheel Event May Prevent Chrome Browser Bug In Which The Scroll Wheel Stops Working In Overflow Container

A couple of weeks ago, I looked at a peculiar behavior that I was seeing in the Chrome Browser in which the scroll wheel seemed to suddenly stop working (something that I was easily able to reproduce on video). In the comments to that post, Sean Roberts theorized that the underlying issue was t... read more »


Using Magic Email Links To Authenticate Users With Firebase 5.7.0 In Angular 7.1.2

The other week, I was talking to Chesley Brown - one of our lead software engineers at InVision - about adding even more security to the Incident Commander app . Right now, Incident Commander uses a large amount of random data (in conjunction with some Firebase security rules) to create "securit... read more »


Using A "Drag Shield" To Block Mouse Events During A Drag-And-Drop Workflow In Angular 7.1.2

The other day, I ran into an issue within a drag-n-drop feature in an Angular 1.6 application in which the drag action kept interacting with other parts of the page. Meaning, as I dragged the selected element around, my mouse - depending on relative CSS stacking index and how fast I dragged - kept ... read more »


ngOnChanges() Life Cycle Hook Only Gets Invoked If Calling Context Actually Provides Input Bindings In Angular 7.1.1

The other day, when experimenting with the "Definite Assignment Assertion" in TypeScript , I stumbled upon the fact that my mental model for the ngOnChanges() life cycle hook in Angular was inaccurate. I had previously assumed that if an Angular Directive declared input bindings (as part of the Di... read more »


Strict Mode Settings In JavaScript Are Scoped To The Script Tag

CAUTION : This is mostly a note to self . Yesterday, in a discussion with Sean Roberts , the lead of our Web Performance Team, I learned something new about the "use strict" mode assertion in JavaScript. Prior to our discussion, I had known that Strict Mode was scoped to Function blocks and to ... read more »


Using The "Definite Assignment Assertion" To Define Required Input Bindings In Angular 7.1.1

In an Angular application, Directives represent a special type of Class. In a sense, they are a standard JavaScript Class with properties and methods. But, unlike a Class that gets created and consumed explicitly in your own logic, Directive classes are created, consumed, and managed implicitly by ... read more »


On The Irrational Demonization Of Two-Way Data-Binding In Angular

The other day, I was listening to a JavaScript podcast on which a guest of the show pointed to two-way data-binding as one of the biggest "problems" in Angular. This is not a new thought - it's something that I hear time-and-time again, especially from people in the React world. This demonization o... read more »


Polyfilling The Second-Click Of A RouterLink Fragment In Angular 7.1.1

UPDATE : In the comments of this post, Vasiliy Mazhekin points out that the second-click of the fragment can be enabled if you set the Router ExtraOptions configuration property of "onSameUrlNavigation" to "reload" . This configuration will cause the navigation events to fire even when navigati... read more »


Host Bindings Don't Prevent Default Event Behavior Until After All Event Handlers Have Executed In Angular 7.1.1

The title of this post may be a little bit misleading - this post is about an event-binding caveat on Angular elements, so the details don't all fit nicely into a one-line summary. But, essentially, with the way host bindings work in Angular, if you return "false" from an event-binding handler, Ang... read more »


Chrome Browser Bug: Scroll Wheel Randomly Stops Working In Overflow Container

I'm currently in the middle of building out a proof-of-concept for InVision that uses a flexbox layout with some "overflow:auto" scrollable areas. And, as I've been coding this feature, I've noticed that the Chrome browser occasionally stops responding to the scroll wheel on my Logitech Mouse. At f... read more »