Brook Jordan brookjordan

Illustrator come designer developer. Love creating and learning. Childishly curious.

brookjordan / bem-class-builder.js

Last active July 7, 2020 10:57

Simple function to aid with building BEM-style class names

	/**
	* Used like:
	* const cls = buildBEMBuilder("block-name");
	*
	* let blockClass = cls();
	* // => "block-name"
	*
	* let modifiedBlockClass = cls({
	* goodModifier: true,
	* badModifier: false,

brookjordan / paint-timing.js

Created May 6, 2020 03:56

Print paint performance metrics

	console.log(` ‾‾‾‾
	Paint time for ${location}:${
	performance.getEntriesByType("paint").map(({ name, startTime }) => `
	• ${name}: ${startTime}ms`)}
	____`);

brookjordan / base-64-numbers.js

Last active December 28, 2019 08:48

Convert numbers to base 64

	(function() {

	const BASE_64_CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz+/'.split('');

	Number.prototype._toString = Number.prototype.toString;
	window._parseInt = window.parseInt;

	Number.prototype.toString = function(base) {
	if (base < 37 && base >= 2) {
	return Number.prototype._toString.call(this, ...arguments);

brookjordan / deal-with-promises-as-they-resolve.js

Created March 7, 2019 06:36

Callback a list of promises in the order in which they complete.

	/**
	* Used like:
	* dealWithPromisesAsTheyResolve([
	* new Promise((res, rej) => setTimeout(res, 2000, 2000)),
	* new Promise((res, rej) => setTimeout(res, 1000, 1000)),
	* new Promise((res, rej) => setTimeout(res, 4000, 4000)),
	* new Promise((res, rej) => setTimeout(res, 0, 0)),
	* new Promise((res, rej) => setTimeout(rej, 3000, 3000)),
	* ], num => console.log(num), err => console.log(`error: ${err}`));
	*

brookjordan / accounting.js

Last active March 2, 2019 16:03

Functions that deal with numbers when accuracy is more important than speed

	class Accounting {
	static largestNumber = 10e9; // America's annual budget is ~4tn
	static accuracy = (function() {
	let accuracy = 1;
	while (Accounting.largestNumber * accuracy < Number.MAX_SAFE_INTEGER) {
	accuracy *= 10;
	}
	return accuracy;
	}()); // to change to #accuracy when support rises

brookjordan / contain-in-proportion.scss

Created February 23, 2019 08:03

SCSS Mixins to help create a container than stays as full-screen as possible while maintaining given proportions

	$aspect-y: 16;
	$aspect-x: 9;

	$min-height: 80px;
	$min-width: 160px;

	$max-height: 900px;
	$max-width: 1700px;

	@mixin contain($aspect-y, $aspect-x) {

brookjordan / rgb-2-hsl.css

Created February 23, 2019 07:56

Convert rgb colours to hsl colours in pure css

brookjordan / number-date-extensions.js

Last active August 6, 2019 05:47

Appends the Number prototype with date related functions

brookjordan / contain-within-window.scss

Created January 9, 2019 05:30

Contains an element within a window, maintaining aspect ratio. Includes helper mixins to deal with min and max dimensions.

	@mixin contain($aspect-y, $aspect-x) {
	$aspect: $aspect-y / $aspect-x;

	width: 100vw;
	height: 100vw / $aspect;

	@media (min-aspect-ratio: #{$aspect-y}/#{$aspect-x}) {
	width: 100vh * $aspect;
	height: 100vh;
	}

brookjordan / overloaded-method.js

Last active January 2, 2019 10:42

Allow an object property to be accessed as a method or… non method?

	// Build the asserter
	let assert = {
	get modal() {
	let modal = selector => ({
	get exists() {
	return assert.modalExists(selector);
	},
	});
	Object.assign(modal, {
	get exists() {