Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Taraneh Kossari
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Taraneh Kossari

Recent Blog Posts by Ben Nadel

Using The Anchor Tag href And download Attributes To Force A File Download

The other day, I happend across an article titled, "5 HTML5 Features you need to know" by Adnane Belmadiaf . In that article Adnane mentions the "download" attribute of the HTML Anchor tag. I'd never heard of this feature before; but, apparently, the "download" attribute tells the browser to downl... read more »

The User Experience (UX) Of Image-Oriented Lists On Apple TV

When I'm not rewriting the entire InVision App UI in Angular 5 or noodling on the proper deployment boundaries for feature flags , I'm watching movies. Specifically, I'm watching movies on my Apple TV in the bedroom. For the most part, I consume movies and shows on Netflix. But, the other day, I... read more »

Experiment: Recreating The InVision App User Interface With The Angular 5 Router

Sometimes, it's hard to see where the rough-edges in a framework exist until you actually try to do something non-trivial with said framework. This is true for all frameworks, including Angular. Maybe especially Angular, since this framework provides an end-to-end solution for application developme... read more »

Using Position Absolute Inside A Scrolling Overflow Container

CAUTION : This is primarily a "note to self". The other week, I tried to use absolute positioning inside a container that had "overflow: auto" enabled. And, somewhat to my surprise, the absolutely-positioned elements were rendered relative to the overflow "viewport," not to the "natural bounding ... read more »

Creating A Dynamic Favicon Service In Angular 5.2.4

A little while ago, GitHub added a feature to their Pull Request (PR) pages in which the browser's favicon would reflect the state of the PR (pending, failed, approved, etc.). This way, you could use other browser tabs and still maintain some sense of how your PR was progressing. I think this is a ... read more »

Restoring And Resetting The Scroll Position On Navigation With A Polyfill In Angular 5.2.3

In a "normal" web application, with a full round-trip request-response life-cycle, restoring and resetting the scroll position of the page is simple: the browser's native functionality just handles it for you. But, in a Single-Page Application (SPA), were pages are rendered with DOM (Document Objec... read more »

Each Feature Flag Should Be Owned By A Single Deployment Boundary

For the past two years, InVision has been using LaunchDarkly to manage its feature flags (aka feature toggles). At first, we were just trying to understand how to use feature flags; but now, we use feature flags aggressively in our day-to-day development requirements. In the same two years, InV... read more »

In Node.js, The error.stack Property Will Represent The Point In The Code At Which new Error() Was Called - Not When The Error Is Thrown

Yesterday, I was trying to help my co-worker figure out why one of his Node.js containers was throwing errors. When looking at the logs, however, I discovered that the errors weren't all that helpful. The stack-traces in the log only pointed to the line of code on which the Error objects were being... read more »

Practice: Progressively Enhancing A Flexbox Grid To Use CSS Grid

CAUTION : I'm a super-noob with CSS Grid. As such, everything I say here should be taken with a grain of salt and should be considered primarily as a note-to-self. After watching "CSS Grid", the free video course by Wes Bos , I'm pumped up and excited to start experimenting with the CSS grid lay... read more »

CSS Grid: A Free Video Course On The CSS Grid Layout By Wes Bos

Over the weekend, I watched " CSS Grid " - the newly released video course by Wes Bos . If you've been following my blog, you know that I'm a huge fan of Wes Bos and the consistently high-quality content he creates. "CSS Grid" is no different. In this course, Wes covers many of the CSS Grid featur... read more »

Creating A Jump-To-Anchor Fragment Polyfill In Angular 5.2.0

On top of navigating from view-to-view, the Angular 5 Router provides a lot of advanced features like lazy-loading modules, data-resolvers, and route-guards. But, ironically, it doesn't support one of the oldest and most basic browser navigation features: jumping to an anchor farther down on a give... read more »

Wildcard Routes (**) Can Redirect Relative To Their UrlTree Location In Angular 5.1.3

Yesterday, I demonstrated that wildcard routes (**) can be scoped to a route sub-tree in Angular 5.1.3 . I described this behavior as good for "modularity" in that it made it possible for a feature module to handle invalid URLs within its own local logic. But, the "redirectTo" route configuration ... read more »

Wildcard Routes (**) Can Be Scoped To Route Sub-Trees In Angular 5.1.3

In the Angular router, you can use the wildcard path - ** - as a catch-all route to render things like a "Not Found" view or to redirect the user back to the root of the application. But, from the documentation, and from many of the Angular Router demos that I've seen, one aspect that's usually omi... read more »

Sanity Check: Chrome 63 Still Causes Blurry Borders With Percentage-Based CSS Translation

The other day, I looked at creating slightly off-center elements using CSS Flexbox and "spacer" flex-children with a 40/60 flex-basis split. Afterwards, in an offline conversation that I was having with Matt Vickers - one of our lead front-end developers at InVision - he suggested using a CSS... read more »

Converting TechSmith JING SWF Movies To MP4 Videos

