monochromer

// http://www.sitepoint.com/sort-an-array-of-objects-in-javascript
const bands = [ 
  { genre: 'Rap', band: 'Migos', albums: 2},
  { genre: 'Pop', band: 'Coldplay', albums: 4, awards: 13},
  { genre: 'Rock', band: 'Breaking Benjamins', albums: 1}
];

// function for dynamic sorting
function compareValues(key, order='asc') {
  return function(a, b) {

monochromer

//склонение окончаний
function declension(num, expressions) {
    var result;
    count = num % 100;
    if (count >= 5 && count <= 20) {
        result = expressions[2];
    } else {
        count = count % 10;
        if (count == 1) {
            result = expressions[0];

monochromer

font-stretch

Keyword	Percentage
ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%

monochromer

//
const compose = (...fns) => x => fns.reduce((v, fn) => fn(v), x);

//
const pipe = (...fns) => (...args) => fns
  .reduce((args, fn) => [fn(...args)], args);

const compose = (...fns) => (...args) => fns.reverse()
  .reduce((args, fn) => [fn(...args)], args);

monochromer

/* 
  https://www.zachleat.com/web/rename-font/
  https://github.com/jonathantneal/system-font-css]
  https://medium.design/system-shock-6b1dc6d6596f
  http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/
  http://prgssr.ru/development/ispolzovanie-shriftov-sistemnogo-interfejsa-v-veb-dizajne.html
*/

@font-face {
  font-family: My San Francisco Alias;

monochromer

const component = function(name, props, children) {
  let elem = document.createElement(name);

  Object.keys(props).forEach(key => {
    if (key === 'style') {
      Object.assign(elem.style, props[key])
    } else {
      elem.setAttribute(key, props[key]);
      // elem[key] = props[key];
    }

monochromer

Расчёт итогового размера с flex-grow

1 шаг. Рассчитываем свободное место во флекс-контейнере:

Свободное место = Ширина контейнера - Сумма базовых размеров элементов

2 шаг. Считаем размер минимальной доли свободного места:

Доля свободного места = Свободное место / Сумма flex-grow всех элементов

3 шаг. Базовый размер каждого флекс-элемента увеличиваем на размер минимальной доли свободного места умноженной на значение flex-grow этого элемента:

Итоговый размер = Базовый размер + (Доля свободного места * flex-grow)

Для верхнего блока с енотами хочется задать коэффициенты 1 и 2. Но нужные размеры блоков получаются с коэффициентами 1 и 3. Давайте посчитаем:

Свободное место = 300px - (50px * 2) = 200px

monochromer

// https://tympanus.net/codrops/2009/08/30/javascript-browser-detection/

var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },

monochromer

http://prgssr.ru/development/tehniki-prefetchinga-dlya-uluchsheniya-proizvoditelnosti-sajtov.html
https://m.habr.com/ru/post/445264/

# ============ Типы префетча ================

1.
<link rel="dns-prefetch" href="//cdnjs.com/">

Эта техника уведомляет браузер, что на странице используются ресурсы с другого адреса 
и браузер может заранее преобразовать URL в IP-адрес. 

monochromer

// https://habrahabr.ru/users/yuri_spivak/
// https://habrahabr.ru/post/336466/

function CSSsupport(property, value) {
    var element = document.createElement('div');
    
    // Проверяем, поддерживает ли браузер данное свойство
    if (element.style[property] === void 0) return false;
    
    // Вносим новое свойство в style элемента