Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at Scotch On The Rock (SOTR) 2010 (London) with: Inga Lamote
Ben Nadel at Scotch On The Rock (SOTR) 2010 (London) with: Inga Lamote

Recent Blog Posts by Ben Nadel

Overriding Directive Definitions In AngularJS

In the past, I've demonstrated that you can bind multiple directives to the same element (or attribute) in AngularJS . This opens up some really exciting possibilities in terms of binding a "single directive" to multiple priorities in the same compiling and linking life cycle . But, last night, w... read more »

$ Facilitates Independent Sub-Routing In AngularJS

In AngularJS, the ngRoute module is the go-to module for routing. We can use it to provide deeply nested views in our AngularJS applications . But, there's nothing magical about routing; when you boil the concept down, it's merely a mapping of the URL onto a set of values that determines which vi... read more »

Image Load And Error Events Bubble Up In ReactJS

In JavaScript, images are not that hard to use, generally speaking. But, hooking into the image node life cycle can sometimes be a bit of a pain. Not only do the "load" and "error" events not bubble-up in the DOM (Document Object Model) tree but, some older browsers [can] fire the "load" event befo... read more »

Decoupling Component And Layout Responsibilities In ReactJS

After my blog post yesterday on decoupling component directives from layout responsibilities in AngularJ S, I wanted to take a quick look at the same concept in a ReactJS context. While the follow-up might seem redundant, ReactJS is a fundamentally different beast in the way that it composes and r... read more »

Decoupling Component Directives From Layout In AngularJS

As I've been learning about ReactJS and thinking more in terms of "component directives" rather than just "views," one of the biggest hurdles for me is learning to separate component directives from the layout in which they reside. When all you have is "views," it's very easy to create a hybrid s... read more »

Components Should Be Reused, Not Repurposed

