Вадим

Для начала для нас важно осознать, что у разных фильтров разная вычислительная сложность. Они не все "плохие". Алгоритмы для brightness, grayscale, hue-rotate и других манипуляций с цветом выполняются за O(1) для каждого пикселя. Т.е. нагрузка на железо растет линейно в зависимости от площади элемента на экране. Это не так страшно. А вот фильтры размытия, blur или drop-shadow, имеют сложность где-то в районе O(R^2). Там есть разные варианты оптимизаций, но в среднем мы говорим именно о квадратичной зависимости от радиуса размытия. И это для каждого пикселя. Именно отсюда мы имеем сильные тормоза при попытке что-то большое размыть на пол экрана. Дохлые видеокарты телефонов и ноутбуков не вывозят. Браузеры не умеют такие вещи переиспользовать, так что это переразмытие происходит снова и снова, и мы имеем что имеем.

При этом фильтры в CSS, в SVG - это все грубо говоря высокоуровневые обертки над одними и теми же универсальными алгоритмами рендеринга. Мы можем в рамках WebGL написать свои шейдеры, которые будут делать то же самое. Обертки разные, но алгоритмы одинаковые. Поэтому замена одной технологии на другую ничего особо не даст в плане производительности. В вопросах оптимизаций нам нужно не по-тупому менять инструменты-обертки, а смотреть в конечные алгоритмы, которые будут задействованы на странице в реальном времени, и по возможности рассчитывать все заранее и переиспользовать.

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

В конфиг настроек добавить:
"editor.stickyScroll.enabled": false

Либо открываем Файл > Настройки > Параметры (CTRL+,), находим Editor>Sticky Scroll: Enabled, убираем галочку:

У flex есть свойство order.
Просто сделай что-то типа:

block:nth-child(odd) block__element {
  order: 2
}

И оно само выстроится с периодичностью.

Поменять кавычки с " на `, которые включают режим шаблонных строк.

Но ващет проще document.querySelectorAll и перебрать уже как массив, без таких извращений.

Как вариант - использование переменной:

$color-base: 64, 126, 201;

.element {
  background-color: rgba($color-base, 1);
}

.element-transparent {
  background-color: rgba($color-base, 0.3);
}

Чуть сложнее:

$color-base: 64, 126, 201;
$alpha-1: 1;
$alpha-2: 0.3;

.element {
  background-color: rgba($color-base, $alpha-1);
}

.element-transparent {
  background-color: rgba($color-base, $alpha-2);
}

получается так, что кнопка добавляется только к последней карточке

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

let panesList = document.querySelectorAll('.pane');
for (let pane of panesList) {
    let button = document.createElement('button');
    button.classList.add('remove-button');
    button.textContent = '[X]';

    pane.append(button);
}

Любой бекенд подойдёт, вне зависимости, пыха это, питон и т.п.

В данных реалиях, у пыхи это laravel, как самый популярный из фреймворков, по моему мнению и мнению знакомых пыхарей.

Берёте laravel, пишите api. Беретё nuxt(2-3), резим SSR, готово.

Никак. Любая составляющая сайта, переданная на сторону клиента, может использоваться и изучаться клиентом как угодно и какими угодно инструментами (кто сказал, что на другой стороне будет браузер?), как в полезном ключе, так и в зловредном.
Краеугольным вопросом безопасности вашего ресурса является не противодействие анализу той части, которая получает клиент, а сделать так, чтобы серверная часть не реагировала на запросы, которые не соответствуют бизнес-логике клиентской части (или считала ошибкой, выводя соответствующее сообщение).
На стороне сервера нужно проверять валидность данных, получаемых от клиента, как по правам доступа (имеет ли право клиент совершать определенное действие), так и по содержанию (данные, приводящие к изменениям, не будут ли приводить к противоречивому состоянию базы?).

Правильно так, как вам удобно.

А ещё, чтобы научиться делать правильно, надо сперва сделать неправильно.

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

Если в реализованном что-то не устраивает, всегда можно оформить вопрос (конечно, сперва погуглив) - вот есть такой-то компонент, решает такую-то задачу, мне в нём не нравится то-то и то-то, какие есть способы сделать лучше?

Когда решите таким образом задач сорок-пятьдесят, начнёт приходить понимание, как делать правильно.

Сделайте плюс не шрифтом, а блоком из горизонтальной и вертикальной линий, потому что у шрифтов полно свойств:

Чему к примеру равна горизонтальная линия вашего шрифтового плюса при размере 35px? Если у вас размер блока 45px, то линия должна быть так же с нечетным размером ровно 1px или 3px, или 5px в любом другом случае (1.2px, 3.6px, 4px) браузер начнет смещать ваш плюс вверх и вниз, что вы и наблюдаете.

Если же блок будет с четным значением, например 44px, тогда, чтобы плюс стал по центру у него должен быть размер 2px,4px и т.д..

Шрифты для такой задачи не подходят, тем более с изменением шрифта изменится и его центр.

Можно ли это написать на голом JavaScript'е

Можно:

var vwWidth = window.innerWidth;

var controller = new ScrollMagic.Controller();

//for horizontal scrolling
var horizontalSlide = new TimelineMax()
  .to(".div2", 0.2,   {x: 0, ease: Power1.easeOut}, )
  .to(".div2", 1,   {x: -vwWidth, ease: Power1.easeOut}, )	
  .to(".div2", 0.2,   {x: -vwWidth, ease: Power1.easeOut}, )
  .to(".div2", 1,   {x: -2*vwWidth, ease: Power1.easeOut}, )
  .to(".div2", 0.2,   {x: -2*vwWidth, ease: Power1.easeOut}, )

new ScrollMagic.Scene({
  triggerElement: ".div2",
  duration: "350%",
  offset: 0,
  triggerHook: -0.02
})
.setPin('.div2')
.setTween(horizontalSlide)
.addTo(controller)

https://codepen.io/vishwakarma02/pen/QxYJQw

console.log(document.styleSheets);
console.log(document.styleSheets[0].cssRules[0].selectorText);

Да всё работает: https://codepen.io/alexey-m-ukolov/pen/RwqGRKj?edi...

В чём-то другом у вас ошибка.

Смотря о каком коде вы говорите. response.json() будет ждать окончания запроса, setCart будет ждать json, setPreloader будет ждать их обоих или падения.
Но если вы что-то напишете вне then, после fetch, оно ничего ждать не будет (если бы так работало, то зачем вообще нужен был бы then?).

Вычисляемые свойства?