Сергей delphinpro

Всё зависит от ТЗ.
Если у вас в ТЗ есть пункт IE9+ - то плакали ваши флексы горькими слезами. остались только флоаты

Это не Vue =)
Это Ecmascript (javascript) по версии 2015 (es6)
Да, это стандарт языка, но браузеры его не поддерживают еще (не весь новый стандарт, я сейчас об импортах говорю). Поэтому при использовании нативных модулей нужно собирать их каким-либо бандлером. Например вебпаком.

Про трансляцию вы правильно понимаете. Только не в "нативный js" (это и так уже нативный js), а в js поддерживаемого браузерами стандарта - ES5

Не нужно делить мир на черное и белое. В нем гораздо больше оттенков.

И снова мой старый добрый пен с флексовыми плитками =)
https://codepen.io/delphinpro/pen/BWJEgG

Я вижу два варианта

Если у вас возможно фиксировать ширину сайта, то делаем примерно как в бутстрапе точки 576-768-992-1200, контейнеры чуть меньше точек. За счет того, что в пределах каждого брикпойнта ширина фиксирована - никаких проблем. Количество точек добавить/убавить по вкусу/ТЗ

Если сайт резиновый, то количество основных точек выбирается примерно как в первом варианте. Плюс дополнительно ставится брикпойнт везде, где ломается дизайн. Этот вариант, понятно более трудозатратен.

https://jsfiddle.net/u5vypq19/2/

Ну скину свой вариант еще раз https://codepen.io/delphinpro/pen/BWJEgG

$a=4;
$b=10;
$z= $a*$b;

if ($a && $b > -1) { 
    echo $a-$b;
}
elseif ($a && $b < 0) {
    echo $a * $b;
}    
elseif ($z < -1) {
    echo $a+$b;
}

#back {
  background-size: cover;
  background: url(mainSpidey.jpg) no-repeat 100% 0;
}

Проблема в порядке свойств.
background - это короткий вариант записи множества свойств для задания фона:

background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-color

И это свойство перезаписывает все параметры фона.

Как-то так выглядит полная запись вашего случая

#back {
  background: url(mainSpidey.jpg) no-repeat 100% 0 / cover;
}

Или просто поменяйте местами строчки

#back {
  background: url(mainSpidey.jpg) no-repeat 100% 0;
  background-size: cover;
}

// Для главной страницы
if(/^\/$/g.test(location.pathname)) {
  document.addEventListener("DOMContentLoaded", function(){
    var b = document.querySelector('.circle_wrap')
    if (b) b.classList.add('animation'); // Проверка все равно будет не лишней
  }, false);
}

// Для страницы contacts.html
if (/^\/contacts\.html$/g.test(location.pathname)) {
  document.addEventListener("DOMContentLoaded", function(){
    var b = document.querySelector('.circle_wrap')
    if (b) b.classList.add('animation');
  }, false);
}

// Так тоже будет работать без ошибок на любой странице,
// где есть соответствующий элемент
document.addEventListener("DOMContentLoaded", function(){
  var b = document.querySelector('.circle_wrap')
  if (b) b.classList.add('animation');
}, false);

minimatch там используется

UPD
Хотите чтобы было красиво и удобно?
Не храните сторонние библиотеки вместе со своими файлами.
Вообще не храните их в проекте.
воспользуйтесь пакетным менеджером. Самый простой вариант - bower.

bower init
bower install --save jquery owl.carousel

Далее создаете отдельный таск гальпу для сборки вендорных пакетов. Типа такого https://github.com/delphinpro/gulp-starter/blob/ma...
И все. Собственноручно написанные скрипты собираете как обычно, вендоров собираете отдельно.
Дополнительный профит в том, что ускорится пересборка скриптов при изменениях. Сторонние библиотеки часто немало весят и не меняются вами => пересобирать их на каждый чих не нужно.

https://jsfiddle.net/z26jyooL/

<div id="someId">
  <!-- COMMENT One-->
  <!-- COMMENT Two -->
  <!-- {"json": true} -->
</div>

<output></output>

let out = document.querySelector('output');
let el = document.querySelector('#someId');

