Skip to content

Instantly share code, notes, and snippets.

View koenbok's full-sized avatar

Koen Bok koenbok

View GitHub Profile
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
koenbok / framer-pageview.js
Created January 11, 2023 11:59
Track page views in Framer
// 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();
},
});
}
<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
koenbok / duplicate-css.js
Created November 27, 2021 17:06
Find duplicate styles
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(),
};
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;
}
import React from "react"
export function TestComponent() {
return React.createElement("div", {}, "Hello World")
}
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
koenbok / TabBar.tsx
Created May 15, 2019 18:49
Tab Bar
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
koenbok / store.ts
Last active November 10, 2023 00:17
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 })
import * as React from "react";
export class Keyboard extends React.Component {
state = { key: null };
onChange = event => {
this.setState({ key: event.target.value });
};
render() {