Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at the Nylon Technology Christmas Party (Dec. 2008) with: Ye Wang and Simon Free
Ben Nadel at the Nylon Technology Christmas Party (Dec. 2008) with: Ye Wang and Simon Free@simonfree )

Recent Blog Posts by Ben Nadel

Scrolling An Overflow-Container Back To The Top On Content Change In Angular 7.2.7

Yesterday, I shared my feelings on tightly-coupled DOM (Document Object Model) access in an Angular 7.2.7 application ; and, about how I'm going to stop bending over backwards in an attempt to fulfill some dogmatic separation of concerns when a payoff is never going to be realized. Along the same ... read more »


I'm Going To Stop Worrying About Tightly-Coupled DOM Access In Angular 7.2.7

I love a clean separation of concerns. Especially when such a separation makes code easier to reason about. Sometimes, however, I find myself stressing way too much about tight-coupling; and, I find that my attempts to decrease coupling can lead to code that is way harder to understand or maintain.... read more »


Some Real-World Experimenting With The Runtime Abstraction For State Management In Angular 7.2.7

Ever since Facebook reintroduced the programming world to the concept of unidirectional data-flow (with their Flux pattern), I've been struggling to wrap my head around more effective state management in a single-page application (SPA) using Angular. I know that I dislike all of the ceremony invo... read more »


Code Kata: Parsing Simple Timespan Strings Like 3h:12m:57s Using JavaScript

The other day, I was peer-reviewing some really cool static-asset processing pipeline stuff that Sean Roberts is building when something small caught my eye. He's allowing developers to define Cache-Control / Pragma settings using easy-to-read strings that get compiled-down into the necessary num... read more »


Using The Non-Null Assertion Operator To Fix .shift() and .pop() Errors In TypeScript 3

One of the things that I love most about TypeScript is that it forces me to think more deeply about my code because it is constantly checking the "assumptions" that I make about runtime truths. Sometimes, however, TypeScript can't deduce things that I know to be true. For example, when working with... read more »


Proof-of-Concept: InVision Screen Flow In Angular 7.2.7

A few weeks ago, I wrote a post titled, So Mediocre They Can't Ignore Me . In that post, I talked about trying to make-up for my lack of design talent with my ability to focus and grind things out. And today, that's what I'm trying to do. I have a rough idea for a feature I'd like to add to InVis... read more »


Using Pure Pipes To Generate NgFor TrackBy Identity Functions For Mixed Collections In Angular 7.2.7

Yesterday, I experimented with using a Pure Pipe in Angular 7.2.7 in order to generate an identity Function for use in the NgFor TrackBy input. That was my attempt to bring-forward some of the "ng-repeat" magic that we had in AngularJS. Yesterday's experiment was a success; but, it was also limit... read more »


Using Pure Pipes To Generate NgFor TrackBy Identity Functions In Angular 7.2.7

One feature that I really appreciated in AngularJS was how easy it was to define a "track by" property in the ngRepeat directive . Angular 2+ also has the concept of a "track by" property in its ngFor structural directive; but, it is more laborious to consume - you have to define an identity metho... read more »


Using Dynamic Template-Driven Forms In Angular 7.2.7

In Angular, there are two types of forms: template-driven forms and reactive forms. I've only ever used template-driven forms. And, I've never run into a forms-based problem that I couldn't solve with the template-driven paradigm. That said, the other day, I was listening to an episode of Real Tal... read more »


Harnessing My Social Anxiety Using A Countdown Timer In Vue.js 2.6.7

For most of this past week, I've been hanging out with over 700 of the most amazing people down in Phoenix Arizona at the second InVision IRL (In Real Life) conference. And while it was definitely an honor and a privilege to be there, my social anxiety still kicked into high-gear. In an attempt t... read more »


So Mediocre They Can't Ignore Me

For the past several months, I've been harboring a lot of anxiety about the quality of my work. I'm on a "legacy" team that has a finite amount of time in which to operate. And, in that time, I'm trying to breathe new life into the product that we maintain. Only, I neither have the "official perm... read more »


Creating Shortcuts By Mapping Multiple Routes On To The Same View-Component In Angular 7.2.5

Earlier this week, I took a look at using wild card routes to create shortcuts in an Angular 7.2.5 application . That first approach worked; but, it required me to manually parse some of the more complex shortcuts using Regular Expression. Now, don't get me wrong - I freakin' love Regular Express... read more »


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 5.2.9.31

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 »