ForSureN1

Делаем просто, ровно то, что спрошено в вопросе:

const result = arr.reduce((acc, n, i, a) => (
  n === a[i - 1] + 1 || acc.push([]),
  acc.at(-1).push(n),
  acc
), []);

Делаем сложно, решаем задачу в более общем виде (группируем элементы не только массивов, а любых итерируемых объектов; условие создания новой группы отделяем от собственно кода группировки):

function groupAdjacent(
  data,
  {
    key = n => n,
    newGroup = (c, p) => c !== p,
  } = {}
) {
  const result = [];
  const getVal = key instanceof Function ? key : n => n[key];
  let prev = null;
  let i = -1;

  for (const n of data) {
    const curr = getVal(n, ++i);

    if (!result.length || newGroup(curr, prev)) {
      result.push([]);
    }

    result.at(-1).push(n);
    prev = curr;
  }

  return result;
}

Как применять в вашем случае:

const result = groupAdjacent(arr, { newGroup: (c, p) => c !== -~p });
// или
const result = groupAdjacent(arr, { key: (n, i) => n - i });

Какие ещё возможны способы применения:

groupAdjacent(arr, { key: 'name' })
groupAdjacent(arr, { newGroup: n => n === 1 })
groupAdjacent(arr).map(n => n.length > 1 ? n : n[0])
groupAdjacent(arr, { newGroup: n => /^\d+\./.test(n) })

Откуда ты эту хрень взял?

axios.post('http://localhost:5000/api/create-post', () => {
  body: data
})

Во-первых: axios принимает параметром объект, а не функцию возвращающую объект.
Во-вторых: axios.post вообще сразу принимает body:

axios.post('http://localhost:5000/api/create-post', data)

В-третьих: даже если бы оно принимало функцию(что не так) - конструкция

() => {
  body: data
}

на самом деле расшифровывается так:

() => { // начало блока кода
  // метка body указывающий на висящую в воздухе переменную data
  body: data
  // никакого возврата из функции
} // конец блока кода

чтобы оно воспринималось как объект, можно, например, заключать в скобки:

() => ({
  body: data
})

если всё выражение выражение начинается со слова "function", то это function declaration
во всех остальных случаях - function expression

у тебя выражение со слова "const", то есть там внутри будет FE

После кого надо удалить элементы: const selector = '#point';.

Удаляем:

const elem = document.querySelector(selector);
const parent = elem?.parentNode;
const elems = [...parent?.children ?? []];
const index = elems.indexOf(elem);
elems.slice(-~index || elems.length).forEach(n => parent.removeChild(n));

// или

for (
  const el = document.querySelector(selector);
  el?.nextElementSibling;
  el.nextElementSibling.remove()
) ;

// или

document.querySelectorAll(`${selector} ~ *`).forEach(n => n.outerHTML = '');

Прочитайте серию книг "Вы пока еще не знаете JS" Кайла Симпсона, есть издания 2022г.

На современных HDD битых блоков быть не должно вовсе, а у тебя их больше 500. Короче ничего ластиком чистить не нужно (удивительно, что тебе не посоветовали мягкой тряпочкой блины протереть) иди и покупай новый.

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

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

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

тот или иной фреймворк решает различные задачи,

Если имеются ввиду angular, react, vue - чушь это всё собачья. Решают они одни и те же задачи, просто разными методами и философиями.

А что вы хотите услышать?

Каким образом вы выбираете себе автомобиль? Их так много, но все они решают одну и ту же задачу. Vue и React - это как мерседес и BMW. Вечное противостояние 2х философий. Обе машины прекрасны, дороги и комфортны, но у каждой так или иначе своя философия.

Берите то, что нравится. Просто возьмите все 3 и используя стандартные CLI, напишите обыкновенный бложек с созданием, редактированием, удалением записей, детальной страницей, т.е. обыкновенный CRUD. И посмотрите, с каким из них, вам процесс работы нравится больше. Потратить пару дней и всё.

Один спец. скажет вам, что реакт, другой скажет, что vue.
Третий скажет, что реакт это вообще даунгрейд по сравнению с vue(и тут я согласен).
Четвёртый скажет, что реакт для мужиков, на него больше вакансий, они дороже и проще найти работу.
Пятый скажет, что на реакте есть куча всяких штучек дручек и т.п.
Шестой будет молчать, т.к. юзает ангуляр и не знает никаких проблем и с насмешкой смотрит на этих 2х. Потому что это ещё одна, совсем не похожая на других философия. Где за тебя уже всё придумали, сделали и сказали как делать дальше.

Вы не получите полноценную картину.

От себя скажу так, если вы любите работать с html берите vue. Vue для меня гораздо лучше, чем react. В react гораздо больше писанины кода, чем в vue. Я терпеть не могу jsx(во vue он тоже есть), отвратительная штука, но это вкусовщина. Обязательно найдутся те, кто скажет иначе, ради бога. В vue шаблоны - это родной и привычный мне html с очень удобным и понятным шаблонизатором. Любите работать с html, вперёд.

Если вы не любите верстать и вам больше нравится сам процесс писанины js, писать стили на js, берите реакт.
Если вы любите типизацию, если вы за строгий контроль кода и вообще, вы считаете себя "тру" прогером, берите ангуляр, если коротко.

Заметьте, я чаще всего сравниваю react и vue, а ангулар где-то в стороне. angular - это как volvo, тебе ничего больше не нужно, у тебя и так всё хорошо.

const preloadImages = document.querySelectorAll('.pr-bub');
const preloadImagesAnimationInterval = setInterval((state) => {
    const item = preloadImages[state.index];
    item.classList.toggle('animationPreBub', state.addClass);
    state.index--;
    if (state.index < 0) {
        state.addClass = !state.addClass;
        state.index = preloadImages.length - 1;
    }
}, 300, {
    addClass: true,
    index: preloadImages.length - 1,
});

Не понимаю как сделать так что ячейка не занимала всю высоту, а только свою

Не туда смотрите. Кроме колонок существуют еще и строки.
Добавьте для первого элемента

.activity__item.grid {
	grid-column: 1/3; /*сокращенный вариант вашего кода*/
	grid-row: 1/3; 
}