Subscribe: Ben Nadel ColdFusion, jQuery, And Web Development Feed @
Added By: Feedage Forager Feedage Grade A rated
Language: English
angular ben  angular  ben nadel  ben  css  demonstrates  directive  dom  element  nadel demonstrates  nadel shares  nadel  view 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Ben Nadel ColdFusion, jQuery, And Web Development Feed @

Ben Nadel's Web Development and User Experience Feed @

Recent blog posts covering JavaScript, User Experience (UX), ColdFusion, Node, and other topics

Last Build Date: Tue, 12 Dec 2017 19:08:58 EST

Copyright: Copyright 2017 Ben Nadel

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

Mon, 11 Dec 2017 07:36:00 EST

Ben Nadel experiments with the dependency-injection container in Angular and confirms that a Service can be provided as both an individual injectable and as part of a multi-collection at the same time....

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

Fri, 8 Dec 2017 08:31:00 EST

Ben Nadel demonstrates how to use an interactive rebase in git to move white-space changes to their own commit such that Pull Requests (PR) become easier to read and reason about....

Handling Global Keyboard Shortcuts Using Priority And Terminality In Angular 5.0.5

Mon, 4 Dec 2017 07:35:00 EST

Ben Nadel shares his approach for implementing keyboard shortcuts in Angular 5.0.5, using a KeyboardShortcuts service that requires explicit priorities and event-propagation rules. This explicit configuration brings clarity and a holistic view to global key-events, promoting them to a first-class concept within the application architecture....

I Love That TypeScript Doesn't Allow Me To Make Incorrect Assumptions About Object Usage

Thu, 30 Nov 2017 08:24:00 EST

Ben Nadel demonstrates one of the TypeScript features that he loves the most: the TypeScript compiler won't allow him to make poor assumptions about "duck typing" and object usage. Instead, he is forced - by the compiler - to write clean, self-documenting, unsurprising code....

Singleton vs. Single Instance And A Decade Of Unnecessary Guilt

Tue, 28 Nov 2017 08:12:00 EST

For years, Ben Nadel felt bad about the code that he wrote, believing that it was a manifestation of the Single anti-pattern. It is only recently that he finally learned the difference between the Singleton pattern and the "single instance" pattern. So many years of unnecessary guilt....

Fixing A 10-Year Gap In My Understanding Of How Form.submit() And Other DOM-Methods Work

Mon, 27 Nov 2017 07:27:00 EST

Ben Nadel fixes a 10-year mental model of how DOM methods and DOM events interact. For the last decade, he assumed that form.submit() represented the normal DOM workflow. He was wrong....

Double-Parentheses ()() Requires Too Much Cognitive Load For My Brain

Sun, 26 Nov 2017 06:48:00 EST

Ben Nadel shares the struggle he has with mentally parsing double-parentheses - ()() - which is a common syntax in the JavaScript and Node communities. Such expressions require more cognitive load than his caveman brain is able to provide....

Favoring Local Interfaces Over Imported Interfaces For Data Structures In Angular 5.0.2

Thu, 23 Nov 2017 07:42:00 EST

Ben Nadel shares a pattern of Interface usage that he's developed in his Angular 5 applications with TypeScript. He has started to lean on local Interfaces rather than imported Interfaces for simple data-structures....

Creating An Input-Driven AutoFocus Directive In Angular 5.0.2

Mon, 20 Nov 2017 08:28:00 EST

Ben Nadel shares an attribute directive that he uses in his Angular 5.0.2 applications to help make the native "autofocus" behavior a bit more consistent in a dynamically-rendered view within a single-page application (SPA)....

Forcing RouterLinkActive To Update Using An Inputs Hack In Angular 5.0.2

Sat, 18 Nov 2017 11:19:00 EST

Ben Nadel presents the edge-case in with the RouterLinkActive directive, in Angular 5.0.2, won't properly activate a navigational element. But, provides an input-binding hack that will force the RouterLinkActive directive to re-synchronize with the Browser URL....

Prevent Body Scrolling With A WindowScrolling Service When Showing A Modal Window In Angular 5.0.2

Fri, 17 Nov 2017 08:35:00 EST

Ben Nadel demonstrates how to use the CSS property "overflow: hidden" to prevent scrolling on the Body element in an Angular 5.0.2 application. This approach can then be encapsulated in a WindowScrolling service and used to disable scrolling when modal windows are open....

Why Message-Queues Don't Carry The Stigma Of An Integration Database

Tue, 14 Nov 2017 08:25:00 EST

Ben Nadel reflects on the Message Queue (MQ) and looks at why it is an integration database that doesn't suffer from the traditional stigma of an integration database. In fact, it is just the opposite - a shared database that keeps systems more loosely coupled....

Sanity Check: Shared Style Urls Are Only Compiled Into Angular 5.0.1 Once

Mon, 13 Nov 2017 07:09:00 EST

Ben Nadel looks at how shared styleUrls are compiled down in Angular components, destroys his previously poor assumptions, and sees a totally new path forward for modular CSS definitions....

Stacking Context Is The Key To Understanding The CSS Z-Index

Sun, 12 Nov 2017 10:53:00 EST

Ben Nadel explores the concept of a "stacking context" in CSS, how it applies to the Document Object Model (DOM), how it quarantines z-index values and, how understanding it will remove the Fear, Uncertainty, and Doubt (FUD) surrounding a layered architecture....

