Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at BFusion / BFLEX 2009 (Bloomington, Indiana) with: Aaron Wolfe and Lance Smith
Ben Nadel at BFusion / BFLEX 2009 (Bloomington, Indiana) with: Aaron Wolfe ( @Wolfeman77 ) and Lance Smith@outlan )

Recent Blog Posts by Ben Nadel

Handling Plupload's Uploader Init Race Condition In AngularJS

When we finally setup New Relic at InVision App , I noticed a lot of JavaScript errors that said, " Uncaught TypeError: Cannot read property 'appendChild' of null ." After some debugging, I was able to trace this back to the initialization of the HTML5 Plupload file uploader. And, after further de... read more »

Bane On JavaScript

On Friday, I had tweeted that, "Sometimes, when no one is around, you just have to start quoting Bane." I don't think I'm alone on this matter. Bane is an awesome character; and, Tom Hardy's Bane was bad ass. Then, on Saturday, I woke up with this image in my head. After tweeting it, a couple of ... read more »

The User Experience (UX) Of Value In Web Application Design

This is a fairly vague title; but, it's for a topic that's fairly hard to articulate. Imagine that you are designing a web application and you have a user interface (UI) that you feel is complete. Then someone suggests adding a button "here" that lets the user perform some action. You, as the user ... read more »

Accessing The View-Model Inside The Link Function When Using Controller-As In AngularJS

Historically, the Scope object has been the view-model in AngularJS. But, in recent times, people have begun shifting away from direct Scope access and moving towards the use of the Controller itself as the view-model. This can be accomplished with the "controller as" syntax in newer versions of An... read more »

Creating A ReactJS-Inspired "Props" Object In AngularJS

As I've been digging into ReactJS , one of the things that I have found attractive is the differentiation between the state of a component and the "props" that are passed-into the component from the calling context. In AngularJS, everything lives on the "scope". But, with the emergent pattern of s... read more »

Experimenting With "Query String Zones" In AngularJS

In AngularJS, it's quite easy to integrate routes into an application because routes are mutually exclusive. Meaning, you can't be located at two different routes at the same time. Query string parameters, on the other hand, are a different beast. Query string parameters don't have to be mutually e... read more »

setState() State Mutation Operation May Be Synchronous In ReactJS

As I've been getting into ReactJS, I've run into a few situations in which it would be convenient to call the setState() component method several times within a single function. This is often to apply different bits of logic to different parts of the state. When doing this, however, it's been uncle... read more »

TypeError: Cannot Read Property "childNodes" Of Undefined In AngularJS

The other day at InVision , we launched some code that worked fine locally, fine in QA, fine in Staging, and fine in Production - except for a small set of users. For just a few people, the page was completely breaking with the AngularJS-initiated JavaScript error, " TypeError: Cannot Read Propert... read more »

ngInclude Asynchronous Template Life Cycle Bug In AngularJS

