Building An API Client With The fetch() API In JavaScript

Ben Nadel explores the fetch() API for the first time; and uses it to build an opinionated, application-specific API client in JavaScript.... ... more

I Finally Implemented Dark Mode Using CSS Custom Properties On This Blog

Ben Nadel shares his implementation of Light and Dark modes using CSS custom properties, PostCSS transformations, and the MediaMatch JavaScript API.... ... more

Warning Users About The Windows Explorer Zip Archive Preview In JavaScript

Ben Nadel looks at how Windows Explorer previews Zip archive files, the problems that this can cause for the user, and how we can alert the user to potential issues using JavaScript and the location.href contents.... ... more

Working Code Podcast - Episode 041: The Third Age Of JavaScript With Shawn "swyx" Wang

Ben Nadel and the crew talk with Shawn "swyx" Wang about his article, The Third Age of JavaScript, which outlines the past, present, and possible future of JavaScript and web development in general.... ... more

Code Kata: Water Breathing Exercise In JavaScript

Ben Nadel attempts to guide the user through a Water Breathing exercises using JavaScript, jQuery, and CSS transitions in this fun little code kata.... ... more

Tracking User Interactions And Analytics With Small Abstractions In AngularJS

Ben Nadel demonstrates how he adds tracking and analytics code to his AngularJS application using Function abstractions that reduce the amount of noise that necessarily litters his components and views.... ... more

Restoring ActiveElement Focus After A User-Interaction In JavaScript

Ben Nadel explores the use of the document.activeElement property to record and then subsequently restore focus using JavaScript in a modal window workflow.... ... more

Trapping Focus Within An Element Using Tab-Key Navigation In JavaScript

Ben Nadel looks at how to programmatically keep focus within a container element (such as a modal window) using JavaScript when the user is employing keyboard-based Tab navigation and goes to tab-out-of the container element.... ... more

Why Do People Think React Teaches You More JavaScript?

Ben Nadel asks for help in understanding the perspective that some React developers have in which they believe that React helps you learn "more JavaScript" when compared to other JavaScript frameworks.... ... more

Capturing Keyboard Event Modifiers Across Operating Systems In JavaScript

Ben Nadel looks at capturing keyboard event modifiers across different operating systems in JavaScript; using the Command / Meta keys on MacOS and the Control key everywhere else.... ... more

Exploring The Interplay Between HTML Entities And TextContent In JavaScript

Ben Nadel explores the interplay between HTML markup that was generated using HTML entities and the subsequent textContent representation of that markup in JavaScript.... ... more

Inserting Text At The Last Known Selection / Caret Location In JavaScript

Ben Nadel demonstrates how to insert text at the last known selection / caret location of an input using JavaScript. The big win here is understanding that inputs retain their selection properties even after losing focus.... ... more

Rending Emoji Glyphs Using Hexadecimal CodePoints In JavaScript

Ben Nadel explores the rendering of Emoji glyphs from a given set of hexadecimal unicode codepoints using the String.fromCodePoint() prototype method in JavaScript.... ... more

Calculating Derived Datasets Using Objects As Indexes In AngularJS 1.2.22

Ben Nadel has started to create stronger separations between his "raw data" and his "derived data" in AngularJS 1.2.22. And, has found that using a JavaScript Object to index derived data makes rendering templates super simple.... ... more

Using The URL As The Source Of Truth During Search In AngularJS 1.2.22

Ben Nadel demonstrates that using the URL as the source-of-truth when implementing a search form in AngularJS 1.2.22 can create a more natural browsing experience for users.... ... more

Returning Search Filters Along With Search Results In Lucee CFML 5.3.7.47

Ben Nadel is experimenting with an approach to search that returns the search filters alongside the search results in Lucee CFML 5.3.7.47. This allows him to more easily manage the response in his client-side JavaScript.... ... more

Using CSS :target Pseudo-Class To Toggle Element Display

Ben Nadel uses the :target CSS pseudo-class to conditionally show and hide elements when their id attribute matches the URL fragment / hash. This creates some rich, interactive behavior without the use of JavaScript or Angular.... ... more

