crutchcorn

globalThis.setTimeout = (cb, num) => {
    const start = Date.now();

    function loop() {
        return new Promise((resolve) => {
            queueMicrotask(() => {
                const now = Date.now();
                const diff = now - start;
                if (diff < num) {
                    loop()

crutchcorn

// ...
let theme = document.documentElement.className;
toggleButtonIcon(theme);

themeToggleBtn.addEventListener('click', () => {
  theme = theme === 'light' ? 'dark' : 'light';

  toggleButtonIcon(theme);
});

crutchcorn

class Zone {
    constructor() {
        this.tasks = [];
    }

    // Add a new task to the zone
    add(task) {
        this.tasks.push(task);
    }

crutchcorn

ul.tabs__tab-list:has(> .tabs__tab:first-child:not([aria-selected="true"]))
	~ .tabs__tab-panel {
	border-radius: var(--code-block-corner-radius_inner);
}

ul.tabs__tab-list:has(> .tabs__tab:first-child[aria-selected="true"])
	~ .tabs__tab-panel {
	border-radius: 0 var(--code-block-corner-radius_inner)
		var(--code-block-corner-radius_inner);
}

crutchcorn

import { ComponentType, PropsWithChildren } from "react";
import { Text } from "react-native";
import { Wrapper } from "aws-amplify-react-native";

// 🪄 This is the magic
type AddChildrenToComponent<T> = T extends ComponentType<infer P>
  ? ComponentType<PropsWithChildren<P>>
  : never;

const WrapperWithChildren = Wrapper as AddChildrenToComponent<typeof Wrapper>;

crutchcorn

// OK
const firstRoute = ":test"; // Or ":test/" or "/:test" or "other/:test", etc
fillRoute(firstRoute, {
  test: "hello",
});

// Type error - not enough params
const secondRoute = ":test/:other";
fillRoute(secondRoute, {
  test: "hello",

crutchcorn

@Injectable()
class CloseIfOutSideContext implements OnDestroy {
  getCloseIfOutsideFunction = (contextMenu: ElementRef<HTMLElement>, close: EventEmitter<any>) => {
    return (e: MouseEvent) => {
      const contextMenuEl = contextMenu?.nativeElement;
      if (!contextMenuEl) return;
      const isClickInside = contextMenuEl.contains(e.target as HTMLElement);
      if (isClickInside) return;
      close.emit();
    }

crutchcorn

const useWindowSize = () => {
    // This doesn't handle resizes or SSR, only used for demos
    const [height, setHeight] = useState(window.innerHeight);
    const [width, setWidth] = useState(window.innerWidth);
  
    return {height, width};
}

crutchcorn

DHCP {#dhcp}

DHCP stands for "dynamic host control protocol". It is the method for which machines on a local network automatically retrieve an IP address in order to identiy itself. It requires both a server and a client to work as-expected. This process includes 4 steps:

1. A client that requires an IP address sends a UDP packet to the local network, asking if there are any DHCP servers on the network. This step is called DHCPDiscover

1a) This request is then ignored by anything that isn't a DHCP server

2. The DHCP Server responds with an IP address suggestion. It doesn't know where to send it back to, since the requester does not have an IP address yet it will respond using UDP to every machine on the network. This step is called DHCPOffer

crutchcorn

let theme = document.documentElement.className;
toggleButton(theme);

themeToggleBtn.addEventListener('click', () => {
  theme = currentTheme === 'light' ? 'dark' : 'light';

  toggleButton(theme);
  localStorage.setItem(COLOR_MODE_STORAGE_KEY, theme)
})