crazy4groovy

import React, {
  createContext,
  useContext,
  useEffect,
  useRef,
} from "react"
// Create the event bus context

const EventBusContext = createContext({})
// Custom hook to access the event bus context

crazy4groovy

import * as Plot from "@observablehq/plot";
import PlotFigureChart from "./PlotFigureChart.tsx"

export default function MyPlotFigureChart(
{ filteredRequests }: { filteredRequests: Readonly<any[]> }
) {
  return (
    <PlotFigureChart
      options={{
        inset: 10,

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 { useReducer, useRef } from "react";

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

const reducer = (state, action) => {

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 React from 'react';
import useFormValidation from './useFormValidation';

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

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

crazy4groovy

[...document.querySelectorAll('img[data-src]')].forEach((el, i) => {
  const observer = new window.IntersectionObserver(function(entries, self) {
    const {isIntersecting, target} = entries[0]
    if (isIntersecting) {
      const img = target
      const src = img.getAttribute('data-src')
      if (src) img.src = src
      self.unobserve(img)
    }
  }, {})

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

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

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;