Сергей delphinpro

Во-первых, использовать нужно нижний регистр
Во-вторых, доставать нужно из dataset

<div id="b" data-author-name="ivan">
…
</div>

var name = b.dataset.authorName;
alert(name);

Нужен vuetify - возьмите его =))
Сами соберите себе стили и используйте.
https://github.com/vuetifyjs/vuetify/tree/dev/src/...

Это всего лишь функция. Просто добавьте ее вызов

$(document).on('click', '.box', function(event) {
        yaCounterXXX.reachGoal('press-me'); 
        $('.box').addClass('active');
        ...

npm install -D gulp-changed

const changed = require('gulp-changed');

return gulp.src(['./src'])
  .pipe(changed('./dist'))
  .pipe(imagesOptimize( … ))
  .pipe(gulp.dest('./dist'));

Нет, так не выйдет. Причину вы сами озвучили.
Я иногда использую такой трюк: Адаптация до какого-то не самого маленького размера, а дальше скейлинг через вьюпорт.
Допустим делаем максимум планшетную версию до 600 пикс, а в телефонах показываем ее уменьшенную (масштабированную) версию
Для это просто вставляем в head простой код:

<script>
    (function() {
      var minWidth    = 600;
      var width       = screen.width;
      var oldViewport = document.querySelector('meta[name="viewport"]');
      var viewport    = document.createElement('meta');
      viewport.setAttribute('name', 'viewport');
      viewport.setAttribute('content', 'width='+(width<=minWidth?minWidth:'device-width')+'');
      document.head.replaceChild(viewport, oldViewport);
    })();
</script>

$("form").submit(function(event) {
  event.preventDefault();
  ...
});

Это очень сложно

почему абс. позиционированные блоки порождают отступ снизу? Ведь они же не в потоке?
Надеюсь кто-нибудь объяснить мне почему так происходит.

А куда же им деться?
Причина очевидна — блок растягивает страницу настолько, чтобы вместиться в неё. И неважно, абсолютный он, или нет.

Ведь они же не в потоке?

Ну и что? Ну вынули элемент из потока, со страницы-то он никуда не делся.

---
Простое решение:
дать выпадашкам position:fixed а при ховере - absolute
Побочный эффект — скролл страницы будет проявляться только при открытом меню, если оно не вместится.
Еще простое решение (частный случай):
Для последнего уровня задать максимальную высоту и oveflow:auto
Минусы — годится только для последнего уровня, потому что его границы уже ничего не вылезет из-за overflow

Все остальные решения требуют вмешательства javascript или серьёзной переработки принципа показа подменюшек.

Спецификацию почитайте!
У инпутов нет псевдо элементов.
То, что они есть в некоторых браузерах — недокументированная возможность, не стоит использовать.

По теме: обычно таким образом стилизуется label/span или его псевдоэлемент.

<input>
<span></span>

input:checked + span {}
или (по ситуации)
input:checked ~ span {}

Ну а стандартный просто скрывается (display:none;)

В чем отличия Object.prototype.method и Object.method?

Object.method — это методы конструктора Object. Ну вроде как статические методы в php, если провести аналогию.
Object.prototype.method — это методы экземпляров Object и его потомков.

И не могу понять: зачем нам prototype? Ведь по сути нам просто нужно получить функцию и задать контекст, почему же тогда работает только с prototype?

Потому что данная функция определена именно в прототипе.

Тут всё довольно просто, без заморочек.