A while back, I wrote a post about the problem of inappropriately DRY (Don't Repeat Yourself) code . In that post, I attempted to demonstrate, by allegory, the dangers inherit in sharing code that should not be shared. But, I don't think that I clearly articulated the core problem. Recently, howev... read more »

Using A Compound Track-By Expression With ngRepeat In AngularJS

In AngularJS 1.2, the ngRepeat directive added the track-by expression which allows AngularJS to map DOM (Document Object Model) nodes onto view-model values. This was a boon for performance as it meant that DOM nodes didn't have to be destroyed and recreated whenever the underlying object refere... read more »

Passing Contextual Classes And Styles Into Child Components In ReactJS

I've been thinking a lot about AngularJS component directives and how they dove-tail with the concepts of the "shadow DOM". With AngularJS, you get this outer shell which, in the vast majority of cases, is the rendered container element. You can add classes to it, style it, reference it, etc. Now, ... read more »

Thinking In React In AngularJS

I love AngularJS. But, I've been digging into ReactJS a lot lately in order to both get more perspective on application development as well as to be able to help my React-using teammates when they encounter problems. So far, I've found the process to be quite fruitful especially when it comes to t... read more »

Using Dynamic Element Names With The JSX Transpiler In ReactJS

When I first started using JSX with ReactJS, I knew that you could use native HTML elements, like <a> and <span>, as well as React Components, like <List> and <ListItem>; but, it didn't occur to me that JSX element names were dynamic in a more general sense. Mostly by trial-... read more »

Attaching Dynamic Event Handlers To Proxied Child Elements In ReactJS

A month ago, I took a look at creating an AngularJS-inspired "directive" component in ReactJS . The goal of this component was to create a " higher order component " that had a more natural feel and informational flow to it. I liked it as an approach; but, I didn't like that the directive componen... read more »

Setting The State Based On Rendered DOM Elements In ReactJS

The other day, I ran into a really interesting situation in ReactJS. Normally, when I think about React, I think about the state of the component driving the virtual DOM (Document Object Model) and, subsequently, the physical DOM. But, I had situation in which I actually needed to update the state ... read more »

Don't Alter The DOM (Too Much) During The $destroy Event In AngularJS

Lately, I've been digging into the ngAnimate module a lot . It's an awesome part of the AngularJS framework that makes elemental transitions quite easy to implement, even with an extremely dynamic document object model (DOM). But, all of these transitions have gotten me thinking about the state of... read more »

Using The INSERT INTO ... SET Syntax In MySQL

A little while back, I was doing a code review for one my colleagues - Bryan Stanley - when I saw him using an INSERT syntax that I had never seen before. Rather than the traditional INSERT INTO ... VALUES syntax, he was using an INSERT INTO ... SET syntax. This appears to be a MySQL-specific ext... read more »

More Child-Element Animations Using ngAnimate In AngularJS

Over the weekend, I looked at how we can animate static child nodes using the ngAnimate module in AngularJS . To me, this is such an awesome feature of AngularJS (and CSS, really) that I wanted to give it a little bit more love. In this follow-up post, I don't want to introduce anything new, neces... read more »

The User Experience (UX) Of Container Store Parts Packaging

Last weekend, I bought a small set of shelves at the Container Store. We needed the shelves. But mostly, I just wanted an excuse to go to the Container Store (I mean, who doesn't, right?). Their products, much like Ikea's products, are fairly straightforward to assemble, although they often require... read more »

Experimenting With ngAnimate And ng-animate-ref In AngularJS 1.4

CAUTION : This is an exploratory blog post. A couple of days ago, in response to my post about animating static elements using ngAnimate , Dave Ackerman asked me about the new "ng-animate-ref" feature in AngularJS 1.4. I had not seen of this before, so I wanted to take a quick look. The docu... read more »

Child Animations Have To Take The "Magical" Transition-Delay Into Account In AngularJS

The other day, I blogged about animating "static" child nodes, using ngAnimate, inside of a dynamic container in AngularJS . This worked quite nicely for a single container; however, as I continued to experiment, I noticed that it started to break when I had multiple containers animating at the sa... read more »

You Can Use require() To Load JSON (JavaScript Object Notation) Files In Node.js

At InVision App , we're hiring a lot of Node.js developers . Which means, I get to look at a lot of Node.js sample code. And, one odd thing, that I keep seeing over and over again, is developers using JavaScript modules to define static JSON (JavaScript Object Notation) configuration files. I thi... read more »

Animating Static Child Nodes Using ngAnimate In AngularJS

The other day, I found myself with an interesting problem. I had a container that I was conditionally including using the ngIf directive in AngularJS. And, as the container was added and removed from the DOM (Document Object Model), I wanted nested elements within the container to animate; but, I d... read more »

Is Using .bind() To Lock-In Arguments A "Code Smell" In ReactJS

We already know that we don't need to use the .bind() method for things like .forEach() and .map() in a ReactJS render() function. But, I still see .bind() being used to lock-in arguments at render time. This is often done to bind an event handler (like a click-handler) to a particular item withi... read more »

setState(), shouldComponentUpdate(), And render() Timing In ReactJS

The other day, when I was noodling on immutable data in ReactJS , we saw that the shouldComponentUpdate() method provides us with the incoming state (and props) object. But, in another post, we also saw that calls to setState() may or may not be synchronous depending on whether or not the contex... read more »

shouldComponentUpdate() Will Short-Circuit An Entire Subtree Of Components In ReactJS

ReactJS is a very fast rendering engine. It's even a bit faster than AngularJS when it comes to rendering larger data sets . But, that doesn't mean performance is never a concern. As such, ReactJS provides a .shouldComponentUpdate() life-cycle method for each component. By default, this method ret... read more »

Why Should I Care About Immutable Data In ReactJS?

When I started getting into ReactJS , everyone (and every document) stressed "immutable data." You can never mutate the state! You have to overwrite the state properties with new trees of data. But, I felt like there was very little explanation as to why immutable data is helpful. What I finally r... read more »

Rendering ReactJS Components In AngularJS Using AngularJS Directives

Up until now, I've been digging into ReactJS in an isolated context . At InVision , however, some of the teams are starting to render ReactJS components inside of an AngularJS context. From what people have told me, this seems to be a bit of challenge; so, I wanted to take some time to look at th... read more »

Using Scope.$watchCollection() To Watch Functions In AngularJS

In the past, I've looked at using the Scope.$watch() method to watch a function , as opposed to a string, in AngularJS. Watching a function gives you fine-grained control over which value is being examined. I wanted to add a quick follow-up to that post to demonstrate that the same thing could be ... read more »

Protecting Context-Dependent Promise Callbacks In AngularJS

A while back, when I was revisiting my approach to routing, nested views, and caching in AngularJS , I talked about "locking" a callback to the current state of a component. This locking would prevent the callback from being invoked if the state of the callback had changed prior to callback invoca... read more »

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 »