HealSpirit

Если человек, не знакомый с арифметикой захочет понять, что означает "два плюс три равно пять", ему недостаточно объяснить, что такое "два", или что такое "плюс"! Так же и тут. Для понимания, что такое localhost, сначала нужно понять, что такое хост вообще, что такое сеть, что такое имя хоста, что такое сервер, как это все связано с адресами и номерами портов, а те - с, собственно, одним конкретным компом (который, в зависимости от контекста, могут называть и "хостом", и "сервером", и "localhost"). Так что, на всякий случай:

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

Когда к хосту обращаются по имени, это имя сначала разрешается в адрес хоста, по которому, собственно, и происходит обращение. В сети этим обычно занимается DNS (который, кстати говоря, тоже является сервером... но это уже другая история, которая сейчас не так важна для понимания сути), но если DNS нет, соответствие имен-адресов можно прописать в файле hosts на самом хосте. Если некое имя хоста и там не прописано, обратиться к нему по имени не удастся... хотя прямое обращение по адресу будет работать.

Сервер - это программа, отвечающая на запросы из сети. Комп, на котором она выполняется, также называют "сервером". Причем, даже если выполнение программы приостановлено (например, проводят профилактику или программа-сервер упала), этот комп все равно будут называть "сервером", ибо он предназначен, в основном, для выполнения этой программы.

На одном компе (=хосте, сервере) может одновременно выполняться несколько разных программ-серверов. Для того, чтоб обратиться к конкретной из них (адрес-то у всех один и тот же!), в протоколе TCP/IP используются разные номера портов.

Если на компе запущен, например, HTTP сервер (= Webserver, например, Nginx или Apache), он "слушает" порт 80, а если не запущен, порт 80 никто не слушает, и если обратиться к такому хосту (= серверу, компу) по его адресу в порт 80, никакого ответа не придет... хотя сам хост и будет доступен.

Для разных общеизвестных типов программ-серверов (в этом случае также говорят о "сервисах" или же "протоколах", что в данном контексте практически одно и то же) принято использовать общеизвестные номера портов, а для наиболее распространенных (как тот же HTTP) можно даже не указывать номер порта при обращении, как мы обычно и делаем в строке броузера, т.к. клиент автоматически использует номер порта по умолчанию, в данном случае 80. Но, в принципе, любой сервис можно (переконфигурировав) использовать на любом порту... если, конечно, в этом есть смысл. Единственно, что нельзя - одновременно использовать разные серверы на одном порту.

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

localhost - "общеизвестное" имя компа для самого себя и ему соответствует IP адрес 127.0.0.1. Это - общепринятая договоренность, которую просто нужно знать. Если говорят "установить сервер на localhost", это означает "установить на тот самый комп, с которого и обращаться к этому серверу".

Когда вы используете фигурные скобки внутри метода map, Js ожидает, что вы будете явно указывать, что должно быть возвращено из функции, но внутри этих фигурных скобок у вас не стоит return перед вызовом buildLegendItem(x). В результате, ничего не возвращается из функции, переданной в map, и React не рендерит эти элементы.

Уберите фигурные скобки (так результат функции будет возвращён автоматически), либо добавьте return перед buildLegendItem(x)

В консоли браузера можно выполнить функцию autoskrl:

1. autoskrl(1) - передавая единицу вы с каждым вызовом ускоряете прокрутку
   
2. autoskrl(-1) - передавая минус один вы с каждым вызовом замедляете прокрутку
   

Экспериментируйте с аргументом функции. Можно попробовать передать 0.5 например вместо единицы.

Если бы вы воспользовались поиском по ресурсу, то могли бы заметить, что подобные вопросы задавались здесь сотни раз, и ответ всегда один: курсы - это налог на тупость, они приносят пользу только их создателям.

function isEqual(a, b) {
  if (a instanceof Object && a.constructor === b?.constructor) {
    const keys = Object.keys(a);
    return (
      keys.length === Object.keys(b).length &&
      keys.every(k => Object.hasOwn(b, k) && isEqual(a[k], b[k]))
    );
  } else {
    return Object.is(a, b);
  }
}

const bounds: TRange = [32400, 54000];

    //   getSpaceRanges(bounds, [
    //     [35000, 37000],
    //     [36000, 54000],
    //   ])

у тебя на первой итерации срабатывает условие (intersectionStart > lastBoundsBlockStart && intersectionEnd < lastBoundsBlockEnd), с разрезанием и добавлением блока [37000, 54000]

на второй итерации этот новый блок накрывается вырезкой [36000, 54000], т.е. срабатывает первый if, как следствие, correctBounds = [];, оно и возвращается. Замени correctBounds = []; на correctBounds.pop(), должно отпустить.

const createItem = obj => ({ key: `${obj.name}-${obj.id}`, title: obj.name });

const result = Object.values(columnList.reduce((acc, n) => {
  (acc[n.table.id] ??= {
    ...createItem(n.table),
    children: [],
  }).children.push(createItem(n));

  return acc;
}, {}));

const combine = ({
  entries = [],
  createItem = entry => entry,
  getParent = entry => entry,
  getChild = entry => entry,
  getKey = entry => entry.id
}) => {
  const cache = new Map();
  
  return entries.reduce((accumulator, entry) => {
    const parent = getParent(entry);
    const child = getChild(entry);
    const key = getKey(parent);
    
    if (!cache.has(key)) {
      const branch = {
        ...createItem(parent),
        children: []
      };
      cache.set(key, branch);
      accumulator.push(branch);
    }
    
    cache.get(key).children.push(createItem(child));
    
    return accumulator;
  }, []);
};

const result = combine({
  entries: columnList,
  createItem: entry => ({
    key: `${entry.name}-${entry.id}`,
    title: entry.name
  }),
  getParent: entry => entry.table
});

https://kenwheeler.github.io/slick/
https://swiperjs.com/
https://owlcarousel2.github.io/OwlCarousel2/
Ну да можно.

https://codepen.io/anon/pen/LeLNqj