Styling console.log() Output With A Chalk-Inspired Formatter Using JavaScript Proxies

Ben Nadel evolves his previous console.log() formatting demo, building a chainable, Chalk-inspired set of CSS stylers using JavaScript Proxies.... ... more

Proof-Of-Concept: Injecting Features Into An InVision Share Link Experience Using AngularJS 1.6.7

Ben Nadel experiments with lazy-loading a module into an AngularJS 1.6.7 application using the .loadNewModules() method. This allows new modules be added to the runtime injector after bootstrapping.... ... more

Replacing All External Date Libraries With 300 Lines-Of-Code In AngularJS 1.2.22

Ben Nadel shares the 300 lines-of-code that will eliminate all external date/time libraries in his AngularJS 1.2.22 applications. This covers formatting, adding, diffing, and calculating relative durations; and, is a translation of the same class in ... more

The First Cookie Wins When Conflicting Cookie Names Are Used With Different Settings In Lucee CFML 5.3.6.61

Ben Nadel looks at what happens when you define two cookies with conflicting names and different domain settings. And, how this presents in both JavaScript and Lucee CFML 5.3.6.61. It turns out, the first cookie wins.... ... more

Using Constants To Help Clarify Boolean Arguments And Return Values In ColdFusion And JavaScript

Ben Nadel continues to noodle on the use of Boolean flags in ColdFusion and JavaScript; and how using named constants can bring some much appreciate clarity to otherwise complex code.... ... more

Using NPM Run-Scripts To Execute Shell Commands In Lucee CFML 5.3.6.61

Ben Nadel explores the idea of using NPM run-scripts to invoke shell commands from Lucee CFML 5.3.6.61 with the help of the CFExecute tag. This allows for some flexibility that is not inherently available in ColdFusion's CFExecute tag.... ... more

Generating Rich Server-Side Reports In Lucee CFML 5.3.6.61

Ben Nadel noodles on generating rich, server-side reports in Lucee CFML 5.3.6.61. This includes downloading images, rendering CFML as HTML, in-lining JavaScript and CSS, and creating ZIP archives.... ... more

The Double-Bang (!!) Operator And A Misunderstanding Of How JavaScript Handles Truthy / Falsy Values

Ben Nadel has noticed developers using the double-bang (!!) operator far more often in their JavaScript code than they have to. As such, he provides a series of unnecessary examples followed by cleaner, more intuitive examples.... ... more

Attempting To Improve Rendering Performance Of A Large List View In AngularJS 1.2.22

Ben Nadel looks at the poor rendering performance of a large list view in AngularJS 1.2.22; how he identified some of the bottlenecks using Chrome's Performance Profiler; and what changes he made to vastly improve the rendering of the view.... ... more

Returning Promises From Async / Await Functions In JavaScript

Ben Nadel demonstrates (to himself) that the return value of an async / await function is implicitly wrapped in a Promise.resolve() call in JavaScript and TypeScript. And, that this will implicitly flatten the Promise chain as the return value is chained.... ... more

I Prefer The Unary Plus (+) Operator Over parseInt() And ParseFloat() When Coercing Strings To Numbers In JavaScript

Ben Nadel favors the unary plus operator (+) over the parseInt() and parseFloat() methods in JavaScript when trying to coerce String values into Number values. It's short; fails more consistently; and maps closer to his intent.... ... more

Using CSS Overscroll-Behavior To Prevent Scrolling Of Parent Containers From Within Overflow Containers

Ben Nadel demonstrates that the CSS property, overscroll-behavior, can be used to trap the mouse scroll wheel within an overflow container. This can be used to prevent "scroll chaining", creating for a much better user experience (UX) with ... more

Locating LaunchDarkly Feature Flag References In Your Application Code In Lucee 5.3.2.77

Ben Nadel creates a ColdFusion utility that compares LaunchDarkly feature flags (retrieved from the remote API) to his local CFML and JavaScript code, helping him to identify feature flags that are no longer relevant; and, which are just sitting there, ... more