Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2011 (Minneapolis, MN) with: Brandon Moser
Ben Nadel at cf.Objective() 2011 (Minneapolis, MN) with: Brandon Moser@brandonmoser )

Recent Blog Posts by Ben Nadel

Question: Reconciling One-Way Data Flow With Browser-Based Navigation

In this day and age, if you are building a non-trivial web-application, you are almost certainly using the browser's URL to manage the rendering and traversal of the application view. In such an application, the code both reads from and writes to the browser's URL. The application may change the UR... read more »


Running MySQL Compress() And Uncompress() Compatible Methods In ColdFusion

A couple of weeks ago, Meghana asked me about implementing MySQL's Compress() and Uncompress() algorithms in Java. In the past, I've looked at using Compress() and Uncompress() in MySQL ; but, I've never thought about actually trying to implement it in code. As such, I thought it would be a fun ... read more »


Revisited: Creating An Event-Driven Pre-Bootstrap Loading Screen In Angular 2.0.0

Earlier this week, I revisited the idea of creating a pre-bootstrap loading screen in Angular 2 (which was, itself, a revisiting of an earlier post ). In that post, I used the Document Object Model (DOM) as a means to cross the application boundary, allowing the app to announce an "appready" eve... read more »


There's What Your Manager Tells You And Then There's What Your Heart Tells You

I might not write the best software; but, I love the software that I write. Even when I hate it and I'm embarrassed by it and I wish I could find a better way to solve a problem, I still love it. My software is like my baby; and when it's in trouble, my maternal instincts kick in and I have to save... read more »


Moving Core Application CSS Styles Into The Root Component In Angular 2.0.0

By default, pretty much all of my JavaScript demos have a "demo.css" file that I link-to within the "index.htm" page. But, I'm starting to wonder if this makes sense for my Angular 2 demos. In Angular 2, we can easily use emulated style-encapsulation within our component directives; which makes m... read more »


Fixing The Dropdown / Type-Ahead Menu In Amazon's Kibana / ELK Stack

At InVision , we currently use Kibana to search our logs. For the most part, Kibana has been pretty good (despite the pains of having many teams dump all of their logs with conflicting keys and data-types). A couple of weeks ago, however, something changed; suddenly, the dropdown / type-ahead menu... read more »


Creating An Event-Driven Pre-Bootstrap Loading Screen In Angular 2.0.0

In an earlier post on creating a pre-bootstrap loading screen in Angular 2 RC 1 , Moataz asked me about closing the loading screen based on an application event rather than the SystemJS-loaded event. And to be honest, I'm not really sure how to accomplish this in the prototypical "Angular way." Ul... read more »


You Cannot Project Static Content Into The Root Component In Angular 2.0.0

Lately, I've been thinking about the idea of an application loading screen in Angular 2 and I wanted to test something I've never tried before: projecting static content into the root component in an Angular 2 application. Long-story, short - it doesn't work. It doesn't throw an error or anything... read more »


Automatic Property Calculation Support With Animations In Angular 2 RC 6

One of the cool things about the Web Animations support in Angular 2 RC 6 is that you can use the "*" (wildcard) to reference the "runtime value" of a given property in either the source or destination styles of a transition. As I've been playing around with this feature, however, I've discovered t... read more »


Possible Bug With Asymmetric Support For Nested Animations In Angular 2 RC 6

Yesterday, I wrote about a possible bug with nested animations in Angular 2 RC 6 . In that post, I demonstrated that Document Object Model (DOM) elements won't get destroyed if there are too many nested animations. As I continued to play around with this code, however, I think I realized that ther... read more »


Possible Bug With Nested Animation Transitions In Angular 2 RC 6

As I've been digging into the animation support in Angular 2 RC 6 , I think I have come across a bug. From what I can see, it appears that if a dynamic container has more than one nested animation attached to static elements, the container is not destroyed at the end of the transition. If there is... read more »


Blocking Nested Animations In Angular 2 RC 6

In Angular 1.x, the default behavior for the animations module was to block any nested animations and any animations during the initial rendering of the application. I believe that this was a smart move and demonstrated an holistic view of the application; animations weren't just an elemental consi... read more »


Styling The Void State Using Animations In Angular 2 RC 6

As I've starting to dig into the Animations support in Angular 2 , one thing that seemed non-obvious to me was whether or not the "void" state could be styled. I have seen and demonstrated that you can certainly provide void-oriented styles when transition to and from the "void" state; but, I wasn... read more »


Using ChangeDetection With Animation To Setup Dynamic Void Transitions In Angular 2 RC 6

Yesterday, I looked at creating conditional Enter and Leave animations in Angular 2 RC 6 . As part of that exploration, I stumbled over the problem of dynamic "leave" states; or rather, starting a "void transition" from a dynamically selected state. To solve that problem, I used explicit change-de... read more »


Experimenting With Conditional Enter-Leave Animations In Angular 2 RC 6

While Angular 2 now has support for animations, the approach taken in Angular 2 is very different from the approach taken in Angular 1.2+. In Angular 1.2+, the animations are driven by special CSS classes that are parsed at runtime; in Angular 2 (at least as of RC 6), all animations are driven by a... read more »


