Skip to content

Instantly share code, notes, and snippets.

@crazy4groovy
crazy4groovy / b2-e3.js
Created May 19, 2024 03:03
A simple BackBlaze (B2) E3 compatible file uploader (JavaScript)
// SEE: https://github.com/yakovkhalinsky/backblaze-b2/issues/118
import {
S3Client,
PutObjectCommand,
// S3ClientConfig,
// DeleteObjectCommand,
} from "@aws-sdk/client-s3";
const region = process.env.B2_REGION;
@crazy4groovy
crazy4groovy / layout.css
Created December 13, 2023 17:10
CSS grid page layout "holy grail" for optional header, footer, sidebar; required content is scrollable (CSS)
body, .grid-wrapper {
height: 100vh;
padding: 0;
margin: 0;
}
.grid-wrapper {
display: grid;
grid-template-columns: minmax(0, 200px) minmax(80vw, 1fr);
grid-template-rows: auto 1fr auto;
@crazy4groovy
crazy4groovy / useScrollTracker.ts
Created December 1, 2023 17:16
A React hook for scroll position tracking (JavaScript)
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
interface ScrollTrackerResult {
isScrollable: boolean;
isAtTop: boolean;
isAtBottom: boolean;
}
function useScrollTracker(ref: React.RefObject<HTMLElement>): ScrollTrackerResult {
const [isScrollable, setIsScrollable] = useState(false);
@crazy4groovy
crazy4groovy / muiCustomToolTip.tsx
Created December 1, 2023 17:13
A custom styled MUI tooltip component with body (JavaScript)
import React from "react";
import ReactDOM from "react-dom";
import { Tooltip, Popper, TooltipProps } from "@mui/material";
import { styled } from "@mui/material/styles";
const StyledPopper = styled(Popper)({
padding: "1rem", // offset for larger arrow size
"& .MuiTooltip-tooltip": {
backgroundColor: "white",
@crazy4groovy
crazy4groovy / onDeploy.js
Created October 31, 2023 22:35
client side script that detects deployment changes, callback (JavaScript)
export default function detectDeployment(
onDeployDetected: () => void,
timeoutSec = 60 * 60 // default 1 hour
) {
const scriptFiles = { cache: "" }; // as object for pointer reference
const profit$ = () =>
handleDetectScriptFileChanges(onDeployDetected, scriptFiles);
setInterval(profit$, timeoutSec * 1000);
@crazy4groovy
crazy4groovy / lazyMergeSort.js
Last active November 3, 2023 21:30
sort large arrays using the event loop (JavaScript)
function chunkedMergeSort(arr, callback) {
function merge(left, right, arr, callback) {
let i = 0;
let j = 0;
let k = 0;
function mergeStep() {
while (i < left.length && j < right.length) {
if (left[i] <= right[j]) {
arr[k++] = left[i++];
// Create store accepts reducers map and initial state
function* createStore(reducers, initialState = {}) {
// Initialize state
let state = initialState;
// Extract the reducer keys upfront
const reducerKeys = Object.keys(reducers);
// Combine all reducers into one reducing function
const combinedReducer = (state, action) => {
return reducerKeys.reduce((newState, key) => {
// Pass slice of state into corresponding reducer
@crazy4groovy
crazy4groovy / cacher.ts
Last active December 1, 2023 17:24
simple TTL cache, and cache repo; excellent Promise/async deduper (JavaScript, TypeScript)
export function cacher<T>(thunk: () => Promise<T>, ttlSeconds = 60) {
const noCache: unique symbol = Symbol("cache");
let cache: Promise<T> | symbol = noCache;
return function execThunk(): Promise<T> {
if (typeof cache !== "symbol") {
return cache;
}
cache = thunk();
@crazy4groovy
crazy4groovy / MyPlotFigureChart.jsx
Last active June 20, 2023 15:44
A simple wrapper for Observable Plot charting lib (ReactJS)
import * as Plot from "@observablehq/plot";
import PlotFigureChart from "./PlotFigureChart.tsx"
export default function MyPlotFigureChart(
{ filteredRequests }: { filteredRequests: Readonly<any[]> }
) {
return (
<PlotFigureChart
options={{
inset: 10,
@crazy4groovy
crazy4groovy / useEventBus.jsx
Last active September 19, 2023 18:06
A simple hook that implements an event bus with useReducer (ReactJS)
import React, {
createContext,
useContext,
useEffect,
useRef,
} from "react"
// Create the event bus context
const EventBusContext = createContext({})
// Custom hook to access the event bus context