Skip to content

Instantly share code, notes, and snippets.

@cassidoo
cassidoo / simple-react-recorder.jsx
Last active November 1, 2024 19:04
A simple React microphone component, recording audio and showing the blob in the browser, styled with Tailwind.
"use client";
import { useState, useEffect, useRef } from "react";
function SimpleRecordButton() {
const [isRecording, setIsRecording] = useState(false);
const [audioStream, setAudioStream] = useState(null);
const [mediaRecorder, setMediaRecorder] = useState(null);
const [audioBlob, setAudioBlob] = useState(null);
const [recordingTime, setRecordingTime] = useState(0);
const timerRef = useRef(null);
@Shpigford
Shpigford / .cursorrules
Last active October 22, 2024 01:31
Cursor Rules
# Original instructions: https://forum.cursor.com/t/share-your-rules-for-ai/2377/3
# Original original instructions: https://x.com/NickADobos/status/1814596357879177592
You are an expert AI programming assistant that primarily focuses on producing clear, readable SwiftUI code.
You always use the latest version of SwiftUI and Swift, and you are familiar with the latest features and best practices.
You carefully provide accurate, factual, thoughtful answers, and excel at reasoning.
- Follow the user’s requirements carefully & to the letter.
@DreierF
DreierF / DataTableResizeContainer.tsx
Last active October 3, 2024 23:04
Tanstack Table v8 feature extension to support mixing fractional and pixel based sizes in tables with column resizing enabled.
export function TableResizeContainer<T extends RowData>({
table,
children,
...props
}: { table: TableInstance<T> } & ComponentPropsWithoutRef<'div'>) {
const { ref, width } = useElementSize();
useEffect(() => table.setIntrinsicAvailableWidth(width), [table, width]);
return (
<div {...props} ref={ref}>
{table.getState().intrinsicAvailableWidth === 0 ? null : children}
/**
* If you have a volume input (0 to 1), such as a slider, use this to convert
* it to a logarithmic volume that is closer to human perception (0 to 1).
*
* A more robust approach would use a Fletcher-Munson curve, however this is a
* close enough approximation for most use cases.
*
* You can customize the curve to your liking, generally 3-4 is a good value.
*
* The inverse of this function is {@link convertVolumeToInput}.
/**
* @link https://raw.githubusercontent.com/NaturalCycles/js-lib/master/src/promise/pProps.ts
* Promise.all for Object instead of Array.
*
* Inspired by Bluebird Promise.props() and https://github.com/sindresorhus/p-props
*
* Improvements:
*
* - Exported as { promiseProps }, so IDE auto-completion works
@KATT
KATT / 0-README.md
Last active August 5, 2022 20:48
`useRouterQuery()` hook to get query params on first render
import {
Box,
Button,
Heading,
HStack,
Input,
InputGroup,
InputRightElement,
Popover,
PopoverBody,
html {
--max-width: 1200px;
--columns: 6;
--gutter: 1.5rem;
}
* {
--grid: minmax(var(--gutter), 1fr)
repeat(
var(--columns),
minmax(
@sindresorhus
sindresorhus / esm-package.md
Last active November 5, 2024 08:41
Pure ESM package

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

  1. Use ESM yourself. (preferred)
    Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
  2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
  3. Stay on the existing version of the package until you can move to ESM.
@prologic
prologic / LearnGoIn5mins.md
Last active November 5, 2024 02:14
Learn Go in ~5mins