Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at NCDevCon 2011 (Raleigh, NC) with: Craig Kauppila
Ben Nadel at NCDevCon 2011 (Raleigh, NC) with: Craig Kauppila

Recent Blog Posts by Ben Nadel

Rendering A List Of Mixed Components Using NgFor And NgSwitch In Angular 7.2.13

In the vast majority of cases, when I use the NgFor directive to render a collection of data, the type of data contained within that list is uniform. However, sometimes, a single list is an aggregation of several different collections that result in a commingled set of data types. In such a case, w... read more »


Lessons I Wish I Had Learned Much Earlier In My Web Development Career

At the very end of last week, I jumped onto an Incident call in order to listen and learn about a part of the InVision platform with which I didn't have too much familiarity. And, unfortunately, as the investigation unfolded, I realized that part of the root cause of the incident related to a mi... read more »


An Experiment In Consuming Reactive-Form Events From Template-Driven Forms In Angular 7.2.13

Historically, I've only used template-driven forms in Angular. And, to be honest, they "just work" for me. Most of the form interfaces that I create are fairly simple and usually have a very low-level of validation requirements. As such, I've never felt much friction with them. However, many develo... read more »


My First - And Possibly Last - Look At Reactive Forms In Angular 7.2.13

CAUTION: The vast majority of forms that I create in Angular are very simple and require almost no validation (mostly just "empty" checks). As such, this entire post should be viewed from the perspective of someone who rarely needs complex validation rules or behaviors. For the last 7-years or s... read more »


Using "replaceUrl" In Order To Honor The Back-Button While Chaining Absolute Redirects In Angular 7.2.13

Over the weekend, I took a look at using a transient component to side-step the limitations of the Router, allowing absolute and local redirects to be chained in Angular 7.2.13 . In that post, I stated that the downside of using a transient component for the redirect was the router.navigateByUrl()... read more »


More Fun With Recursive Components, Tree State, And One-Way Data Flow In Angular 7.2.13

A couple of months ago, I looked at using recursive ng-template references in an Angular 6 app . And then, I followed that up with a look at recursive components . On its own, Recursion is plenty exciting. But, there's something particularly thrilling about rendering an application View recursive... read more »


Chaining Absolute And Local Redirects With The Router In Angular 7.2.13

One of the nice features of the Angular Router is that it can perform a "local" redirect at any level of the Route configuration. It can even chain local redirects together as it steps down through the configuration tree. A local redirect will even carry-forward the route segments that come after ... read more »


Loading Text File Content With FileReader During A Drag-And-Drop Interaction In Angular 7.2.12

For the last few weeks, I've been digging into file-handling in Angular 7. First, with the uploading of single files using the HttpClient service ; and then, with the uploading of multiple files using FormData . To continue on with this file-handling exploration, I wanted to see I could read-in t... read more »


Webpack 4 Automatically Makes process.env.NODE_ENV Available In Your JavaScript

To be honest, I don't really understand how to use Webpack. In my Angular and Vue.js apps, I just borrow what I can from other examples; and then hack at it until something seems to "work." As such, it shouldn't be surprising whenever I stumble across an exciting Webpack feature. Which is exactly w... read more »


Using NgModel With Input Type="File" And A Custom ControlValueAccessor In Angular 7.2.12

As I've been learning about how to upload files using the HttpClient service in Angular 7 , one of the framework features that I've stumbled-over is the fact that, by default, the NgModel directive doesn't play very nicely with the File-Input form control. When you attach the [ngModel] directive t... read more »


Uploading Multiple Files In A Single "Form Post" With HttpClient In Angular 7.2.12

Earlier this week, I was delightfully surprised to learn that you could upload a File using the HttpClient in Angular 7.2.11 . Then, serendipitously, Wes Grimes pointed me to an article that he published on the same day regarding Managing File Uploads with NgRx . In his article, I noticed that ... read more »


Creating A "position: sticky" Header Component Using IntersectionObserver In Angular 7.2.11

When I recently got around to trying out the CSS property "position: sticky" for the first time, I was quite shocked at how magical it was. Magical in the sense that it "just worked"; and, that it worked in exactly the way that I would have wanted it to work. It's kind of amusing to think about how... read more »


Alligator.io Code Kata: Defaulting Theme Based On Time-Of-Day In Angular 7.2.11

I do most of my R&D (Research and Development) in the wee-early hours of the morning. At that time of day, everything is dark; so, I set my computer monitor to the dimmest setting in order to prevent eye strain. In this vein, one of the things that I've come to really appreciate is the fact tha... read more »


Uploading Files With HttpClient In Angular 7.2.11

For the last 7 years, I've been using Plupload to manage file uploads in my AngularJS application . I've even used Plupload to upload files directly from the browser to an Amazon S3 bucket . And, because I've been using Plupload, I've always viewed JavaScript-based file-management as a somewhat "... read more »


Quick File Share Using Netlify Functions And Amazon S3 In Angular 7.2.10

Netlify is an "Application Delivery Network". Essentially, it's a static site platform built on top of a Content Delivery Network (CDN) that can be augmented with URL redirects, proxying, Identify features, form submissions, and AWS Lambda Functions. I've only recently begun to play with Netlify ... read more »


Using Guard Conditions To Short-Circuit Object-Spread Operations In TypeScript 3.2.4

After my post yesterday on applying the Object-Spread operator to Null and Undefined values in TypeScript , Duncan Bay showed me another cool feature of the Object-Spread operator: you can use guard conditions to short-circuit spread operations. Off the top of my head, I don't have a great use-c... read more »


You Can Safely Apply Object-Spread To Null And Undefined Values in TypeScript 3.2.4

I just wanted to share a cool feature of TypeScript that I stumbled across the other day: TypeScript will silently ignore the attempt to spread Null or Undefined values into an Object literal. This means that you don't have to jump through hoops in order to avoid errors if you are dealing with valu... read more »


HTTP Interceptors Are An Anti-Pattern That Create Hidden Dependencies And Unnecessary Complexity In Angular

CAUTION : What follows is 100% my subjective opinion. This morning, in my post about reporting a user's Timezone with a custom HTTP header in an Angular application , one of my readers asked me why I was creating a custom HTTP Client instead of simply using an HTTP Interceptor to augment the out... read more »


Reporting The User's Timezone Offset To The Server Using An API Client In Angular 7.2.10

In the recent episode of Coding Block - Why Date-ing is Hard - Allen Underwood , Joe Zack , and Michael Outlaw went over many of the reasons as to why working with Dates in computer programming is a fun any cozy nightmare. Not the least of which is having to account for the various Timezones ... read more »


My Opinionated git Cheat Sheet

I've been using git for about 7-years now. And you would think that using git for the better part of a decade might have made me a git expert. But, you'd be wrong. git is massive. The comprehensive API for any single git command represents more git information than I am capable of keeping in my hea... read more »


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 »