Skip to content

Instantly share code, notes, and snippets.

View deanrad's full-sized avatar
🎯
Staying On Target

Dean Radcliffe deanrad

🎯
Staying On Target
105 followers · 15 following
View GitHub Profile
@deanrad
deanrad / UXTiming.js
Last active November 5, 2021 14:47
// See https://dev.to/deanius/the-thresholds-of-perception-in-ux-435g
export const DURATION = {
Frame: 16,
Frame60: 16,
Frame90: 11,
Unison: 10,
Chorus: 25,
MovieFrame: 42,
Echo: 100,
Blink: 150,
@deanrad
deanrad / GitCommands.md
Created October 21, 2021 16:20
Git Commands
<title>Git Commands</title>
@deanrad
deanrad / useWhileMounted.ts
Last active October 20, 2021 06:44
import { ObservableInput, Subscription } from 'rxjs';
function useWhileMounted(subsFactory: () => Subscription) {
useEffect(() => {
const sub = subsFactory();
return () => sub?.unsubscribe();
}, []);
}
@deanrad
deanrad / useSubscription.ts
Created October 13, 2021 06:27
function useSubscription(subFactory) {
useEffect(() => {
const sub = subFactory();
return () => sub.unsubscribe();
}, []);
}
function CatFetcher() {
const [state, dispatch] = useReducer(catReducer, initialState);
@deanrad
deanrad / FP-React.html
Created September 28, 2021 18:36
DAG of Fitness Pizza React Components
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DAG of Measurment</title>
<link rel="stylesheet" href="https://stackedit.io/style.css" />
</head>
@deanrad
deanrad / apollo-redux-join.ts
Created September 2, 2021 15:25
// Allows us to 'join' (should be memoized so only logs on change of tierId)
const SelectedTierFromCache = ({ tierId }) => {
return (
<ApolloConsumer>
{(client) => {
const result = client.readQuery({ query: AVAILABLE_TIERS });
const all = result?.currentTierGroup?.tiers;
const selected = all.find((t) => t.tierId === tierId);
console.log('Selected tier from cache (do not mutate!)', selected);
return null;
@deanrad
deanrad / isSameIgnoringFunctions.ts
Last active August 16, 2021 16:14
How to make memoize React components to make them invulnerable to function changes.
// Usage
// React.memo(Component, sameIgnoringFunctions);
// Returns true when all non-function props are the same (===)
const isSameIgnoringFunctions = (oldProps, newProps) =>
Object.keys(oldProps)
// filter lets only non-functions through
.filter((k) => typeof oldProps[k] !== 'function')
// to check if each remaining key is the same in both
.every((k) => oldProps[k] === newProps[k]);
@deanrad
deanrad / _tips.md
Last active August 12, 2021 16:22
Git Workflow tips

Working

The single most important command: Commit work in progress instantaneously and without running hooks:

gwip # git add . && git commit -a -m WIP --no-verify

Got 3 consecutive WIP commits, and need only one? (Ideally you haven't pushed these yet).

gundo; gundo; gundo; gwip

@deanrad
deanrad / context-promise.ts
Created August 2, 2021 18:25
const singleton = {f1: Promise, f2: Promise}
export const FMContext = createContext(singleton); // default value
export const useFM = () => {
const fm = useContext(FMContext)
fm.f1 = somePromise();
return fm
};
@deanrad
deanrad / CounterHook.spec.tsx
Created July 19, 2021 15:02
import React from 'react'
import "@testing-library/jest-dom";
import { renderHook, act } from "@testing-library/react-hooks";
import { render, fireEvent } from "@testing-library/react";
import { useCounterLogic } from './examples/useCounterLogic';
import { CounterHook } from './examples/CounterHook'
describe.only('CounterLogic', () => {
describe('increment', () => {
it('should change count by 1', () => {