Skip to content

Instantly share code, notes, and snippets.

Avatar

Bede Kelly bedekelly

View GitHub Profile
@bedekelly
bedekelly / Knob.svelte
Created Nov 5, 2020
Svelte implementation of a 2-way-binding knob control
View Knob.svelte
<!-- App.svelte -->
<script>
import Knob from './Knob.svelte';
let value = 0;
const reset = () => { value = 50 };
</script>
<Knob bind:value={value} max={100} min={0} pixelRange={200}/>
<p>
@bedekelly
bedekelly / useSequence.js
Created Aug 22, 2020
Simple sequence hook for use with step-by-step forms etc
View useSequence.js
function useSequence({ values, onComplete }) {
const [index, setIndex] = useState(0);
function next() {
setIndex((oldIndex) => {
if (oldIndex + 1 >= values.length) {
setImmediate(onComplete);
return oldIndex;
} else {
return oldIndex + 1;
@bedekelly
bedekelly / useFocusOnKey.js
Last active Aug 22, 2020
Hook enabling focus-on-key behaviour for an element
View useFocusOnKey.js
import { useEffect, useRef } from "react";
/**
* Focus the given element when a key is pressed;
* and unfocus it when Escape is pressed.
*
* e.g.
* const ref = useFocusOnKey('/');
* return <input ref={ref} />
*/
@bedekelly
bedekelly / nondeterminism.py
Created Sep 19, 2019
List monad (+alternative) for nondeterminism in Python
View nondeterminism.py
toss = {"Fair": ["Heads", "Tails"], "Biased": ["Heads", "Heads"]}
@do
def coins():
coin = yield ["Fair", "Biased"]
result = yield toss[coin]
_ = yield guard(result == "Heads")
return coin
# Probability of a biased coin, given you observed Heads, is 2/3.
@bedekelly
bedekelly / nondeterminism.hs
Created Sep 19, 2019
Haskell Nondeterminism
View nondeterminism.hs
data CoinType = Fair | Biased deriving (Show)
data Coin = Head | Tail deriving (Eq,Show)
toss Fair = [Head, Tail]
toss Biased = [Head, Head]
pick = [Fair, Biased]
experiment = do
coin <- pick -- Pick a coin at random
@bedekelly
bedekelly / do_notation.py
Created Sep 18, 2019
Do Notation using Python's Yield Keyword
View do_notation.py
from functools import wraps
def do(f):
def partial_run(f, args, kwargs, values_so_far=()):
# First, create a NEW instance of the coroutine.
coroutine = f(*args, **kwargs)
# Advance the coroutine to the first yield point.
yielded_monad = next(coroutine)
View fixedPose.js
import React, { useState } from "react";
import posed from "react-pose";
import "./App.css";
const Box = posed.div({
regular: { width: '10vw', height: '10vh', flip: true },
fullscreen: { width: "100vw", height: '100vh', flip: true }
});
View pose.js
import React, { useState } from "react";
import posed from "react-pose";
import "./App.css";
export default function App() {
const [fullscreen, setFullscreen] = useState(false);
const toggle = () => setFullscreen(!fullscreen);
const pose = fullscreen ? 'fullscreen' : 'regular';
@bedekelly
bedekelly / parallaxListeners.js
Created Mar 31, 2019
Parallax Event Listeners
View parallaxListeners.js
document.addEventListener("mousemove", event => {
const height = event.clientY / window.innerHeight;
const width = event.clientX / window.innerWidth;
updatePositions(height, width);
});
window.addEventListener("deviceorientation", event => {
const height = -event.beta / 90;
const width = event.gamma / 180;
@bedekelly
bedekelly / parallax.js
Last active Sep 26, 2019
Quick'n'dirty parallax for a bunch of stacked layers
View parallax.js
MAX_TRANSLATE = 6;
const elements = [
"background", "clouds", "back-mountain", "front-mountain",
"hills-4", "hills-3", "hills-2", "hills-1", "birds"
].map(klass => document.querySelector(`.${klass}`));
function updatePositions(height, width) {
const maxVHTranslation = -height * MAX_TRANSLATE;
You can’t perform that action at this time.