nova4u

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

nova4u

/*
*   Stripe WebGl Gradient Animation
*   All Credits to Stripe.com
*   ScrollObserver functionality to disable animation when not scrolled into view has been disabled and 
*   commented out for now.
*   https://kevinhufnagl.com
*/

nova4u

// .vscode/settings.json
{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
    ["styled\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
}

nova4u

"use client";

import React, { useEffect, useId, useState } from "react";
import { motion, AnimatePresence, MotionConfig } from "framer-motion";
import { PlusIcon, XIcon } from "lucide-react";
import { createPortal } from "react-dom";
import { cn } from "@/lib/utils";
import { buttonVariants } from "../button";

const transition = {

nova4u

export function runify(obj) {
	if(Array.isArray(obj)) {
		return obj.map(runify);
	} else if(typeof obj === 'object') {
		let rune = $state(obj);
		let output = {};
		for(let key in rune) {
			if(typeof obj[key] === 'object') {
				obj[key] = runify(obj[key]);
			}

nova4u

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

interface UseUndoHook<T> {
  value: T;
  onChange: (newValue: T) => void;
  undo: () => void;
  redo: () => void;
  clear: () => void;
  canUndo: boolean;
  canRedo: boolean;

nova4u

/**
 * Custom hook for dynamically resizing a textarea to fit its content.
 * @param {React.RefObject<HTMLTextAreaElement>} textareaRef - Reference to the textarea element.
 * @param {string} textContent - Current text content of the textarea.
 * @param {number} maxHeight - Optional: maxHeight of the textarea in pixels.
 */

import { useEffect } from "react";
const useDynamicTextareaSize = (
  textareaRef: React.RefObject<HTMLTextAreaElement>,