fnky

ANSI Escape Sequences

Standard escape codes are prefixed with Escape:

• Ctrl-Key: ^[
• Octal: \033
• Unicode: \u001b
• Hexadecimal: \x1B
• Decimal: 27

fnky

fnky

Animation

• Motion One

  From creator of Popmotion, Pose and Framer Motion. For React, use Framer Motion.

• Framer Motion
• AutoAnimate
• React Spring

Drag and Drop

fnky

/**
 * Returns a Promise which resolves with a value in form of a tuple.
 * @param promiseFn A Promise to resolve as a tuple.
 * @returns Promise A Promise which resolves to a tuple of [error, ...results]
 */
export function tuple (promise) {
  return promise
    .then((...results) => [null, ...results])
    .catch(error => [error])
}

fnky

import { json, ActionFunction, useActionData, Form } from "remix";
import { z } from "zod";

// This type infer errors from a ZodType, as produced by `flatten()` of a parsed schema.
type inferSafeParseErrors<T extends z.ZodType<any, any, any>, U = string> = {
  formErrors: U[];
  fieldErrors: {
    [P in keyof z.infer<T>]?: U[];
  };
};

fnky

Awesome Variable Fonts

A list of open source and free* variable fonts.

* Some fonts may require a license to be used for commerical use.

Open Source

• iA Fonts
• Inter

fnky

function useSelectors(reducer, mapStateToSelectors) {
  const [state] = reducer;
  const selectors = useMemo(() => mapStateToSelectors(state), [state]);
  return selectors;
}

function useActions(reducer, mapDispatchToActions) {
  const [, dispatch] = reducer;
  const actions = useMemo(() => mapDispatchToActions(dispatch), [dispatch]);
  return actions;

fnky

Power Chime

To activate the sound effect

$ defaults write com.apple.PowerChime ChimeOnAllHardware -bool true; open /System/Library/CoreServices/PowerChime.app &

Do deactivate it, simply change the ChimeOnAllHardware boolean to false.

fnky

:root {
  --color-scale-black: hsl(0, 0%, 3.5%);
  --color-scale-white: #ffffff;
  --color-scale-gray-1: hsl(0, 0%, 8.5%);
  --color-scale-gray-2: hsl(0, 0%, 11.0%);
  --color-scale-gray-3: hsl(0, 0%, 13.6%);
  --color-scale-gray-4: hsl(0, 0%, 15.8%);
  --color-scale-gray-5: hsl(0, 0%, 17.9%);
  --color-scale-gray-6: hsl(0, 0%, 20.5%);
  --color-scale-gray-7: hsl(0, 0%, 24.3%);

fnky

import React from "react";

type ReducerWithOptionalAction<S> = (prevState: S, action?: S) => S;
type ReducerStateWithOptionalAction<S> = React.ReducerState<ReducerWithOptionalAction<S>>;
type DispatchWithOptionalAction<S> = React.Dispatch<S> & React.DispatchWithoutAction;
type ReducerValueWithOptionalAction<S> = [
  ReducerStateWithOptionalAction<S>,
  React.DispatchWithOptionalAction<S>,
];