web-crab

export type EventMap = Record<string, unknown>;
export type Arguments<Arg> = Arg extends void ? [] : [Arg];
export type Listener<Arg> = (...args: Arguments<Arg>) => void;

export class EventEmitter<
  Map extends EventMap,
  K extends keyof Map = keyof Map,
> {
  private map: {
    [E in K]?: Set<Listener<Map[E]>>;

web-crab

import { useEffect, useRef, useState } from 'react';

export function useAbort(init?: (controller: AbortController) => void) {
  const [aborter] = useState(() => new AbortController());
  const initRef = useRef();
  
  initRef.current = init;

  useEffect(() => {
    initRef.current?.(aborter);

web-crab

import { useState, useRef, useCallback } from 'react';

function parseError(error: unknown): Error {
  if (error instanceof Error) return error;
  if (typeof error === 'string') return new Error(error);
  return new Error('Unknown error');
}

export function useAsync<Data, Args extends unknown[]>(
  fn: (...params: Args) => Promise<Data>,

web-crab

<!--
  https://csswizardry.com/2020/05/the-fastest-google-fonts/
  - 1. Preemptively warm up the fonts’ origin.
  -
  - 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
  -    most modern browsers.
  -
  - 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
  -    only after it’s arrived. Works in all browsers with JavaScript enabled.
  -

web-crab

$min-mobile-width = 320
$max-desktop-width = 1200

html
  font-size: 10px

  @media (max-width: $min-mobile-width)
    font-size calc((100vw / $min-mobile-width) * 10)
    @media(orientation: landscape)
      font-size calc(10px - (100vw - 100vh) / 100)

web-crab

import Vue from 'vue'

export default (api) => ({
  namespaced: true,
  state: {
    list: []
  },
  getters: {
    idxMap: state => state.list.reduce((map, { id }, i) => {
      map[id] = i

web-crab

<template functional>
  <div class="loader">
    <div></div>
    <div></div>
    <div></div>
  </div>
</template>

<style>
@keyframes loader {

web-crab

^[a-zA-Z0-9!#$%&'*+\\\-/=?^_`{|}~.]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$

web-crab

const FOCUSABLE = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]'

export default class Modal {
  constructor (options) {
    const focusableChildren = options.el.querySelectorAll(FOCUSABLE)
    this.el = options.el
    this.activeClass = options.activeClass
    this.firstFocusableChild = focusableChildren[0]
    this.lastFocusableChild = focusableChildren[focusableChildren.length - 1]
    this.elBeforeOpen = null

web-crab

var names = ['John Doe'];

for (var i = 0; i < names.length; i++) {
    app.activeDocument.activeLayer.textItem.contents = names[i];
    app.activeDocument.saveAs(
      new File('~/Desktop/' + names[i] + '.tif'), 10),
      new TiffSaveOptions(),
      true
    );
}