Сергей delphinpro

во первых - у вас ошибка в коде, отсутствует кавычка: 'password,
Во вторых - вопрос в корне не верный, если мы говорим о коде. Основное правило при работе с данными от пользователя - данным от пользователя нельзя доверять никогда.
Отсюда же и второе правило - любые данные в запросах, если это переменные пришедшие из кода, а не прописанные буквами и цифрами в запросе, должны быть через подготовленные выражения, вы не можете гарантировать что где-то не пропустите пользовательский ввод в запрос.

Нужно, разумеется.
Это как в одном пошлом анекдоте про поручика Ржевского,
- Запрос есть? Значит нужно.

Если кажется, что защита слишком сложная, то либо вариант предложенный Сергей delphinpro в комментариях,

$stmt = mysqli_prepare($connect, "INSERT INTO `bd` (`id`, `name`, `tel`) VALUES (NULL, ?, ?)");
mysqli_stmt_execute($stmt, [$_POST['name'],  $_POST['tel']]);

Либо, поскольку это ещё не везде работает, пишется маленькая функция на 5 строк, и кладётся в файл, где прописано соединение с БД

function prepared_query($mysqli, $sql, $params, $types = "")
{
    $types = $types ?: str_repeat("s", count($params));
    $stmt = $mysqli->prepare($sql);
    $stmt->bind_param($types, ...$params);
    $stmt->execute();
    return $stmt;
}

И дальше просто

$sql = "INSERT INTO `bd` (`name`, `tel`) VALUES (?,?)";
prepared_query($connect, $sql, [$_POST['name'], $_POST['tel']]);

Просто, быстро, аккуратно, безопасно

Не стал считать какая строка у Вас тут 31ая...
Ошибка означает, что querySelector* или переменная, на которой это вызывается - вернули null.
То есть элемент не найден в разметке.

Минутка лишних усложнений и новых концепций.

В JavaScript примитивные значения (числа, например) копируются/передаются «значением», не сохраняя никакой связи с оригиналом. А объекты (например, массив) передаются «ссылкой» на оригинал.

Судя по неудачной попытке, был расчёт, что изменив elem, изменится и его «оригинал» – элемент массива. Но нет. Число возвели в квадрат, но в массиве всё осталось по-прежнему.

Будь elem не числом, а объектом, трюк сработал бы.

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

items.map(el => el.id);

Часть проблем высосана из пальца, как очень смешной п.2 - разница в одну точку с запятой, а уже "гораздо длиннее", карл. При том что если класс использовать в коде хотя бы дважды, то вот тут как раз действительно получится "гораздо длинее"

use \Framework\Main\UI\Extension;
Extension::load([ 'vendor.module.components.cabinet.personal' ]);
Extension::unload([ 'vendor.module.components.cabinet.personal' ]);
vs
\Framework\Main\UI\Extension\Extension::load([ 'vendor.module.components.cabinet.personal' ]);
\Framework\Main\UI\Extension\Extension::unload([ 'vendor.module.components.cabinet.personal' ]);

и будешь постоянно спотыкаться в коде об эти палочки.

А часть решается не просто, а очень просто: вместо того, чтобы писать код в Блокноте Виндоус, надо в кои-то веки освоить работу с нормальной IDE. Которая
- автоматом скрывает блок use
- по ctrl+наведение курсора показывает полный путь, а по ctrl-click сразу переходит в определение метода
- подсвечивает неиспользуемые неймспейсы, и не проблема их удалить

Минусы как бы очевидны:

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

1 Код становится трудно читаем. По месту использования не всегда понятно что имеется ввиду под Order::load() - \Framework\Sale\Order::load или \Vendor\Project\Sale\Order::load - приходится проматывать к верху файла.

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

2 Код становиться длиннее - там где было бы просто:
\Framework\Main\UI\Extension::load([ 'vendor.module.components.cabinet.personal' ]);
приходится писать:
use \Framework\Main\UI\Extension;
Extension::load([ 'vendor.module.components.cabinet.personal' ]);

