KristofferEriksson

import { useCallback, useEffect, useRef, useState } from "react";

/**
 * Custom React hook for double-click confirmation for critical actions.
 *
 * @param action - The action to be executed on the second click.
 * @param timeout - Time in milliseconds to reset the unlocked state.
 * @returns The current unlocked state and the trigger function.
 */
const useConfirmation = (action: () => void, timeout: number = 5000) => {

KristofferEriksson

import { useCallback, useState } from "react";

// Custom hook to copy text to clipboard
const useCopyToClipboard = (timeoutDuration: number = 1000) => {
  const [copied, setCopied] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  const copyToClipboard = useCallback(
    async (text: string) => {
      try {

thomaswangarchive

// https://rsms.me/inter/dynmetrics

const DynamicText = ({ className, children, fontSize = 15, tag = "span" }) => {
  const pxToRem = (px) => {
    return Number(px * 0.0625)
  }

  const dynamicLeading = (z) => {
    const l = 1.4
    return Number(pxToRem(Math.round(z * l)))

jacob-ebey

import { createHash } from "crypto";
import fs from "fs";
import fsp from "fs/promises";
import path from "path";
import https from "https";
import { PassThrough } from "stream";
import type { Readable } from "stream";
import type { LoaderFunction } from "remix";
import sharp from "sharp";
import type { Request as NodeRequest } from "@remix-run/node";

tkadlec

:root {
 --violation-color: red; /* used for clear issues */
 --warning-color: orange; /* used for potential issues we should look into */
}

/* IMAGES */

/*
 * Lazy-Loaded Images Check
 * ====

MantasMikal

// Demo https://guste.design/gallery/

// Install https://www.npmjs.com/package/react-medium-image-zoom

// ImageZoom.jsx

import React from 'react'
import Image from 'gatsby-image'
import Zoom from 'react-medium-image-zoom'

PierBover

const router = require('./router');

router.setRoutes([
	{
		path: '/ping',
		method: 'GET',
		handler: ping
	},
	{
		path: '/hello/:name',

tomhicks

const audioCtx = new window.AudioContext();
const oscillator = audioCtx.createOscillator();
oscillator.connect(audioCtx.destination);
oscillator.type = "sine";

let numItems = 0

oscillator.frequency.setValueAtTime(
  1,
  audioCtx.currentTime

tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

ozcanzaferayan

SVG file (./src/images/ic_youtube.svg):

<?xml version="1.0" ?>
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M21.582,6.186c-0.23,-0.86 -0.908,-1.538 -1.768,-1.768C18.254,4 12,4 12,4S5.746,4 4.186,4.418c-0.86,0.23 -1.538,0.908 -1.768,1.768C2,7.746 2,12 2,12s0,4.254 0.418,5.814c0.23,0.86 0.908,1.538 1.768,1.768C5.746,20 12,20 12,20s6.254,0 7.814,-0.418c0.861,-0.23 1.538,-0.908 1.768,-1.768C22,16.254 22,12 22,12S22,7.746 21.582,6.186zM10,15.464V8.536L16,12L10,15.464z" fill="#000000FF"/>
</svg>

CLI usage:

svgr ./src/images -d ./src/svg --native --icon --svg-props "width=24,height=24"