Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Madeline Johnsen
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Madeline Johnsen@madjohnsen )

Recent Blog Posts by Ben Nadel

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 »

Restoring And Resetting The Scroll Position Using The NavigationStart Event In Angular 7.0.4

Earlier this year, I took a stab at making a polyfill for Angular 5 that would record and restore scroll-offsets as a user navigated forwards and backwards through a Single-Page Application (SPA). In that exploration, I had to jump through a lot of hoops because Angular didn't differentiate betwe... read more »

Using Router Events To Detect Back And Forward Browser Navigation In Angular 7.0.4

This morning, while digging into the "retain scroll" feature that was released with Angular 6, I discovered that the Angular team added a "navigationTrigger" property and a "restoredState" property to the NavigationStart Router event. This is an exciting addition to the Router as it finally gives u... read more »

Time-Boxing A CFThread And Then Terminating It If It Takes Too Long To Complete In ColdFusion

Every now and then, I have some processing that I need to perform in ColdFusion; but, I want to time-box the processing such that I can terminate it if it runs for too long. As of late, I've been using the CFThread tag to carry out this scenario. I'll spawn an asynchronous "worker" CFThread; then, ... read more »

ColdFusion 2016 Skips Over Undefined Elements With For-In Array Loop

This morning, when I was writing up my post on generating a Java Thread Dump programmatically in ColdFusion , one thing I had to cope with was an Array that may or may not contain undefined elements. I wanted to use a for-in loop to iterate over the given array; but, I wasn't sure how ColdFusion w... read more »

Generate A Java Thread Dump Programmatically Using ColdFusion

As I've been getting used to managing an application within a larger, Kubernetes (K8) based platform, I've found myself needing to do much more programmatic introspection of the ColdFusion application and its underlying JVM (Java Virtual Machine). With such introspection, I can [hopefully] make my ... read more »

Understanding The Limitations Of Template Syntax Desugaring In Angular 7.0.4

CAUTION : The conclusions in this post are based on the results of experimentation - they are not based on documentation. Nor are they based on logic that I can find in the Angular source code. Last week, I looked at the fact that the Async Pipe "as" syntax is nothing more than the "$implicit"... read more »

Using Presentation Components In Order To Hide Async Pipe Complexity In Angular 7.0.3

CAUTION : This post is really just me thinking out loud on state management concepts in Angular 7. Consider this nothing but a work in progress from the mind of someone who barely understands what they are doing . Last week, I shared some of my frustration over the elusive nature of State Mana... read more »

Async Pipe "as" Syntax Is Just The $implicit View Context Property In Angular 7.0.3

When I started to experiment with the Runtime abstraction for state management in Angular 7.0.3 , I used the Async Pipe for the first time. The Async Pipe is nice in that it inherently manages RxJS Observable Stream subscriptions for you; but, it ends up producing noisier Angular Template markup. ... read more »

Experimenting With The Runtime Abstraction For State Management In Angular 7.0.3

CAUTION : This post is really just me thinking out loud on state management concepts in Angular 7. Consider this nothing but a work in progress from the mind of someone who barely understands what they are doing. Earlier this week, I shared my current mental model for state management and the ... read more »

Considering State Management Boundaries And The Separation Of Concerns

For the last few weeks, I've been actively struggling to understand state management in a Single Page Application (SPA) . Or perhaps more specifically, I've been struggling to understand how to use Redux in a JavaScript application. And, the more I looked at reducers and action creators and thunks... read more »

Human Redux By Henrik Joreteg

For the last couple of weeks, I've been struggling to wrap my head around state management in a Single-Page Application (SPA). Or, perhaps more specifically, I've been struggling to understand how a library like Redux can be used to make state management easier to implement and to reason about. L... read more »

Creating A Simple setState() Store Using An RxJS BehaviorSubject In Angular 6.1.10 - Part 2

CAUTION : This post is a mostly a note-to-self, so that I can close the circle on a thought I was having yesterday. Yesterday, I took a look at creating a simple, React-inspired .setState() store using an RxJS BehaviorSubject in Angular 6.1.10 . Since a BehaviorSubject() is practically a state-s... read more »

Creating A Simple setState() Store Using An RxJS BehaviorSubject In Angular 6.1.10

After struggling to wrap my head around Redux-inspired state management , I wanted to step back and consider simpler solutions. I'm not saying that a simpler solution is the right solution - only that moving my brain in a different direction may help me make new connections. As such, I wanted to s... read more »

I Am Struggling To Understand The Atomic Boundaries Of Redux Actions

CAUTION : This post contains no answers, only questions and statements of confusion . I'm writing it in hopes that by getting it out of my head and onto paper, I might be able to make more sense of it. For the last few weeks, I've been noodling on the implementation of state management in JavaSc... read more »

Software Design Decoded: 66 Ways Experts Think By Marian Petre And Andre van der Hoek

Last weekend, I was listening to an episode of Software Engineering Radio in which the hosts were discussing the book, Software Design Decoded: 66 Ways Experts Think , with the authors Marian Petre and Andre van der Hoek . The conversation was fascinating; so, I ordered the book right then an... read more »

Searching For The Wrong Type Of Simplicity Can Lead To An Explosion Of Complexity

For the last few weeks, I've been revisiting the idea of state management in an Angular application. It's a topic that I've never felt very confident with; so, I've decided to start building some state management classes as a means to dig in and feel the pain such that I can better understand the e... read more »

Trying To Create A Message Bus Using An RxJS Subject In Angular 6.1.10

CAUTION : I'm very new to RxJS. And, I'm not particularly good at TypeScript. As such, this post should be viewed as an experiment and not as a confident suggestion. I've been thinking a lot about state-management in an Angular application lately. And, one of the thoughts that I keep coming back ... read more »

THIS IS US Opening Titles Animation Using CSS Animations

My brain is somewhat fried from thinking about state-management in a Single-Page Application (SPA). As such, I needed a little mental palette cleanser; and, something that I've been wanting to do for a while is try to recreate the "This Is Us" opening titles sequence using CSS animations. ... read more »

On The Code Smell Of Asynchronous Middleware In Redux

CAUTION : This post is 100% subjective . To start off, I like the idea of Redux. And, of one-way data flows. I like that Redux provides a predictable state management system. And, I even like the idea of having middleware so that I can perform cross-cutting concerns like logging actions and capt... read more »