alexanderson1993

import { ButtonHTMLAttributes, useRef, useEffect } from "react";

export function ClickAndHoldButton({
  action,
  delay = 500,
  loopDuration = 100,
  ...rest
}: {
  action: () => void;
  delay?: number;

alexanderson1993

A script for installing Docker and Portainer CE on an Ubuntu box which you can use to start up all kinds of other apps on the same host.

Make sure you change the appropriate parts of the script, specifically the DEFAULT_EMAIL used for the acme-companion, and the hostnames for the Portainer container.

alexanderson1993

import { TinyBaseSynchronizedPartyKitServer } from "@/party/TinyBaseSynchronizedPartyKitServer.ts";
import type * as Party from "partykit/server";

export default class Server
  extends TinyBaseSynchronizedPartyKitServer
  implements Party.Server
{
  constructor(readonly room: Party.Room) {
    super(room);
  }

alexanderson1993

React Hook Refactor

I can think of at least three ways this hook can be refactored which makes it easier to read and more performant. This can be done without adding new dependencies or changing the signature of the context provider or hook, so it only refactors the internal behavior.

I'd love to see how anyone else would refactor this.

alexanderson1993

import { AwsClient } from "aws4fetch";

const sesEndpoint = "email.us-east-1.amazonaws.com";

export function makeEmailSender({
  accessKeyId,
  secretAccessKey,
  defaultFromAddress,
}: {
  accessKeyId: string;

alexanderson1993

import type { UploadHandlerPart } from "@remix-run/cloudflare";

export class MaxPartSizeExceededError extends Error {
  constructor(public field: string, public maxBytes: number) {
    super(`Field "${field}" exceeded upload size of ${maxBytes} bytes.`);
  }
}

export function createR2UploadHandler({
  bucket,

alexanderson1993

migrate.mov

A handy CLI for working with the new Cloudflare D1/Prisma integration. You can read about that here: https://blog.cloudflare.com/prisma-orm-and-d1

Getting Started

• Install wrangler, Prisma, and the other dependencies

npm install prisma@latest @prisma/client@latest @prisma/adapter-d1

alexanderson1993

This was originally written for a Remix app, but you could adapt it to work for any SSR framework.

Check the docs for these packages to learn how to use these snippets

https://www.npmjs.com/package/kysely-migration-cli https://www.npmjs.com/package/kysely-codegen https://www.npmjs.com/package/kysely#migrations

It's configured to use MySQL on Planetscale, but you could adjust it to use Postgres or SQLite if you want.

alexanderson1993

"use client";
import * as React from "react";
import { Input } from "@/components/ui/Input";
import { Button } from "@/components/ui/Button";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,

alexanderson1993

function CurrencyInput({
  value,
  onChange,
  max,
}: {
  value: number;
  max: number;
  onChange: (val: number) => void;
}) {
  const [error, setError] = useState('');