tkrotoff

import assert from 'node:assert/strict';

/**
 * Parses a string containing environment variables and returns a map of key => value pairs.
 *
 * The string format is `KEY=VALUE` pairs separated by new lines;
 * it typically comes from UNIX command `printenv` or `env`.
 */
export function parseEnv(env: string) {
  const lines = env

tkrotoff

What font to use? Web or system font?

Context and Problem Statement

• Shipping system fonts to GitHub.com: https://markdotto.com/blog/github-system-fonts/
• Implementing system fonts on Booking.com — A lesson learned: https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
• Web fonts: when you need them, when you don't: https://david-gilbertson.medium.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae
• System Fonts vs. Web Fonts: Why Does The Difference Matter?: https://iloveseo.com/seo/system-fonts-vs-web-fonts-why-does-the-difference-matter/
• Le guide Web fonts vs. System Fonts: https://www.linkedin.com/pulse/le-guide-ultime-de-laccessibilit%C3%A9-partie-2-web-fonts-vs-perrine-croix/
• Modern Font Stacks: https://github.com/system-fonts/modern-font-stacks

tkrotoff

flowchart TD
  format["What image format to use?"] --> source{"Analog or digital source?"}

  source -- "analog<br>(photo from a camera)" --> jpeg["JPEG lossy<br><br>(also AVIF, WebP, HEIF/HEIC, JPEG XL...)<br><br>Like MP3 format</span>"]
  source -- "digital<br>(using a software to draw the picture)" --> staticOrAnimated["Static or animated?"]

  staticOrAnimated -- "static" --> vectorOrRaster{"Can you make it scalable (vector based)?"}
  staticOrAnimated -- "animated" --> gif["GIF<br><br>(also APNG, AVIF, WebP, MNG, HEIF, video formats like MP4...)"]

tkrotoff

function decode(str: string) {
  try {
    return decodeURIComponent(str);
  } catch {
    return str;
  }
}

/**
 * Parses a `Cookie` HTTP header value or `document.cookie` into an object.

tkrotoff

<svg xmlns="http://www.w3.org/2000/svg" />

tkrotoff

/* eslint-disable unicorn/no-null */

/*
 * Resetting window.location between tests is unfortunately a hard topic with JSDOM.
 *
 * https://gist.github.com/tkrotoff/52f4a29e919445d6e97f9a9e44ada449
 *
 * FIXME JSDOM leaves the history in place after every test, so the history will be dirty.
 * Also its implementations for window.location and window.history are lacking.
 * - https://github.com/jsdom/jsdom/blob/22.1.0/lib/jsdom/living/window/Location-impl.js

tkrotoff

#!/usr/bin/env sh

# Warns about Git staged binary files
# https://gist.github.com/tkrotoff/dc49a8e501b6fdea5a4b66301f7682fc

# Capture the output of "git diff" in a temporary file
tmpfile=$(mktemp)

# https://stackoverflow.com/q/28109520
git diff -z --staged --name-only --diff-filter=ACMR > "$tmpfile"

tkrotoff

import { ReadonlyDeep } from 'type-fest';

/**
 * Deeply freezes an object by recursively freezing all of its properties.
 *
 * - https://gist.github.com/tkrotoff/e997cd6ff8d6cf6e51e6bb6146407fc3
 * - https://stackoverflow.com/a/69656011
 *
 * FIXME Should be part of Lodash and related: https://github.com/Maggi64/moderndash/issues/139
 *

tkrotoff

import { forwardRef } from 'react';

// ref is optional with forwardRef(), I want it to be mandatory
// type ... = ReturnType<typeof forwardRef<T, P>>;
type ForwardMandatoryRefComponent<T, P> = React.ForwardRefExoticComponent<
  React.PropsWithoutRef<P> & React.RefAttributes<T> & { ref: React.Ref<T> }
>;

type Props = {
  // Why? https://stackoverflow.com/a/25367640

tkrotoff

/* eslint-disable guard-for-in, @typescript-eslint/no-unsafe-return */

import { Primitive } from 'type-fest';

/*
 * [Generic way to convert all instances of null to undefined in TypeScript](https://stackoverflow.com/q/50374869)
 *
 * This only works with JS objects hence the file name *Object*Values
 *
 * ["I intend to stop using `null` in my JS code in favor of `undefined`"](https://github.com/sindresorhus/meta/discussions/7)