koenbok

s3.put invalidation-speed-test/9jxb7yu7hVk4p3jiuXDlyHuBNbBsG0DK
s3.put invalidation-speed-test/9jxb7yu7hVk4p3jiuXDlyHuBNbBsG0DK done
YUL62-P2 Miss from cloudfront 189
DUB56-P2 Miss from cloudfront 454
FRA56-P5 Miss from cloudfront 519
SFO53-P6 Miss from cloudfront 419
GRU3-P3 Miss from cloudfront 607
BOM78-P5 Miss from cloudfront 908
SIN2-P3 Miss from cloudfront 1012
NRT57-P4 Miss from cloudfront 729

koenbok

// https://stackoverflow.com/a/64927639
function addPushStateListener(listener) {
  if (!Proxy) return;
  window.history.pushState = new Proxy(window.history.pushState, {
    apply: (target, thisArg, argArray) => {
      target.apply(thisArg, argArray);
      listener();
    },
  });
}

koenbok

<script>
  function onPathChange(callback) {
    let path;
    // Only reliable way seems polling across browsers :-(
    setInterval(() => {
      if (window.location.pathname !== path) {
        path = window.location.pathname;
        callback(path);
      }
    }, 1000);

koenbok

const rules = Array.from(document.getElementsByTagName("style"))
  .map((el) => el.innerText.split("}"))
  .flat()
  .map((rule) => rule.trim())
  .filter((rule) => rule && !rule.startsWith("@"))
  .map((rule) => {
    return {
      selector: rule.split("{")[0].trim(),
      style: rule.split("{")[1].trim(),
    };

koenbok

export function memoize<R, T extends (...args: any[]) => R>(f: T): T {
  const cache = new Map<string, R>();
  return ((...args: any[]) => {
    const key = JSON.stringify(args);
    if (!cache.has(key)) cache.set(key, f(...args));
    return cache.get(key);
  }) as T;
}

koenbok

import React from "react"

export function TestComponent() {
  return React.createElement("div", {}, "Hello World")
}

koenbok

import * as React from "react"
import { Frame, useCycle } from "framer"

export function Button() {
    const [variant, next] = useCycle({ scale: 1 }, { scale: 1.5 })

    return (
        <Frame
            animate={variant}
            onTap={() => next()}

koenbok

import * as React from "react"
import { Frame, Stack } from "framer"

function capitalize(name) {
    // Capitalizes a word: feed -> Feed
    return name.charAt(0).toUpperCase() + name.slice(1)
}

function Button({ title, active, onTap }) {
    const opacity = active ? 1 : 0.35

koenbok

import * as React from "react";

/**
A hook to simply use state between components
Warning: this only works with function components (like any hook)

Usage:

// You can put this in an central file and import it too
const useStore = createStore({ count: 0 })

koenbok

import * as React from "react";

export class Keyboard extends React.Component {
  state = { key: null };

  onChange = event => {
    this.setState({ key: event.target.value });
  };

  render() {