Dnebl

https://github.com/dotnet-architecture/eShopOnWeb

тут по сути тебе 2 плагина найти:
1) соединительные линии по типу https://github.com/anseki/leader-line
2) и плагин для перетаскивания по типу https://interactjs.io/

Сокращалка, удобная для indexOf(), который возвращает -1 если не найдено, или индекс от 0 и больше.

Для логики приложения часто бывает нужно узнать только, найдено или нет: т.е. -1 или иное значение. Можно просто сравнивать if (a.indexOf(b) > -1) { /* найдено! */ } но иногда хочется короче.

Битовый оператор НЕ ~ хорош тем, что выделяет -1: только -1 с этим оператором даст 0. Прочие числа дадут какое-то ненулевое значение.

~(-1) === 0

Остаётся привести значение из численного в булево. Для этого два воскл. знака — два логических НЕ.

• для варианта «найдено» из числа от 0 и больше получилось тоже ненулевое число, и !! даст true
  
• для варианта «не найдено» из -1 получится уникальный 0, и !!0 вернёт false
  

Мне в свое время помогла проработка всех шаблонов проектирования из трех источников: "Head First Design Patterns"+refactoring.guru+designpatternsphp.readthedocs.io. Каждый шаблон разбирала и пыталась понять, почему здесь нужен паттерн, а не процедурный код, обернутый в один класс. Еще помогла книга по чистой архитектуре, но она зашла уже после паттернов. Просто важно полностью для себя понять, почему эти подходы до сих пор существуют и находить для себя два-три примера, потому что один-единственный пример для изучения может быть однобоким и даже неправильным.
Также эти книги и темы помогают вылечиться от трудностей решения задач на фреймворках, потому что наконец-то начинаешь видеть всю структуру и взаимодействия модулей и классов, а не просто примеры из документации натягиваешь на бизнес-требования)

SVG + 2 маски, одна пропорционально растягивается, другая непропорционально. Отрицательным margin загнать секции одна на другую.

Это чудесное изобретение гугла называется Scroll anchoring. Чтобы отключить, добавьте в CSS:

body {
  overflow-anchor: none;
}

нет 3d модели предмета

но

модель крутится

Если вы хотите сделать вращение модели, то вам в любом случае нужна либо 3d-модель и отображение ее с помощью WebGL, либо куча картинок с видами на нее со всех сторон с разницей в N градусов и последовательное их показывание пользователю (ну или видео, что по сути - тот же набор картинок). Но тут важно отметить, что обычно такие картинки не рисуют прямо руками, а делают модельку и потом ее рендерят с разных сторон, т.к. это получается быстрее, чем рисовать.

Подход с заранее отрендеренными картинками может показаться избыточным, но на деле он позволяет добиться более реалистичного освещения с бликами, рефлексами и разными материалами вроде стекла или меха, которые можно сделать в 3d в теории, в соответствующих редакторах, но в реальном времени рендерить в браузере не получится из-за проблем с производительностью. Нужно это или нет в вашем случае - решать вам.

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

Необходимо гранулярнее делить на блоки, тогда часть специфичной семантики из названия элемента уедет в новый блок (что укоротит вложенные элементы).

Текстовая часть напрашивается быть независимым блоком, причем, маркированным списком. Например, структура может быть такой:

.advantages-card (&--reversed)
    &__description // текстовая часть
    &__picture

.bullet-list
    &__item
    &__item-heading
    &__item-description

То есть в разметке это будет что-то вроде:

<div class="advantages-card">
  <ul class="bullet-list advantages-card__description">
    <li class="bullet-list__item">
      <header class="bullet-list__item-heading">User Journey</header>
      <p class="bullet-list__item-description">Description long text</p>
    </il>
  </ul>
  <img class="advantages-card__picture" :src="block.imgURL">
</div>

Кроме того, я бы рекомендовал избегать сокращения "description" в "desc", потому что туда идеально укладывается не менее популярный термин "descending".

1) ([1e7]+-1e3+-4e3+-8e3+-1e11) - формируется строка "10000000-1000-4000-8000-100000000000"
2) .replace(/[018]/g,c= - пробегаемся по символам, и с каждым 0, 1 и 8 делаем что-то
3) 15 >> c/4 - 0,1,8 => 15,15,3
4) crypto.getRandomValues(new Uint8Array(1))[0] - случайное число 0..255
5) crypto.getRandomValues(new Uint8Array(1))[0]&15 >> c/4 - побитовое И сужает 0..255 до 0..15 или 0..3 (если с=8)
6) c^crypto.getRandomValues(new Uint8Array(1))[0]&15 >> c/4 - 0 или 1 или 8 XORятся с 5)
7) Что получилось - переводится в HEX и возвращается вместо символа

Сдвиг и XOR ( 3) и 6) ) вероятно нужны для большей энтропии, хотя работает и без этого.

Не надо через стили.
Достаточно вызвать событие resize для window после того, как добавили или удалили класс box--large

document.getElementById('btn').onclick = function() {
        document.getElementById('starmap').classList.add('box--large');
        window.dispatchEvent(new Event('resize'));
};

Отложить загрузку на 5 секунд - выход, но грубоватый (имхо конечно). Я делаю по-другому - оборачиваю код в скролл-ивент + задержка в 1 секунду. То есть, сайт загрузился быстро, и как только пользователь начал скроллить хоть чуть-чуть - секундный таймаут и загрузка дополнительных ресурсов. Гугл доволен, пользователи вообще не замечают задержки:

var fired = false;

window.addEventListener('scroll', () => {
    if (fired === false) {
        fired = true;
        
        setTimeout(() => {
            // Здесь все эти тормознутые трекеры, чаты и прочая ересь,
            // без которой жить не может отдел маркетинга, и которые
            // дико бесят разработчиков, когда тот же маркетинг приходит
            // с вопросом "почему сайт медленно грузится, нам гугл сказал"
        }, 1000)
    }
});

htmlbook.ru/samhtml/yakorya
https://jsfiddle.net/d6rcto7L/

Еще жив. Для небольших и несложных сайтов подойдет. Визитки, каталоги или магазин. Не важно. Главное не пытайтесь делать гипермаркет.
Выигрывает в простоте интеграции вёрстки.

10 лет это 3 класс

Отстаньте лучше от ребёнка. Ему всего лишь 10 лет - какое программирование? Пусть он сначала насладится детством. А уже после - сам начнёт ковыряться в том, что ему понравится

не падать в обморок при виде интерфейса, отличного от винды, и терминала.