Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at dev.Objective() 2015 (Bloomington, MN) with: Justine Arreche
Ben Nadel at dev.Objective() 2015 (Bloomington, MN) with: Justine Arreche@saltinejustine )

Recent Blog Posts by Ben Nadel

Maintaining Proper Type-Checking With Callbacks Using TypeScript In Angular 2 RC1

A couple of days ago, I demonstrated how to get the in-browser TypeScript transpiler to enforce type-checking . In that demo, however, I could not get the type-checker to validate a variable assignment in one of my callbacks. While I was befuddled by this validation gap, Greg Lockwood was kind eno... read more »

Better Type Checking With In-Browser TypeScript Transpiling In Angular 2

A couple of days ago, I posted that I was going to start writing my Angular 2 demos using System.js and TypeScript . And, while I got something working, based on the Getting Started guide for Angular 2, it didn't really deliver a large portion of the value-add for TypeScript: type checking. Fortun... read more »

Building Angular 2 Demos With System.js And TypeScript

If you've followed my blog for any time now, you've probably come to understand that I love ES5. Sometimes, I think maybe I'm one of the few people who actually thinks JavaScript is an awesome language. And, for months now, I've tried my hardest to write all of my Angular 2 demos using a single ES5... read more »

Creating A Value Accessor "Service" For NgModel In Angular 2 Beta 17

CAUTION : This is more of an academic post than a practical one. I am not recommending this approach - I'm more interesting in exploring the mechanics of it. Up until now, when talking about using ngModel with custom components in Angular 2 , I've used an approach that combines a directive w... read more »

Creating An Abstract Value Accessor For NgModel In Angular 2 Beta 17

Over the last few months, I've be doing a lot of work with ngModel and Angular 2. To be honest, I probably won't use custom ngModel components all that much in production. But, it's been such an epic journey that I feel somewhat compelled to continue noodling on it. Implementing ngModel - which i... read more »

You Can Bind To The Same Event Several Times In Angular 2 Beta 17

Yesterday, in my demo on enabling tabbing in textarea elements in Angular 2 , I did something that gave me pause - I used [(ngModel)] and (ngModelChange) in the same element. At first, this might not seem interesting. But, when you stop and think about the fact that [(ngModel)] box-of-bananas not... read more »

Trying To Enable Tabbing In Textareas In Angular 2 Beta 17

Last week, I learned two really important things by digging into the Angular 2 source code. First, I realized that Angular 2 has native support for key combinations . Second, I discovered that the JavaScript DOM API supports a synchronous "input" event on input elements (and that this event is w... read more »

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 »