Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Kai Koenig
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Kai Koenig ( @agentK )

Recent Blog Posts by Ben Nadel

I Have A Fundamental Misunderstanding Of Change Detection In Angular 2 Beta 8

Learning Angular 2 is, without a doubt, an uphill battle. Thankfully, most of the rock scrambles result in beautiful scenic overlooks. But, the one peak that I have yet to climb is the concept of change detection. For weeks, I have been baffled by errors in change detection using ngModel . But, at... read more »

Logging Error Streams To The Server In Angular 2 Beta 6

Earlier this week, I realized that the EventEmitter class in Angular 2 Beta 6 was a sub-class of the RxJS Subject class ; which, in turn, implements both the RxJS Observer and Observable interfaces. I was excited to learn about this; but, at the time, I didn't have a solid use-case for it. As I st... read more »

EventEmitter Is An RxJS Observable Stream In Angular 2 Beta 6

Yesterday, as I was looking through the Angular 2 Beta 6 source code, I noticed that the EventEmitter class - which powers component and directive outputs - extends the RxJS Subject class. Subject then, in turn, extends both the RxJS Observer and Observable classes. This means that the EventEmitt... read more »

Unhandled Errors In RxJS Observable Streams Will Throw Errors In Angular 2 Beta 6

One of the most often cited problems with Promises is that if you don't explicitly handle an error condition in a Promise chain , it's easy to accidentally swallow said error, hiding it from both process and logging. RxJS Observable streams, on the other hand, seem to take a completely different a... read more »

Understanding The Role Of Static Methods In An Angular 2 Dependency-Injection Context

In the Angular 2 dependency-injection (DI) framework, Angular maps tokens onto singleton instances of JavaScript "classes." This allows us to swap in and out various implementations of a class so long as all of the other classes agree on which DI token is needed to reference the abstract implemen... read more »

HTTP Requests Are Cold / Lazy Streams In Angular 2 Beta 6

Yesterday, I watched a great video on RxJS streams titled, " Everything is a Stream " by Rob Wormald . In the video, Rob casually mentioned that, since HTTP requests in Angular 2 are now RxJS observable streams , the underlying AJAX (Asynchronous JavaScript and XML) request won't be opened until ... read more »

Providing Custom View Templates For Components In Angular 2 Beta 6

This morning, I read a rather interesting post by Michael Bromley on providing components with custom templates in Angular 2 . In his approach, he used the "*" micro syntax to inject and then stamp-out a view in much the same way the *ngFor directive works. His way got the job done; but, it inspir... read more »

ColdFusion Can Safely Pull-Through NULL Values In Function Return Statements

One of the most frustrating parts of ColdFusion is that it doesn't really have a solid construct for NULL or undefined values. When you store a NULL value into a variable or an object property, ColdFusion destroys that variables or object property . ColdFusion 9 introduced the isNull() operator ;... read more »

Unwrapping HTTP Responses Using RxJS Observables In Angular 2 Beta 6

Now that Angular 2 has ditched Promises in favor of RxJS Observable streams, I've been actively trying to translate my Promise-based mental model into a Stream-based mental model. And, one of the things that I always did with Promises, in an AJAX-based application, was "unwrap" the HTTP payloads so... read more »

Strange arrayContains() Behavior In For-Loop In ColdFusion 10

Yesterday, I wrote some code that used arrayContains(). Now, I don't use the arrayContains() or the arrayFind() ColdFusion methods very often. To be honest, it just doesn't come up as a use-case that often. And, when it does, I tend to shy away from these functions because I've seen them go "wro... read more »

Canceling RxJS Observables With ngOnDestroy In Angular 2 Beta 6

I happen to love Promises. Like anything else, they can be complicated at first. But, once you understand the core promise chain concepts , they can be quite enjoyable to reason about . That said, a sore point for Promises has always been their lack of cancelability . This leads to some interest... read more »

RxJS Streams Are Inconsistently Asynchronous In Angular 2 Beta 6

Now that I'm starting to dig into the RxJS Observable sequences in Angular 2, I'm trying to translate my Promise-based mental model into a Streams-based mental model. And, as I was trying to figure out how to throw errors in the future using RxJS , I noticed a behavior in RxJS streams that is fund... read more »

Throwing Errors In The Future Using RxJS In Angular 2 Beta 6

It's been over a month since I started digging into Angular 2, and I'm only just now starting to play around with data-access layers. Before I started making HTTP requests to a server, however, I wanted to start by returning static data behind simulated network latency . Normally, I could do this... read more »

Exploring Dependency-Injection Tokens Using Pictures In Angular 2

The other week, I carried out a fun little exploration in using class delegates or class proxies in the dependency-injection mechanism in Angular 2 . While I don't think this will be a terribly common use-case, the exploration really forces you to think about how dependency-injection tokens work a... read more »

Directive Conflict When Classes Export The Same Name In Angular 2 Beta 6

The other day, when I was exploring the mixed-depth behavior of provider and directive arrays , I ran into a rather strange problem. When I created a number of test directives in a loop, only the last one was actually being applied to the consuming context. Eventually, I narrowed it down to the fa... read more »

