Skip to content

Instantly share code, notes, and snippets.

Peeke peeke

Block or report user

Report or block peeke

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@peeke
peeke / spatial-hashmap.js
Last active Mar 13, 2019
Query a grid by x and y coordinate, returning all data points that were added to those particular x and y coordinate.
View spatial-hashmap.js
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 Mar 13, 2019
Method to map a number from an input domain to an output range. Useful for animations based on userinput.
View clamp.js
// 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 Mar 17, 2019
Easily animate an arbitrary property
View animate.js
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 Jul 7, 2018
@razvan Expanding on our mentoring session, thursday 5th of july
View complex problem approach.md

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 Jun 20, 2018
Quickly find the nearest neighbor of a point
View KdTree.js
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
The box pattern
View box.es6
// The box pattern:
// Array chaining methods for single values
const box = v => [ v ]
box(1)
.map(n => n * 2)
.map(n => n + 2)
.pop()
@peeke
peeke / trim.es6
Last active Mar 22, 2017
Trim arbitrary html code based on word count. To be used in conjuction with .innerHTML, so unclosed tags are closed automatically.
View trim.es6
const trim = (html, wordCount = 16) => {
const wordsAndTags = /<(.|\n)*?>|[^\s\<]+/g;
const tag = /<(.|\n)*?>/;
return html
.match(wordsAndTags)
.reduce((result, match) => {
if (!wordCount) return result;
@peeke
peeke / _remaining-items.scss
Created Dec 13, 2016
Hide items that remains after a division by n.
View _remaining-items.scss
// Hide items that remains after a division by n.
// E.g.: when using remaining-items(3) on a set of 8 elements, the last two items will be hidden.
@mixin remaining-items($n-per-row) {
&:nth-child(n+#{$n-per-row}) {
&:nth-last-child(-n+#{$n-per-row}) {
&:nth-child(#{$n-per-row}n+#{$n-per-row}) ~ * {
@peeke
peeke / ArrayLikeObservable.es6
Last active May 30, 2017
Array function based Steam & EventStream implementation. Also handles promises.
View ArrayLikeObservable.es6
class Observable {
constructor(fn) {
this._fn = fn;
this._children = [];
const handler = {
get(target, prop) {
return prop in target || !(prop in Array.prototype)
@peeke
peeke / attributeObserver.es6
Last active Nov 20, 2016
Function to listen for attribute changes. Useful for preventing inconsistency between your internal module state and the DOM. (IE11+)
View attributeObserver.es6
const attributeObserver = (element, attr, cb) => {
const mutObserver = new MutationObserver(mutations => {
mutations.forEach(mut => {
mut.attributeName === attr && cb(element.getAttribute(attr));
});
});
mutObserver.observe(element, {
attributes: true,
You can’t perform that action at this time.