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

Recent Blog Posts by Ben Nadel

Using A Wild Card Shortcuts Route To Hide The Internal Routing Implementation In Angular 7.2.5

The other day, I looked at how to use wild card routes to traverse arbitrarily nested data in an Angular 7.2.4 application . That approach allows more application state to be pushed into the URL; which, ultimately, make the application more sharable and more correctly aligned with a user's expecta... read more »

Projecting Content Into The Root Application Component Using Slots In Vue.js 2.6.6

In almost every Vue.js demo that I've looked at, the root Vue() instance is created with an "el" property and a render() function that does nothing but render the "App" component. This approach instantiates the App component in a context in which it has no children (though you could, theoretically,... read more »

Using A Wild Card Route (**) To Traverse Arbitrarily Nested Data In Angular 7.2.4

One of the things that I truly love about the Angular Router is that it enables us, as application developers, to move more and more application state into the URL (thank you so much for Auxiliary Routes). This allows us to make more of the application interface directly addressable via the URL; wh... read more »

Trying To Implement 9-Slice Scaling With SVG Components In Angular 7.2.4

I'm very new to SVG (Scalable Vector Graphics). I've read Practical SVG by Chris Coyier . And, I've tried to create an SVG icon system using components in Angular 7.2.0 . But, really, I know very little about how SVG works or about how to make it dynamic. Up until now, everything that I've done w... read more »

Prototypes Are Worthless, But Prototyping Is Essential

Over the last two weeks, I've been working on a proof-of-concept for a feature augmentation that I want to pitch at work . It's been quite a while since I put on my "product hat"; so, I was excited to get down-and-dirty with the process of fleshing out a prototype. As always, I started with low-f... read more »

Hacking Scoped CSS Modules Into A Brownfield AngularJS 1.2.22 Application

I know that I write a lot about the new Angular hotness (and more recently about the new Vue.js hotness). But, the reality is, most of my day-to-day work on the InVision legacy team still involves AngularJS 1.2.22 code. Context switching between the old and the new frameworks is difficult because... read more »

Adventures In Angular, Episode 224: The Irrational Demonization Of Two-Way Data-Binding In Angular With Ben Nadel

A couple of weeks ago, I wrote a post titled, " On The Irrational Demonization Of Two-Way Data-Binding In Angular ". That post was a reaction to the unfortunate degree of misinformation that I keep seeing and hearing about Angular. And, apparently this post struck a chord with the fine people over ... read more »

Sort Only Works With directoryList() When ListInfo Is Query In Lucee

When calling the ColdFusion function, directoryList(), you have the option to sort the underlying data-structure by column (ex, "directory ASC"). With Adobe ColdFusion, this works regardless of the return type (listInfo). With Lucee CFML, on the other hand, the sort argument is only applied if the ... read more »

Renderless Components In Angular 7.2.0

The other day, while trying to figure out some feature-delegation in Vue.js 2.2.0, I came across an interesting post by Adam Wathan titled Renderless Components in Vue.js . His post looked at various ways to create a Vue.js component that provides business logic but defers its own User Interface... read more »

Providing Module Configuration Using forRoot() And Ahead-Of-Time Compiling In Angular 7.2.0

Yesterday, I was trying to design a feature module in Angular 7.2.0 that used the .forRoot() pattern to provide optional configuration data to the bootstrapping process of my feature module. However, since I was using Ahead-of-Time (AoT) compiling, I was running into a number of errors that wouldn'... read more »

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

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 »