Aetae

Вы думали написали слово async и оно само внезапно стало асинхронным? Ничего подобного. У вас всё разлетается на кучу параллельно исполняемых функций, и никто никого не ждёт. Изучайте асинхронность в javascript или используйте синхронные функции(с постфиксом Sync).

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

Так делать нельзя, категорически. Это бессмысленная тяжёлая нагрузка. Ты вызываешь изменения стиля своей функцией, вот из этой функции и производи иные изменения. Тебе не нужны наблюдатели и события для этого.

Потому что объекты в javascript присваиваются по ссылке. Это основы основ.
Делай так:

Employee.prototype = Object.create(User.prototype);

Вот так работает:
Почему не работал до этого, без очистки? А хз, какие-то внутренние особенности хрома.

Правильный ответ: писать код предусматривающий подобные вещи через абстракции. Тебе не надо триггерить события, ты должен при установке значения напрямую вызывать нужные функции. Ты сам знаешь что у тебя в коде происходит и какие функции привязаны к событиям, тебе не нужно ждать событий от браузера.
Полезный ответ: использовать любую библиотеку умеющую в data binding, которая будет заботится о таких вещах за тебя. Мне лично нравится Vue, но есть и множество решений по-проще и по-традиционней.
Плохой ответ: ты можешь добиться этого примерно таким извращением, подменив стандартный сеттер на value:

const valueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(two, 'value', {
  ...valueDescriptor, 
  set(value) {
    valueDescriptor.set.call(this, value);  
    this.dispatchEvent(new Event('input', {
      bubbles: true,
      cancelable: true,
    }));
  } 
})

Во-первых: такая хрень происходит только в хроме, достали со своей монополией.
Происходит это потому, что умный хром считает, что после параграфа должен быть отступ, даже если параграф всего один.
Решение - заменить p на span или выбирать не сам тег, а его содержимое: selectNode -> selectNodeContents.

Чтоб хоть как-то заработало надо вспомнить что width задаётся в неких единицах измерения, а offsetWidth возвращает просто число: border.style.width = link.offsetWidth + 'px';

Чтоб оно менялось при изменении размера можно добавить наблюдатель(нужен ie - использовать полифил):

let link = document.querySelector('#link');
let border = document.querySelector('#border');
new ResizeObserver(() => border.style.width = link.offsetWidth + 'px').observe(link);

Но вообще в 99% случаев масштабирование элементов решается вёрсткой .

а) Не класть контент в #bg.
б) Назначить контенту

onclick = function(event) {
  event.stopPropagation();
}

Ответ на вопрос: document.activeElement.
Ответ на то что подразумевалось в вопросе:

function onInputFocus(){
   console.log(this)
}
var inputs = document.getElementsByTagName('input');
for(var i = inputs.length; i--;) 
  inputs[i].addEventListener('focus', onInputFocus);

или, если нужна поддержка динамически добавленного:

document.addEventListener('focus', function(event){
  var target = event.target;
  if(!target || target.tagName !== 'INPUT') return;
  console.log(target)
}, true)

Проверяй что добавляешь перед push, очевидно.

Не пытаться прочитать свойство '0' у undefined значения, очевидно. В ошибке всё написано.
Смотрите где вы читаете свойство с ключом '0'. Нашли?
Теперь смотрите у какого объекта вы пытаетесь прочесть это свойство. Нашли?
Вот этот объект - отсутствует(undefined). А уж разобраться почему он отсутствует - ваша задача.

let func = eval(userfunc);
func.call(arg);

а лучше:

let func = new Function('return ' + userfunc)();
func.call(arg);

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

let funcs = {
  func1(){console.log('Функция вызвана!!!');};
};
funcs[userfunc].call(arg);

=== точное сравнение с учётом типа. clientWidth - число, '769' - строка, число никогда не равно строке. Уберите кавычки.
Также верным условие будет только если clientWidth точно будет равно числу с правой стороны. Вы уверены, что это именно то, что вам нужно? Возможно стоит использовать >= или <=?

Ну и использовать javascript для таких задач не принято в своременном вэбе. Для этого есть css media queries.

Объект chrome доступен только из расширений. Для клиентского js подмена ресурсов возможна только через манипуляции с кэшем в service-worker.

Лучше всего заюзать функцию sortBy из lodash, которая делает именно это, и не парить мозг. Иначе тебе придётся написать аналог функции lodash get, а там есть свои подводные камни.
Но если примитивно:

function get(value, str) {
  for(const key of str.split('.')) {
    if(value && key in value) value = value[key];
    else return void 0;
  }
  return value;
}
arr.slice().sort((a,b) => get(b,proper) - get(a,proper));

Хз что такое BAS, но вот тебе код на классическом js, который должен работать везде:

var newArray = [];
for(var i = 0; i < list.length; i++) { // list - твой список ссылок
  var link = list[i].href; // если в списке уже строки, а не элементы, то убрать .href
  if(link.indexOf('#') === -1) { // если нет # в строке
    newArray.push('определенный текст' + link.slice(5)); // берём определенный текст и добавляем к нему строку начиная с 5 символа
  }
}

С помощью requestAnimationFrame.
Например(из фреймворка quasar):

function getScrollPosition (scrollTarget) {
  if (scrollTarget === window) {
    return window.pageYOffset || window.scrollY || document.body.scrollTop || 0
  }
  return scrollTarget.scrollTop
}

function setScroll (scrollTarget, offset) {
  if (scrollTarget === window) {
    window.scrollTo(0, offset)
    return
  }
  scrollTarget.scrollTop = offset
}

function animScrollTo (el, to, duration) {
  const pos = getScrollPosition(el)

  if (duration <= 0) {
    if (pos !== to) {
      setScroll(el, to)
    }
    return
  }

  requestAnimationFrame(() => {
    const newPos = pos + (to - pos) / Math.max(16, duration) * 16
    setScroll(el, newPos)
    if (newPos !== to) {
      animScrollTo(el, to, duration - 16)
    }
  })
}

animScrollTo(<элемент-контейнер>, <позиция>, <время на анимацию>)

Позицию якоря вычисляйте сами.)

Ну либо можно поискать готовый пакет в npm, который с гарантией там есть.

Эти картинки отсутствуют на сервере, потому что никто их туда не кладёт. Сервер(webpack devserver) работает не от локальной папки, а от структурированного как описано в конфиге результата сборки. Сделайте build и посмотрите в папку dist: именно так и выглядит структура файлов на сервере.

Вы можете положить эту папку с картинками туда использовав copy-webpack-plugin. Если на сервер эта папка будет класться вручную и в прод. dist она вам не нужна - можете подключать этот плагин только для develpment.
Альтернативно вы можете настроить devserver (используя before/after), чтоб он просто отдавал файлы из этой папки по соответствующему запросу(читая их содержимое вручную средствам node fs).
Главное не забыть потом положить эту папку на сервер руками.