KristofferEriksson

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;

ShinyObjectLabs

/*
MIT License
Copyright © Joel Whitaker

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

inorganik

import { useEffect, useRef } from 'react'

// playground: https://stackblitz.com/edit/react-ts-nv5fxe?file=App.tsx

export default function App() {
  
  // create a ref and declare an instance for each countUp animation
  const countupRef = useRef(null);
  let countUpAnim;
 

RobertAKARobin

Safari's date-picker is the cause of 1/3 of our customer support issues

...and obviously we're building a workaround. But I'm absolutely flabbergasted that a standard <input type="date"> HTML field, in a standard browser, from a company that bases its reputation good design, could be so dreadful.

The context

I'm the developer for a startup that sells a genetic test to recommend medications for high blood pressure. For medical reasons we need to know our customers' birth date. Most of our customers are in their 60s or older. We've found that many of them use iPads or iPhones. And they're the ones who complain to our customer support that our site is unusable.

The problem

EllyLoel

/*
  Made by Elly Loel - https://ellyloel.com/
  With inspiration from:
    - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
    - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
    - Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

  Notes:
    - `:where()` is used to lower specificity for easy overriding.
*/

mxmason

// Using the web crypto API is a quick way to get a pseudo-random number.
// It's is experimental in IE11 and namespaced behind a prefix.
var crypto = window.crypto || window.msCrypto;

// Generates a uuidv4-compliant string
// credit: https://gist.github.com/jed/982883
function uuidv4() {
  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
    (
      c ^

drwpow

/**
 * @param {number} yPos Pixels from the top of the screen to scroll to
 * @param {number} duration Time of animation in milliseconds
 */
const scrollTo = (yPos, duration = 600) => {
  const startY = window.scrollY;
  const difference = yPos - startY;
  const startTime = performance.now();

  const step = () => {

xposedbones

Number.prototype.map = function (in_min, in_max, out_min, out_max) {
  return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

adamcbrewer

/*
 * There's a bug in Chrome/Safari using overflow:hidden with border-radius. This mask fixes it. 
 * Solution: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera/10296258#10296258
 */
.masked {
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    /* this fixes the overflow:hidden in Chrome */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);