Skip to content

Instantly share code, notes, and snippets.

Avatar

Thomas Burleson ThomasBurleson

View GitHub Profile
View Tuples with Async-Await.md
export interface ResponseError = [any, Error];	// Tuple to return either 

/**
 * special promise trap to build tuple of reponse and error
 */
const trap = (promise): Promise<ResponseError> => {  
  return promise
    .then(data => ([data, undefined]))
@ThomasBurleson
ThomasBurleson / git-flat-commit-history.md
Last active Feb 23, 2020
Git - Benefits of Flat Commit History
View git-flat-commit-history.md

Flawed Commit Strategy

Developers often want to condense their git log output. However without a proper git commit strategy (and conventions), those condensed outputs are still flawed.

For details on condensed git log outputs, see Improve your Git Log Output

Consider a git lg output for a typical project:

image

@ThomasBurleson
ThomasBurleson / understand-rxjs-defer.md
Last active Mar 28, 2019
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 angular-in-view-directives.html
<!-- wInViewRoot directive is needed to specify the `root` for `IntersectionObserver` and some other it's options e.g. `margin` -->
<div class="container" wInViewRoot="viewport">
Any content can be here
<w-in-view-item>
<!-- Content will be replaced by a placeholder <div> with the same height as original content.
Also `InViewItemComponent`s change detector will be detached when it become invisible which means
all the content's change detectors won't be reachable and will be inactive as well. -->
</w-in-view-item>
...or any other content can be here
<w-in-view-item>
@ThomasBurleson
ThomasBurleson / books-page.component.ts
Last active Dec 28, 2019
Compressing View Logic with Facades
View books-page.component.ts
/**
*
* Snippet from blog article: https://auth0.com/blog/ngrx-facades-pros-and-cons/
*
*/
@Component({
selector: 'abl-books-page',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
@ThomasBurleson
ThomasBurleson / log.operator.ts
Last active Jan 11, 2019
Using custom RxJS log() operator
View log.operator.ts
export function log(task: string) {
const announceCompleted = () => {
console.log(`${task} %ccomplete`, 'color: green');
};
return function<T>(source: Observable<T>) {
return source.pipe(
tap(
console.log,
console.error,
announceCompleted
View lazy-img.component.ts
import {
Component,
OnInit,
Input,
ViewChild,
ElementRef,
HostBinding
} from '@angular/core';
@Component({
@ThomasBurleson
ThomasBurleson / cars.facade.spec.ts
Last active Feb 24, 2020
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 / Guide-to-Custom-Nx-Schematic.md
Last active Jul 21, 2020
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!

You can’t perform that action at this time.