For the last few years, I've been using TechSmith's Camtasia For Mac in order to record my web development screencasts as MP4 video files. Prior to Camtasia, I was using another TechSmith product called JING. JING was an awesome tool and made sharing screencasts super easy with its built-in file up... read more »

You've Kissed The Lips Of JavaScripts

The other day, I was presenting an argument that Frameworks and Libraries can make you a better JavaScript programmer . In that write-up, I was reminiscing about the power of jQuery ( which is not unusual for me ); and, about how much jQuery has given me over the years. This got me all fuzzy and s... read more »

Loggly Derived Field RegEx Matching May Require A Newline In The Pattern

At InVision App , we currently use Loggly as our centralized log aggregation, analysis, and monitoring tool. Much of the log data that we send to Loggly is structured as JSON (JavaScript Object Notation); but, much of it is unstructured, space-delimited data (ex, nginx logs). One of the nice fea... read more »

The User Experience (UX) Of Conversion-Driven Development

Yesterday morning, I had an epiphany. Or perhaps more accurately, I was finally able to identify and articulate something that I've implicitly understood for years: a high-conversion workflow does not necessarily imply an enjoyable user experience (UX). This creates an interesting dilemma in which ... read more »

CSS Flexbox: Aligning Content Slightly Off-Center

After recently learning about Flexbox and the flexible box model in CSS , I've been quickly falling in love with it. Everywhere I turn, it seems that there's some aspect of my user interface (UI) that can be simplified with Flexbox. The other day, however, I ran into a design scenario that had me ... read more »

Frameworks And Libraries Can Make You A Better JavaScript Programmer

When I first learned jQuery, a whole new world of programming opened up to me. Before jQuery, I was someone who could "sprinkle" JavaScript into a web page, building custom drop-down menus and image roll-over effects (remember when nav-bar items were images?!). After jQuery, I became someone who co... read more »

Margin Collapsing Causes Unexpected Scrollbar With 100vh Body In Webkit

Over the weekend, I ran into an interesting behavior in Webkit (Chrome and Safari) in which a Body tag with 100vh (100 vertical-height units) was causing a vertical scrollbar to appear despite the fact that the dimensions of the Body tag seemed to be constrained to the viewport. After slowly deleti... read more »

Considering Strategies For Idempotency Without Distributed Locking With Ben Darfler

Historically, I've used distributed locking (powered by Redis) as a means to create synchronization around business logic that enforces constraints across multiple resource representations. And to be fair, this has worked out fairly well. But, distributed locking is not without its downsides. As ... read more »

Favor Readable Code Over Idiomatic Code

Right now, I work on a team that manages and maintains a large legacy system. This means that I only spend a small amount of time writing new code; and, a very large amount of time trying to understand and improve existing code. But, this isn't so unusual. Eventually, all greenfield projects become... read more »

Using Data Attributes To Pass Configuration Into An Event Plug-in In Angular 5.1.1

One of my favorite features of Angular is the ability to provide custom event bindings using the EVENT_MANAGER_PLUGINS collection. This feature allows you to create a clean abstraction around how event-listeners are attached to the DOM (Document Object Model); and, how those event-listeners interac... read more »

Creating A General vs. InVision Experience For Incident Commander

When I built my Incident Commander application on GitHub, it was based on the consumption model at work; but, it was also designed to be generally applicable. In the months since it has gone live, however, the needs at work have changed. We've shifted from thinking about degraded services (ex, "T... read more »

Note To Self: Adding Type Declaration Files To A TypeScript 2.6.2 Project

The other day, I was talking to my teammate, Daniel Schwartz , about Type Declaration files in TypeScript. I've been using and loving TypeScript as part of my Angular 2 research and development; but, I am by no means a TypeScript expert. In fact, in the conversation that I was having, I didn't hav... read more »

Considering LocalStorage And The Browser Cookies As Integration Databases

Last month, I did some noodling on Message Queues; in particular, why Message Queues don't carry the stigma of an "integration database" despite the fact that they are a database (of sorts) being shared by disparate services. As InVision App undergoes its metamorphosis , I like to partake in thi... read more »

Providing Services As Both A Multi-Collection And As An Individual Injectable In Angular 5.1.0

I've been thinking a lot of Redux and NgRx lately. And, one thing that keeps tripping me up is the large amount of functional composition that these libraries use what with some function being consumed by a function which is being consumed by a function which is being consumed by some other functio... read more »

Interactive Git Rebase: Moving White-Space Changes To An Isolated Commit

CAUTION : This post is primarily a note-to-self - something I can refer back to when I need to remember how this is done. The other day, I made a comment on Twitter about an idea for an interview question regarding the treatment of Pull Requests (PRs) that contained unexpected white-space edits... read more »

Handling Global Keyboard Shortcuts Using Priority And Terminality In Angular 5.0.5

Consuming global keyboard shortcuts in an Angular application (or any application for that matter) is a non-trivial task. Global key-event handlers often run into collision errors, unbind errors, and timing errors that can make debugging a nightmare. And while Angular provides easy semantics for bi... read more »