Creating A Custom ErrorHandler In Angular 2 RC 6

I know that I've looked at logging errors in Angular 2 before ; but, in the recent release of RC 6, I noticed that there was a breaking change, replacing the ExceptionHandler service with the ErrorHandler service. And, since my understanding of Angular 2 is a few RC's behind the most current relea... read more »


I'm Excited When People Leave My Company

Today is the last day for one of our engineers here at InVision . He's decided to move on to the challenges of embedded programming with physical devices - a completely different area of technology. I know that decisions like this are very tough to make and often weigh heavily on people for weeks ... read more »


Using Lodash's intersection() To Apply An Arbitrary Sort To A Set Of Simple Values

Recently, I've been working on integrating Recurly.js - a client-side credit-card processing library - into our application. When Recurly.js validates the credit-card form, it returns a list of invalid fields. Unfortunately, the order of the returned fields doesn't necessarily reflect the order in ... read more »


FAILURE: Exploring The ngRx Router In Angular 2 RC 4

For eight months , I've been digging into the pre-release of Angular 2. And, for the last 6 weeks or so, I've been trying to wrap my head around Routing. For me, Routing was the last piece of the puzzle - the final hurdle before I felt like I could start building an actual Angular 2 application. U... read more »


Transitions And Animations In CSS By Estelle Weyl

With the world of web development expanding at an ever-increasing pace, it's easy to let parts of your mental model become stale and outdated. For me, CSS (Cascading Stylesheets) is one of these areas. In particular, CSS-based transitions and animations are not tools that I would consider part of m... read more »


Code Kata: Using Array Reduce() To Navigate An Object Graph In JavaScript

Yesterday, Josh Siok and I were brainstorming on some ways to locate a value in an object graph when given a set of object-properties as a single string. Now, I know (or rather assume) that there are many libraries out there that provide "object query" functionality. But, I figured this would mak... read more »


Practical SVG By Chris Coyier

A couple of weeks ago, I tweeted about how daft I felt when it came to SVG or, Scalable Vector Graphics. SVG has been a viable web technology for several years now; and, a general graphics technology for many more years than that. And yet, it was a total blind-spot for me. I didn't know thing-one... read more »


The Import Statement Creates A "Live" View Of Modules In ES6 And TypeScript In Angular 2

When I first started learning ES6 by way of TypeScript in Angular 2, I thought that the "import" statements, at the top of my modules, were just using object destructuring assignments. This mental model actually caused me a lot of confusion as I was looking through the Angular 2 source-code - seein... read more »


Thinking About TypeScript, Dependency-Injection Tokens, Type-Checking, And Architecture In Angular 2 RC 4

In an Angular 2 application, type-annotations in a constructor function serve two distinct purposes. On the one hand, they tell TypeScript's type-checker what interface that value exposes. And, on the other hand, they tell the Angular 2 Injector which value to instantiate (if not already cached) an... read more »


Implementing A $log-Inspired Logging Service In Angular 2 RC 4

As I've been digging into Angular 2 over the past several months, one of the features that seems oddly absent is a basic logging service. In Angular 1.x, we had the $log service that could be safely invoked whether or not the underlying "console" object existed. In Angular 2, now that we have a mul... read more »


A Promise Chain's API Is Determined By Its Initiating Promise Library

After having read 99 Bottles of OOP - A Practical Guide to Object-Oriented Design by Sandi Metz and Katrina Owen , I started thinking a lot about Promises and the Liskov Substitution Principle (otherwise known as the "L" in the SOLID principles). And, the more I thought about it, the more I re... read more »


99 Bottles Of OOP - A Practical Guide To Object-Oriented Design (BETA) By Sandi Metz And Katrina Owen

Like many people, I am a huge fan of Sandi Metz . I find that she has an uncanny ability to take complex topics and deconstruct them in ways that my brain can understand. So, when I saw that she had recently co-authored a new book - 99 Bottles Of OOP - A Practical Guide To Object-Oriented Design ... read more »


Object Access: Bracket-Notation vs. Dot-Notation With TypeScript In Angular 2 RC 4

When I started learning Angular 2, I did so in the context of ES5. But, after much community push-back and some clear evidence that some of the code would be more readable with TypeScript, I switched over to this type-driven super-set of JavaScript . And, I actually enjoy it. But, I do find that I... read more »


On The Difficult Problem Of Logging Errors In Parallel Promises In JavaScript

Yesterday, in response to my post on gathering data in parallel inside an asynchronous Generator-based workflow , Scott Rippey brought up a really interesting point: if several of the parallel requests error-out or get rejected, only the first error in the group will be caught. Not only is that ... read more »


Gathering Data In Parallel Inside An Asynchronous Generator-Based Workflow In JavaScript

In my post yesterday, I explored the idea of using ES6 Generators and the "yield" operator as a means of writing asynchronous code that looks and feels like it runs synchronously . This is great because it truly simplifies the syntactic boilerplate around Promises. But, when you start doing this, ... read more »