Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2017 (Washington, D.C.) with: Susan Brun
Ben Nadel at cf.Objective() 2017 (Washington, D.C.) with: Susan Brun ( @sbrun9 )

Recent Blog Posts by Ben Nadel

Styling A Movie Cast List Using A Definition List And CSS Flexbox

For me, Flexbox is a game-changer. It's probably the most exciting thing to happen to CSS since absolutely-positioned elements and rounded corners. Last night, while reflecting on the power of Flexbox, I had an idea for a fun little code-kata: trying to recreate the styling of a movie cast list -... read more »


Managing Confirm And Prompt Modals Outside Of The Router In Angular 7.2.15

The other day, I made a strong statement that most of your modal windows should be accessible by route in Angular 7.2.15 . This is something I've come to believe quite strongly after working on a complex Single-Page Application (SPA) for 7-years. That said, not all modal windows are created equal.... read more »


Most Of Your Modal Windows Should Be Directly Accessible By Route In Angular 7.2.15

After years of working on various InVision SPAs (single-page applications) in Angular, I have come to believe - quite strongly - that most of the modal windows within an application should be directly accessible by route. This requires the modal windows to be architected with an eye towards flexi... read more »


The Location() Function URL-Encodes The Hash If The URL Also Contains A Query-String In Lucee 5.3.1.102

Yesterday, I ran into a rather strange regression from our migration of Adobe ColdFusion to Lucee CFML. It seems that Lucee 5.3.1.102 will URL-encode the Hash (or Fragment) portion of a location() function call; but, if and only if the requested URL also contains a query-string. If the requested ... read more »


Performing A SublimeText-Inspired Fuzzy Search For String Matching In Angular 7.2.15

At InVision , my team is considering working on a new search feature. And, when it comes to "search", one of the most delightful user experiences that I've come across is the "fuzzy search" performed by SublimeText's "Goto Anywhere" command . The "Goto Anywhere" anywhere command takes your search... read more »


Considering Ways To Embed Widgets In My Markdown Using Flexmark 0.42.6 And ColdFusion

As I mentioned yesterday, I am trying to move my publishing workflow over from an ActiveX context (that requires me running XStandard in IE 11 on a Windows Virtual Machine) to a Markdown context that uses Flexmark 0.42.6 and ColdFusion . Markdown is fairly powerful when it comes to authored cont... read more »


Cool Things I Learned From Reading The CommonMark Spec For Markdown

About a year ago, I finally enabled a limited set of Markdown syntax in my blog comments . This feature improvement is powered by the Flexmark Java library , which converts Markdown into HTML which I then validate with the OWASP AntiSamy project . Ever since I got that all working, I've been ena... read more »


Using replaceUrl To Persist Search Filters In The URL Without Messing Up The Browser History In Angular 7.2.14

I am a strong believer that when building a web-based application, as much state should be pushed into the URL as possible. This allows the Browser's Back Button to provide a more intuitive experience for the end-user. Of course, this is only true if the Browser's history is well aligned with the u... read more »


Creating A Proxy For Analytics Libraries In Order To Defer Loading And Parsing Overhead In Angular 7.2.13

When an Angular application loads, you want your "Time to First Interaction" (TTFI) to be as small as possible. This is the delay between the user's request for the application and the time at which the user can start interacting with said application. To keep this delay small, we employ strategies... read more »


Viewing The LaunchDarkly Feature Flag Evaluation Process As A Pure Function

For the last few years, InVision has been using LaunchDarkly as its feature flag service ; and, to be honest, it's completely revolutionized the way that we approach development and deployment. At this point, I can't imagine working without it. But, after almost 4-years of usage, I still see peopl... read more »


Thought Experiment: Partially-Applying Ng-Template References In Angular 7.2.13

Yesterday, I ran a sanity check that nested Ng-Template references maintain lexical binding in Angular 7.2.13 . It was nice to see that my "closure"-like mental model was sufficient. But, it got me thinking: what if an Ng-Template reference needed to consume a variable that wasn't in its lexical s... read more »


Sanity Check: Nested Templates Maintain Lexical Binding In Angular 7.2.13

A couple of years ago, I looked at the Ng-Template construct in Angular 2 RC 1 and demonstrated that templates appear to maintain lexical binding even when passed out-of-scope . And, since that exploration, my mental model for TemplateRef's has been parallel to that of the JavaScript closure. Howe... read more »


Sub-Classing NgForOf In Order To Make It A "Pure" Directive In Angular 7.2.13

Angular has done a wonderful job of making the native NgForOf directive fast and efficient. However, if you are working with immutable data, the NgForOf directive is doing more work than it has to. This is because the internal IterableDiffer is inspected on every single change-detection digest that... read more »


@Directive().inputs And @Input() Are Not Functionally Equivalent In Angular 7.2.13

Historically, when creating my Directives, Components, and Pipes in Angular, I've tried to keep all of my meta-data at the top, inside of the class decorator. I find it very easy to consume when it's all in one place. As opposed to having to scroll up-and-down through a class, searching for dispara... read more »


Quick Reference For NgModel Values And Template-Driven Forms In Angular 7.2.13

NOTE : This post is primarily a note-to-self for future reference. As I've demonstrated recently, template-driven forms in Angular 7.2.13 can be very dynamic . In fact, you can even listen to the reactive events using a template-driven forms model . However, in the vast majority of use-cases,... read more »


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 »