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",
  },
  {

ali-master

import React, { useRef, useState } from "react";
import { motion } from "framer-motion";

const years = Array.from({ length: 2024 - 1993 + 1 }, (_, i) => 2024 - i);

export default function Timeline() {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  const [selected, setSelected] = useState<number | null>(null);

  const handleMouseEnter = (index: number) => {

ali-master

UUIDv7 is a 128-bit unique identifier like it's older siblings, such as the widely used UUIDv4. But unlike v4, UUIDv7 is time-sortable with 1 ms precision. By combining the timestamp and the random parts, UUIDv7 becomes an excellent choice for record identifiers in databases, including distributed ones.

Let's briefly explore the UUIDv7 structure and move on to the zero-dependency implementations in 33 languages (as ranked by the Stack Overflow survey).

These implementations may not be the fastest or most idiomatic, but they are concise and easy to understand. Many of the code examples are interactive (but the results are cached, so you won't see different UUIDs very often).

ali-master

import { useEffect } from "react";
import hotkeys from "hotkeys-js";
// Types
import type { KeyHandler } from "hotkeys-js";

/**
 * Filter function to ignore hotkeys when typing in an input, textarea or select
 * @param {KeyboardEvent} event
 * @returns {boolean}
 */