Sashqa

Я бы вообще приготовился к тому, что на новом месте работы (любом) не придется заниматься тем, что нравится, а придется заниматься тем, что скучно, неинтересно, и возможно совсем не по стэку. Примерно, как то так:

на youtube

Нет конечно. Доверяйте официальной документации.

Рекурсия есть:

const sumNested = (data, getVal, key) => Object
  .entries(data instanceof Object ? data : {})
  .reduce((acc, [ k, v ]) => acc + sumNested(v, getVal, k), getVal(key, data));


const numItems = sumNested(obj, (k, v) => (k === 'items' && Array.isArray(v)) ? v.length : 0);

Рекурсии нет:

function sumNested(data, getVal) {
  let result = 0;

  for (const stack = [ [ , data ] ]; stack.length;) {
    const [ k, v ] = stack.pop();
    stack.push(...(v instanceof Object ? Object.entries(v) : []));
    result += getVal(k, v);
  }

  return result;
}

let yellowCard = game.statistics.find(item => item.type === "Yellow Cards") || {};
let attacks = game.statistics.find(item => item.type === "Attacks") || {};
let dangerousAttacks = game.statistics.find(item => item.type === "Dangerous Attacks") || {};

console.log(dangerousAttacks.blabla) // undefined

JSON не может иметь одиночные кавычки, поэтому происходит ошибка при парсинге. Нужно заменить все одиночные кавычки на двойные
Например:

const json = "['1', '2', '3']";
const result = JSON.parse(json.replace(/'/g, '"'))

<div id="images">
  <img src="https://placehold.co/200x200/FF0000/FFFFFF/png">
  <img src="https://placehold.co/200x200/00FF00/000000/png">
  <img src="https://placehold.co/200x200/0000FF/FFFFFF/png">
</div>

#images img {
  transition: transform 0.7s;
}

Зациклить анимацию разворота можно через js:

.rotate {
  transform: rotateY(180deg);
}

const toggleRotate = el => el.classList.toggle('rotate');

document.querySelectorAll('#images img').forEach((n, i) => {
  setTimeout(setInterval, 300 * i, toggleRotate, 2000, n);
});

Или через css:

#images img {
  animation: rotate 4s infinite;
}

#images img:nth-child(1) { animation-delay:   0s; }
#images img:nth-child(2) { animation-delay: 0.3s; }
#images img:nth-child(3) { animation-delay: 0.6s; }

@keyframes rotate {
  0%, 75%, 100% {
    transform: rotateY(0deg);
  }
  25%, 50% {
    transform: rotateY(180deg);
  }
}

Сортируем существующий массив:

messages.sort((a, b) => {
  [ a, b ] = [ a, b ].map(n => sortableLanguages.indexOf(n.language));
  return a === -1 ? 1 : b === -1 ? -1 : a - b;
});

Собираем отсортированный новый:

const sorted = (arr, key) => arr
  .map(n => [ n, key(n) ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);


const order = Object.fromEntries(sortableLanguages.map((n, i) => [ n, i + 1 ]));
const sortedMessages = sorted(messages, n => order[n.language] || Number.MAX_SAFE_INTEGER);

// или

function sorted(arr, order, key) {
  const ordered = new Map(order.map(n => [ n, [] ]));
  const unordered = [];

  arr.forEach(n => (ordered.get(key(n)) || unordered).push(n));

  return [].concat(...ordered.values(), unordered);
}


const sortedMessages = sorted(messages, sortableLanguages, n => n.language);

Чувак, все на много проще, смотри где они это взяли)
https://paveldogreat.github.io/WebGL-Fluid-Simulation/

Эта штука сделана на WebGL с использованием уравнения Навье-Стокса
https://ru.wikipedia.org/wiki/%D0%A3%D1%80%D0%B0%D...

https://codepen.io/PavelDoGreat/pen/zdWzEL
developer.download.nvidia.com/books/HTML/gpugems/g...
Пример разбора есть в книге по динамике жидкостей.

https://angular.io/api/core/Input

Элементам board.Stages добавляете булевы свойства show.

По клику переключаете их значения:

<ui-icon
  iconSet="ico-moon"
  data-icon="i-more"
  @click="stage.show = !stage.show"
>

Список показываете если true:

<div
  class="opportunity-board__list"
  v-show="stage.show"
>

var arr = [12, '+', 13, '/', 5];
var result = eval(arr.join(''));
console.log(result);

Скопируйте этот код в консоль и увидите, что он работает.

Serving Apps with Client-Side Routing

Можно на любом хосте для сайта.

npm run build

Переносите build на ваш сайт
В .htaccess пишите

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
AddDefaultCharset utf-8

/^[а-яё -]+$/i

Постоянно гуглю ошибки, лезу в документацию

похвально

это отнимает много времени, бывает полчаса над ошибкой сижу...

нормально

Когда это закончится?

никогда

Сколько лет пройдёт

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

Чтоб ты всё понимал, что происходит и вообще ошибок не было никогда

недостижимо

Замечу, что ошибки должны со временем меняться и ошибки, которые вы допускаете сейчас через год у вас не должны появляться
Вам нужен опыт и наработка памяти на стандартные конструкции