😍 dreamDevTeamx — большая шпаргалка для фронтенд разработчиков!

Годный репозиторий, в котором собрано много практической информации по разным направлениям разработки. Это база знаний, к которой удобно возвращаться во время обучения, работы или подготовки к собеседованиям. Материал ориентирован именно на практику.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

Почему querySelectorAll() не обновляется автоматически?

Иногда кажется, что результат querySelectorAll() как-то привязан к DOM и должен сам обновляться при изменениях на странице. Но это не так — он возвращает фиксированный снимок на момент вызова.

const items = document.querySelectorAll('.item');

console.log(items.length); // 3

document.body.insertAdjacentHTML(
  'beforeend',
  '<div class="item"></div>'
);

console.log(items.length); // всё ещё 3

После этого items никак не пересчитывается. Это просто сохранённый результат поиска, а не живая коллекция.

Если нужен актуальный список — придётся заново выполнить запрос:

let items = document.querySelectorAll('.item');

document.body.insertAdjacentHTML(
  'beforeend',
  '<div class="item"></div>'
);

items = document.querySelectorAll('.item');

console.log(items.length); // 4

Из-за этого иногда появляются простые, но неприятные ошибки в динамическом UI. Например, когда элементы добавляются позже, а список уже был сохранён заранее:

const buttons = document.querySelectorAll('.btn');

addNewButton();

// новый элемент сюда уже не попадёт
buttons.forEach(bindHandler);

Человек ожидает, что обработчик навесится на всё, но фактически работает только с тем, что существовало в момент запроса.

Есть и другой вариант поведения — живые коллекции. Например:

const items = document.getElementsByClassName('item');

console.log(items.length); // 3

document.body.insertAdjacentHTML(
  'beforeend',
  '<div class="item"></div>'
);

console.log(items.length); // 4

Такие коллекции действительно меняются вместе с DOM. К ним относятся getElementsByClassName, getElementsByTagName и element.children. Разница простая: querySelectorAll даёт снимок, а getElementsBy* держат связь с DOM.

При этом NodeList, который возвращает querySelectorAll, можно спокойно перебирать как массив:

const items = document.querySelectorAll('.item');

items.forEach(item => {
  console.log(item);
});

Но это всё ещё не массив:

Array.isArray(items); // false

Если нужны методы массива — его нужно явно преобразовать:

const items = [...document.querySelectorAll('.item')];

🔥 На практике querySelectorAll используют чаще именно из-за предсказуемости. Он не меняется сам по себе, и это как раз удобно в реальных приложениях. Для динамики обычно либо делают повторный запрос, либо уходят в делегирование событий.

📣 Code Ready | #практика

📂 Напоминалка по аутентификации и авторизации в вебе!

Например, Session-cookie хранит состояние на сервере и использует session_id в cookie браузера, тогда как Token-based подход переносит хранение состояния на клиент и отправляет токен в каждом запросе.

На картинке показаны основные механизмы: классические session-cookie, токены и JWT, а также SSO для единого входа и OAuth 2.0 с различными grant flow, которые используются для разных типов приложений — web, mobile и server-to-server.

Сохрани, чтобы не потерять!

📣 Code Ready | #ресурс

🐱 html-cheatsheet-rus — полезнейшая шпаргалка по HTML!

Крутой материал для тех, кто изучает frontend или хочет быстро освежить базу по HTML. Здесь собрана действительно большая база — от структуры HTML-документа, тегов и атрибутов до форм, семантической вёрстки, мультимедиа, HTML5 API и accessibility.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

Почему textarea часто ломает layout?

По умолчанию textarea можно тянуть во все стороны.

Пользователь легко может растянуть её по ширине и сломать grid, flex или весь form-layout.

Обычно никто это не контролирует.

textarea {
  resize: both;
}

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

Лучше сразу ограничить направление resize.

textarea {
  resize: vertical;
}

Теперь пользователь может увеличить высоту, но ширина layout остаётся стабильной.

