Александр Медведев

На learn.javascript, например, неплохо написали:

Стрелка => ничего не привязывает. У функции просто нет this.
При получении значения this – оно, как обычная переменная, берётся из внешнего лексического окружения.

В вашем примере с литералом объекта можно добавить для понимания:

const obj = {
  w() {
    console.log('w', this);
  },
  x: function () {
    console.log('x', this);
  },
  y: this,
  z: () => {
    console.log('z', this);
  },
};

obj.w(); // obj
obj.x(); // obj
console.log('y', obj.y); // Window
obj.z(); // Window

Запись литерала объекта не создаёт свой контекст: на момент записи this тот же, что и снаружи:

const a = this; // Window
const obj = {
  b: this, // тоже Window 
}

a === obj.b // true

Сперва нашёл .wslconfig, там уменьшил количество ресурсов, вроде стало немного лучше, а потом случайно выключил WSL2 в настройках Docker и заметил что нагрузка снизилась.
Потом ещё поэкспериментировал и составил список. Потому что для слабых устройств это может быть критично.

- Использовать Hyper-V вместо WSL2. Это происходит само по себе если в настройках отключить использование WSL2.

- Отключить отправку анонимной статистики.

- Отключить автоматическую проверку и скачивание обновлений.

- На Hyper-V Docker практически не грузит систему если его запускать один раз, если его закрыть и открыть заново он начинает грузить. После запуска контейнеров можно убить в диспетчере задач процесс Docker который нагружает CPU. Без того процесса всё продолжило работать нормально и ничего не закрылось. Причины такого поведения не ясны.

- Настроить ресурсы выделяемые для Hyper-V на минимум, или увеличить если это нужно для содержимого контейнера. Но приложениям на NodeJS хватает и минимум ресурсов. Для WLS2 ресурсы настраиваются в папке пользователя Windows в файле .wslconfig, WLS2 грузит систему сильнее и по ощущениям работает медленнее не смотря на то что в настройках докера написано о том что это более производительное решение.

- Благодаря этим действиям Docker начинает работать быстрее, почти не потребляет CPU и RAM, и это хорошо. Тестировалось с контейнерами где была база данных и бекенд на NodeJS.

Всё что здесь описано личный опыт, Docker Desktop был версии 4.7.0, не факт что ваш опыт будет совпадать с моим.

нужно создать 6 блоков с разными цветами

:style="{ color: bgColor }"

Цветами ЧЕГО? Свойство color - это цвет текста, никакого текстового содержимого в блоках нет.

Делаю как в документации

v-for="(index, bgColor) in colorArray"

Ну конечно, как в документации. Там ведь тоже элемент массива и его индекс местами перепутаны. Или всё-таки нет?

* деанонимизация, как минимум сайт узнает ваш ip адрес (а из него примерные географические координаты), очень часто об этом забывают пользователи telegram и других анонимных чатов
* спам через уведомления, сайты запрашивают разрешение на прием уведомлений (иногда циклически, пока не нажмешь да) и через некоторое время у вас будут всплывающие окна с картинками (реклама)
* атака уязвимых веб сервисов где вы авторизованы - click jacking (вслепую заставлять нажимать кнопки на авторизованном сайте, рисуя его со 100% прозрачностью в iframe, пододвигая под курсор пользователя), cross site scripting (выполнять действия на сайтах вызывая напрямую там запросы)
* есть опасность доступа к буферу обмена, дело в том что по стандарту, браузер не имеет прямого доступа к буферу, пока пользователь не совершит действие на сайте (клик мышкой), заставить пользователя это сделать не сложно, а содержимое буфера будет у злонамеренного сайта, а что там у вас в буфере бывает - иногда очень интересно
* фишинг - подсовывать визуальную копию других сервисов, требовать авторизацию и таким образом выуживать логин пароль
* многие люди разрешают (поведение браузеров по умолчанию) автоматическую загрузку файлов в каталог загрузки, злонамеренный сайт может подсунуть туда легитимное приложение, зараженное трояном, в надежде что пользователь когда-нибудь запустит его, увидев в папке загрузки (там всегда бардак и никто не запоминает откуда что скачали), на самом деле это одно из самых опасных действий, так как переводит операции из браузерной песочницы в операционную систему, а там уязвимости опаснее
...

ref указанный так указывает на Proxy а не на элемент. Как это исправить?

Никак не исправить.

Да это и не нужно. За этим Proxy скрывается ссылка на экземпляр компонента, а у экземпляра компонента в качестве одного из свойств присутствует ссылка на элемент.

Стрелочные функции использовать надо

Нет. Используйте пользовательские свойства.

.wrapper {
  --gap: 10vmin;
}

.children {
  margin: var(--gap);
}

<div class="wrapper">
  <div class="children">
    <!-- Применится margin: 10vmin -->
  </div>
</div>

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

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

А ты для начала придумай синтаксис для этого, который бы не вступал в прямой кофликт с JS и при этом был интуитивен.)
Вот тут на тему много копий сломано, но, ИМХО, нет нормальных достойных релиза вариантов.)

Route::get('/system/settings/roles/{id}' срабатывает. Поменяйте местами