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

Recent Blog Posts by Ben Nadel

Learning About The "Input" Event From Angular 2

When I started digging into Angular 2, I saw that, internally, the framework was binding to (input) events on Input and Textarea elements in order to power the ngModel directives. At first, I assumed that this was some sort of special Angular 2 event proxy; but, the more I picked it part, the more ... read more »


Native Key-Combination Event-Binding Support In Angular 2 Beta 17

Last week, I experimented with dynamically parsing and binding DOM (Document Object Model) events using the EVENT_MANAGER_PLUGINS system . While that post more of a fun exploration of the Angular 2 template syntax and plugin system, I didn't realize that Angular 2 Beta 17 actually ships with nat... read more »


Querying For Multiple ViewChild Directives On A Single Element In Angular 2 Beta 17

Yesterday, I took a look at exporting component and directive references in Angular 2 . But, as I was playing around with that code, I realized that it was more complicated than it needed to be. Instead of exporting and querying for references, I could instead query for multiple ViewChild types on... read more »


Exporting Component And Directive References In Angular 2 Beta 17

Within an Angular 2 template, you can create references to component instances using the "#var" template syntax. This allows you to both reference the component's public API within your template as well as query for that component reference and inject it into your Controller. By default, components... read more »


NgModel Host Bindings Finally Fixed But OnPush Change Detection Breaking In Angular 2 Beta 17

Getting ngModel to work in Angular 2 has been a frustrating uphill battle . From the breaking of host bindings to the complexity of implementing value-accessors on top of change-detection , nothing about the ngModel experience is all that fun. But, the Angular 2 team is making some progress. In... read more »


Attaching Key Handlers With Dynamically-Parsed Host Event Bindings In Angular 2 Beta 14

A couple of weeks ago, I looked at creating custom DOM (Document Object Model) and Host event bindings in Angular 2 . In that demo, I implemented a couple of custom "outside" events, like (clickOutside), that tracked mouse activity outside of the current host element. Since then, I hadn't thought ... read more »


Extracting And Interpolating URL Subdomains Using ColdFusion

CAUTION : This post is much more like a code kata for myself rather than a generally applicable concept. That said, working with lists is very useful in many situations. At InVision App , we run our code-base in a whole bunch of environments, each of which has a unique domain. And, in each of ... read more »


Input And Output Aliases Can Be Namespaced In Angular 2 Beta 14

Yesterday, I stumbled upon the fact that input and output bindings could be namespaced in Angular 2 Beta 14 . In that case, both the calling context and the component meta-data had to agree upon the namespace. Today, as a quick follow-up, I wanted to see if input and output aliases could be namesp... read more »


Input And Output Bindings Can Be Namespaced In Angular 2 Beta 14

As I was playing around with the template syntax in Angular 2 Beta 14, I stumbled upon a rather interesting behavior. It appears as though the input and output binding expressions are evaluated as object-paths on the target component. This means that by adding the property access operator - "." - y... read more »


Multi-Providers Do Not Aggregate Value Across Hierarchical Injectors In Angular 2 Beta 14

In Angular 2, there is special kind of provider that aggregates values rather than providing single values. When you provide a value along with the meta-data multi:true, the current injector will aggregate it along with other multi:true values that use the same Dependency Injection (DI) token. Then... read more »


The User Experience (UX) Of False Affordance And Threaded Conversations

As product designers, we often strive to create interfaces that have good affordance. Meaning, we try to create interfaces that - through shape, color, and motion - implicitly describe to the user how that interface should be used. We try to create interfaces that are self-evident. The less a user ... read more »


MySQL Truncating Value At First Supplementary / Astral / utf8mb4 Character On INSERT And UPDATE

As I've been embracing [one of] my roles as the Database Administrator 's understudy at InVision App , I've been trying hard to track down every vexing problem relating to our MySQL RDS instances. For months, we've been having a problem where data, coming out of a Node.js microservice, was being... read more »


The Flexible Syntax Of Structural Directive Expressions In Angular 2 Beta 14

Yesterday, I started digging into structural directives in Angular 2. As I was building my index-loop directive , I noticed that the use of the ";" delimiter in my directive expression seemed to be optional. After a little more trial and error (and perusal of the source code), I realized that most... read more »


Creating An Index Loop Structural Directive In Angular 2 Beta 14

Angular 2 has three different kinds of directives: Component directives, Attribute directives, and Structural directives. For the most part, component and attribute directives are fairly straightforward. In fact, they're basically the same thing, only attribute directives don't have views. Structur... read more »


Implementing A Publish And Subscribe (Pub/Sub) Service In Angular 2 Beta 14

With Angular 2, we now have a number of event-related classes at our disposal. The EventEmitter handles all of our component output needs and the RxJS library handles, well, tons of other event-stream related functionality . As such, I thought it would be easy to leverage one of these classes in... read more »


Stripping Supplementary Characters Out Of A String In Order To Make It MySQL UTF-8 Compatible

