Skip to content

Instantly share code, notes, and snippets.

Avatar
🐚

Seb Insua sebinsua

🐚
View GitHub Profile
View what-the-cache.md

what the cache?!


How do React components written in a sychronous programming style read values from remote resources only available asynchronously?


  • Where is the cache?
  • When is the cache initialized and/or refreshed?
View Minesweeper.ts
import { useCallback, useState } from "react";
import "./styles.css";
const EMPTY = false;
const MINE = true;
const MINE_LIKELIHOOD_THRESHOLD = 0.9;
interface Cell {
mine: boolean;
excavated: boolean;
View upsert-array-items.js
// Replace items in `as` with a matching `id` with the
// respective item in `bs`, otherwise append new items.
const abs = Object.fromEntries([
...as.map(a => [a.id, a]),
...bs.map(b => [b.id, b])
]);
// The 'trick' is that if you have two entries with the same id
// (in this case, implying that the value was updated within `bs`)
// then with this method the value of the right-most entry will be used.
View palindromic-substrings.js
function* getOddPalindromesOutwardsFromCentre(str, index) {
let left = index - 1;
let right = index + 1;
let current = str[index];
yield current;
while (left >= 0 && right < str.length && str[left] === str[right]) {
current = `${str[left]}${current}${str[right]}`;
yield current;
View typesafe-zip.ts
type _Tuple<
T,
N extends number,
R extends readonly T[] = []
> = R["length"] extends N ? R : _Tuple<T, N, readonly [T, ...R]>;
type Tuple<T, N extends number> = _Tuple<T, N> & {
readonly length: N;
[I: number]: T;
[Symbol.iterator]: () => IterableIterator<T>;
View generic-maths-in-ts.ts
type CreateArray<V extends number, Arr extends unknown[] = []> =
Arr extends { length: V } ? Arr: CreateArray<V, [...Arr, 1]>;
type Add<A extends number, B extends number> = [...CreateArray<A>, ...CreateArray<B>]['length'];
type V = Add<2, 3>;
type Sub<A extends number, B extends number> = CreateArray<A> extends [...CreateArray<B>, ...infer Els] ? Els['length'] : never;
type V2 = Sub<10, 1>;
View rotate.js
function* unroll(matrix) {
const height = matrix.length;
const width = matrix[0].length;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
yield { y, x };
}
}
}
View clojure.core.js
function createGenerator(maybeIterable) {
const isGenerator = (maybeGenerator) =>
"next" in maybeGenerator &&
typeof maybeGenerator["next"] === "function" &&
"throw" in maybeGenerator &&
typeof maybeGenerator["throw"] === "function" &&
"return" in maybeGenerator &&
typeof maybeGenerator["return"] === "function";
function* generatorFrom(maybeIterable) {
View TicTacToe.js
import { useState } from "react";
import "./styles.css";
function createGrid(n = 3) {
return Array(n)
.fill(() => Array(n).fill(null))
.map((createRow) => createRow());
}
View ShoppingCart.js
import {
useCallback,
useEffect,
useMemo,
useReducer,
useRef,
useState
} from "react";
import { createPortal } from "react-dom";