Welcome to the my tiny wiki!

This is a place where I keep some of the code snippets that I want to have stored somewhere. If you spot mistakes I'd be glad to here them.

Patrick.

Core Resilience Patterns

Circuit Breaker
Monitors calls to a service and "trips" (opens the circuit) when failures exceed a threshold, preventing cascading failures. After a timeout, it allows limited requests to test recovery before closing again.

Retry
Automatically retries failed requests, often with exponential backoff (waiting longer between each retry) and jitter (randomized delays to avoid thundering herd problems).

Timeout
Sets a maximum wait time for any operation. Without timeouts, slow dependencies can exhaust thread pools and bring down the whole system.

Bulkhead
Isolates components into separate resource pools (like compartments in a ship's hull) so a failure in one doesn't drain resources from others. For example, giving different services separate connection pools. Aka. Error Boundary

Fallback
Defines an alternative behavior when a call fails: returning cached data, a default value, or a degraded but functional response instead of an error.

Rate Limiting & Throttling
Controls how many requests a service accepts per time window, protecting it from overload, either self-imposed or enforced on callers.

Stability Patterns

Idempotency
Designing operations so they can be safely retried without side effects (e.g., using idempotency keys for payments).

Cache-Aside (Read-Through Cache)
Serving responses from cache when the origin is slow or unavailable, reducing dependency on downstream services.

Health Checks & Readiness Probes
Exposing endpoints that load balancers and orchestrators (like Kubernetes) use to route traffic away from unhealthy instances.

Graceful Degradation
Continuing to serve core functionality even when non-critical services fail (e.g., showing a product page without recommendations if the recommendation service is down).

Observability Patterns

Dead Letter Queue (DLQ)
Failed messages in async systems are routed to a DLQ for inspection and reprocessing rather than being silently dropped.

Saga Pattern
Managing distributed transactions across microservices with compensating transactions to undo partial work on failure.

A Standard of handling errors in APIs. Reference

HTTP/1.1 403 Forbidden
Content-Type: application/problem+json
Content-Language: en

{
 "status": "403"
 "type": "https://wiki.stillh.art/errors/out-of-luck",
 "title": "You're out of luck :(",
 "detail": "You only had 3 wishes",
 "instance": "/account/12345/msgs/abc",
}

  const queryClient = new QueryClient();
  const prefetchHandler = createPrefetch(queryClient, 500);

  await prefetchHandler.prefetch(["transactions", QUANTITY], () =>
    apiFetcher({
      url: `URL`,
    })
  );

  // e.g.
  // const dehydratedState = prefetchHandler.dehydrate();

function prefetch() {
  const fetchPromise = queryClient.fetchQuery({
    queryKey,
    queryFn,
    ...options,
  });

  const data = (await Promise.race([
    fetchPromise,
    timeout(timeoutDuration),
  ])) as TData;

  return {
    type: "data",
    data,
  };
}

Chaos Engineering

// middleware.ts - Add to introduce random failures
import { NextResponse } from 'next/server';

export function middleware(request) {
  if (process.env.ENABLE_CHAOS === 'true') {
    // 10% of requests fail
    if (Math.random() < 0.1) {
      return new NextResponse(
        JSON.stringify({ message: 'Chaos monkey error' }),
        { status: 500 }
      );
    }

    // 20% of requests are slow
    if (Math.random() < 0.2) {
      return new Promise(resolve => {
        setTimeout(() => resolve(NextResponse.next()), 2000);
      });
    }
  }

  return NextResponse.next();
}

See ChaosMonkey

• Error Boundaries
• Dynamic Imports

Usually for SSR. Fail after a timeout, to prevent blocking finalising for to long.

function prefetchWithTimeout(url: string, timeout = 300) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeout);

  return fetch(url, { signal: controller.signal })
    .finally(() => clearTimeout(timer));
}

For transient issues, e.g. network errors. Can be improved with exponential back-off and jitter (to prevent Thundering Herd Problem).

import { useQuery } from '@tanstack/react-query';

export default function ProductPage({ id }) {
  const { data, error } = useQuery({
    queryKey: ['product', id],
    queryFn: () => fetch(`/api/products/${id}`).then(res => res.json()),
    retry: 3,
     /**
     * Calculates the delay before the next retry attempt using exponential backoff.
     *
     * @param {number} attempt - The number of the current retry attempt (starting from 0).
     * @returns {number} The delay in milliseconds before the next retry, capped at 30,000 ms.
     */
    retryDelay: attempt => Math.min(1000 * 2 ** attempt, 30000)
  });

  if (error) return <ProductErrorState />;
  if (!data) return <ProductSkeleton />;

  return <ProductDetails product={data} />;
}

• closed: normal operation
• open: block request (after a failure threshold)
• half: test a few requests

// Using opossum circuit breaker with Next.js API route
import CircuitBreaker from 'opossum';

// pages/api/products.js
export default async function handler(req, res) {
  const breaker = new CircuitBreaker(fetchProducts, {
    timeout: 3000,// ms
    errorThresholdPercentage: 50,
    resetTimeout: 30000// ms
  });

  try {
    const data = await breaker.fire();
    res.status(200).json(data);
  } catch (error) {
// Circuit is open or operation failed
    res.status(503).json({ error: 'Service temporarily unavailable' });
  }
}

