Дима Паутов

https://introjs.com/ - пару раз приходилось делать туториал на vue, юзал эту библотеку.

Создаёте компонент, кладёте его поверх приложения, например, в app.vue, описываете в нём шаги и селекторы к элементам.

Есть готовый компонент с intro.js под капотом, но его я не юзал https://github.com/alex-oleshkevich/vue-introjs

Какие технологии использовать для реалтайма?

nodejs + socket.io хороший выбор, но сокеты и на php написать можно))) Зачем тут нода, раз весь бекенд на php? Поднял свой сокет сервер на php и всё, общайся с фронтом, обновляй и принимай данные.

Если всё же добавить ноду, то:

но как посылать данные из PHP в ноду?

Точно так же, как и все запросы, слать данные на определённый адрес.

Сделаете у ноды апишку с нужным адресом и пускай php шлёт на этот адрес данные, вроде де же всё просто, не?
Типа localhost:3000/api/data - на такой адрес php будет слать данные в ноду, а нода уже всё обработает и что-то сделает

p исполнится через 5 секунда, а then - это то, что будет после 5 секунд. Если вы хотите, что бы все then были через 5 секунд, то then должен возвращать также промис. А у вас then ничего не возвращает, а просто показывает alert. Оберните вызов alert в промисы с таймером и тогда будет счастье

Можно, а почему вы решили что нет? Гриды и флексы призваны решать немного разные вещи

jQuery отличный инструмент и я не перестану об этом говорить. Кто бы там не хейтил, jQuery говно, юзайте нативный js, он уже всё может и т.п(чаще всего - это молодёж, которая пишет на react или vue, angular!!! Ясен хер там не нужен jquery). Дайте этим людям написать одинаковые проекты, что бы 1 писал на ваниле, а другой на jquery, я посмотрю на те решения, что были придуманы на ваниле, когда в jquery это решается 1м методом. Поверьте, врятли результат можно будет сопоставить. Не просто же так на крутых и новомодных проектах все юзают транспиляторы для того, что бы новый новый синтаксис и фичи перевести в код старого формата!!! Потому что веб не готов ещё в полной мере юзать все новшества, что приходят в js.

Ребята из бутстрап тоже пошли вперёд планеты всей и переписывают свой фреймворк на нативный js. Несколько лет уже переписывают и были статьи, как же они охерели, что всё не так просто, как кажется)))

Всё что jquery и делает так это работа с DOM и ajax по сути своей, всё остальное - это мелочи по большей части не использующиеся. jQuery был и остаётся пока ещё, при условие всяких там ES10-20-40 фаворитом при создании обычных сайтиков, просто тупо он решает множество вопросов кроссбраузерности и его работа с DOM в разы удобнее нативной.

Да, он не предназначен для прокладывания или создания как-то крутой архитектуры и создания сайтов на по типу SPA. Он не для этого создан и не эти задачи решает. Используя его для подобных вещей вы в полной мере закопаете себя в куче известной субстанции.

Насчёт быстродействия - я никогда не замечал жутчайших лагов или прочих тормозов при использовании jquery.
Любая массивная работа с DOM по историческим причинам накладна для браузера. Но для того, что бы кликать и показывать окошки, скрывать\показывать блоки, отправлять формочки, то jQuery делает это без каких либо проблем и без всяких лагов.

Для массивной работы с DOM, обновлением контента через ajax или работы с огромными массивами данных на стороне фронта лучше использовать специальные фреймворки на по типу react, vue и т.п.

На фрилансе, при создании сайтиков я юзал и буду пока что юзать jquery как решение, которое сразу же отметает кучу проблем.

Учитесь определять объёмы и целесообразность использования тех или иных библиотек для ваших задач.
Если вам нужно лишь сделать пару кликов на кнопки что бы показать красивое окошко, то jquery не обязательно юзать.

Так что ли? jsfiddle.net/agwjnLu7

В вашем коде
let scrollTop = body.scrollHeight;
имеет область видимости внутри обработчика события и за его пределами такой переменной нет.
Делайте так:

body.addEventListener('scroll', () => { 
    let scrollTop = body.scrollHeight;
    console.log(scrollTop);

let headerWrapper = document.querySelector('.header-wrapper');
console.log(headerWrapper);

if(scrollTop >= 100){
    headerWrapper.classList.add('hide');
}else{    
    headerWrapper.classList.remove('hide');
}
});