xmoonlight

JS - нужно учить до изучения какого-либо фреймворка.
фреймворк - после того, как будете уметь создавать что-то более сложное, чем простую функцию onclick и то с использованием jquery.

this.parentNode

codepen.io/chriscoyier/pen/41d6e36ac584ee0401064d1...

Нигде. Это только доступно тем, кто хочет изучать и понимать.

jwplayer - лучший из всех.
переформатирование видео в другой формат - ffmpeg или vlc.

Два объекта кросс-связей (для более сложных нужно строить "деревья"):

var sizes = {42: ["Красный", "Синий"], 43:["Зелёный","Синий"]}
var colors = {"Красный": [42], "Синий":[42,43], "Зелёный":[43]}

В конкретно Вашем случае:
Сделайте себе такую табличку:
Название функции => выполняемое действие => Общий вид => Пример(ы) вызова
Затем рассортируйте по тематикам (сгруппируйте).
Как появляется вопрос - сразу смотрите в табличку, находите нужную и применяете.

Такое можно делать даже тем, кто очень хорошо помнит только один язык, но работает сразу с несколькими: это помогает "сводить концы с концами" (в плане подобия функций в разных языках, если что-то нужно подобное сделать на другом).
Язык программирования => Название функции => выполняемое действие => Общий вид => Пример(ы) вызова

это коммент

1. тут
2. методы и сложность сортировок

https://nwjs.io/

Хочу стать настоящим фронтэнд-профи, но курсы и электронные книги не перевариваю. Можете ли посоветовать книжки, которые действительно могут поднять уровень?

Учитесь по официальной документации. Это лучшее, что кто-либо Вам может посоветовать для достижения Вашей цели.

Самый быстрый рендеринг - это минимизированный HTML5 DOM с минимальным минимизированным CSS внутри (т.н., critical.css), без единой строчки JS и подгрузкой всех JS перед закрывающимся тэгом body.
Всё отдаётся от сервера клиенту с кэшированием и в сжатом виде.

Я это делаю на уровне PHP-фреймворка:
1. Изначально - всегда добавляются только те, которые присутствуют в шаблоне на каждой странице.
2. Когда я задействую нужный мне на странице блоковый визуальный модуль (PHP+JS), перед добавлением JS-скрипта в секцию head происходит проверка его существования в ней: возможно другие подобные модули уже запросили этот файл стилей, функцию или библиотеку.
3. На выходе: ТОЛЬКО НУЖНЫЕ ДЛЯ ЭТОЙ СТРАНИЦЫ js-скрипты, css и прочее, в соответствии с добавленными визуальными модулями, необходимость использования которых зависит от того, что должно отображаться на странице и за этим следит фреймворк.

Конкретно, если это делать на клиенте через JS - нужен механизм на JSON-файле с "деревом" зависимостей объектов, обрабатываемых на страницах (URL-ах):
[URL1] => [дерево объектов, с которыми работает js]
...........
[URLN] => [дерево объектов, с которыми работает js]

Здесь нет преобразований.
Это называется: "приведение типов при операции сравнения".
Любой непечатаемый символ, пустой набор или строка с единственным нулём - всегда равны 0, но не равны между собой.
Вкратце, схема предупреждает: никогда не сравнивайте нестрогой проверкой "==" что-либо с нулём. Лучше всегда проверять через "===".