Skip to content

Instantly share code, notes, and snippets.

@cbejensen
cbejensen / typescriptreact.json
Last active June 13, 2022 17:29
VS Code React Component Snippet
{
"Component": {
"prefix": "fc",
"body": [
"import React from 'react';",
"",
"export interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}Props {",
"\t$1",
"}",
"",
@cbejensen
cbejensen / scan.directive.ts
Last active September 24, 2020 16:30
Angular scan directive
import { Directive, EventEmitter, HostListener, Input, OnInit, OnDestroy, Optional, Output, Self } from '@angular/core';
import { NgControl } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime, filter, map, pairwise, startWith, takeUntil } from 'rxjs/operators';
/**
* Detects when an input is coming from a scanner (or being pasted).
*/
@Directive({
selector: '[appScan]',
@cbejensen
cbejensen / focusable.component.ts
Last active September 22, 2020 23:10
Focusable Base Class in Angular
import { AfterViewInit, Directive, ElementRef, Input, ViewChild } from '@angular/core';
import { FocusableOption, FocusOrigin } from '@angular/cdk/a11y';
/**
* A base class that can be extended by any component to allow its parent to focus it. All the component needs to do
* is set a template reference variable of `focusable` on whichever input it should focus when the parent wants to
* focus it. You could even set `focusable` on another custom component, so long as it also extends this class.
*
* @example
* ```html
@cbejensen
cbejensen / selector.ts
Last active September 17, 2020 21:23
NgRx Route Param Selector Creator
import { Params } from '@angular/router';
import { RouterReducerState } from '@ngrx/router-store';
// Some example context - could be different in your app.
export interface CustomRouteSnapshot {
url: string;
params: Params;
queryParams: Params;
}
export type State = RouterReducerState<CustomRouteSnapshot>;
@cbejensen
cbejensen / focus.component.ts
Last active December 11, 2019 21:23
Abstract Angular Focus Component - enables parent components to focus an element in the child component's template
import { OnInit, Input, ElementRef, AfterViewInit } from '@angular/core';
export abstract class FocusComponent implements OnInit, AfterViewInit {
/**
* The element that can be focused.
*/
protected elemToFocus: ElementRef;
/**
* Can be set on initialization or updated later on to focus an element.
@cbejensen
cbejensen / wheelzoom.service.ts
Created October 22, 2019 09:00
Angular Service for Wheelzoom JS library
// Service for https://github.com/jackmoore/wheelzoom
import { Injectable, NgZone } from '@angular/core';
export interface WheelzoomSettings {
zoom: number;
maxZoom?: number;
initialZoom: number;
initialX: number;
initialY: number;
@cbejensen
cbejensen / script.js
Created April 15, 2019 16:19
Check for support of :focus-within
let supportsCSSFocusWithin = false
try {
document.querySelector(':focus-within')
} catch (err) {
supportsCSSFocusWithin = false
}
const wrapper = document.querySelector('wrapper')
@cbejensen
cbejensen / ips.fish
Created April 5, 2019 19:09
Easily get and read your IP address
function ips
set eth (ipconfig getifaddr en0)
echo "Ethernet: $eth"
set wifi (ipconfig getifaddr en1)
echo "Wireless: $wifi"
end
@cbejensen
cbejensen / Brownies.jsx
Last active March 29, 2019 22:11
Async Effect Hook
import React from 'react'
import useEffectAsync from './useEffectAsync'
export default function Brownies() {
const [brownies, setBrownies] = useState('Loading')
useEffectAsync(
async didUnmount => {
const res = await fetch(`https://api.brownies.com`)
if (!didUnmount) setBrownies(res)
@cbejensen
cbejensen / memoAsync.ts
Last active October 11, 2019 22:55
Memoization for asynchronous operations
import { ObservableInput, of, from } from 'rxjs';
import { tap } from 'rxjs/operators';
import { MemoizedFunction, MapCacheConstructor } from 'lodash';
/**
* A copy of _.memoize, modified for async
*
* @see _.memoize
*
* @param func The function to have its output memoized.