MishaXXL

Никак. Тип undefined не может быть ключом в принципе.
Из вариантов:
1. Убедиться что ключ не undefined руками:
card = card_id && this.cards[card_id];
2. Заставить ts думать, что ключ есть даже если его нет(и взять на себя ответственность за возможные ошибки):
card = this.cards[card_id!];
3. Явно привести к строке:
card = this.cards[String(card_id)];

https://jsfiddle.net/Lfst8wog/1/

const childElement = document.getElementById('child'); // находим потомка
const parentElement = childElement.parentNode; // находим родителя

// Создаем новый элемент
const newElement = document.createElement('p');
newElement.textContent = 'Новый элемент';

// Заменяем старый элемент на новый
parentElement.replaceChild(newElement, childElement);

Или так (https://jsfiddle.net/Lfst8wog/)

const oldElement = document.getElementById('old');

// Создаем новый элемент
const newElement = document.createElement('div');
newElement.textContent = 'Новый элемент';

// Заменяем старый элемент новым
oldElement.replaceWith(newElement);

const oldElement = document.getElementById('old');

oldElement.replaceWith(document.createRange().createContextualFragment(`
  <div class="box box2">
    <p1>hello world</p1>
  </div>
`));

элемент.insertAdjacentHTML('afterend', разметка);
элемент.remove();

// или

элемент.outerHTML = разметка;

function Box() {
  return(
    <>
      <p>Box Component</p>
    </>
  )
}

-function List({ component }) {
+function List({ Component }) {
  return(
    <>
-      <component />
+     <Component />
    </>
  )
}

function App() {
  return(
-    <List component={Box}  />
+   <List Component={Box}  />
  )
}

Используйте наименование компонентов с заглавной буквы, в ином случае, реакт будет считать его не парным тегом:

function Box() {
  return (
    <>
      <p>Box Component</p>
    </>
  );
}

function List({Component}) {
  return (
    <>
      <Component/>
    </>
  );
}

function App() {
  return (
    <List Component={Box}/>
  );
}

export default App;

Либо:
function List({component: Component}) {

Либо

Promise.all([4, 5, 6])
  .then(console.log)
  .catch(console.log);

либо

Promise.all([4, 5, 6])
  .then(data => console.log(data))
  .catch(err => console.log(err));

const something = async _ => new Promise(resolve => setTimeout(resolve, 100));

const asyncRecursive = async (limit, count = 0) => {
  await something();
  console.log(count);
  count+=1;
  if (count < limit) {
    await asyncRecursive(limit, count);
  }
}

let limit = 10;

(async function() {
  for(let n of Array.from(Array(limit).keys())) {
    await something();
    console.log(n);
  }
  
  await asyncRecursive(limit);
})();

Как написано в описании циклов, с await может работать только for of

В каком описании? С await прекрасно работает классический for.

function sleep(delayms) {
  return new Promise((resolve) => setTimeout(() => resolve(), delayms));
}
async function foo() {
  for (i = 0; i < 10; i += 1) {
    await sleep(1000);
    console.log(i);
  }
  return 'done';
}
await foo();
// 0
// 1
// ...
// 9
// "done"

Обычный цикл чем не цикл?

const chain = async times => {
  for (let n = times; n > 0; n--) {
    console.log(`${n} starting..`);
    await new Promise(resolve => setTimeout(resolve, 800));
    console.log(`${n} ..finished`);
  }
};

chain(4).then(() => console.log('Done'));

Попробую предположить, что в assets лежит то, что используется приложением (всякие иконки, иллюстрации итд), а в public - то что непосредственно приложением не используется, но необходимо для сайта.

RTFM: Learn > Windows > Среда разработки WSL > Запуск приложений графического интерфейса Linux

Чтобы git pull без указания репозитория и ветки сам понял откуда брать обновления, вы должны эту информацию ранее сообщить гиту. Потому что внешний репозиторий не обязан называться origin, а название внешней ветки не всегда совпадает с локальной. Вы читали подсказку которую вам гит дал при неудачной git pull? Там он вам сообщил, что текущая локальная ветка не связана ни с какой веткой внешнего репозитория и подсказал какой командой эту связь создать. Но обычно мы эту связь создаем автоматически при первой отправке новой ветки, добавив ключик -u в команду push. Полное название ключа --set-upstream. Когда вы пушите через графический интерфейс, то там тоже должна быть галка для этого.

public - это схема по умолчанию в терминалогии PG. Использовать разные схемы можно по разному, например создать схемы wp и zb в одной базе, и в wp.users хранить пользователей условного wordpress'а, а в zb.users условного zabbix'а (или подставьте любые другие приложения). Можно же создать схемы users и orders и в users.contacts хранить контактные данные пользователей, в users.names их ФИО, в orders.current текущие заказы, в orders.completed выполненые заказы и тп. В общем случае можно использовать как хотите, сам PG ни к чему не обязывает и многие эти схемы не используют(всмысле используют стандартную схему public не акцентируя на этом внимание).

Почему "SELECT * FROM users" мог не сработать: вероятно у вас где-то изменена схема по умолчанию с public на что-то другое. Это можно проверить командой "SHOW search_path"(обычно она выглядит так):

postgres=# SHOW search_path;
   search_path
-----------------
 "$user", public
(1 row)
postgres=#

Изменить search_path можно на стороне клиента, например "--search_path=new_search_path" в случае обычного psql, или на стороне сервера командой "ALTER ROLE SET search_path TO ;"

Подробней про это можно, например, в документации postgrespro почитать

Вот вам готовая простейшая очередь в виде объекта без всяких переборов:

class Queue {
  constructor() {
    this.items = {};
    this.front = 0;
    this.rear = 0;
  }
  enqueue(item) {
    this.items[this.rear] = item;
    this.rear++;
  }
  dequeue() {
    const item = this.items[this.front];
    delete this.items[this.front];
    this.front++;
    return item;
  }
  peek() {
    return this.items[this.front];
  }
  get size() {
    return this.rear - this.front;
  }
  isEmpty() {
    return this.rear == 0;
  }
}
const queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
queue.enqueue(4);
queue.enqueue(5);

console.log("Объект очереди: ", queue);

const removed_element = queue.dequeue();
console.log("Обработанный (удаленный) элемент: ", removed_element);

console.log("Объект очереди:", queue);

const top_element = queue.peek();
console.log("Текущий элемент очереди для обработки (без удаления): ", top_element);

const queue_length = queue.size;
console.log("Размер очереди: ", queue_length);

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

На macbook с Intel, работает адекватно, впринцыпе 99% всего будет работать, есть даже прикольный вариант с Paralells + BootCamp.

На m1, эмуляция через UTM теряет 90% производительности. Paralells + windows 11 ARM, работает быстро, большая часть софта запускает. НО!!! Если надо использовать какой-то драйвер для подключения внешнего устройства через USB в виртуальную машину, то 99% что не будет работать т.к. драйверов под windows arm ОЧЕНЬ мало, а x86 драйвера не работают.

В параллелс работает вполне адекватно. Тот же автокад или 3дМакс

10-30% производительности, некоторые синтетические тесты совсем плохо, и почти полное отсутствие поддержки 3д видео ускорителя. С оговорками браузеры и декодирование видео (больше будет тратить ресурсов и энергии и скорее всего 4к не потянет)

Виртуализация х86 на современных ARM маках обходится в 90% потери производительности. В остальном ограничений никаких. АРМ версии винды работают вполне адекватно.

Так же как и в любой клиент/сервер архитектуре, я не вижу разницы для микросервисов.
Должен быть протокол для API. Если в нем нужны изменения, то имплементировать их на стороне сервера и клиента так, чтобы обновления не сломали ничего.