Алексей Уколов

Ну какие варианты-то? Либо настраивайте VPN "во всех других местах", либо выносите "все другие места" за пределы России, либо храните все зависимости в репозитории и добавляйте их только локально.

Сбрасывается он потому, что startContainer - это дочерний текстовый узел элемента #editable-block. И когда вы перезаписываете innerHTML, вы этот startContainer из документа изымаете и восстанавливать позицию курсора просто некуда.

Есть простые, но ограниченные решения:

• Не убивать существующую текстовую ноду, а редактировать её текст:
  

  editableBlock.childNodes[0].textContent = editableBlock.textContent + "!"

  
  
• Указывать в newRange новый элемент:
  

  editableBlock.innerHTML = editableBlock.innerHTML + "!";
  startContainer = editableBlock.childNodes[0];

  
  
  

Они подразумевают, что у вас содержимым блока является только текст, без HTML.

UPD: Нет, есть же и нормальное универсальное решение:

const editableBlock = document.getElementById("editable-block");

editableBlock.addEventListener("input", function (event) {
  // Запоминаем текущую позицию курсора
  const selection = window.getSelection();

  const {startContainer, startOffset} = selection.getRangeAt(0);

  // Обновляем содержимое элемента
  startContainer.textContent = startContainer.textContent.substr(0, startOffset) + "!" + startContainer.textContent.substr(startOffset);

  // Восстанавливаем позицию курсора
  const newRange = document.createRange();
  newRange.setStart(startContainer, startOffset + 1);
  newRange.setEnd(startContainer, startOffset + 1);
  selection.removeAllRanges();
  selection.addRange(newRange);
});

Тут мы редактируем текстовое содержимое именно того элемента, в котором в данный момент находится курсор (это по определению всегда текстовая нода). И тогда содержимое основного блока может быть любым.

"Чел с python" делает запросы не из браузера, потому и нет проверки CORS.

CORS (Cross-Origin Resource Sharing) is a system, consisting of transmitting HTTP headers, that determines whether browsers block frontend JavaScript code from accessing responses for cross-origin requests.

https://developer.mozilla.org/en-US/docs/Glossary/CORS

Стили-то применяются, просто они у вас кривые. У вас получается селектор #auth-container #auth-card &>div #form-section, под который ничего не подпадает. Не нужно играться с вложенностью, сделайте хотя бы так:

#auth-container {
  min-height: 100vh;
  background-color: red;
}

#auth-card {
  display: flex;
  justify-content: center;

  &>div {
    display: flex;
    flex-direction: row;
    min-width: 500px;
    margin-top: 2.5rem;
    background-color: white;
    border-radius: 20px;
  }
}

#image-section {
  background-color: green;
  border-top-left-radius:  20px;
  border-bottom-left-radius: 20px;

  img {
    max-height: 300px;
    min-width: 100%;
  }
}

#form-section {
  min-width: 300px;

  h2 {
    text-align: center;
  }

  form {
    padding: 20px;

    .input-field {
      input {
        height: 40px;
        width: 100%;
        box-sizing: border-box;
      }
    }

    button {
      width: 100%;
      height: 30px;
      background-color: blue;
      border: none;
      color: white;
      cursor: pointer;
      font-weight: 600;
    }
  }
}

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

Запись box.addEventListener('mousemove', move) будет работать ровно так, как вам нужно. И удалить обработчик потом можно без проблем.

Если же вам нужно не просто пробросить аргумент (что делается автоматически в записи выше), а выполнить дополнительные действия, то нельзя использовать анонимную функцию:

const handler = (e) => {
    e.preventDefault();
    move(e)
};

const move = (e) => {
    console.log(e);
    box.removeEventListener('mousemove', handler)
}

box.addEventListener('mousemove', handler);

Храните просто и массив, и объект (а лучше - Map), в котором id будет сопоставлен индексу в массиве. Тогда вы, потратив немного памяти, получите плюсы обеих структур данных.

На вопрос "убьёт ли это производительность" можно получить ответ очень легко: запрофилировать вариант до и после и сравнить. В общем случае на него ответить просто невозможно - откуда мы знаем, какие конкретно вы будете использовать алгортимы и какие у вас вообще интерфейсы. По сути вопрос тогда сводится к "какая разница между массивом и объектом", а на него ответ даётся примерно на седьмой странице любого учебника.

Массив на пустоту проверяется так: newArr.length === 0

пишет колличество символов, а не елементов

Значит, у вас нет объекта, а есть строка. Используйте JSON.parse(), чтобы получить объект. Дальше уже определяйте что вы считаете "элементами" и по запросу "javascript get number of x in type y" найдёте решение за три секунды.

Курсор "прыгает" потому, что вы полностью стираете значение инпута и пишете в него новое. Соответственно, вам действительно нужно сначала запомнить где он находится, а потом его вернуть.

function getCaretPosition(ctrl) {
    // IE < 9 Support 
    if (document.selection) {
        ctrl.focus();
        var range = document.selection.createRange();
        var rangelen = range.text.length;
        range.moveStart('character', -ctrl.value.length);
        var start = range.text.length - rangelen;
        return {
            'start': start,
            'end': start + rangelen
        };
    } // IE >=9 and other browsers
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
        return {
            'start': ctrl.selectionStart,
            'end': ctrl.selectionEnd
        };
    } else {
        return {
            'start': 0,
            'end': 0
        };
    }
}

function setCaretPosition(ctrl, start, end) {
    // IE >= 9 and other browsers
    if (ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(start, end);
    }
    // IE < 9 
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', end);
        range.moveStart('character', start);
        range.select();
    }
}

https://www.vishalon.net/blog/javascript-getting-a...

Сделаю допущение, что этот бессвязный салат из букв и символов, который вы предоставили, работает с регулярными выражениями.
В регулярных выражениях цифра обозначается последовательностью [0-9] или \d. Соответственно, запрос "одна или более цифр" будет выглядеть так: \d+.

не сохраняются в count

Вы в свойство count один раз записываете значение из переменной numberOfFilms. Но эта переменная не становится таким образом магически связана с этим свойством и меняя её значение вы не меняете значение свойства объекта.
Работающий код будет выглядеть так:

let personalMoviDB = {
  count: NaN,
  movies:{},
  actors:{},
  genres:[],
  privat: true,
  start: () => {
    personalMoviDB.count = +prompt('Сколько фильмов вы уже посмотрели?',''); 

    while (isNaN(personalMoviDB.count)) {
      personalMoviDB.count = +prompt('Сколько фильмов вы уже посмотрели?','');
    }
    console.log(personalMoviDB)
  },
};

personalMoviDB.start();

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

Не знаю что за вечно работающие такие функции, но в js есть while (true) (вряд ли это то, что вы ищете), setInterval() и something.addEventListener().

Потому что у вас в regex содержится обычная строка, а не объект регулярного выражения.
Собирать этот объект из строки нужно так: new RegExp('[' + v + ']', 'g');
https://developer.mozilla.org/en-US/docs/Web/JavaS...

Потому что асинхронность работает не так, как вы хотите. Колбэк в then вызывается уже после return.
Статей (и вопросов здесь) на тему «асинхронность в JavaScript» огромное количество — выбирайте какая понравится и изучайте.