Skip to content

Instantly share code, notes, and snippets.

@jsonberry
jsonberry / api.service.js
Last active Jun 11, 2021
Angular: RxJS + Lodash for getting deeply nested data out of an Observable stream and into presentational components
View api.service.js
// .js extension for syntax highlighting - all files are actually .ts
// A general service that makes an HTTP call to an API
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
@Injectable()
export class ApiService {
constructor (
private http: HttpClient,
@jsonberry
jsonberry / onload.js
Last active Mar 27, 2021
Window vs. Document Loading Events
View onload.js
/**
Taken from: http://stackoverflow.com/questions/588040/window-onload-vs-document-onload
According to Parsing HTML documents - The end,
The browser parses the HTML source and runs deferred scripts.
A DOMContentLoaded is dispatched at the document when all the HTML has been parsed and have run. The event bubbles to the window.
The browser loads resources (like images) that delay the load event.
A load event is dispatched at the window.
Therefore, the order of execution will be
DOMContentLoaded event listeners of window in the capture phase
DOMContentLoaded event listeners of document
@jsonberry
jsonberry / helpful-javascript-utilities.js
Last active Oct 6, 2020
Helpful JavaScript Utilities
View helpful-javascript-utilities.js
// zip arrays together
// Catalin Dumitru @colin_dumitru
// Jason Awbrey @jsawbrey
const zip = (a, b) => a.map((n, i) => [n, b[i]])
// merge objects in an array together
// caution: properties are overridden if duplicated
// @a [{a},{b}]
// @returns [{a, b}]
// Jason Awbrey @jsawbrey
@jsonberry
jsonberry / purge_branches.sh
Last active Jul 9, 2020
Mass remove local git branches and prune remote tracking
View purge_branches.sh
// List all remotely tracked branches that do not exist in the remote repo
git remote prune origin --dry-run
// Prune all remotely tracked branches that do not exist in the remote repo
git remote prune origin
// List all local branches that were merged into master, explicitly exclude master from that list
git branch --merged master | grep -v 'master'
/*
@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;
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
@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,
},
@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: {
View ignoreFalsyValues.ts
import { from } from 'rxjs';
import { ignoreFalsySignals, tapLog } from 'rxjs-toolkit';
from([
'I',
false,
'am',
null,
'truthy',
]).pipe(