Skip to content

Instantly share code, notes, and snippets.

View bendc's full-sized avatar

Benjamin De Cock bendc

View GitHub Profile
@bendc
bendc / easing.css
Created September 23, 2016 04:12
Easing CSS variables
:root {
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
@bendc
bendc / random-color.js
Last active February 7, 2024 03:19
Generate nice random colors
const randomColor = (() => {
"use strict";
const randomInt = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
return () => {
var h = randomInt(0, 360);
var s = randomInt(42, 98);
@bendc
bendc / alphabet.js
Created January 30, 2015 21:38
Array of uppercase and lowercase letters
const letters = (() => {
const caps = [...Array(26)].map((val, i) => String.fromCharCode(i + 65));
return caps.concat(caps.map(letter => letter.toLowerCase()));
})();
@bendc
bendc / functional-utils.js
Last active September 15, 2023 12:12
A set of pure ES2015 functions aimed to make functional JavaScript more idiomatic.
// array utils
// =================================================================================================
const combine = (...arrays) => [].concat(...arrays);
const compact = arr => arr.filter(Boolean);
const contains = (() => Array.prototype.includes
? (arr, value) => arr.includes(value)
: (arr, value) => arr.some(el => el === value)
@bendc
bendc / supportsES6.js
Created August 25, 2016 08:05
Test if ES6 is ~fully supported
var supportsES6 = function() {
try {
new Function("(a = 0) => a");
return true;
}
catch (err) {
return false;
}
}();
@bendc
bendc / nodelist-iteration.js
Created January 13, 2015 14:39
ES6: Iterating over a NodeList
var elements = document.querySelectorAll("div"),
callback = (el) => { console.log(el); };
// Spread operator
[...elements].forEach(callback);
// Array.from()
Array.from(elements).forEach(callback);
// for...of statement
@bendc
bendc / recursion.js
Created May 21, 2015 08:17
Functional loop
const loop = (() => {
const recur = (callback, count, i=0) => {
if (i == count-1) return callback(i);
callback(i);
return recur(callback, count, i+1);
};
return (callback, count) => {
if (count > 0) return recur(callback, count);
};
})();
@bendc
bendc / easing.js
Last active November 15, 2022 11:54
Penner easing equations as arrow functions
// ease-in
const easeInQuad = (t, b, c, d) =>
c*(t/=d)*t + b;
const easeInCubic = (t, b, c, d) =>
c*(t/=d)*t*t + b;
const easeInQuart = (t, b, c, d) =>
c*(t/=d)*t*t*t + b;
@bendc
bendc / raf-boilerplate.js
Created August 28, 2017 13:52
rAF tutorial: boilerplate code
"use strict";
// animation utils
// ===============
const trackTime = id => {
const [entry] = performance.getEntriesByName(id);
if (!entry) {
performance.mark(id);
@bendc
bendc / toMap.js
Created December 17, 2015 10:39
Object to Map, recursive-style
const toMap = (() => {
const convert = (obj, map = new Map(), keys = Object.keys(obj).values()) => {
const state = keys.next();
if (state.done) return map;
const key = state.value;
map.set(key, obj[key]);
return convert(obj, map, keys);
};
return obj => obj instanceof Map ? obj : convert(obj);
})();