ryanmorr

/* Courtesy of: https://www.24a11y.com/2018/accessible-svg-icons-with-inline-sprites/ */

.svg-icon {
    /* Place the icon on the text baseline. */
    position: relative;
    top: .125em;
    /* Prevent the icon from shrinking inside a flex container. */
    flex-shrink: 0;
    /* Scale the icon to match the font-size. */
    height: 1em;

ryanmorr

.vr {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background-color: currentcolor;
    opacity: 0.25;
}

ryanmorr

body:before { 
    content: "";
    position: fixed; 
    top: -10px; 
    left: 0; 
    width: 100%; 
    height: 10px; 
    box-shadow: 0px 0px 10px rgba(0,0,0,.5); 
    z-index:100; 
}

ryanmorr

.shadow-light {
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.23), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

.shadow-medium {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.16);
}

.shadow-heavy {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);

ryanmorr

const msg = new SpeechSynthesisUtterance();
msg.voiceURI = 'native';
msg.text = 'Hello World';
msg.lang = 'en-US';
speechSynthesis.speak(msg);

ryanmorr

function callbackMiddlewareProxy(callback) {
    const middleware = [];
    const push = middleware.push.bind(middleware);
    return new Proxy(callback, {
        get: (target, prop) => {
            if (prop === 'use') {
                return push;
            }
            return target[prop];
        },

ryanmorr

function updateAttribute(element, name, newVal, oldVal = null) {
    if (name[0] === 'o' && name[1] === 'n') {
        name = name.slice(2).toLowerCase();
        if (newVal) {
            element.addEventListener(name, newVal);
        }
        if (oldVal) {
            element.removeEventListener(name, oldVal);
        }
    } else if (newVal == null || newVal === false) {

ryanmorr

// I have no idea how practical this is, but I can't help but appreciate hacks like this
// Found it here: https://github.com/uikit/uikit/blob/fc644b5107c47c7242436c782dd935a374ab399e/src/js/util/style.js#L65

const vars = {};

function getCSSVar(name) {
    if (!(name in vars)) {
        const el = document.createElement('div');
        document.documentElement.appendChild(el);
        el.classList.add(`var-${name}`);

ryanmorr

function isBrowser() {
    return typeof window != 'undefined' && typeof window.document != 'undefined';
}

function isServer() {
    return typeof process != 'undefined' && {}.toString.call(process) == '[object process]';
}

ryanmorr

// An aggressive means to detect if the user's device is touch only
// Probably bad practice: https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/
function isTouch() {
    return matchMedia('(hover: none) and (pointer: coarse)').matches;
}

// A more passive approach is to detect if the user's device is merely touch-enabled
function hasTouch() {
    return matchMedia('(any-pointer:coarse)').matches;
}