Сергей delphinpro

// Для главной страницы
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';
});

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

Когда вы вызываете setColor, у вас выполняются только две строки кода

gameColor = clr; // Меняем черный на зеленый
сonsole.log("After: "+gameColor); // After: green

Где работа с канвой? Почему она должна поменяться?

App.js

var game = new GameWindow(500,500, "canv"); // Функции-конструкторы принято именовать с большой буквы
game.setColor("green"); // Присваиваем зеленый цвет

Game.js

function GameWindow(width, height, id){

  document.write("<canvas width="+width+" height="+height+" id="+id+"></canvas>"); // пиздец, конечно, ну да ладно =)

  this.canvas = document.getElementById(id);
  this.width  = width;
  this.height = height;
  this.color  = "black"; // initial color
  this.ctx    = this.canvas.getContext("2d");

  console.log("Before: " + this.color);

  this.fillCanvas();
}

GameWindow.prototype.fillCanvas = function(){
    this.ctx.fillStyle = this.color;
    this.ctx.fillRect(0,0, this.width, this.height);
}

GameWindow.prototype.setColor = function(color){
    console.log("After: " + color); // After: green
    this.color = color;  // Меняем черный на зеленый
    this.fillCanvas();
}

Это марджин от .entry-summary
Есть такой баг.
Пофиксите слопывание марджинов у верхнего блока любым способом

Элементы уровня блок, не могут находится внутри параграфа. Посмотри в девтуле - там должно быть видно, что параграфа стало два в DOM дереве, до и после.
Это если по простому.
В современной спецификации немного более замороченные правила и типов элементов поболее, но суть не меняется - нельзя.

Как открываешь, так и закрывать надо
https://jsfiddle.net/DelphinPRO/cpss55r1/5/

Array.prototype.map()

let arr = createArr();
let newArr = arr.map(val => val + 5);

Ну давайте попробую ответить на часть ваших вопросов )

Начнем с главного

Как их [frontend и backend] вообще связывать?

Бэкенд - это то, что работает на сервере, фронтенд - то, что работает и отображается в браузере. Эти вещи разнесены в пространстве и времени. Общаются они между собой по протоколу http. Браузер отправляет запрос, сервер его получает, обрабатывает и выдает ответ браузеру. Тут вроде бы все должно быть понятно? Запрос-ответ в простом текстовом формате (http - hyper text transfer portocol). Вам этот протокол зубрить не нужно, браузер все делает сам. Просто для понимания.

Как делать backend?

Это просто программа на каком-то языке. Чаще всего php. Подавляющее большинство шаред-хостингов предоставляют вам именно php. Самый низкий порог вхождения у php. Вот и начинайте с php. Пусть говорят, что он "умирает", что php гавно, и т.д. Зато на нем можно в максимально короткие сроки запустить сайт человеку никогда этого не делавшего.

Как выбирать хостинг

Хостинг выбирают под сайт. Средне-статистический говносайтик (коих большинство в интернете) вполне себе нормально уживутся на дешевом шареде за 200-300 р/мес.
Т.е. идете к любому хостинг-провайдеру и покупаете у него один из тарифов. Многие предлагают покупку и привязку домена, зачастую со скидкой. Вообще ничего настраивать не надо.

и как вообще выглядит "загрузка" сайта на хостинг?

У хостера вы получите данные для подключения к вашему серверу по (s)ftp/ssh, параметры доступа к базе данных и т.п.
После того, как напишете свой сайт у себя на компьютере, вы просто откроете ftp менеджер и скопируете файлы в папку на сервере хостера.

Какие технологии использовать?

Вот тут интересно =) Технологий море. Океан. Для бекенда, для фронта, для разработки, для отладки, для тестирования, для деплоя... Нужны ли они все вам?
Думаю на первом этапе не стоит зарываться и делать каждую мелочь по фен-шую. Закопаетесь с головой и не вылезете потом. Начинайте с самого простого - php на бекенде, jQuery на фронте, и простейший деплой по (s)ftp. Единственное, с чем стоит определиться сразу - это основа сайта. Будет это какая-то CMS или фреймворк - неважно. Лишь бы не самописное УГ.
И контроль версий. Сразу осваивайте git.
Остальное тлен. Потом приложится, когда будете получше во всем разбираться.

Не нужно изменять стили всех ссылок. Всегда старайтесь управлять визуальным представлением через css классы. в данном случае достаточно переключать какой-то класс у самого меню (в примере - scrolled). И, соответственно, нужно описать в css стили ссылок без этого класса, и с ним. Всё просто.
https://codepen.io/delphinpro/pen/jwqNpM

@include big(1, 2, $d: 4);

$('#ddmenu li').hover( // обрабатываем событие :hover
  // В this у нас будет элемент li

  // Начинайте читать со второй функции, будет понятнее

  // функия выполнится при наведении мыши
  function () {
    // Достать из data-атрибута* ссылку на таймер и очистить его
    // Таким образом, если мы увели мышку с элемента, и тут же 
    // сразу навели обратно, не будет моргания выпадашки
    clearTimeout($.data(this,'timer'));
    // Выбираем ul внутри наведенного li
    // Останавливаем анимации, если они не успели закончится
    // И начинаем новую анимацию slideDown (показываем выпадашку)
    $('ul',this).stop(true,true).slideDown(200);
  },

  // функия выполнится при уходе мыши
  function () {
    // В this (элемент li) в data-атрибут* под именем timer запишем 
    // результат функции setTimeout (ссылка на таймер)
    $.data(this,'timer', setTimeout(
      // Proxy "протаскивает" контекст this внутрь функции
      $.proxy(
        function() { // Функция, внутрь которой пробросится контекст
            // Благодаря прокси здесь this по-прежнему указывает на li
            // Получается мы выбираем ul внутри наведенного li
            // Останавливаем анимации, если они не успели закончится
            // И начинаем новую анимацию slideUp (скрываем выпадашку, видимо)
            $('ul',this).stop(true,true).slideUp(200);
        },
        this // пробрасываемый контекст - наведенный элемент
      ),
      100 // таймаут, через 0.1 сек после ухода мыши выполнится функция закрытия
    ));
  }

);

* Не совсем верно. Данные пишутся не в data-атрибут. jQuery использует собственное хранилище данных. но сути это особо не меняет, а для понимания легче.

Почему не прерывает? Вангую, что там только три алерта, а не девять.

stop: for (var i = 0; i < arr.length; i++) {
    for (var n = 0; n < arr[i].length; n++) {

        if (n == 0) {
            alert(i);
            break stop;
        }

    }
}