Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Dan Wilson
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with: Dan Wilson@DanWilson )

Recent Blog Posts by Ben Nadel

Using An Item Template With An HTML Dropdown Menu Component In Angular 2 RC 3

A while ago, I played around with trying to create an HTML Dropdown menu component in Angular 2 . This was quite a non-trivial task, but very worthwhile. Recently, however, I discovered that you could pass Template references into components for dynamic rendering . And, while not exactly the same... read more »

Maintaining JavaScript Date Values During Deserialization With A JSON Reviver

I'm currently making my way through Exploring ES6: Upgrade to the Next Version of JavaScript by Dr. Axel Rauschmayer . While it's a seemly-exhaustive in-depth look at ES6, it's also teaching me a few things about ES5. In particular, I learned that the JSON.parse() and JSON.stringify() methods ac... read more »

Change Detection Strategy Appears To Override The ChangeDetectorRef In Angular 2 RC 3

In Angular 2 RC 3, you can provide a change detection strategy in your Component meta-data. But, you can also inject the ChangeDetectorRef into your component as a way to gain finer control over how your component interacts with the change detection life-cycle. As it turns out, however, doing both ... read more »

Learning About Promises By Implementing The Race() Method Algorithm

If you look at the Q documentation, it doesn't look like it implements the .race() method. But, if you look at the source-code, the .race() method is indeed there. And, when I saw how Q implemented it, I was reminded of just how interesting Promises are. When I had thought that .race() was missing,... read more »

Aggregating Values In A Promise-Based Workflow In JavaScript

I love promises. I find a promise-based workflow much easier to use than the average callback-based workflow (though, of course, Promises still use callbacks). That said, promises are not a panacea; they don't magically turn asynchronous tasks into trivial matters. Asynchronous workflows are stil... read more »

Emitting Cancelable / Preventable Output Events In Angular 2 RC 3

In the one-way data flow philosophy embraced by Angular 2, you don't often have to cancel a component's output event directly; if a component emits an output event that you want to cancel, just don't pipe the event data back into the target component. But, I don't think it's wise to try and reduce ... read more »

ChangeDetectorRef Is A Special Dependency In Angular 2 RC 3

Most of the time, in Angular 2, a Component and its sibling Directives (on the same host element) all have access to the same dependencies from the same dependency-injector. The ChangeDetectorRef, however, is one dependency that is given special treatment. As it turns out, if the ChangeDetectorRef ... read more »

Inline Object Literals Don't Trigger Unnecessary Input Changes In Angular 2 RC 2

