Skip to content

Instantly share code, notes, and snippets.

View brookjordan's full-sized avatar

Brook Jordan brookjordan

7 followers · 5 following
View GitHub Profile
@brookjordan
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() {
@brookjordan
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
brookjordan / components_notification-item-my-new-notifications.js
Created January 9, 2019 08:10
Create a new notification
import Component from '@ember/component';
export default Component.extend({
classNames: [
'notification-center-item',
],
});
@brookjordan
brookjordan / rgb-2-hsl.css
Created February 23, 2019 07:56
Convert rgb colours to hsl colours in pure css
:root {
--r: 200;
--g: 100;
--b: 50;
--r1: calc(var(--r) / 255);
--r2: calc(var(--r1) * 100%);
--g1: calc(var(--g) / 255);
--g2: calc(var(--g1) * 100%);
--b1: calc(var(--b) / 255);
@brookjordan
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
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
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
brookjordan / number-date-extensions.js
Last active August 6, 2019 05:47
Appends the Number prototype with date related functions
/*
* let a = 1;
* let an = 1;
* let some = 2;
*
* Currently supports:
* - a.day.ago
* - some.days.ago
* - a.week.ago
* - some.weeks.ago
@brookjordan
brookjordan / add-find-translation-file.notmin.js
Last active September 2, 2019 05:04
Find the path to a TradeGecko i18n translation
const mode = process.env.MODE || 'STRICT';
const isCaseInsensitive = mode.includes('i');
const isSubstring = mode.includes('s');
const isVerbose = mode.includes('v');
console.log(`Searching for string '${process.env.FIND}'${
mode === 'STRICT'
? ''
: isSubstring
? ' in substring mode'
@brookjordan
brookjordan / pointerLockElement-test.js
Last active November 18, 2019 09:32
Trying out pointerLockElement
let cursorWidth = 14;
let cursorHeight = 20;
let pointerOffsetX = 2;
let pointerOffsetY = 3;
let c = document.createElement('div');
c.style.cssText = `
width: ${cursorWidth}px;
height: ${cursorHeight}px;
position: fixed;