Immediately Invoked Function Expressions (IIFE) Work In Lucee 5.3.2.77

Ben Nadel demonstrates that Immediately Invoked Function Expressions (IIFE) are supported in Lucee CFML 5.3.2.77. This commonly-used pattern from the JavaScript world works just as well in the ColdFusion world. And, while you may never need it - it's ... more

The Location() Function URL-Encodes The Hash If The URL Also Contains A Query-String In Lucee 5.3.1.102

Ben Nadel discovers that the location() function in Lucee 5.3.1.102 will URL-code the hash / fragment of the requested URL if - and only if - the requested URL also contains a query-string. This was breaking his Angular.js application, which consumes ... more

Webpack 4 Automatically Makes process.env.NODE_ENV Available In Your JavaScript

Ben Nadel just discovered that Webpack 4 will implicitly use the DefinePlugin to automatically replace the substring, "process.env.NODE_ENV", with the current build mode as it compiles his JavaScript and TypeScript applications. This will make ... more

Code Kata: Parsing Simple Timespan Strings Like 3h:12m:57s Using JavaScript

Ben Nadel looks at parsing simple timespan strings in JavaScript. And, what was originally intended as an exploration of Regular Expression pattern matching quickly becomes a philosophical discussion about embracing the "Robustness Principle" ... more

Using Pure Pipes To Generate NgFor TrackBy Identity Functions In Angular 7.2.7

Ben Nadel reflects on the ease-of-use provided by the "track by" expression in AngularJS; and, attempts to re-create some of that magic using pure Pipes in Angular 7.2.7. With a pure Pipe, we can create a higher-order-function (HOF) that generates ... more

Harnessing My Social Anxiety Using A Countdown Timer In Vue.js 2.6.7

Ben Nadel attempts to harness his social anxiety and use it to do something productive: play with the Vue.js Router for the first time, creating a countdown-timer that will count down the number of "sleeps" until he is back in his own bed.... ... more

Projecting Content Into The Root Application Component Using Slots In Vue.js 2.6.6

Ben Nadel briefly explores the various ways in which the root Vue() instance can be defined. And demonstrates that there is one way in which you can enable content projection directly from the root HTML page using standard Slot syntax in Vue.js 2.6.6.... ... more

Hacking Scoped CSS Modules Into A Brownfield AngularJS 1.2.22 Application

Ben Nadel experiments with ways to hack scoped CSS modules into an old, brownfield AngularJS 1.2.22 application. It's obviously not as seamless as it would be in the latest Angular framework; but, given his constraints, it's a very fun (and welcome) ... more

Adventures In Angular, Episode 224: The Irrational Demonization Of Two-Way Data-Binding In Angular With Ben Nadel

Ben Nadel chats with the Adventures in Angular team, joining episode 224 as a guest to discuss the state of JavaScript frameworks with Ward Bell, Alyssa Nicoll, and Aaron Frost (aka, Frosty). On the episode, we talk about Angular, Vue.js, React.js, and ... more

Renderless Components In Angular 7.2.0

Ben Nadel draws inspiration from a post by Adam Wathan on "Renderless Components" in Vue.js; and, translates the concept into Angular 7.2.0 context. However, instead of trying to jam all the code into one component, Ben uses a Super class and ... more

Experiment: Using Service Barrels As A De Facto Dependency-Injection Container In Vue.js 2.5.22

Ben Nadel considers the topics of Dependency-Injection (DI) and Inversion of Control (IoC) in a Vue.js application. And, explores the use of a "service barrel" to create a de facto Dependency-Injection container that allows for more flexible ... more

Using encodeForJavaScript() To Embed A JSON Payload As Configuration For A Single-Page Application in ColdFusion

Ben Nadel demonstrates how to use encodeForJavaScript() in conjunction with serializeJson() in order to safely embed a JSON (JavaScript Object Notation) configuration payload within a JavaScript context as part of a ColdFusion page response that it serving-up ... more

Animating Elements In From A Mouse-Event Location In Vue.js 2.5.21

Ben Nadel uses both CSS and JavaScript animations hooks in Vue.js 2.5.21 in order to animate an item's "enter" transition in from the {x,y} coordinates of a user's mouse-click event. The fact that CSS and JavaScript hooks are not mutually exclusive ... more

Creating A Pandora Radio Station List Animation In Vue.js 2.5.21

Ben Nadel attempts to mimic his Pandora Radio Station list animation in Angular 7.1.4, and completely fails. Then, attempts the same animation in Vue.js 2.5.21, only to find that this exact animation is supported right out-of-the-box in Vue.js and requires ... more

Creating A Bind-Once Structural Directive In Angular 7.1.4

Ben Nadel takes some inspiration from Vue.js and attempts to build a "bind once" structural directive in Angular 7.1.4. This *bindOnce directive can stand-alone; or, it can watch for changes in an expression, allowing for granular control over ... more

