Code snippets

Russian format for numbers

/**
* Formats numbers in Russian language
*
* @param num {number | string} Number
* @returns {void | string} Formatted number
*/
function formatNumber(num) {
    return num.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ').replace('.', ',');
}

Formatting Russian telephone numbers

const telInputs = document.querySelectorAll('input[type=tel]');
for (let i = 0; i < telInputs.length; i++) {
    telInputs[i].addEventListener('input', function(e) {
        let cleaned = e.target.value.replace(/\D/g, '');
        if (['7','8'].indexOf(cleaned[0]) >= 0) {
            cleaned = cleaned.substring(1);
        }
        let match = cleaned.match(/^(\d{3})(\d{3})(\d{2})(\d{2})$/);
        if (match) {
            e.target.value = ['+7 ', match[1], ' ', match[2], '-', match[3], '-', match[4]].join('');
        }
    });
}

Logic attributes inversion

ARIA-attribute
el.setAttribute('aria-expanded', (el.getAttribute('aria-expanded') === 'false'));

Supported attribute
el.hidden ^= true;

Unsupported attribute
(el.getAttribute('open') === null) ? el.setAttribute('open', '') : el.removeAttribute('open');

Relative units

/**
 * Converts rem to px
 *
 * @param rem {number} Number in rem
 * @returns {number} Number in px
 */
function remToPx(rem) {
    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
}

Media queries
if (window.matchMedia('(max-width: 40em)').matches) {doSomething();}

16/9 <iframe>

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.video-wrapper > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

This hack is deprecated, for modern browsers you can use just:

iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
}

Fonts including

@font-face {
    font-family: "PT Mono";
    src: url("../fonts/PTM55F_W.woff2") format("woff2"),
         url("../fonts/PTM55F_W.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PT Mono";
    src: url("../fonts/PTM75F_W.woff2") format("woff2"),
         url("../fonts/PTM75F_W.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
body {
    font-family: "PT Mono", monospace;
}

List with dashes

Padding and text-indent values are relative to dash width in the font.

.list-dashes {
    list-style-type: none;
    padding-left: 1em;
}
.list-dashes > li {
    margin-bottom: .5em;
    text-indent: -1em;
}
.list-dashes > li::before {
    content: '— ';
}
@supports (list-style-type: '— ') {
    .list-dashes {
        list-style-type: '— ';
    }
    .list-dashes > li {
        text-indent: 0;
    }
    .list-dashes > li::before {
        display: none;
    }
}
@supports (padding-inline-start: 1em) {
    .list-dashes {
        padding-left: 0;
        padding-inline-start: 1em;
    }
}

• Special ops forces, like the Green Berets or Navy Seals, use small teams and rapid deployment to accomplish tasks that other units are too big or too slow to get done.
• The White Stripes embrace constraints by sticking to a simple formula: two people, streamlined songs, childlike drumming, keeping studio time to a minimum, etc.
• Apple’s iPod differentiates itself from competitors by not offering features like a built-in fm radio or a voice recorder.

Russian format for numbers

/**
 * Formats numbers in Russian
 *
 * @param float $number Number
 *
 * @return string Formatted number
 */
function number_format_groups(float $number): string {
    return number_format($number, 0, ',', ' ');
}

Telephone links

/**
 * Creates tel: links from telephone number
 *
 * @param string $tel Telephone number e.g. '+7 (999) 999-99-99'
 *
 * @return string URL for href e.g. 'tel:%2B79999999999'
 */
function telencode(string $tel): string {
    return 'tel:'.str_replace(['+', ' ', ' ', '(', ')', '-'], ['%2B'], $tel);
}