See digitaldialog.swiss

and allyship

type Prettify<T> = {
  [K in keyof T]: T[K];
} & {};

by TotalTypescript

Nice documentation of a style guide Atlassian

Swiss Foundries:

• Nootype
• Floriankarsten
• OutOfTheDark
• Recursive

other

• s-m

Check security headers: securityheaders.com

type Modify<T, R> = Omit<T, keyof R> & R

e.g. overwrite children with a more specific type

export type Stack = Modify<Group, { children: Element[] }>

import { readdirSync } from 'fs'
import { defineNuxtModule, addComponentsDir, addImportsDir, createResolver } from '@nuxt/kit'

const featureFolder = 'features'

export default defineNuxtModule({
  setup() {
    const resolver = createResolver(import.meta.url)

    readdirSync(featureFolder).forEach((feature) => {
      addComponentsDir({
        path: resolver.resolve(`../${featureFolder}/${feature}/components`),
        prefix: feature,
      })

      addImportsDir(resolver.resolve(`../${featureFolder}/${feature}/composables`))

      // we don't want feature utils to be imported in the app
      // addImportsDir(resolver.resolve(`../${featureFolder}/${feature}/utils`))
    })
  },
})

define('SSO_CLIENT_ID', '');
define('SSO_CLIENT_SECRET', '');
define('SSO_METADATA', 'https://PROVIDER.COM/.well-known/openid-configuration');
define('SSO_REDIRECT_URI', URL_PUBLIC . 'sso/callback');

public static function action_signin() {
  AuthUser::load();
  if (AuthUser::isLoggedIn()) {
    redirect('/admin');
    return;
  }

  $metadata = self::http(SSO_METADATA);

  $_SESSION['state'] = bin2hex(random_bytes(5));
  $_SESSION['code_verifier'] = bin2hex(random_bytes(50));
  $code_challenge = self::base64_urlencode(hash('sha256', $_SESSION['code_verifier'], true));

  $authorize_url = $metadata->authorization_endpoint.'?'.http_build_query([
    'response_type' => 'code',
    'client_id' => SSO_CLIENT_ID,
    'redirect_uri' => SSO_REDIRECT_URI,
    'state' => $_SESSION['state'],
    'scope' => 'openid email profile',
    'code_challenge' => $code_challenge,
    'code_challenge_method' => 'S256',
  ]);

  redirect($authorize_url);
}

public static function action_callback() {
  if(!isset($_SESSION['state']) || !isset($_GET['state']) || $_SESSION['state'] != $_GET['state']) {
    die('Authorization server returned an invalid state parameter');
  }

  if(isset($_GET['error'])) {
    die('Authorization server returned an error: '.htmlspecialchars($_GET['error']));
  }

  $metadata = self::http(SSO_METADATA);

  $response = self::http($metadata->token_endpoint, [
    'grant_type' => 'authorization_code',
    'code' => $_GET['code'],
    'redirect_uri' => SSO_REDIRECT_URI,
    'client_id' => SSO_CLIENT_ID,
    'client_secret' => SSO_CLIENT_SECRET,
    'code_verifier' => $_SESSION['code_verifier'],
  ]);

  if (isset($response->error)) {
    die('Authorization server returned an error: '.htmlspecialchars($response->error));
  }

  $userinfo = self::http($metadata->userinfo_endpoint, [
    'access_token' => $response->access_token,
  ]);

  if (!isset($userinfo->sub)) {
    die('Error fetching access token');
  }

  $login = self::createOrLogin($userinfo);
  if (!$login) {
    die('Authentication request was not successful');
  }

  redirect('/dashboard');
}

Fade to transparency from a point (center).

export function modAppendFade(shader, background) {
  // assumes: https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/meshbasic.glsl.js
  shader.vertexShader = shader.vertexShader.replace(
    /* glsl */`void main() {`,
    /* glsl */`
      varying vec4 v_position;
      void main() {
        v_position = modelMatrix * vec4(position.xyz, 1.0);
    `
  )
  shader.fragmentShader = /* glsl */`
    varying vec4 v_position;
    ${shader.fragmentShader}
  `.replace(
    /* glsl */`#include <dithering_fragment>`,
    /* glsl */`
        #include <dithering_fragment>

        vec3 center = vec3(0.0, 0.0, 0.0);
        vec4 background = vec4(${background || '0.93, 0.93, 0.93, 1.0'});
        float diameter = 800.0;
        float falloff = 0.006;

        float vDistance = distance(v_position.xyz, center);
        float factor = clamp((vDistance - diameter) * falloff, 0.0, 1.0);
        gl_FragColor = mix(gl_FragColor, background, factor);
      `
  )
}

node.material.onBeforeCompile = shader => modAppendFade(shader)
node.material.transparent = true
node.material.needsUpdate = true

See Easing Functions Cheat Sheet

function easeInOutCubic(x: number): number {
  return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
}

