Skip to content

Instantly share code, notes, and snippets.

View koenbok's full-sized avatar

Koen Bok koenbok

1.1k followers · 25 following
View GitHub Profile
@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();
},
});
}
@koenbok
koenbok / framer_sites_dowload.html
Created January 12, 2022 14:27
<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(),
};
@koenbok
koenbok / memoize.ts
Created September 11, 2021 23:00
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
koenbok / test-component.js
Created July 5, 2021 10:15
import React from "react"
export function TestComponent() {
return React.createElement("div", {}, "Hello World")
}
@koenbok
koenbok / Button.jsx
Created July 4, 2019 11:09
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 })
@koenbok
koenbok / keyboard.tsx
Created January 25, 2019 08:17
import * as React from "react";
export class Keyboard extends React.Component {
state = { key: null };
onChange = event => {
this.setState({ key: event.target.value });
};
render() {
@koenbok
koenbok / autoplay.html
Created December 13, 2017 20:17
<html>
<body>
<video controls autoplay muted>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
</body>
</html>