Skip to content

Instantly share code, notes, and snippets.

Avatar

Koen Bok koenbok

View GitHub Profile
View framer_sites_dowload.html
<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 Nov 27, 2021
Find duplicate styles
View duplicate-css.js
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(),
};
View memoize.ts
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;
}
View test-component.js
import React from "react"
export function TestComponent() {
return React.createElement("div", {}, "Hello World")
}
View Button.jsx
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()}
View TabBar.tsx
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
View store.ts
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 })
View keyboard.tsx
import * as React from "react";
export class Keyboard extends React.Component {
state = { key: null };
onChange = event => {
this.setState({ key: event.target.value });
};
render() {
View autoplay.html
<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>
View CanvasLayer-Fabric.coffee
# Don't forget to add Frabric to the index.html file
# https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.2/fabric.js
layer = new CanvasLayer
# Create a new Fabric canvas instance
canvas = new fabric.Canvas(layer.canvas)
rect = new fabric.Circle
radius: 100