SagePtr

Удобный доступ через массив dataset.
Да и аттрибуты через data- гарантируют то, что браузер не будет их воспринимать как-то по-особенному и разработчик вправе сам вкладывать в них смысл, не боясь ничего поломать (если аттрибуты с таким же именем будут что-то значить для браузера).

Посмотреть, что выполняется в функции YandexMapRoute, и сделать то же самое, но без вызова функции.

С innerHTML есть побочные эффекты - например, старые элементы, какие там были, будут пересозданы в дереве DOM и они могут потерять то, что было назначено им не через HTML-код документа или изменено в процессе пользователем. Ну и также у textContent преимущество в том, что не нужно беспокоиться об XSS (если злоумышленник загонит туда HTML-тэги).

Кстати, есть ещё один метод - insertAdjacentHTML (он сочетает в себе простоту innerHTML, но не передраконивает предыдущее содержимое)

Если делаете переключатель между тремя темами оформления, то проще сделать так:
CSS:

/* общие для всех тем */
.navigation { /* style */ }
.sect-one { /* style */ }
.project-title { /* style */ }
/* конкретные для темы evil вдобавок к общим */
body.theme-evil .navigation { /* style */ }
body.theme-evil .sect-one { /* style */ }
body.theme-evil .project-title { /* style */ }
/* конкретные для темы hacker вдобавок к общим */
body.theme-hacker .navigation { /* style */ }
body.theme-hacker .sect-one { /* style */ }
body.theme-hacker .project-title { /* style */ }
/* ..... */

Тогда JS вообще легко уменьшится до нескольких строк:

$(document).ready(function() {
  var themes = ['evil', 'hacker', 'basic'];
  var oldTheme = 'basic';
  themes.forEach(function(theme) {
    $('#' + theme).click(function() {
      $('body').removeClass('theme-' + oldTheme);
      $('body').addClass('theme-' + theme);
      oldTheme = theme;
    });
  });
});

Могу словами описать алгоритм построения изображения:
1) Вычисляем ширину боковой полосы ((итоговая ширина - исходная ширина) / 2)
2) Создаём временное изображение шириной с боковую полосу, но на n пикселей шире (в зависимости от силы размытия)
3) Копируем во временное изображение левую часть картинки (втупую функцией imagecopy), выровняв её по левому краю.
4) Размываем функцией imagefilter, силу размытия подбирайте сами на свой художественный вкус.
5) Создаём конечное изображение
6) Копируем наше размытое изображение в левую часть конечного изображения
7) Во временное изображение копируем правую часть исходного изображения с выравниванием по правому краю
8) Повторяем размытие для него
9) Копируем в конечное изображение по правому краю
10) Напоследок - копируем исходное изображение в конечное изображение по центру (левая координата = ((конечная ширина - исходная ширина) / 2)
11) Сохраняем изображение и освобождаем память (впрочем, PHP сам освободит)

Один, потому что когда мы делаем appendChild какого-нибудь уже существующего элемента в дереве DOM, то этот элемент исчезает из предыдущего узла (происходит перемещение, а не копирование).
В итоге первый раз элемент с id="p" (потому как если обратиться к необъявленной переменной в режиме без "use strict" - он сперва проверит наличие нужного поля в объекте window, а если обратиться к неизвестному полю объекта window - он вернёт элемент с таким id, если он есть) будет помещён внутрь элемента с id="div". Второй раз - этот элемент будет снова туда помещён, но из старого места он будет убран - то есть, из элемента div снова переместится в конец его же.
Вот наглядный пример с пятью кнопками: https://codepen.io/anon/pen/eLooRm (при нажатии на кнопку - она перемещается вниз, при этом никакого копирования не происходит, просто перенос)

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

Потому что setTimeout и console.log не асинхронные. Вернее, setTimeout - асинхронный, но не через механизм async/await (сахар для Promise), а через колбэк, передающийся первым параметром (потому чтобы использовать его через await - нужно будет завернуть его в функцию, возвращающую promise)

Как-то так (в виде однострочника):

const f = (a, sum) => a.reduce((r, x, i) => r.concat(a.slice(i+1).filter(y => x + y == sum).map(y => [x, y])), [])

Но для больших объёмов данных это вряд ли будет эффективно, скорее всего, самое обычное решение с двумя вложенными циклами будет работать шустрее и менее затратно по памяти, чем в цикле гонять массив через slice/filter/map. В лоб это как-то так:

const f = (a, sum) => {
  const l = a.length;
  let r = [];
  for (let i = 0; i < l-1; i++)
    for (let j = i+1; j < l; j++)
      if (a[i] + a[j] == sum)
        r.push([a[i], a[j]]);
  return r;
}