ali-master

// Usage:
// Replace React.lazy(() => import('x'));
// with retryDynamicImport(() => import('x'));

import { ComponentType, lazy } from 'react';

const MAX_RETRY_COUNT = 15;
const RETRY_DELAY_MS = 500;

// Regex to extract the module URL from the import statement

ali-master

import axios from "axios";
import { randomUUID } from 'crypto';

const checkProcessEnv = () => {
  if (
    !process.env.HOOK0_APPLICATION_ID ||
    !process.env.HOOK0_APPLICATION_SECRET
  ) {
    throw new Error('Cannot subscribe to webhooks without Hook0 settings');
  }

ali-master

export type TimeSpanUnit = "ms" | "s" | "m" | "h" | "d" | "w";

export class TimeSpan {
	constructor(value: number, unit: TimeSpanUnit) {
		this.value = value;
		this.unit = unit;
	}

	public value: number;
	public unit: TimeSpanUnit;

ali-master

class SoundFX {
  #isSoundEnabled;

  #COIN_FX = 'https://themushroomkingdom.net/sounds/wav/smw/smw_coin.wav';

  #ERROR_FX = 'https://themushroomkingdom.net/sounds/wav/smw/smw_lemmy_wendy_incorrect.wav';

  #DECREASE_FX = 'https://themushroomkingdom.net/sounds/wav/smw/smw_stomp_bones.wav';

  #INCREASE_FX = 'https://themushroomkingdom.net/sounds/wav/smw/smw_stomp.wav';

ali-master

import { createHmac } from "crypto";
import { decode } from "hi-base32";

interface Options {
  period: number;
  digits: number;
  timestamp?: number;
}

export function generateTOTP(key: string, options: Options): string {

ali-master

name: Publish To NPM
on:
    push:
        branches: [master, beta]

jobs:
    release:
        name: Release
        runs-on: ubuntu-latest
        permissions:

ali-master

NextJS Server Only Context API

Tiny wrapper around cache to have request-scoped context for server components. No more prop drilling!

Note: when navigating on the client side the layout is not re-rendered, so you need to set the context both in the page and in the layout.

export const [getLocale, setLocale] = ServerContext("en");

ali-master

A curved menu component that rotates while being dragged. It features famous furniture designs, with the middle item highlighted. The component is built using Framer Motion. A similar effect could be achieved with CSS's scroll() and animation-timeline, but this would not (yet) be fully functional on mobile devices.

ali-master

A popover slide selector component that reveals a list of items on click. The list items are avatars from my last 10 GitHub followers. The component is inspired by the Telegram iOS app.

ali-master

import { motion } from "framer-motion";
import { useState } from "react";

const runs = [
  {
    distance: 10.29,
    pace: "5:14 /km",
    time: "53m 49s",
  },
  {