alexreardon

export {};

const allCollectedFps: number[][] = [];

function sum(values: number[]) {
  return values.reduce((acc, current) => acc + current, 0);
}

function average(values: number[]): number {
  if (!values.length) {

alexreardon

function average(values: number[]): number {
  const sum = values.reduce((acc, current) => acc + current, 0);
  return sum / values.length;
}

export function standardDeviation(values: number[]): number {
  /** https://www.mathsisfun.com/data/standard-deviation-formulas.html
   * 1. Work out the Mean (the simple average of the numbers)
   * 2. Then for each number: subtract the Mean and square the result
   * 3. Then work out the mean of those squared differences.

alexreardon

function waitForFrames({
  frames,
  done,
}: {
  frames: number;
  done: () => void;
}): () => void {
  let frameId: number | null = null;
  let remainingFrames = frames;

alexreardon

import { bindAll } from 'bind-event-listener';

import type { DragLocation } from '../internal-types';

type CleanupFn = () => void;

/** Set a `style` property on a `HTMLElement`
 *
 * @returns a `cleanup` function to restore the `style` property to it's original state
 */

alexreardon

this binding

• this is the runtime context of a function.
• this is determined by the call site
• the same function can be executed with different this runtime contexts. You can think of this as another arguement to the function
• Comparison: scopes are generally defined at compile time (exception: eval)

const person = {
 name: 'Alex',

alexreardon

flex container

• flex-direction → main-axis (row [horizontal] → or column [vertical] ↓)
• justify-content → main-axis-align
• align-items → cross-axis-align
• align-content → cross-axis-align-wrapped

flex child

• align-self → cross-axis-align-override

alexreardon

import { bindAll } from 'bind-event-listener';

// *Usually* to detect if you are entering / leaving a window you can
// use the `event.relatedTarget` property:

// "dragenter":
// - `event.relatedTarget` should point to the element that you are coming from
//   - Scenario: A -> B
//   - `event.target`: `B` (entering B)
//   - `event.relatedTarget`: `A`: (leaving A - where you are coming from)

alexreardon

Drag and drop

This is a collection of knowledge I have built up regarding browser powered drag and drop functionality

Events

dragstart

• timing: once as drag is starting
• event.target: draggable Element

alexreardon

Learning typescript

This work is not exclusively my own. There are sections copy pasted from elsewhere

Resources

Docs 📖

• Official docs
• Type programming

alexreardon

const machine = Machine({
  id: 'save-button',
  initial: 'hiding',
  states: {
    hiding: {
      on: {
        SHOW: 'waiting',
      },
    },
    waiting: {