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

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

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

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

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

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

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

function supportsContainerQueries() {
    return !!window.CSSContainerRule;
}

function supportsCustomPropertyDefinitions() {
    return !!window.CSSPropertyRule;
}

function supportsScopedCSS() {
    return !!window.CSSScopeRule;

ryanmorr

// Get the IANA timezone
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

// My result
console.log(timezone); //=> "America/Toronto"

ryanmorr

// Spec: https://wicg.github.io/ua-client-hints
// Support: https://caniuse.com/mdn-api_navigator_useragentdata

const isMobile = navigator.userAgentData.mobile; //=> true/false