Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2013 (Bloomington, MN) with: Christine Dohmen
Ben Nadel at cf.Objective() 2013 (Bloomington, MN) with: Christine Dohmen@cdohmen )

Recent Blog Posts by Ben Nadel

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 »

EXCEPTION: No Provider For ParamDecorator In Angular 2 Beta 1

Since most people are going to be writing Angular 2 using TypeScript, they probably won't run into this error. If you use TypeScript, the combination of Angular 2 decorators and typed constructor arguments will do the work of decorating parameters for you (forgive me if I'm misusing some of the ter... read more »

Tracking Click Events Outside The Current Component In Angular 2 Beta 1

With Angular 2, there is a big push to not have to know anything about the browser's DOM (Document Object Model). Angular 2 even got rid of the "link function," which used to be the "glue" that explicitly bound the DOM to the AngularJS 1.x components. While this might make the rendering more flex... read more »

Two-Way Data Binding Is Just A "Box Of Bananas" In Angular 2 Beta 1

Over the weekend, I listened to the latest Adventure in Angular podcast with Brad Green, Misko Hevery, and Igor Minar . In the podcast, the panelists brought up such a fantastic "visual cue" for the new Angular 2 syntax that I just had to share it. They referred to the two-way data binding syntax ... read more »

FAILURE: Using ngModel With A Custom Component In Angular 2 Beta 1

For the last 4 or 5 days, I've been trying to wrap my head around the use of ngModel in Angular 2 Beta 1. And, just to be clear, I still haven't figured it out . It's incredibly frustrating, which I let show a bit on Twitter yesterday. Probably not the right way to express myself; but, I was at my... read more »

EXCEPTION: TypeError: Cannot Read property 'subscribe' Of Undefined In AngularJS 2 Beta 1

In AngularJS 2, directives can announce / trigger output events using the EventEmitter class (ng.core.EventEmitter) . Each output must get its own instance of the EventEmitter class, which means that you must instantiate the EventEmitter when you are implementing your output event stream. If you f... read more »

Directive Output Bindings Use "$event" For Dependency-Injection In AngularJS 2 Beta 1

In AngularJS, when we think about "dependency injection", we often think about providing services to component controllers and other services. But, component template expressions also use a dependency-injection, of sorts, allowing invocation arguments to be pulled out of the component properties, t... read more »

Attribute Directive Selectors And Outputs Cannot Have The Same Name In AngularJS 2 Beta 1

In AngularJS 1.x, the selector for a directive was completely decoupled from the inputs and outputs of that directive. The selector just acted as a means to associate a given directive definition with a given DOM (Document Object Model) node. After the association was made, inputs and outputs were ... read more »

Attributes Are Not Normalized In AngularJS 2 Beta 1

If you're coming from the world of AngularJS 1.x, you probably know that the AngularJS 1.x platform normalizes attributes so that you can refer to them in a consistent manner, within your directives, no matter how the calling context provided them. As such, all of the following attributes resolve t... read more »

Correlating Directive Life-Cycle Events To DOM State In AngularJS 2 Beta 1

Most of the time, in AngularJS 1.x, you didn't need to know about the state of the DOM (Document Object Model); you just updated the view-model and the DOM would eventually be reconciled. Every now and then, however, hooking into that rendering life-cycle would have been super helpful . With Angul... read more »

Creating A Pseudo "Link Function" For A Component In AngularJS 2 Beta 1

In AngularJS 1.x, components had a Controller, that managed the view-model, and a Link function, that piped the DOM (Document Object Model) state back into the controller (as needed). This created a really clean separation of concerns in which the Controller didn't know or care about the DOM - it... read more »

Component Inputs Provide Both Property And Attribute Bindings In AngularJS 2 Beta 1

As I read through the AngularJS 2 Beta 1 Quick Start and Developer Guide, it was a little like drinking from the firehose - a lot has changed; not the least of which is the syntax used to define the component templates. Now, with AngularJS 2, the template syntax actually offers some insight into th... read more »

