Skip to content

Instantly share code, notes, and snippets.

Avatar

Thomas Burleson ThomasBurleson

View GitHub Profile
@ThomasBurleson
ThomasBurleson / cars.facade.spec.ts
Last active Apr 15, 2022
Testing NgRx Facades with async/await.
View cars.facade.spec.ts
import { NgModule } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { readFirst } from '@nrwl/nx/testing';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule, Store } from '@ngrx/store';
import { NxModule } from '@nrwl/nx';
/**
@ThomasBurleson
ThomasBurleson / tickets.facade.md
Last active Dec 25, 2021
Using ngrx with Effects + Facades
View tickets.facade.md

NgRx State Management with TicketFacade

Facades are a programming pattern in which a simpler public interface is provided to mask a composition of internal, more-complex, component usages.

When writing a lot of NgRx code - as many enterprises do - developers quickly accumulate large collections of actions and selectors classes. These classes are used to dispatch and query [respectively] the NgRx Store.

Using a Facade - to wrap and blackbox NgRx - simplifies accessing and modifying your NgRx state by masking internal all interactions with the Store, actions, reducers, selectors, and effects.

For more introduction, see Better State Management with Ngrx Facades

@ThomasBurleson
ThomasBurleson / gist:1017230
Created Jun 9, 2011
Cool Techniques with AS3 Closures
View gist:1017230
// ------------------------------------------------------------------------------------------------
/**
* Why CLOSURES are great!
*
* Think of Closures as Functions within Functions... where nested functions have access to parent function variables
* and arguments. So, you may ask?
*
* Closures allow developers to temporarily cache data!
* Closures can simplify recursion or iterations (aka visitors pattern)
* Closures can solve real-world `callback` problems; especially powerful for asynchronous callbacks.
@ThomasBurleson
ThomasBurleson / refactor_6.md
Last active Dec 12, 2021
Best Practices: Using Permissions as BitFlags
View refactor_6.md

💚 Best Practices: Use Permissions as BitFlags

Developers often miss the opportunity to express permissions as a collection of enumerated bitflags; where complex permissions can be easily grouped by context.

Consider the scenario where a user may have 30 or more permission flags.


Improved Version 😄:

@ThomasBurleson
ThomasBurleson / Guide-to-Custom-Nx-Schematic.md
Last active Nov 10, 2021
Custom Nx workspace schematic to build a custom 'state' library.
View Guide-to-Custom-Nx-Schematic.md

Scenario

We want to build a custom schematic for company Aero that will internally do two things:

  • build a new ngrx library using Nx workspace naming conventions
  • generate ngrx state-management files; include the *.facade.* files

Important: This example is valid ONLY for Nx v6.2.x or higher!

@ThomasBurleson
ThomasBurleson / untilDestroyed.ts
Last active Apr 14, 2021
Using untilViewDestroyed to link component ngOnDestroy to observable unsubscribe.
View untilDestroyed.ts
/**
* When manually subscribing to an observable in a view component, developers are traditionally required
* to unsubscribe during ngOnDestroy. This utility method auto-configures and manages that relationship
* by watching the DOM with a MutationObserver and internally using the takeUntil RxJS operator.
*
* Angular 7 has stricter enforcements and throws errors with monkey-patching of view component life-cycle methods.
* Here is an updated version that uses MutationObserver to accomplish the same goal.
*
* @code
*
@ThomasBurleson
ThomasBurleson / ngInterview.md
Last active Feb 2, 2021
Angular Interview Questions
View ngInterview.md

The interview questions below are grouped by category and each category lists questions in easy-to-hard order.

Interviews should ask the candidate to self-assess their skills/experience. Based on the candidate's response, the interviewer can jump to the appropriate section.

Some basic questions going from easy to difficult. A more exhaustive list of more questions from the community can be found here.

JavaScript

  • What is variable shadowing
@ThomasBurleson
ThomasBurleson / understand-rxjs-defer.md
Last active Oct 11, 2020
Why is RxJS::defer() important!
View understand-rxjs-defer.md

Quite simply, because Observables can encapsulate many different types of sources and those sources don't necessarily have to obey that interface. Some like Promises always attempt to eagerly compete.

Consider:

const promise = $.get('https://www.google.com');
View lazy-img.component.ts
import {
Component,
OnInit,
Input,
ViewChild,
ElementRef,
HostBinding
} from '@angular/core';
@Component({