Creating A Twitter-Inspired SVG Progress Indicator In Angular 5.0.1

Sat, 11 Nov 2017 11:11:00 EST

Ben Nadel builds an SVG-based progress indicator in Angular 5.0.1 as inspired by the TweetDeck intake form progress indicator from Twitter....

CSS Flexbox: Creating The InVision Avatar Row Widget

Fri, 10 Nov 2017 08:41:00 EST

Ben Nadel explores the flexible box model in CSS and uses flexbox to try and recreate the overlapping avatar row widget used in InVision App....

Prevent Routing To Secondary View If Page Refresh In Angular 5.0.0

Thu, 9 Nov 2017 09:22:00 EST

Ben Nadel demonstrates how to create a CanActivate Route Guard that will prevent a secondary view from being rendered in a named-outlet upon page refresh in Angular 5.0.0....

Matching Multiple Selectors On The Same Element Creates A Single Directive Instance In Angular 5.0.0

Mon, 6 Nov 2017 06:56:00 EST

Ben Nadel demonstrates that matching multiple attribute selectors on a single HTML element only produces one Directive instance for that element. Which is exactly the kind of behavior we would hope for....

Lazy Loading Images With The IntersectionObserver API In Angular 5.0.0

Sun, 5 Nov 2017 19:04:00 EST

Ben Nadel demonstrates how to use the IntersectionObserver API to implement lazy image loading in Angular 5.0.0. The IntersectionObserver API handles the hard work of calculating element visibility - we just have to wrap it in attribute directives....

Prevent Scrolling In A Parent Element Using Directives In Angular 4.4.6

Sat, 4 Nov 2017 13:22:00 EST

Ben Nadel explores the concept of scroll-trapping in which the mouse wheel is allowed to scroll a local container but is not allowed to scroll a parent container. He encapsulates this logic in an attribute Directive in Angular 4.4.6....

Creating A Direct-Click DOM Event Plug-in In Angular 4.4.6

Wed, 1 Nov 2017 08:29:00 EST

Ben Nadel demonstrates how to create a custom (directclick) DOM event plug-in in Angular 4.4.6, which will invoke its handler if and only if the target of the click event is the element on which the (directclick) event-handler was bound....

What The Flexbox: A Free Video Course On The CSS Flexible Box Model By Wes Bos

Tue, 31 Oct 2017 08:22:00 EST

Ben Nadel reviews "What The Flexbox," a FREE video course about the flexible box model in CSS by Wes Bos. This course covers the technical properties of flexbox-based layouts; and then, walks you through several informative real-world scenarios....

Adding .delay(10) To ActivatedRoute Helps Prevent Unwanted Router Behaviors In Angular 4.4.6

Mon, 30 Oct 2017 08:57:00 EST

Ben Nadel demonstrates some "unwanted" behaviors in the Angular 4.4.6 router; and, how adding .delay(10) to the ActivatedRoute stream can mitigate these behaviors....

View Components May Get Unnecessarily Reinstantiated Under Certain Circumstances In Angular 4.4.6

Fri, 27 Oct 2017 17:27:00 EST

Ben Nadel demonstrates an apparent race-condition in Angular 4.4.6 that causes View components to be destroyed and then unnecessarily re-created if a navigation event takes place too quickly; and, only under circumstances....

CSS @keyframes Animations Are Not Scoped With Emulated View Encapsulation In Angular 4.4.6

Wed, 25 Oct 2017 07:33:00 EST

Ben Nadel demonstrates that the emulated view encapsulation in Angular 4.4.6 does not apply to @keyframes animations. This allows @keyframes animations defined in one component to override the @keyframes animations defined in another component....

The New CSS Layout By Rachel Andrew

Sun, 22 Oct 2017 08:31:00 EST

Ben Nadel reviews The New CSS Layout by Rachel Andrew. This book offers a technical introduction to the Flexbox and Grid specifications (among others), demonstrating how these new layout techniques offer powerful solutions for robust and responsive page structure. Definitely a must-read for anyone whose CSS mental model is getting old....

MySQL's Slow Query Log "start_time" Column Is Actually The "end" Time Of The Query

Sat, 21 Oct 2017 11:00:00 EST

Ben Nadel examines the "start_time" column in MySQL's slow query log and concludes that it is, in fact, the "end" time or the "log" time of the query. With this insight, debugging slow queries can be made much more intuitive with a little date-math....

MySQL Multi-Range Read (MRR) Optimization Caused A Partial Database Outage

Sat, 21 Oct 2017 06:20:00 EST

Ben Nadel discusses MySQL's MRR - Multi-Range Read - optimization and how it inadvertently caused a partial database outage by pulling millions of unnecessary records into memory....

ngOnInit() May Not Get Called Before ngOnDestroy() Is Called In Angular 4.4.6

Fri, 20 Oct 2017 08:21:00 EST

Ben Nadel demonstrates that the ngOnInit() and ngOnDestroy() life-cycle methods in Angular 4.4.6 are not invoked symmetrically. Which is to say, sometimes only the ngOnDestroy() life-method method is called....

RabbitMQ: Patterns For Applications By Derick Bailey

Wed, 18 Oct 2017 07:53:00 EST

Ben Nadel reviews RabbitMQ: Patterns For Applications by Derick Bailey. It's a quick read that discusses the different types and composition of messages that can be used in a distributed system; and, what kinds of exchanges should be used for the different message requirements....