At work, we have a MySQL table that uses the "utf8" character set. This encoding supports all of the Basic Multilingual Plane (BMP) characters; but, it doesn't support Supplementary characters (ie, those in the astral plane that are represented by high / low surrogate pairs). For that, you need to ... read more »


ColdFusion Rollout For Feature Flag Based Deployment

For the last few months, I've been doing a deep dive on Angular 2 Beta . But, I needed a little break - a mental refresher, if you will. I wanted to do something with Redis (which I'm totally in love with these days). But, I wasn't exactly sure what to do. After some Googling, I came across a Rub... read more »


Setting Cookies In CFScript Using Structs In ColdFusion 10

The other day, I was looking at some code in a part of InVision App that I don't usually work on when I saw something in ColdFusion that I had never seen before. Devin Schulz , one of our excellent front-end engineers, was using a struct to set a Cookie value in CFScript. It looks like this feat... read more »


Synchronous vs. Asynchronous EventEmitters In Angular 2 Beta 14

When I was trying to come up with a way to implement "controlled inputs" in Angular 2 Beta 11 , I realized that the EventEmitter() class, used to power directive output bindings, internally emitted its values asynchronously by default. After looking at the documentation, I saw that I could overrid... read more »


Second Experiment With Controlled Inputs (ala ReactJS) In Angular 2 Beta 11

Yesterday, I experimented with trying to create a ReactJS-inspired "controlled input" in Angular 2 Beta 11 . The approach mostly worked; but, it was buggy, overly complicated, and typing fast had a noticeable lag to it. After trying a few alternate approaches, I think I finally came up with a cont... read more »


Experimenting With Controlled Inputs (ala ReactJS) In Angular 2 Beta 11

If you're a ReactJS developer, you're probably familiar with the concept of Inputs as "controlled components." In ReactJS, a controlled component does not maintain its own internal state and is rendered solely based on its incoming props. This behavior can be applied to form inputs as well, where t... read more »


Fluent API Causing StackOverflow Error During Parsing In ColdFusion 10 On Java 8

Right now, at work, we're in the process of updating our ColdFusion application servers to run on Java 8 so that we can start enforcing TLS 1.2 secure connections when making outbound CFHTTP calls. For the most part, this has been a seamless transition (up from Java 7). But, one of our ColdFusion a... read more »


The User Experience (UX) Of User Experience Meetup Groups

As an engineer and a product designer, I've been to a large number of technology meetups and a decent number of design and user-experience meetups and workshops. The quality of presentation in both groups is very good. But, I've noticed a distinct difference in the user experience (UX), if you will... read more »


Using Checksums To Calculate Consistent User Bucket Assignment In ColdFusion

Yesterday, I took a look at generating CRC-32 and Adler-32 checksums in ColdFusion . I've never used this kind of checksum before. But, I had been reading through the popular Ruby library - Rollout - when I came across a very interesting technique. The Rollout library was using the checksum of a... read more »


Generating CRC-32 And Adler-32 Checksums In ColdFusion

This morning, I was playing around with some code that required the calculation of a CRC-32 checksum. A checksum is a small volume of data that is calculated in an effort to detect corruption in a larger volume of data. While ColdFusion can easily hash any string or binary value as well as gener... read more »


Ng-Content Life-Cycle Is Controlled By The Parent View Not The Consumer In Angular 2 Beta 11

I know that the title is kind of a mouth-full. And, I'm not sure that the terminology is exactly correct. But, I wanted to put together a quick little demo to showcase a property of Angular 2's projected content that was not immediately obvious to me. When an Angular 2 component projects content in... read more »


Using Structs As Data Lookup Indices In ColdFusion Data Manipulation

At InVision App , I've been working a lot with query optimization, data caching, and general performance. Often times, this means simplifying queries, breaking apart JOINs, and moving data munging into the application layer where the cost of processing can be distributed by the load balancer (so t... read more »


Creating An HTML Dropdown Menu Component In Angular 2 Beta 11

Learning Angular 2 Beta has been a non-trivial effort. As I described it on the Adventures in Angular podcast , it's a bit like having a stroke and needing to relearn everything you think you knew about AngularJS application development. Part of what makes it hard to learn is that I'm not using it... read more »


The User Experience (UX) Of CSS Text-Transform On Form Input Fields

In the world of user experience (UX), there is sometimes a fine line between "surprise" and "delight." If we can build interfaces and interactions that delight our users, it is almost certainly a good thing. But, it is almost certainly a bad thing if our interfaces and interactions surprise a user.... read more »


Using ngModel With The OnPush Change Detection Strategy In Angular 2 Beta 11

Lately, I've been thinking a lot about Input bindings for Angular 2 directives and components; and, specifically, about the interaction contract that is assumed when a directive exposes a public property explicitly as an Input property . In my previous post, I looked at how to uphold the ngOnChan... read more »