Код становится длиннее в проектах где 2 контроллера и в них по 1 экшену. Там где Extension::load будет вызываться больше одного раза, очевидно экономия на эксплуатации клавиатуры заметно увеличивается. А в больших проектах создание объекта может (и будет) повторяться многократно.

4 Код становиться замусоренным, так как верхушки файлов запросто превращаются во что-то вроде:

Если не обращать внимание на отсутствие пункта 3, то... нет, не могу не обращать внимание, вот же торопыга....
Во первых - данная портянка очень аккуратно прячется любой адекватной ИДЕ,
Во вторых - это правильно и логично, хранить все импорты в одном месте
В третьих - если ты пишешь неимпортированный класс в коде - ИДЕ обычно предлагает варианты внесения его в блок импорта, и все выглядит аккуратно.

И хрен его знает используются импортированные классы ниже ещё или уже нет, ведь никто не убирает этот мусор.

Хрен не знает, а ИДЕ замечательно знает и даже подсвечивает серым цветом неиспользуемые.

alert(document.querySelectorAll(".type").length);

Градиент в background плюс анимация background-size. Видно же всё прекрасно на сайте:

runapa, это не hash, и не base64. Просто набор случайных символов.
Там вполне могло бы быть "Ivan Ivanov", или "Durak Durakov", или "Volodya Putin", всё зависит от полёта фантазии автора конкретного бота, который к вам пришёл...

P.S. Ах, да, по 2-му пункту - грозит спамом. По 3-му пункту - защищайтесь, всё в ваших руках. Captcha, JS-ы, имена/пароли/явки, вот это вот всё...

await

Итак, как раз для прокрутки addEventListener и removeEventListener использовать в реакте вполне легально.
Более того, вы вполне обошли использование рефов используя window, тут все хорошо.
Но вот на следующих граблях - жизненном цикле вы таки споткнулись.
Где гарантия, что компонент не перерендерился и функция disableOnwheel осталось той же что и была ?
Нужно
1) Вынести disableOnwheel за пределы компонентов, там нет ничего что зависело бы от наличия React
2) Внимательно прочесть про клинап https://reactjs.org/docs/hooks-effect.html

Не сметь убирать!
Это ограничение в 120 символов в строке.
Если за нее выходите - лучше пересмотреть форматирование кода.

Данный элемент обычно называется Overlay. Его предназначение заключается не только в том чтобы затемнить область вокруг модального окна или off-canvas меню для наилучшей фокусировки на элементе, но ещё и для того чтобы при клике на данный элемент можно было закрыть окно/меню.

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

Или если всё же нужно закрытие по клику, тогда вариантов несколько.

Первый вариант:

Оборачиваете off-canvas меню в обертку для которой устанавливаете полупрозрачный темный фон. При открытии меню, делаете обертку и меню видимыми.

Второй вариант:

Создаёте отдельный элемент для оверлея, задав нужный полупрозрачный темный фон. При открытии меню, делаете оверлей и меню видимыми.

Есть ещё несколько вариантов, но эти два наиболее подходящие для решения подобных задач.

Вот как пример библиотека onoffcanvas.

можно создать временный элемент <template>, вставить в него этот HTML,
и забрать из него DocumentFragment

Фрагмент — это примерно как DOM-документ, его можно рекурсивно обойти через свойство children

Например, в строке содержится такой HTML:

<div>
  <p>Text</p>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
  </ul>
</div>

И примерно такой код:

const tmpl = document.createElement('template');
tmpl.innerHTML = msg; // строка с HTML
const df = tmpl.content; // DocumentFragment

df.children // массив из одного элемента: наружний div
df.children[0].children // массив с двумя эл.: параграфом и списком
df.children[0].children[1].children[1].textContent // "Banana"