ryanmorr

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

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

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

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

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 isNodeList(obj) {
    const type = {}.toString.call(obj).slice(8, -1);
    switch(type) {
        case 'NodeList':
        case 'HTMLCollection':
        case 'HTMLOptionsCollection':
        case 'HTMLFormControlsCollection':
        case 'RadioNodeList':
        case 'StyleSheetList':
            return true;

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