Если resize вообще не нужен:

textarea {
  resize: none;
}

Это особенно полезно для сложных форм.

.modal textarea,
.sidebar textarea {
  resize: vertical;
}

🔥 Контроль resize убирает неприятные layout-баги в формах и делает UI заметно стабильнее.

📣 Code Ready | #совет

👩‍💻 Можно ли вывести видео поверх всех окон на странице или даже за пределы браузера?

Псевдокласс :picture-in-picture в CSS применяется к видео, которое находится в режиме «картинка в картинке». Он позволяет стилизовать элемент <video>, когда пользователь вынес его в плавающее окно поверх других приложений или вкладок.

Как это используется:

• изменение оформления видео в PiP-режиме;
• визуальная индикация активного режима воспроизведения;
• адаптация интерфейса под плавающее окно.

Комбинируйте с соседними селекторами (~, +) и :has(), чтобы менять другие элементы интерфейса, пока видео в PiP.

📣 Code Ready | #свойство

Почему innerHTML += иногда ведёт себя не так, как ожидаешь?

На первый взгляд это выглядит как самый простой способ что-то добавить в DOM — вроде бы просто дописал кусок HTML и всё. Но внутри браузер работает не так, и из-за этого появляются странные эффекты, когда вроде ничего особенного не сделал, а поведение страницы меняется.

const list = document.querySelector('.list');

list.innerHTML += `
  <li>Новый элемент</li>
`;

По ощущениям просто добавили один li, но на деле браузер не дописывает HTML внутрь DOM. Он делает иначе: берёт текущее содержимое, сериализует его в строку, добавляет новый кусок и затем заново парсит HTML, пересоздавая DOM-узлы внутри контейнера.

Упрощённо это примерно вот так:

list.innerHTML = list.innerHTML + `
  <li>Новый элемент</li>
`;

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

Допустим, у тебя есть кнопка с обработчиком:

button.addEventListener('click', () => {
  console.log('click');
});

container.innerHTML += `
  <div>Новый блок</div>
`;

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

Та же история с ссылками на элементы:

const item = document.querySelector('.item');

container.innerHTML += `
  <div>Новый блок</div>
`;

console.log(item.isConnected); // false

item остаётся в переменной, но к текущему DOM он уже не привязан. Он существует как объект, но находится вне дерева документа, потому что был заменён старый поддерево контейнера.

И это особенно хорошо видно, когда начинаешь делать такие вещи в цикле:

for (let i = 0; i < 1000; i++) {
  list.innerHTML += `<li>${i}</li>`;
}

Каждый раз браузер берёт текущее содержимое, сериализует его, парсит заново и пересоздаёт DOM внутри контейнера. На маленьких объёмах это почти незаметно, но когда элементов становится много — начинает сильно тормозить, потому что ты постоянно пересоздаёшь одно и то же дерево.

Поэтому в реальной практике так обычно не делают и используют более прямые DOM-методы.

const li = document.createElement('li');

li.textContent = 'Новый элемент';

list.append(li);

Тут уже всё проще: создаёшь узел и просто добавляешь его в DOM, без пересборки контейнера.

Есть ещё вариант со строками, но без пересоздания всего содержимого:

list.insertAdjacentHTML(
  'beforeend',
  '<li>Новый элемент</li>'
);

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

Если нужно добавить много элементов сразу, обычно используют DocumentFragment, чтобы не дёргать DOM по сто раз:

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = i;
  fragment.appendChild(li);
}

list.appendChild(fragment);

Тут всё собирается в памяти и вставляется одной операцией, без промежуточных пересборок и перерисовок.

🔥 Коротко, суть в том, что innerHTML += — это не добавить элемент, как это выглядит интуитивно. Это скорее пересобери мне весь контейнер заново через HTML-строку и вставь результат. Поэтому в живых интерфейсах он иногда ведёт себя неожиданно и может неприятно влиять и на логику, и на производительность.

📣 Code Ready | #практика