When possible, I try to inline my AngularJS templates so that they are immediately available for consumption in the $compile() service. However, at InVision , we recently switched to a local development workflow that defers template access. This means that templates are loaded, via AJAX (implici... read more »

Creating AngularJS-Inspired "Directive" Components In ReactJS

Last week, I took a look at "higher order components" in ReactJS . In that demo, I wrapped one component in another component that injected mouse-driven data into the inner component. This worked, but it felt kludgy. And, more than anything, it felt backwards; mouse-driven data shouldn't be inject... read more »

Unexpected Scope Precedence When CFIncluding Template Into A ColdFusion Component

For the last week, I've been trying to track down an inconsistent email bug at InVision. It was one of those bugs that only seemed to happen in production; and, it happened inconsistently at that (probably due to the load balancers). After deploying several augmented debugging and logging features,... read more »

Experimenting With Higher-Order Components In ReactJS

CAUTION : This post is more exploration than it is explanation. Take it with a grain of tasty pink himalayan salt. In ReactJS, there is this emerging concept of "Higher-Order Components." These are components that wrap around other components and provide additional behavior and data input (throug... read more »

Initialize Instance Variables In getInitialState() For Consistency In ReactJS

The ReactJS documentation is pretty solid when it talks about how to define and consume the state (ie, the view-model) inside of a React component. But, it's not very clear on where and when to deal with general component state that exists outside of the view-model. As such, it's left up to the dev... read more »

Experimenting With Russian Doll Error Reporting In Node.js

Often times, when an error occurs in a Node.js application it is either passed, as-is, up the call stack (via callbacks or Promises); or, it is caught and a new error object is created and passed back. On their own, each one of these approaches works well enough. But, sometimes it would be great to... read more »

Conditional Animations And Transition Timing In AngularJS

Animations and transitions add great value to the user experience (UX); but, they do so in two different ways that are often in conflict. The first point of value is that they create a more natural, more organic experience that helps the user build a mental model around the interconnection of diffe... read more »

Possible Bug: Empty Animations Are Cached In AngularJS 1.4

After several hours of writing "debugger" and "console.log()" statements, I think I figured out why I was getting unexpected animation behaviors in AngularJS 1.4. And, I think I am going to consider this a bug. It seems that there's an edge-case in which an empty-animation will fail to flush the an... read more »

How The $destroy Event Affects The Scope Tree In AngularJS

The other day, I realized that I had a misunderstanding about how the Scope tree was altered during a $destroy event in AngularJS. Originally, I had thought that after the "$destroy" event was broadcast, each scope was detached from its parent. However, after some further investigation, I now reali... read more »

Should Flux Change The Way That I Think About ReactJS Components?

As I've been learning about ReactJS and now, starting to learn about Flux, I tend to see a lot of writing on the "how" things work but not necessarily the "why" things work the way they do. As such, I am finding it difficult to build a mental model of how all the choices fit together. One such po... read more »

Switch Cases Do Not Have To Be Static In JavaScript

In ColdFusion, Switch Cases have to be static. Meaning, the value of a Case statement has to be hard-coded within the source code. Having been a ColdFusion developer for a long time, I just assumed that this is how it worked in other languages as well - I figured it was some sort of compile-time / ... read more »

A Quick Look At Rendering White Space Using JSX In ReactJS

As I've been getting into ReactJS, I've been surprised a few times at how my JSX code gets translated into rendered HTML. In particular, it took me a little while to understand the rules around rendering white space: when does JXS follow the "natural" HTML concept of white space; and, when does it ... read more »

How JSX Renders Different Data Types In ReactJS

As a quick experiment, I wanted to see how JXS renders different types of data in ReactJS. And, think about how the rendering algorithm can be leveraged to generate conditional output. Of course, I am referring to "JSX" as the renderer. But really, JSX is just the syntactic sugar over the core Reac... read more »

Should The Relationship Between Object Mode And Read Size Be Symmetric In Node.js Streams?

After looking at how Object Mode affects string decoding in Node.js , it got me thinking about Object Mode at a more philosophical level. How should we, as Node.js developers, think about streams in Object Mode? And, how should the nature of the data reflect the configuration of streams? This is a... read more »

Object Mode Streams Do Not Decode Strings Into Buffers In Node.js

In Node.js, when you work with Readable and Writable streams, string values are decoded into Buffers by default. You can override this by initializing a stream with "decodeStrings: false"; but, if you omit this configuration, it defaults to true. But, what happens if a stream is running in "Object ... read more »

You Don't Need To Use .bind( this ) When Using .forEach() Or .map() In ReactJS

Often times, in a ReactJS Element (Component), you need to map a data collection onto an Element collection for rendering. The ReactJS community seems to have settled on using the ES5 methods .forEach() and .map() to fulfill these kinds of tasks. But, unfortunately, I'm seeing people using the .bin... read more »

Class Attribute Interpolation Is Safer In AngularJS 1.2 And Newer

NOTE : If you started using AngularJS with 1.2 or later, this post will only have academic value for you. As of AngularJS 1.4, you can now mix Array and Object notation in the ngClass directive. This would enable you to pass in both dynamic class names as well as conditional classes. But, this ... read more »

Error Object Properties Are Not Iterable / Enumrable In Node.js

Over the weekend, I was playing around with custom Node.js errors and error logging when I noticed something weird: none of the ".stack" properties (ie, the stack traces) were showing up in my log files. After a bit more experimentation, I realized that none of the core Error properties were enum... read more »

Thinking About Tracking Requests And Errors Across Micro-Services

Caveat : This is all just me "thinking out load." Take that as you will. As we start to break apart our monolithic applications, destructuring them into a collection of independently scalable micro-services, things simultaneously become both more simple and more complex. While each individual ser... read more »

Managing Conditional Links And Route Changes In AngularJS

Sometimes, in an AngularJS application, you have a context in which a particular link might not be clickable based on the current view-model state. In the past, I've dealt with this by either injecting the $event into the Controller (which is a code-smell and an anti-pattern); or, by hiding the loc... read more »

Using Bit Values In COALESCE() In MySQL Results In Binary Values

Every now and then, this one throws me through a loop: if you use a COALESCE() statement in MySQL , and one of the values is a BIT, MySQL returns a binary value, not a numeric value. In ColdFusion, this causes a problem because ColdFusion sees the resultant value as a Byte Array (like a Blob); as ... read more »

Using Module.decorator() In AngularJS 1.4

In the past, we've been able to decorate AngularJS services by using the $provide service in the configuration phase of the application bootstrap. As of AngularJS 1.4, however, the concept of a decorator has been promoted to the Module API, finally living alongside .service(), .factory(), .run(),... read more »