Updating Reactive Values Can Cause Some Non-Reactive Values To Re-Render In Vue.js 2.5.21

Ben Nadel digs into some confusing behavior that he was seeing in regard to non-reactive values in Vue.js 2.5.21. After some investigation, he believes that he was seeing non-reactive value interpolation being caught up in reactive value change detection ... more

Creating A Vue.js Inspired Event-Modifier DOM Plug-In In Angular 7.1.4

Ben Nadel uses Angular's Event Manager plug-in system to add Vue.js inspired event-modifiers (like .stop, .prevent, .once, and .self) to an Angular 7.1.4 application. This allows Angular to mimic the Vue.js event-handling logic.... ... more

Vue.js Up And Running By Callum Macrae

Ben Nadel reviews Vue.js Up And Running: Building Accessible and Performant Web Apps by Callum Macrae. This book is a gentle but thorough introduction to Vue.js, especially for people with an Angular or Angular.js background. It gave Ben the confidence ... more

Strict Mode Settings In JavaScript Are Scoped To The Script Tag

Ben Nadel demonstrates that the "use strict" mode assertion in JavaScript is scoped to the Script Tag. And, that one Strict Mode Script Tag include won't implicitly cause all other scripts in the same page to execute in Strict Mode.... ... more

Considering State Management Boundaries And The Separation Of Concerns

Ben Nadel begins to codify his mental model for state management in a JavaScript Single Page Application (SPA). His current thinking is to slice the application into a set of loosely-coupled "runtimes" that communicate through strong public ... more

Creating A Simple setState() Store Using An RxJS BehaviorSubject In Angular 6.1.10

Ben Nadel creates a React-inspired state management store using a thin proxy class that wraps an RxJS BehaviorSubject() and adds a .setState() method. This state container can then be used in a reactive, stream-based Angular 6.1.10 JavaScript application.... ... more

I Am Struggling To Understand The Atomic Boundaries Of Redux Actions

Ben Nadel continues to struggle with his understanding of how state stores work in a JavaScript application. His latest befuddlement pertains to defining the atomic boundaries of actions in a Redux (or related) state store; and, which layer of the application ... more

Playing With RegExp Named Capture Groups In Node 10

Ben Nadel experiments with RegExp named capture groups that are now supported in Node.js 10 (with V8 version 6.7). Named capture groups allow portions of a Regular Expression pattern match to be referenced by a human-consumable name (as opposed to a ... more

JavaScript Demos Using Webpack 4 With Angular 6.1.7 And Ahead Of Time (AoT) Compiling

Ben Nadel updates his JavaScript demos project to start using Webpack 4. This will allow his Angular 6+ demos to be compiled using the Ahead of Time (AoT) compiler which will, in turn, significantly reduce his bundle files and time to first interaction.... ... more

Providing A Timeout To A Future Method Changes It To A Synchronous Blocking Call In ColdFusion 2018

Ben Nadel demonstrates that providing a Timeout value to the Future methods for runAsync(), .then(), or .error() changes the callbacks from an asynchronous execution into a blocking, synchronous call in ColdFusion 2018.... ... more

Timeouts Only Apply To Last Future Thread, Not The Preceding Future Chain In ColdFusion 2018

Ben Nadel explores the use of Timeouts in a Future chain in ColdFusion 2018. Because the .then() and .error() calls are blocking, synchronous calls, a Timeout can really only apply to the most recently-crated Future, not to the preceding Future chain.... ... more

The Future Methods .then() And .error() Are Blocking In ColdFusion 2018

Ben Nadel takes his first look at Futures in ColdFusion 2018. Futures, like Promises, allow processing to be spawned in asynchronous threads. But, unlike Promises, the .then() and .error() callbacks on the Future object appear to be blocking.... ... more

Defining Dynamic AJAX-Driven Service Providers Using APP_INITIALIZER In Angular 6.1.4

Ben Nadel looks at using the APP_INITIALIZER multi-provider as a means to load remote configuration data using AJAX (Asynchronous JavaScript and JSON); then, use that configuration data to dynamically define Service Providers for use in Angular's dependency-injection ... more

Using Background-Attachment CSS To Create A Sticky IFrame Advertising Background In JavaScript

Ben Nadel uses the window.postMessage() API to communicate CSS styling from an advertisement IFrame up to the parent window. This allows the IFrame to apply a "sticky" background-image that will stay fixed in place even as the parent page - ... more

Replacing Double-Dashes With Em Dashes While Typing In JavaScript

Ben Nadel demonstrates one way to auto-inject an Em Dash in JavaScript when the user types two dashes (hyphens) in a row. While there are keyboard short-cuts for the Em Dash (SHIFT+Option+Hyphen), it's certainly a nice delighter when an application auto-injects ... more