Ivan Bogachev

Попробуйте дождаться события loadedmetadata у видео, возможно они просто не успевают подгрузиться к моменту исполнения скрипта.

Вы много раз используете такие штуки, как use и clip-path, указывая там id елементов. Но сами id на странице не уникальны. Вот и ломается все. Используйте уникальные id для элементов.

Есть такая штука, как gulp-tap, с ее помощью можно решить вашу задачу.

А в целом - содержимое файлов можно получать вне зависимости от сборщиков и таск-раннеров с помощью fs.readFile или fs.readFileSync (пример).

с помощью css

Прохожу learn.javascript.ru и в конце даётся всего 2-3 примера, которые нужно решить. Их успешно решаю, но хочется прям попотеть. Кто, что посоветует?

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

Библиотека panolens.js хочет иметь конкретную версию three.js, которая прописана у нее в зависимостях (на данный момент 0.105.2), а у вас используется другая версия. Замените three.js в вашем проекте на версию 0.105.2 - npm хранит старые пакеты, так что с этим проблем быть не должно.

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

Эта штука нынче затмила по популярности particles.js. Постоянно все о ней спрашивают, в том числе и на тостере:
Можно ли использовать чужой js код?
Как правильно вытащить код? с этой страницы...

Задача разделяется на две:
1. Анимировать саму линию
2. Перемещать огонь по ней

Под первую задачу так и напрашивается SVG (статья про пунктирные вау-эффекты). Ну а решение второй вытекает из первой, достаточно загуглить "перемещение объекта по path" или еще что-то в этом духе. Получаем что-то такое (код немного странен, я другой пример перевернул вверх дном, но идея должна быть понятна):


Остается только приделать монитор нарисовать огонь, но это уже другой вопрос.

Если есть похожие примеры или идеи... Посмотреть как работает...

На ваш вопрос уже ответили, но добавлю от себя еще один пример для изучения. Принцип тот же, но используется SVG. Часто это может быть удобнее, чем анимирование html-элементов, особенно если нужны какие-то еще эффекты, так что полезно знать, что и так тоже можно:

Ну а если таких элементов будет слишком много, то имеет смысл все рисовать на canvas. Не стоит забывать о производительности!

Да, симпатичная штука. Как говорится, ябзаверстал. Да и показаться на первой странице CodePen с такой демкой тоже будет не лишним. Так что вот вам концепт для изучения по мотивам вашего видео:

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

Как вы прокачивались?

Много-много экспериментов с целью не "научиться решать типовые задачи", а скорее "поиграть с инструментами и посмотреть, что будет". Такой подход дает более полную картину происходящего. Ну и гугл/документации/статьи по мере необходимости.

На что стоит сделать упор в обучении именно верстки и малого количества js-а?

Методы зависят от наличия времени и изначального уровня обучаемых. В целом для развития понимания CSS полезно "рисовать" на нем. Грубо говоря один автопортрет или зверушка, сделанная самостоятельно от начала и до конца, даст опыта как десяток лендингов. В таких песочницах концентрация хитрых задач на верстку в разы выше, чем на обычных сайтах, и обучение идет быстрее. Ну и просто прикольные штуки получаются, можно внести элементы игры с плюшками за успехи. В последние годы эта тема стала очень популярной на CodePen в виде ежедневных разминок для ума.

Как обучали людей? У меня нет опыта в обучении людей

По поводу методологий и хороших практик - нужно объяснять, отвечая в первую очередь на вопрос "почему". Тупое давление авторитетом (я прав - вы нет, мое решение хорошее - ваше нет) ни к чему не приведет. С вопросом "как" - отправлять к документации, чтобы читали сами и заодно захватывали что-то еще по дороге. Если все разжевывать - не научатся работать самостоятельно. Полезно научить их задавать вопросы. Если видите, что совсем не получается - тогда уже можно подсказать и показать. По возможности нужно автоматизировать проверку действий стажеров, чтобы они сразу видели свои косяки, не дожидаясь, пока придет наставник. Я тут как раз на днях подборку полезностей делал, там и для этого есть инструменты.

Коммуникацию нужно наладить в обязательном порядке, чтобы все имели возможность спросить и не боялись это делать. Тут больше про психологию вопрос - нужно не только определить время и способ общения, чтобы и вам не мешали, и могли оперативно получить ответ, но и обязательно следить за своим языком, чтобы не быть "слишком токсичным" (про это все постоянно забывают). И помните - все ошибаются, ваши ошибки должны становиться поучительными примерами, не нужно их скрывать или стыдиться. Полезно в конце недели делать собрание "только для стажеров" и разбирать, что произошло интересного за неделю, чтобы они видели полную картину, учились на ошибках друг друга и распространяли опыт уже между собой - вы объяснили что-то одному, он в конце недели - остальным (а когда объясняешь - сам лучше понимаешь). Как вариант все вопросы от них к вам можно организовать в отдельном таск-трекере, чтобы ничего не терялось (как в бесконечных чатах) и можно было отсылать вновь прибывших к уже готовым ответам.

function compareCalories(colaA, colaB) {
    if (colaA.name > colaB.name) {
        return 1;
    } else if (colaA.name === colaB.name) {
        // . . .

Может тут нужно сравнивать calories, а не name у продуктов?

Большинство верстальщиков не умеют работать с канвасом, клепают себе однотипные сайтики на бутстрапе и довольны жизнью. На этом вопрос можно закрыть. Но иногда возникают задачи вроде трехмерных презентаций товаров или каких-нибудь простых конструкторов - тут уже минимальный опыт с three.js или аналогами будет полезен. Помнить все не нужно, но общее представление должно быть.

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

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

З.Ы.: Не стоит себя ограничивать в знаниях. Для профессионала лучше, когда знание есть и не нужно, чем когда нужно, а его и не было никогда.

Нормально ли использовать сейчас эти технологии

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

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

Так вот, можно ли его использовать в своих проектах?

Вообще исходники этой штуки лежат на гитхабе, лицензия - MIT. Так что да, используйте на здоровье.

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

class MySlider {
    constructor(element, options) {
        const manager = new Hammer.Manager(element);
        
        manager.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
        manager.on('pan', (e) => {
            const percentage = 100 / options.numberOfSlides * e.deltaX / window.innerWidth;
            
            element.style.transform = `translateX(${percentage}%)`;
        });
    }
}

[].forEach.call(document.querySelectorAll('.slider-wrapper'), (element) => {
    const slider = new MySlider(element, { numberOfSlides: 2 });
});

Затем, чтобы собрать все в одном месте, упростить отладку и избавиться от повторяющегося кода, имеет смысл организовать мини-фабрику по производству компонентов. Что-то вроде такого. Таким образом вы не только решите свою задачу, но и упростите жизнь себе и тем, кто будет ваш код потом поддерживать.

Если не смотреть на то, как это там реализовано, а подумать своей головой, то я бы сказал, что это в разы проще сделать с помощью SVG. Раскраска - это по сути векторная картинка с большим количеством замкнутых контуров (элементы path), которые еще на этапе рисования объединены в группы (элемент g), которые потом будут краситься в один цвет, клик на группу легко делается стандартным addEventListener('click' ..., а заливка - это атрибут fill с цветом. Ну а выбор карандашей - это стандартная карусель, только не с картинками, а с кучей кружков, на которые можно кликать и выбирать цвет для заливки.