Skip to content

Instantly share code, notes, and snippets.

View peeke's full-sized avatar

Peeke peeke

View GitHub Profile
@peeke
peeke / rename-custom-properties.js
Created January 13, 2023 08:47
Rename custom properties
const glob = require('glob')
const fs = require('fs')
const mapping = {
'var(--borderRadius)': 'var(--radius-6)',
'var(--borderRadiusSmall)': 'var(--radius-4)',
// ...
}
glob('src/**/*.css', (error, files) => {
@peeke
peeke / deep-merge.js
Last active February 11, 2022 12:06
Deep merge two javascript objects
function merge(target, source) {
if (!(target instanceof Object) || !(source instanceof Object)) return source
return Object.entries(source).reduce(
(result, [key, value]) => ({
...result,
[key]: merge(result[key], value)
}),
{ ...target }
)
@peeke
peeke / mapNumber.js
Created September 2, 2020 15:11
Convert number
function lerp(a, b, weight) {
return a + weight * (b - a)
}
function mapNumber({ from, to, input }) {
const normalized = (input - from[0]) / from[1]
return lerp(...to, normalized)
}
@peeke
peeke / observeAttribute.js
Created November 13, 2019 07:14
Detect changes in an attribute's value
export function observeAttribute(element, attribute, callback) {
const observer = new MutationObserver(mutations => {
mutations
.filter(x => x.type === 'attributes' && x.attributeName === attribute)
.forEach(_ => callback(element.getAttribute(attribute)))
})
observer.observe(element, { attributes: true })
return observer.disconnect
@peeke
peeke / spatial-hashmap.js
Last active September 18, 2021 18:45
Query a grid by x and y coordinate, returning all data points that were added to those particular x and y coordinate.
const clamp = (value, min, max) => Math.min(Math.max(value, min), max)
class SpatialHashMap {
constructor(width, height) {
this.width = width;
this.height = height;
this.grid = new Array(width * height).fill(null).map(() => []);
}
@peeke
peeke / clamp.js
Last active March 13, 2019 12:48
Method to map a number from an input domain to an output range. Useful for animations based on userinput.
// This clamp function does not need left to be smaller than right, making it better suited for animations
const clamp = (input, left, right) => {
if (left > right) {
[left, right] = [right, left]
}
return Math.min(Math.max(input, left), right)
}
export default clamp
@peeke
peeke / animate.js
Last active March 17, 2019 19:58
Easily animate an arbitrary property
const noop = () => {}
const animate = function(options = {}) {
const defaultOptions = { from: 0, to: 1, duration: 1000, callback: noop, ease: t => t }
const { from, to, duration, callback, ease } = {...defaultOptions, ...options}
const delta = to - from
let start
@peeke
peeke / complex problem approach.md
Created July 7, 2018 11:50
@razvan Expanding on our mentoring session, thursday 5th of july

Hi Razvan,

I was thinking about your multifile upload component and how I can give you some handles before I'm off to my vacation :)

So what I think might help is thinking about your problem a bit more in a reactive fashion (the React way) and strictly separating the presentational and logic part. I think more often than not, flowcharts make our reasoning about the problem more complex than need be. They're useful, but more so for testing your solutation and documenting edge-cases, not so much serving as a blueprint for your solution.

First worry about what you are going to show on the screen, (the presentational part). There's a droparea with some states, and there's the uploading/uploaded files. Both are contained within a component which handles the logic.

The droparea has some fixed amount of variables (not sure what the warning state was about anymore):

@peeke
peeke / KdTree.js
Last active June 20, 2018 11:02
Quickly find the nearest neighbor of a point
class KdTree {
constructor(points, axes = ['x', 'y']) {
this._axes = axes
this._tree = KdTree.build(points, axes)
}
static build(points, axes, depth = 0) {
if (!points.length) return null
@peeke
peeke / box.es6
Created May 22, 2017 07:32
The box pattern
// The box pattern:
// Array chaining methods for single values
const box = v => [ v ]
box(1)
.map(n => n * 2)
.map(n => n + 2)
.pop()