A few weeks ago, I experimented with dynamic template rendering in Angular 2 RC 1 . As of Angular 2 RC 2, dynamic template rendering is now part of the core platform functionality. But, the context input for the given template is provided as an object, not as a set of individual inputs (as I had i... read more »

Elegant Objects By Yegor Bugayenko

I'm not an Object Oriented programmer. But, I really wish that I were. I think there's something magical about being able to "think in objects" and to let objects to the heavy lifting for you. Which is why I really enjoy thought-provoking books like Elegant Objects by Yegor Bugayenko . Elegant Obj... read more »

Thinking About Draggability Within A Unidirectional Data Flow In Angular 2 RC 1

CAUTION : This is more of a "thinking out loud" post than an informative one. To be honest, I'm not so good with "draggable" behavior in JavaScript. Historically, this is one of those feature implementations that I've just deferred to jQuery UI or some other 3rd-party library. But, many of thos... read more »

Node's require() Function Can Seamlessly Switch Between .json And .json.js Files

Last year, I wrote a quick blog post about Node.js' ability to read in JSON (JavaScript Object Notation) files using the require() function . This feature, which I use all the time, is an awesome way to synchronously read in configuration or migration data. But, sometimes, the JSON specification i... read more »

Creating A Pre-Bootstrap Loading Screen In Angular 2 RC 1

Last year, I took a look at how to create a pre-bootstrap loading screen in an Angular 1.x application . In the comments for that post, Yaseen recently asked how one might accomplish the same thing in an Angular 2 application. I think the approach, in Angular 2, will basically be the same. But, si... read more »

Q's Node Resolver Will Aggregate Results In An Array When Necessary

As I've been experimenting more with Node.js and the MySQL driver, I've been seeing some inconsistent results. Sometimes, my query callback would receive two result parameters (one for the recordset and one for the fields); and, sometimes, the callback would receive a single parameter that was an a... read more »

The Node.js MySQL Driver Doesn't .end() As Gracefully With Connection Pooling

When you're running a Node.js web application, there's a good chance that you never think about gracefully shutting down your application. In all likelihood, you just let it run forever (or at least until it crashes). When you're using Node.js as a scripting language, however, just the opposite is ... read more »

Templates Appear To Maintain Lexical Bindings In Angular 2 RC 1

Yesterday, when I was experimenting with dynamic template rendering in Angular 2 , I happend to notice that the ngFor directive can accept an external TemplateRef. Not only did I want to experiment with this ngFor feature; but, it got me generally thinking about how a template maintains its bindin... read more »

Experimenting With Dynamic Template Rendering In Angular 2 RC 1

Before we dive in, I just want to clearly state that this is an experiment. I am still very much learning about how view containers and templates works. And, I have to give a huge Thank You to Pawel Kozlowski who painstakingly helped me wrap my head around the hierarchy of view containers in ... read more »

Thinking About Static vs. Private Methods In TypeScript / Angular 2

Technically speaking, there's really nothing different about TypeScript. Meaning, it all transpiles down to the same ES5 that we can write today. But, the fact that TypeScript hides certain complexities means that we are more likely to think about the code from a different perspective. Such is the ... read more »

The 9th Annual Regular Expression Day - June 1st, 2016

Yesterday, I used a Regular Expression to validate and parse dynamic key bindings in Angular 2 . And, it was just as exciting yesterday as it was a decade ago when I first learned what a Regular Expression was. That's because Regular Expressions are beautiful. And elegant. And timeless. And we'll ... read more »

What If Your Company Is A Representative Of You?

We often hear about employees as being representatives of their company. Whenever they go to an event, give a presentation, engage with the public, someone somewhere gently reminds them that they are acting a representative of the company — an ambassador to the brand. But, the more I think ab... read more »

Prioritizing Global Key Handlers In Angular 2 RC1

A couple of weeks ago, I demonstrated that Angular 2 came with built-in support for key-combination binding (ex, "Meta+Enter") . That support, however, is limited to element-level bindings - the built-in KeyEventsPlugin doesn't implement the global event handler. As such, if we want to implement k... read more »

Maintaining Proper Type-Checking With Callbacks Using TypeScript In Angular 2 RC1

A couple of days ago, I demonstrated how to get the in-browser TypeScript transpiler to enforce type-checking . In that demo, however, I could not get the type-checker to validate a variable assignment in one of my callbacks. While I was befuddled by this validation gap, Greg Lockwood was kind eno... read more »

Better Type Checking With In-Browser TypeScript Transpiling In Angular 2

A couple of days ago, I posted that I was going to start writing my Angular 2 demos using System.js and TypeScript . And, while I got something working, based on the Getting Started guide for Angular 2, it didn't really deliver a large portion of the value-add for TypeScript: type checking. Fortun... read more »

Building Angular 2 Demos With System.js And TypeScript

If you've followed my blog for any time now, you've probably come to understand that I love ES5. Sometimes, I think maybe I'm one of the few people who actually thinks JavaScript is an awesome language. And, for months now, I've tried my hardest to write all of my Angular 2 demos using a single ES5... read more »

Creating A Value Accessor "Service" For NgModel In Angular 2 Beta 17

CAUTION : This is more of an academic post than a practical one. I am not recommending this approach - I'm more interesting in exploring the mechanics of it. Up until now, when talking about using ngModel with custom components in Angular 2 , I've used an approach that combines a directive w... read more »

Creating An Abstract Value Accessor For NgModel In Angular 2 Beta 17

Over the last few months, I've be doing a lot of work with ngModel and Angular 2. To be honest, I probably won't use custom ngModel components all that much in production. But, it's been such an epic journey that I feel somewhat compelled to continue noodling on it. Implementing ngModel - which i... read more »

You Can Bind To The Same Event Several Times In Angular 2 Beta 17

Yesterday, in my demo on enabling tabbing in textarea elements in Angular 2 , I did something that gave me pause - I used [(ngModel)] and (ngModelChange) in the same element. At first, this might not seem interesting. But, when you stop and think about the fact that [(ngModel)] box-of-bananas not... read more »

Trying To Enable Tabbing In Textareas In Angular 2 Beta 17

Last week, I learned two really important things by digging into the Angular 2 source code. First, I realized that Angular 2 has native support for key combinations . Second, I discovered that the JavaScript DOM API supports a synchronous "input" event on input elements (and that this event is w... read more »

Learning About The "Input" Event From Angular 2

When I started digging into Angular 2, I saw that, internally, the framework was binding to (input) events on Input and Textarea elements in order to power the ngModel directives. At first, I assumed that this was some sort of special Angular 2 event proxy; but, the more I picked it part, the more ... read more »

Native Key-Combination Event-Binding Support In Angular 2 Beta 17

Last week, I experimented with dynamically parsing and binding DOM (Document Object Model) events using the EVENT_MANAGER_PLUGINS system . While that post more of a fun exploration of the Angular 2 template syntax and plugin system, I didn't realize that Angular 2 Beta 17 actually ships with nat... read more »

Querying For Multiple ViewChild Directives On A Single Element In Angular 2 Beta 17

Yesterday, I took a look at exporting component and directive references in Angular 2 . But, as I was playing around with that code, I realized that it was more complicated than it needed to be. Instead of exporting and querying for references, I could instead query for multiple ViewChild types on... read more »