Skip to content

Instantly share code, notes, and snippets.

@jsonberry
jsonberry / readme.md
Created Nov 27, 2019
Injecting Actions Service for profit
View readme.md

Reference to this twitter thread: https://twitter.com/jsonberrry/status/1199566382716731393

Subject: "injecting the actions service into the component level as a means for propagating success/error states to a presentational layer"

Question from @jdpearce

"“Injecting the actions service...” woah, woah, woah...what?!

Why aren’t you setting a property in the store and selecting that?"

@jsonberry
jsonberry / app.component.ts
Last active Feb 20, 2019
Reactive Angular Scroll Position Restoration with RxJS
View app.component.ts
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Event, NavigationEnd, NavigationStart, Router } from '@angular/router';
import { asyncScheduler } from 'rxjs';
import { filter, observeOn, scan } from 'rxjs/operators';
interface ScrollPositionRestore {
event: Event;
positions: { [K: number]: number };
trigger: 'imperative' | 'popstate';
idToRestore: number;
@jsonberry
jsonberry / composability.ts
Last active Jan 9, 2019
rxjs-toolkit examples
View composability.ts
import { someApiService } from './some-api.service';
import { propsAreTruthy, ignoreFalsySignals } from 'rxjs-toolkit';
// imagine getSource$ return an object like this:
const exampleSource = {
id: '123',
origin: {
name: '',
url: 'noop.com',
}
@jsonberry
jsonberry / propsAreTruthy.ts
Last active Jan 13, 2019
rxjs-toolkit examples
View propsAreTruthy.ts
import { of } from 'rxjs';
import { propsAreTruthy, tapLog } from 'rxjs-toolkit';
const source$ = of({
foo: {
bar: {
baz: 'truthy!',
},
},
zap: {
@jsonberry
jsonberry / propsAreTruthy.ts
Last active Jan 14, 2019
rxjs-toolkit examples
View propsAreTruthy.ts
import { from } from 'rxjs';
import { propsAreTruthy, tapLog } from 'rxjs-toolkit';
const topLevelTruthy = {
one: 'I',
two: 'am',
three: 'truthy',
iHaveNestedProps: { // top level also truthy
nested: null,
},
View ignoreFalsyValues.ts
import { someDataSource } from './some-api.service';
import { ignoreFalsySignals, tapLog } from 'rxjs-toolkit';
interface Signal {
foo: string;
}
/**
* signals$ pushes out an Observable of Signal
* imagine the source of the stream is the return from an API call
View ignoreFalsyValues.ts
import { from } from 'rxjs';
import { ignoreFalsySignals, tapLog } from 'rxjs-toolkit';
from([
'I',
false,
'am',
null,
'truthy',
]).pipe(
@jsonberry
jsonberry / tapLog.ts
Last active Jan 9, 2019
rxjs-toolkit examples
View tapLog.ts
import { of } from 'rxjs';
import { tapLog } from 'rxjs-toolkit';
of('hello').pipe(
tapLog(), // log out whatever the signal is, so "hello"
tapLog('labelFoo') // give it a label, { labelFoo: "hello" }
).subscribe()
@jsonberry
jsonberry / actions.js
Last active Nov 9, 2018
Angular ngrx-router-store Router Actions / Effects
View actions.js
/* tslint:disable:max-classes-per-file */
import {Action} from '@ngrx/store';
import {NavigationExtras} from '@angular/router';
export enum RouterActionTypes {
GO = '[router] Go',
BACK = '[router] Back',
FORWARD = '[router] Forward',
}
View bp.scss
/// Breakpoints
/// @author Jason Awbrey
/// @param { phone | tablet-portrait | tablet-landscape | desktop | desktop-big } $type [no default]
/// @return { Number } Rem calculated value for a given breakpoint
@function bp($type) {
/// @prop
$breakpoints: (phone: 599, tablet-portrait: 600, tablet-landscape: 900, desktop: 1200, desktop-big: 1800);
@if (map-has-key($breakpoints, $type) != true) {
@error "$type must be one of these: #{map-keys($breakpoints)}";
}