Иван Вишневский

Я был неправ.

На самом деле, решение простое. Разработчики использовали свойство event'а isTrusted, которое говорит, было событие вызвано дейсвиями пользователя (тогда будет true), или нет (будет false). Они проверяют это значение.

P.S: бэк тут абсолютно ни при чём.

Всё правильно, на первых двух, например, фон - просто залит цветом, а картинки расположить с position: absolute;
Только подстраивать под разные размеры экранов, разумеется.

Вот смотрите. Вы написали полотно кода. Неужели так сложно было сделать пример на jsBin или jsFiddle, чтобы мы сразу увидели, как именно шарик двигается, и что вообще за шарик? Разумеется, можно разобраться в вашем коде, можно и самим залить куда-нибудь, только вряд ли кто-то будет этим заниматься. Пожалуйста, используйте "песочницы" для задач, в которых больше, чем три строки кода.

Всё очень просто. Response.json() возвращает промис, так что вам нужно немного переписать код:

getData();

function getData (){
    fetch(`http://myUrl`,{
        method: 'GET'
    }).then(response => {
        console.log('type ',response.headers.get('Content-Type'));
        console.log('staus ',response.status);
        return response.json
    })
    .then(json => console.log('json', json))

    .catch(error => { 
        console.log('err => ',error)
    })
    
}

Если мы имеем дело со строкой, и не помогают стандартные методы:

const out = (/id="\w*"/).exec(this.tracker.split('\n')[0])[0].replace(/(id="|")/g, '');

Двойные кавычки в JSON'e должны экранироваться двумя обратными слэшами (\\).
JSON.parse('"param":"\\"value\\""')

.main_block{
display: flex;
width: 500px;
heigth: 100px;
}
.inner_block{
flex-grow: 4;
}
.inner_block1{
width: 30%;
height: 100%;
}
.inner_block2{
width: 70%;
height: 100%;
}

1) Отказаться от jQuery. Давно пора бы уже это сделать.
2) classList API
3) ????
4) PROFIT!

Проблема не в том, что способ может быть неактуален, а в том, что Flash сам уже лет 5 как неактуален.

var amount = document.getElementById('timer');

function go(amount) { 
  var clock = setInterval(function() {
    var inner = parseInt(amount.innerHTML);
     amount.innerHTML = inner - 1;
    alert(amount.innerHTML);
  if(amount == 0){
    clearInterval(clock);
  }
  else{
    timer.textContent = amount;
  }
  }, 1000);
}

Ну так проблема? Записывайте в txt-формат. На какую страницу и куда вам нужны лайки? Если совсем мало мест, можно сделать json-файл, заполнять его на сервере через любой серверный язык и подгружать его js-ом при загрузке страницы. Если комментарии или ещё вариант, где нужно много лайков - без базы данных ноги переломаете.

Есть ещё один вариант - innerHTML.
https://codepen.io/forgetable/pen/xdjmvd
В пене можно открыть консоль и посмотреть скорость создания 20000 объектов.
Всегда нужно помнить, что jQuery примерно в два раза медленнее чистого js, и ещё медленнее оптимизированного.

P.S: Добавил метод с прибавлением append'ом разом - не быстрее.

Современный способ по добавлению и удалению классов - classList API.

document.getElementById('intro_btn').onclick = function() {
  document.getElementById('main').classList.add('main--main-bg');
}

Соответственно, на чистом js каждой кнопке даёте id, и присваиваете нужный класс. Если нужно убрать, то classList.remove('название_класса'), если включить/выключить - то toggle()

Контекст - это как раз где this. То, что на скриншотах - область видимости, да. Про замыкания ещё не забыть.
Scope и context.

Тут уже подсказали, но вот пен, мне просто самому интересно стало.
https://codepen.io/forgetable/pen/xdYPRb

Либо взять чужой костыль и тащить кучу лишнего кода, либо знать js :)