for (let i = 0; i < el.childNodes.length; i++) {
  let child = el.childNodes[i];
  if (child.nodeType == 8) {
    console.log(child.textContent);
    out.innerHTML += ' <br>  ' + child.textContent;
  }
}

https://codepen.io/delphinpro/pen/oweQqg?editors=1010

<div class="filters">
  <button class="filter" data-filter="isSport">Sport</button>
  <button class="filter" data-filter="isFood">Food</button>
  <button class="filter" data-filter="isWears">Wears</button>
</div>
<div class="wrapper">
  <div class="link link_visible isSport">SPORT</div>
  <div class="link link_visible isSport">SPORT</div>
  <div class="link link_visible isSport">SPORT</div>
  <div class="link link_visible isFood">FOOD</div>
  <div class="link link_visible isFood">FOOD</div>
  <div class="link link_visible isFood">FOOD</div>
  <div class="link link_visible isWears">WEARS</div>
  <div class="link link_visible isWears">WEARS</div>
  <div class="link link_visible isWears">WEARS</div>
</div>

let filters = document.querySelector('.filters');
let filterButtons = filters.querySelectorAll('.filter');
let wrapper = document.querySelector('.wrapper');
let links = wrapper.querySelectorAll('.link');

filters.addEventListener('click', e => {
  if (e.target.dataset.filter) {

    if (e.target.classList.contains('filter_active')) {
      
      e.target.classList.remove('filter_active');
      links.forEach(item => item.classList.add('link_visible'));
    
    } else {
    
      filterButtons.forEach(btn => btn.classList.remove('filter_active'));
      e.target.classList.add('filter_active');

      links.forEach(item => {
        item.classList.toggle(
          'link_visible',
          item.classList.contains(e.target.dataset.filter)
        );
      });

    }
  }
});

https://unicode-table.com/ru/200B/

php.net/debug_backtrace

Промис может выполниться быстрее. Это верно.
Но и then выполнится обязательно.

Можете сами убедиться, запустив код

var promise = new Promise(function(resolve, reject) {
  console.log('I\'m promise');
  resolve('resolve');
});

for (var i=0; i<10000; i++) {
  console.log(1);
}

promise.then( function (result) {
  console.log(result);
  return 'f1';
});

promise.then( function (result) {
  console.log(result);
  return 'f2';
});

Консольный вывод

I'm promise
(10000 раз) 1
resolve
resolve

Проще всего сделать SVG фигуру.
Почему все забывают про такой мощный и хорошо поддерживаемый инструмент? =)

https://codepen.io/delphinpro/pen/EXWexm

$('.nav').find('.active').closest('ul').show();
https://jsfiddle.net/DelphinPRO/gLL51r2p/1/

посчитали высоту страницы (hp), высоту окна (hw)
получили максимальный скролл smax = hp - hw и минимальный smin = 0
знаем начальный (hmax) и конечный (hmin) размеры целевого элемента
получаем текущую величину скролла (s)
вычисляем диапазоны изменений

ds = smax - smin = smax
dh = hmax - hmin

отсюда вытекает что

s / ds = h / dh , где h - приращение высоты целевого элемента

=>

h = hmax - (dh * s) / ds

Если нужно увеличивать элемент, меняем последнюю формулу
h = (dh * s) / ds + hmin

Итоговый код (подробный)

var element = document.getElementById('d');
var hp   = document.body.scrollHeight,
    hw   = window.innerHeight,
    smax = hp - hw,
    smin = 0,
    hmin = 100,
    hmax = 300,
    ds   = smax - smin,
    dh   = hmax - hmin;

window.addEventListener('scroll', function () {
    var s = window.pageYOffset; // current scrollTop
    var h = hmax - (dh * s) / ds;

    element.style.height = h + 'px';
});

Сокращенный

var element = document.getElementById('d');
var hmin = 100, 
    hmax = 300;

window.addEventListener('scroll', function () {
    var s = window.pageYOffset; // current scrollTop
    var h = hmax - ((hmax - hmin) * s) / (document.body.scrollHeight - window.innerHeight);

    element.style.height = h + 'px';
});

И демо на фиддле