crazy4groovy

import React, { useState } from 'react';
import usePolling from './usePolling';
import ...

const useCustomPolling = () => {
  const [state, setState] = useState()

  const cb = async (cancelPolling) => {
    // do some logics here... whatever...
    

crazy4groovy

import { useReducer, useRef } from "react";

const initialState = {
  isLoading: false,
  prevData: undefined,
  data: undefined,
  error: undefined,
};

const reducer = (state, action) => {

crazy4groovy

import React from 'react';
import useFormValidation from './useFormValidation';

const initialValues = {
  name: '',
  email: '',
  password: '',
};

// You should put this config in a separate file!

crazy4groovy

<script lang="ts">
  /// ...
  import { customStoreDebouncer /*, storeDebouncer */ } from "./stores/stringStore";
  const stringStoreDebounced = customStoreDebouncer(400); // debounced store read

  $: {
    const text = $stringStoreDebounced; // resolved value, after debounce timeout
    /// ...
  }
</script>

crazy4groovy

import { Timeout, TimeoutError } from "https://deno.land/x/timeout/mod.ts"

const delay = (ms) => new Promise((res) => setTimeout(res, ms));

function newThrottler({ isBusy, lock, unlock, waitMs, size }) {
  async function throttler(cb, ...args) {
    size(1);
    await Promise.resolve();
    while (!!isBusy()) {
      await delay(waitMs()); // waits in event loop queue, until it interrupts for another attempt!

crazy4groovy

.item-card {
  border: 1px solid #464646;
  transform: skewY(-4deg);
}
.item-card > * {
  transform: skewY(4deg); /* reverses the skew effect for children */
}

crazy4groovy

import { parse } from 'https://deno.land/std/flags/mod.ts';

console.log('Example: deno run --allow-all .\ai-text-to-speech.deno.js --outFile="sample.mp3" --text="This is a sample audio body." --voice="Josh"')

const { outFile, text, voice = 'Adam' } = parse(Deno.args)

if (!outFile || !text) {
	console.error("Missing required arg: outFile and/or text")
}

crazy4groovy

const percentLabel = document.querySelector("#percent");
const originalTitle = document.title;

window.addEventListener("scroll", () => {
  let scrollTop = window.scrollY;
  let docHeight = document.body.offsetHeight;
  let winHeight = window.innerHeight;
  let scrollPercent = scrollTop / (docHeight - winHeight);
  let scrollPercentRounded = Math.round(scrollPercent * 100);
  percentLabel.innerHTML = scrollPercentRounded;

crazy4groovy

function fitText(el, { maxFontSizePx, minFontSizePx, compressor = 1 } = {}) {
  const s1 = el.clientWidth / (compressor * 10);
  const s2 = parseFloat(maxFontSizePx);
  const s3 = parseFloat(minFontSizePx);
  el.style.fontSize = Math.max(Math.min(s1, s2), s3) + 'px';
};

crazy4groovy

/* from: https://backstage.io/ */

.bannerSection:is(.diagonalBorder, .diagonalBottomBorder) + section {
    --diagonalBorderHeight: 46px;
    margin-top: calc(var(--diagonalBorderHeight)*-1);
    padding-top: var(--diagonalBorderHeight);
}
.bannerSection.greenGradientBackground {
    background: linear-gradient(88deg, #9bf0e1 15%, #36baa2 85%);
    color: var(--color-gray-900);