function easeOutElastic(x: number): number {
  const c4 = (2 * Math.PI) / 3;
        return x === 0
        ? 0
        : x === 1
        ? 1
        : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
}

function easeInCirc(x: number): number {
  return 1 - Math.sqrt(1 - Math.pow(x, 2));
}

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

window.addEventListener('click', (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children, true);
  if (intersects.length > 0) {
    console.log('Clicked:', intersects[0].object);
  }
});

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.carousel > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

function getScrollbarWidth() {
  const div = document.createElement('div');
  div.style.visibility = 'hidden';
  div.style.overflow = 'scroll';
  div.style.msOverflowStyle = 'scrollbar'; // for Edge
  div.style.width = '50px';
  div.style.height = '50px';
  document.body.appendChild(div);
  const inner = document.createElement('div');
  div.appendChild(inner);
  const scrollbarWidth = div.offsetWidth - inner.offsetWidth;
  div.remove();
  return scrollbarWidth;
}

// tailwind 3
// export default {
  // plugins: [
    // plugin(function ({ addUtilities }) {

      addUtilities({
        '.appearance-clean': {
          'appearance': 'none',
          '-moz-appearance': 'textfield',
          '&::-webkit-inner-spin-button': {
            '-webkit-appearance': 'none',
          },
          '&::-webkit-outer-spin-button': {
            '-webkit-appearance': 'none',
          },
        },
      })

    // }),
  // ]
// }

/* tailwind v4 */
@layer utils {
  .appearance-clean {
    appearance: none;
    -webkit-appearance: none;
    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }
  }
}

<input type="number" class="appearance-clean" />

$ git rm -r --cached .
$ git add --all .

height: calc(100vh + env(safe-area-inset-bottom));

font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

block-period: renders characters invisible
swap-period: time to swap font-set for an other one

auto
The font display strategy is defined by the user agent.

block
Gives the font face a short block period and an infinite swap period.

swap
Gives the font face an extremely small block period and an infinite swap period.

fallback
Gives the font face an extremely small block period and a short swap period.

optional
Gives the font face an extremely small block period and no swap period.

iOS Safari adds some ugly styling to search inputs. Fixable with:

input {   
  appearance: none!important; 
}

important because Apple adds them with input[type=search] and therefor has a higher priority.

The swiper needs loop and speed.
observer is necessary when the 0 index is wrong.

<swiper
  :slides-per-view="'auto'"
  :loop="true"
  :speed="5000"
  :prevent-interaction-on-transition="true"
  :observer="true"
  :observe-parents="true"
  @swiper="onSwiper"
>
  <!-- ... -->
</swiper>

Once swiper js is initialized it can be looped.

onSwiper(swiper) {
  const loop = () => {
    swiper.slideTo(swiper.slides.length - swiper.loopedSlides * 2);
    swiper.once('transitionEnd', () => {
      swiper.slideTo(0, 0, false);
      setTimeout(loop, 0);
    });
  }
  loop();
}

history.replaceState(history.state, undefined, '#hello')

Copy from an input

textarea.select(); 
document.execCommand('copy');

Copy from a node

const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(ELEMENT);
selection.removeAllRanges();
selection.addRange(range);

document.execCommand('copy');

selection.removeAllRanges();

or

navigator.clipboard.writeText(CONTENT)

const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

@function px($px) { @return round($px * 0.0625rem * 100) / 100; }
@function pt($pt) { @return px($pt * 1.333); }

axios.interceptors.request.use(function (config) {
    const token = store.getState().session.token;
    config.headers.Authorization =  token;
    return config;
});

const intersection = array1.filter(element => array2.includes(element));

const sleep = (t: number) => new Promise(r => setTimeout(r, t));

const mod = (n, m) => ((n % m) + m) % m;

as % (reminder operation) does not work as expected with negative numbers

const map = (value, x1, y1, x2, y2) => ((value - x1) * (y2 - x2)) / (y1 - x1) + x2;

function animate(timing, draw, duration) {
  return new Promise((resolve) => {
    const start = performance.now();
    requestAnimationFrame(function _animate(time) {
      let timeFraction = (time - start) / duration;
      if (timeFraction > 1) timeFraction = 1;

      const progress = timing ? timing(timeFraction) : timeFraction;
      draw(progress);

      if (timeFraction < 1) {
        requestAnimationFrame(_animate);
      } else {
        resolve();
      }
    });
  });
}

Basic

@font-face {
  font-family: "Mechanical";
  src: url("mechanical.otf") format("opentype");
}

.ttf     format("truetype")
.woff    format("woff")
.woff2   format("woff2")
.otf     format("opentype")

Vue

@font-face {
    font-family: Mechanical;
    src: url("~@/assets/fonts/Mechanical.otf") format("opentype");
}

Run PHP inside a Dev-Docker container

$ docker run -it --mount src="$(pwd)",target=/var/www/html,type=bind -p 3000:80 --name phpdev --sysctl net.ipv4.ip_unprivileged_port_start=0 --rm php:7.2-apache /bin/bash -c 'a2enmod rewrite; apache2-foreground'

Different user prevent the easy manipulation of files, it can be solved quite easily with

$ git config core.fileMode false
$ chmod -R 777 .