Creating Custom DOM And Host Event Bindings In Angular 2 Beta 6

Yesterday, I demonstrated that attribute directive selectors and output events can have the same name in Angular 2 Beta 6 . This is great for adding custom behavior to a view element, which I demonstrated with a "clickOutside" directive. But, this got me thinking - how could I add such a directive... read more »

Selectors And Outputs Can Have The Same Name In Angular 2 Beta 6

A few weeks ago, I demonstrated that selectors and outputs could not have the same name in Angular 2 Beta 1 . Today, I am very excited to demonstrate that this has been fixed in Angular 2 Beta 6. Now, a directive selector can also act as an output event binding. This makes it much easier to create... read more »

Provider And Directive Arrays Can Be Mixed-Depth In Angular 2 Beta 6

Back when I was experimenting with creating an Angular 1.x inspired link function in Angular 2 , I demonstrated that you could seamlessly swap one directive reference with an array of directive references. This is a pattern - arrays within arrays - that I have seen in many places throughout the An... read more »

Dependency-Injection With Sub-Classed Services In Angular 2 Beta 3

Yesterday, I was experimenting with the use of class delegates and class proxies in Angular 2 Beta 3 . The example that I happened to be using could have also been implemented using prototypal inheritance. Which, is an interesting topic on its own, especially in the context of a dependency-injecti... read more »

Experimenting With Class Delegates And Factories In Angular 2 Beta 3

With AngularJS 1.x, we had dependency-injection (DI). In Angular 2, we also have dependency-injection; but, it's really a whole new beast with parent-child injectors, token-based class association, multi-resolutions, and no application life-cycle hooks. And, since the concept of "Angular" is being ... read more »

Understanding "Object Identity" With ngFor Loops In Angular 2 Beta 3

According to the ngFor documentation, "Angular uses object identity to track insertions and deletions within the iterator and reproduce those changes in the DOM." Call me naive, but I didn't understand what the Angular 2 documentation meant by "object identity." In AngularJS 1.x, I used to use "tr... read more »

Differentiating Between Initialization And Update With ngOnChanges() In Angular 2 Beta 3

In AngularJS 1.x, it was easy to tell when a $watch() callback was fired for the first time - the new value and the old value were the same (ie, there was no change to detect). With Angular 2 Beta 3, it's still just as easy to differentiate between the first run initialization phase of the ngOnChan... read more »

Experimenting With Input Cursor Positions In Angular 2 Beta 3

The other day, when I was experimenting with the uni-directional data flow implemented by Angular 2 Beta 3, I noticed something odd about input cursor positions. When using ngModel, the cursor position of an input was maintained as I typed. However, when I switched to using explicit data flow mecha... read more »

Extending React.Component Using ES5 With ReactJS 0.14

In my last post on rendering large datasets with Angular 2 Beta 3 and ReactJS , I used ReactJS 0.14 for the first time. Along with the library upgrade, I thought I would also try to change my approach to creating React components: instead of using React.createClass(), like I used to, I thought I w... read more »

Rendering Large Datasets With Angular 2 Beta 3 And ReactJS 0.14.7

Last year, when I was digging into ReactJS, I set up a little demo that compared the loading and processing of large datasets in both ReactJS 0.13 and AngularJS 1.4.2 . Now that Angular 2 is in Beta 3, and the Angular team is reporting a 3-10x performance improvement, I wanted to revisit this expl... read more »

Defining Optional Dependencies / Arguments Using ES5 In Angular 2 Beta 3

On the heels of my last post, about building a better mental model of decorators and meta-data in Angular 2 , I thought I would follow-up with a quick post on optional arguments. When you're using ES6 and the fancy decorators, defining an optional dependency-injection argument is straightforward. ... read more »

Building A Better Mental Model For Meta-Data In Angular 2 Beta 3

Up until now, I've gotten my Angular 2 demoes to work; but, I've never really stepped back and thought about what the decorators are doing, how they work, or when I do and do not need to attach meta-data to a particular class. In this exploration, all I'm trying to do is build a better mental model... read more »

The Worst Code I Ever Wrote Was The Code I Wrote Six Months Ago

Recently, I read a memo went out about what it means to be an "Exceptional" engineer. The content of the memo did seem to describe exceptional people. And while I think it was intended to inspire, it left me feeling a bit shaken. I think a lot of engineers have angst about their abilities. And, I t... read more »

ImageGetEXIFMetadata() Requires Existing File For First Read In ColdFusion

Yesterday, at InVision App , I was started to experiment with EXIF (Exchangeable Image File) image data for the first time in ColdFusion. I was doing so in an area of the code that consumed a temporary file that was deleted right before returning a ColdFusion Image object. When I then went to call... read more »

EXCEPTION: Token Must Be Defined! In Angular 2 Beta 1

Apparently, this was a good week to trip over a lot of cryptic Angular 2 Beta 1 error messages. On the tails of my last post, about "No provider for ParamDecorator" errors , I tripped over another parameter-related error. This time, I was accidentally referring to an undefined value in my Inject()... read more »

UX Prototyping Made Beautiful - Create Interactive Wireframes & High Fidelity Prototypes

! This is an old version of this website, it's no longer being maintained