Pre-Binding Properties To An Object Constructor In JavaScript

Yesterday, I talked about the change in constructor pre-binding as a "breaking change" between AngularJS 1.x and AngularJS 2 Beta 1 . Since AngularJS 2 is a completely new platform, however, I was, of course, using the term "breaking change" very loosely. But, the mechanics of pre-binding an objec... read more »

Inputs Are Not Pre-Bound To Component Controllers In AngularJS 2 Beta 1

As I've been digging into AngularJS 2 Beta 1 , I noticed a "breaking change" from AngularJS 1.x. Now, obviously, AngularJS 2 is a totally different platform; so, I use the term "breaking change" in much more of a philosophical sense rather than a technical one. But, if you're coming from an Angula... read more »

Component Life-Cycle Methods Need To Be Defined On The Prototype In AngularJS 2 Beta 1

With AngularJS 1.x, we had constructors, the $watch() method, and the $destroy event as a way to try and hook into various points in a Controller's life-cycle. With AngularJS 2 Beta 1, we now have official, granular life-cycle events that we can bind to by way of the controller's public methods. Th... read more »

AngularJS 2 Beta 1: Hello World With ES5 And RequireJS

For the last week, I've been doing almost nothing in my spare time but reading up on the AngularJS 2.0 Beta. As a long-time lover of AngularJS , I am very excited about the AngularJS 2 future; but, learning it has been a very humbling experience. I feel like I am starting over from zero - like not... read more »

Managing Locally Cached Data With Redux In AngularJS

The move that I've been learning about Redux and its use in an AngularJS application , the more that I've come to enjoy this idea of an orchestration or "workflow" layer between the controllers and the Redux store. Instead of overloading the responsibilities of Redux with custom middleware , this... read more »

On Staying Focused And Productive In The World Of Programming

Last night, Michael Calkins asked me how I felt about all the churn in the JavaScript world. And, specifically, how I stay focused and productive . It's an interesting topic, especially given the light of some rather controversial posts on the state of web development. I definitely do have some ... read more »

Using Regular Expressions (RLIKE) Pattern Matching In MySQL Queries

If you've known me for a while, you know that I'm absolutely in love with Regular Expressions . I use them in ColdFusion and JavaScript all the time. And, the other day, for the very first time, I used them in MySQL. As a celebration of this milestone, I wanted to put together a quick post. This i... read more »

Mutating An Array During .forEach() Iteration In JavaScript

As you know, I've been trying to learn a lot more about Redux lately . When I learn a new framework or library, I often spend some time looking at the source code so that I can get a better sense of what is actually going on under the hood. And, as I was looking at Redux's implementation of the .d... read more »

Cross-Site Request Forgery (CSRF / XSRF) Race Condition In AngularJS

At InVision App , I love looking through the errors logs. To me, every error log item represents an opportunity - an invitation to improve the app, fix bugs, harden the security, and create an all-around better user experience (UX). At InVision, we use the core AngularJS XSRF (Cross-Site Request ... read more »

AngularJS $http Interceptors vs. Redux Middleware - Why The Disconnect?

Yesterday, I came out strongly against the use of Middleware in Redux claiming that I felt it was Redux taking on too much responsibility. But, after I wrote that post, I got to thinking about the $http service in AngularJS. The $http service allows us to define interceptors which wrap around th... read more »

Logging Redux Dispatch Calls Using Middleware And Decorators In AngularJS

Yesterday, I finally finished my first attempt at learning about Redux by Dan Abramov . I still don't feel very confident with it; but, at least I was able to get something working in my AngularJS application. I do have a gut feeling that using a centralized Store to manage state is a good idea ... read more »

Synchronizing Magnetic Poetry With Firebase, AngularJS, And Redux

Two weeks ago, I set out to learn more about Redux by building a demo in which Magnetic Poetry pieces were synchronized using Firebase and AngularJS , but not Redux. The idea was to get a solid goal on paper that I could then refactor into using Redux for the state management. This turned out to b... read more »