Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Matt Vickers and Christian Ready
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Matt Vickers@envex ) and Christian Ready@christianready )

Recent Blog Posts by Ben Nadel

The User Experience (UX) Of Ceremony And Self-Priming

After a few years off from doing anything athletic, I've been trying to get back into weight-lifting. Yesterday, I was at the gym working on my deadlifts. I'm nowhere near as strong as I used to be; but, I have been able to build up to a weight that is hard for me to hold. And that's when the chalk... read more »

Child Animations Have To Inherit Transition-Property In AngularJS 1.2 And 1.3

A couple of weeks ago, I demonstrated that animating static child elements , in AngularJS 1.4, involved the use of the "transition-delay" CSS property . Unfortunately, when I went to apply this in an AngularJS 1.2 application, I discovered that the use of "transition-delay" was actually part of t... read more »

CSS3 Transition Properties Are Not Inherited (In AngularJS)

When it comes to CSS (Cascading Style Sheets), I know enough to get some things done; but, I still have a tremendous amount of learning left to do. I have plenty of knowledge-gaps. One such gap presented itself - eventually - as I was trying to get child animations to work in AngularJS . What I ev... read more »

Using CMD+Enter To Submit A Form In AngularJS

On many online forms, the CMD+Enter (Command key plus Enter key) combination is being used to submit the form while the user is still focused on a textarea input. This allows the user to quickly submit a form without having to use the mouse (or the Tab key) to click on the Submit button. I love thi... read more »

Using The This-Binding In Directive Definition Objects In AngularJS

This is a really minor, but I think very interesting point about the directive definition object (DDO) in AngularJS. When you define your directives, you can provide various methods like link() and compile(). When these methods are invoked by the AngularJS framework, they are done so as properties ... read more »

Thinking In (A Different) Context - A Prototype For User Experience (UX) Designers

When I'm working on a prototype, my first step is always sitting down and sketching out ideas . I have the perfect pen and a stack of unlined paper pads ready to go. I keep my sketches small and rough - the right balance of detail and workflow; enough to get the machinery firing, but not so fine-g... read more »

Overriding Core And Custom Services In AngularJS

Yesterday, I took a look at how to override directive definitions in AngularJS . As a quick follow-up, I thought I would demonstrate that the same kind of thing can be done with services. In AngularJS, of course, we can always use decorators to augment or replace services (and directives) at con... read more »

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 »