Skip to content

Instantly share code, notes, and snippets.

View AustinMatherne's full-sized avatar

Austin Matherne AustinMatherne

  • Remote
View GitHub Profile

Mighty Principles of Development

  1. Modularity: "Do one thing and do it well." Feature creep is the death of software.
  2. Simplicity: Complexity is the mother of all evil. Cleverness is not wisdom, it's a shortsighted indulgence.
  3. Clarity: Writing code is easy, reading code is hard. Easily grokked code is beautiful.
  4. Testability: Untested code is broken code. Never assume otherwise.
@AustinMatherne
AustinMatherne / string-enum-typed-actions.ts
Created September 29, 2017 04:57
String Enum Typed Actions
// counter.actions.ts
import { Action } from '@ngrx/store';
export const enum CounterTypes {
INCREMENT = '[Counter] Increment';
DECREMENT = '[Counter] Decrement';
RESET = '[Counter] Reset';
};
export class Increment implements Action {
@AustinMatherne
AustinMatherne / const-typed-actions.ts
Created September 29, 2017 05:00
Const Typed Actions
// counter.actions.ts
import { Action } from '@ngrx/store';
export const INCREMENT = '[Counter] Increment';
export const DECREMENT = '[Counter] Decrement';
export const RESET = '[Counter] Reset';
export class Increment implements Action {
readonly type = INCREMENT;
}
@AustinMatherne
AustinMatherne / const-typed-reducer.ts
Created September 29, 2017 05:01
Const Typed Reducer
// counter.reducer.ts
import * as CounterActions from './counter.actions';
export type Action = CounterActions.All;
export function reducer(state: number = 0, action: Action): State {
switch(action.type) {
case CounterActions.INCREMENT: {
return state + 1;
}
@AustinMatherne
AustinMatherne / string-enum-typed-reducer.ts
Created September 29, 2017 05:02
String Enum Typed Reducer
// counter.reducer.ts
import { CounterActions, CounterTypes } from './counter.actions';
export function reducer(state: number = 0, action: CounterActions): State {
switch(action.type) {
case CounterTypes.INCREMENT: {
return state + 1;
}
case CounterTypes.DECREMENT: {
return state - 1;
@AustinMatherne
AustinMatherne / let.directive.ts
Created October 2, 2017 17:49
Angular Let Directive
import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
interface LetContext<T> {
ngLet: T;
}
@Directive({
selector: '[ngLet]'
})
export class LetDirective<T> {
@AustinMatherne
AustinMatherne / multiple-async-pipe.ts
Created October 2, 2017 18:26
Multiple Async Pipes
import {Observable} from 'rxjs/Observable';
import {defer} from 'rxjs/observable/defer';
import {of} from 'rxjs/observable/of';
@Component({
selector: 'my-app',
template: `
<div>
Data: {{data$ | async}} <!-- 0.2762838374749106 -->
</div>
@AustinMatherne
AustinMatherne / ngif-data-binding.ts
Created October 2, 2017 18:30
ngIf Data Binding
import {Observable} from 'rxjs/Observable';
import {defer} from 'rxjs/observable/defer';
import {of} from 'rxjs/observable/of';
@Component({
selector: 'my-app',
template: `
<ng-container *ngIf="data$ | async as data"> <!-- single subscription -->
<div>
Data: {{data}} <!-- 0.4431839407652687 -->
@AustinMatherne
AustinMatherne / ngLet-data-binding.ts
Created October 2, 2017 21:09
ngLet Data Binding
import {Observable} from 'rxjs/Observable';
import {of} from 'rxjs/observable/of';
import {LetDirective} from './let.directive';
@Component({
selector: 'my-app',
template: `
<ng-container *ngLet="data$ | async as data"> <!-- single subscription -->
<div>
@AustinMatherne
AustinMatherne / ngif-data-binding-removal.ts
Created October 2, 2017 21:23
ngIf Data Binding Removal
import {Observable} from 'rxjs/Observable';
import {of} from 'rxjs/observable/of';
@Component({
selector: 'my-app',
template: `
<ng-container *ngIf="data$ | async as data"> <!-- removed from dom -->
<div>
Data: {{data}} <!-- removed from dom -->
</div>