crazy4groovy

const myObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log('width', entry.contentRect.width);
    console.log('height', entry.contentRect.height);
  });
});

const someEl = document.querySelector('.some-element');
myObserver.observe(someEl);

crazy4groovy

const parentEl = document.querySelector('.my-parent')

const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.", mutation);
    }
    if (mutation.type === "attributes") {
      console.log(`The ${mutation.attributeName} attribute was modified.`, mutation.target[mutation.attributeName]);
    }

crazy4groovy

import type { APIRoute } from "astro";
import type SMTPTransport from "nodemailer/lib/smtp-transport";
import nodemailer from "nodemailer";

/****
envs:
GMAIL_APP_PW=
GMAIL_ACCOUNT=
GMAIL_TO=
*/

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

## Move files from a large-sized folder into smaller-sized subfolders

# Define variables
$sourceFolder = "C:\Path\To\SrcFolder"
$destinationFolder = "C:\Path\To\DestFolder"
$batchSize = 10000
$folderCounter = 1

# Create new subfolder in destination folder
$folderName = $folderCounter.ToString().PadLeft(4, '0')

crazy4groovy

import { useSyncExternalStore } from "react";

interface Atom<AtomType> {
  get: () => AtomType;
  set: (newValue: AtomType) => void;
  subscribe: (callback: (newValue: AtomType) => void) => () => void;
  _subscribers: () => number;
}

type AtomGetter<AtomType> = (

crazy4groovy

/*
Real devs know that centering a div is easy, but what makes even the most senior developers cry - that random overflowing element that makes the whole page scroll horizontally.
How could you find that element? Answer below.
*/

document.querySelectorAll("*").forEach(el => {
  if(el.offsetWidth > document.documentElement.offsetWidth) {
    console.log(el);
  }
})

crazy4groovy

const html ='<div><a title="123" href="http://xyz.com">link</a></div>';
const regexGroups = /title="([^"]+)" href="([^"]+)"/gm;
const matches = html.matchAll(regexGroups);

for (const match of matches) {
  let [, title, url] = match;
  // ...
}

crazy4groovy

<section class="section">
  <div class="image-box" data-reveal="left">
    <img src="https://img.freepik.com/premium-photo/turkish-baklava-dessert_127657-21789.jpg?w=2000" alt="" class="img">
  </div>
  <div class="content-box">
    <h2 class="title" data-reveal="left">
      Baklava
    </h2>
    <p class="text" data-reveal="left">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Id laborum iste doloremque ab facere unde alias sit commodi accusamus? Eius ut molestiae nemo perspiciatis, pariatur numquam accusamus voluptatem libero sint.

crazy4groovy

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script async>
  confetti.create(null, {
    resize: true,
    useWorker: true,
  })({ particleCount: 200, spread: 200 });
</script>