🐱 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 | #практика

Генерируем UUID без библиотек!

Очень частая задача: создать уникальный id для пользователя, заказа, файла или любой сущности.

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

import { v4 as uuid } from 'uuid';

Хотя в современном JavaScript это уже есть нативно.

crypto.randomUUID()

Метод сразу возвращает криптографически стойкий UUID v4.

const id = crypto.randomUUID();

Результат выглядит так:
36b8f84d-df4e-4d49-b662-bcde71a8764f

Подходит для случаев, где нужен уникальный идентификатор: id сущностей, ключи записей, request/session id, временные идентификаторы.

Для секретных токенов (reset password, API tokens) лучше использовать crypto.getRandomValues() или crypto.randomBytes().

В браузере работает в secure context — HTTPS или localhost.

🔥 crypto.randomUUID() — простой способ получать уникальные id.

📣 JS Ready | #совет

Почему чтение offsetHeight иногда тормозит интерфейс?

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

Например:

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

box.style.width = '500px';

console.log(box.offsetHeight);

Кажется, что мы просто изменили ширину и прочитали высоту. Но есть нюанс. После изменения DOM или CSS браузер не обязан сразу пересчитывать размеры элементов. Наоборот, современные движки стараются откладывать такие вычисления, чтобы не делать лишнюю работу после каждого изменения.

Упрощённо это выглядит так:

box.style.width = '500px';

// браузер пока просто запомнил изменение

console.log(box.offsetHeight);

// здесь уже нужны реальные размеры,
// поэтому приходится пересчитать layout

Именно поэтому чтение некоторых свойств может заставить браузер синхронно обновить style и layout, если после изменений они ещё не актуальны.

Например:

element.offsetWidth;
element.offsetHeight;
element.clientWidth;
element.clientHeight;
element.scrollHeight;

element.getBoundingClientRect();

Но важно понимать: сами по себе эти свойства не медленные. Если layout уже актуален, браузер просто вернёт готовое значение.

Проблемы обычно начинаются, когда чтение размеров смешивают с изменением стилей внутри цикла:

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

items.forEach(item => {
  item.style.height = '100px';

  console.log(item.offsetHeight);
});

На десяти элементах ты, скорее всего, ничего не заметишь. Но если их сотни или тысячи, можно получить forced synchronous layout — ситуацию, когда JavaScript заставляет браузер выполнять дорогие вычисления прямо во время выполнения скрипта.

Особенно неприятно это становится в анимациях:

function animate(elements) {
  elements.forEach(element => {
    element.style.width = '200px';

    const height = element.offsetHeight;

    element.style.height = `${height}px`;
  });
}

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

Поэтому один из самых простых приёмов — разделять запись и чтение. Вот так плохо:

items.forEach(item => {
  item.style.width = '200px';
  console.log(item.offsetHeight);
});

Лучше будет так:

items.forEach(item => {
  item.style.width = '200px';
});

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

Так браузер сможет объединить изменения и выполнить один пересчёт вместо множества лишних. Для визуальных изменений также часто используют requestAnimationFrame, потому что он запускает код перед следующим циклом отрисовки браузера. Но сам по себе requestAnimationFrame не избавляет от layout thrashing. Если внутри его callback продолжать чередовать изменения DOM и чтение размеров, синхронные перерасчёты всё равно останутся.

🔥 Если коротко: проблема не в offsetHeight, а в том, когда ты его читаешь. После изменений DOM или CSS он может заставить браузер синхронно пересчитать layout. Именно чередование записей и чтений чаще всего становится причиной лишних тормозов.

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

🤔 Awesome CSS — большая подборка ресурсов по CSS!

Здесь собраны качественные статьи, инструменты, библиотеки и другие полезные ресурсы для работы со стилями. Особенно полезен тем, кто хочет лучше разобраться в современных возможностях CSS, быстрее находить решения для вёрстки и держать под рукой материалы. Хорошая база как для обучения, так и для повседневной разработки.

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

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

Как убрать лишние классы для пустых блоков?

Часто в компонентах есть контейнеры для описания, ошибки, подсказки или дополнительного контента.

Если данных нет — элемент остаётся пустым, но продолжает занимать место.

Обычно это решают через JS или условный рендеринг.

.error {
  display: none;
}

А потом отдельно добавляют класс при появлении контента.

Но CSS умеет определять пустые элементы самостоятельно.

.error:empty {
  display: none;
}

Теперь блок автоматически скрывается, если внутри ничего нет.

Можно делать и обратную логику.

.card:not(:empty) {
  padding: 16px;
}

Отступы появятся только тогда, когда внутри действительно есть контент.

Особенно удобно для:

error,
hint,
description,
badge

Где содержимое может появляться динамически.

🔥 :empty позволяет убрать лишние классы и часть условной логики прямо средствами CSS.

📣 Code Ready | #совет

📂 Напоминалка для работы с Query Parameters!

Например, get() позволяет получить значение параметра, set() обновить существующий параметр, append() добавить новый, а delete() удалить ключ вместе со всеми значениями.

На картинке — основные методы URLSearchParams, примеры работы с параметрами запроса и базовые сценарии использования в современной web-разработке.

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

📣 Code Ready | #ресурс

👩‍💻 Добавляем подсказки в поля формы с помощью атрибута placeholder!

Атрибут, который подсказывает пользователю, что именно нужно ввести в поле ввода (обычно это пример слова или фразы). А ещё значение атрибута исчезает, как только пользователь начинает вводить текст.

Чаще всего используется с:

• <input> — для текстовых полей, поиска, email, телефона и других типов ввода;
• <textarea> — для подсказок в многострочных полях.

Часто из-за дизайнерских решений placeholder используется для замены более семантического элемента метки. Однако это не означает, что текст-заполнитель может заменить <label>, поскольку это создаёт неудобства для пользователей с особыми потребностями.

📣 Code Ready | #атрибут

Проверяем интернет-скорость!

Хочешь узнать, насколько быстрый у тебя интернет? Для этого есть готовый пакет speedtest-net, который позволяет получить скорость загрузки, отдачи и пинга.

Такой скрипт можно встроить в мониторинг или просто проверить сеть без браузера.

Шаг 1 — импортируем:

const speedTest = require('speedtest-net');

Шаг 2 — запускаем тест:

(async () => {
  const res = await speedTest({ acceptLicense: true });
})();

Шаг 3 — форматируем и выводим результаты:

// Загрузка
console.log(`Download: ${(res.download.bandwidth / 125000).toFixed(2)} Mbps`);

// Выгрузка
console.log(`Upload: ${(res.upload.bandwidth   / 125000).toFixed(2)} Mbps`);

// Пинг
console.log(`Ping: ${res.ping.latency} ms`);

🔥 Теперь у тебя свой speedtest прямо в коде. Можно запускать вручную или добавить в cron для регулярного замера.

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

Крутая статья попалась на Хабре: «HTML Sanitizer API: конец эпохи DOMPurify и XSS-страданий»!

В этой статье:
• Разбирается, почему привычные способы защиты от XSS становятся сложнее и какие проблемы есть у старых подходов вроде DOMPurify;
• Показывается новый HTML Sanitizer API, который позволяет безопаснее работать с пользовательским HTML прямо на уровне браузера;
• Объясняется, как современные веб-разработчики могут упростить код и повысить безопасность приложений.

🔊 Продолжай читать на Habr!

📣 Code Ready | #статья

Node.replaceWith() — замена DOM-элемента без пересборки HTML!

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

Если вы работаете с динамическими интерфейсами, где есть состояние элементов и обработчики событий, такие детали становятся важными. Например:

const oldElement = document.querySelector('.message');

oldElement.outerHTML = `
  <div class="success">
    Saved
  </div>
`;

Выглядит просто: старый элемент заменили новым. Но браузер получает строку HTML, разбирает её и создаёт новый DOM-узел. Старый элемент исчезает из DOM, а на его месте появляется другой объект.

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

Для замены конкретного узла есть более подходящий метод:

const oldElement = document.querySelector('.message');

const newElement = document.createElement('div');

newElement.textContent = 'Saved';

oldElement.replaceWith(newElement);

replaceWith() работает непосредственно с DOM-узлами. Браузеру не нужно заново парсить HTML-строку — он получает готовый элемент и заменяет только нужное место в DOM-дереве.

Это удобно, когда вокруг элемента есть другая разметка, которую не нужно трогать. Например:

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

const loader = document.createElement('span');

loader.textContent = 'Loading...';

button.replaceWith(loader);

Меняется только button. Родительский элемент, соседние узлы и остальная структура страницы остаются без изменений.

Разница хорошо заметна, если сравнить с innerHTML. Например:

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

container.innerHTML = `
  <div class="card">
    New content
  </div>
`;

Здесь браузер заново создаёт содержимое контейнера из строки. Даже если часть элементов выглядит так же, это могут быть уже новые DOM-объекты. Например:

const input = document.querySelector('.search');

input.value = 'frontend';

container.innerHTML += `
  <div>
    New block
  </div>
`;

Если input находится внутри container, старый элемент будет пересоздан вместе с содержимым. Можно потерять значение поля, обработчики событий и ссылки на старые DOM-объекты.

Именно поэтому innerHTML += часто становится причиной багов. replaceWith() такого поведения не создаёт, потому что меняет только указанный узел. Например:

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

const newTitle = document.createElement('h2');

newTitle.textContent = 'New title';

title.replaceWith(newTitle);

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

Но важно учитывать: новый элемент не наследует обработчики старого. Например:

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

button.addEventListener('click', handleClick);

const newButton = document.createElement('button');

button.replaceWith(newButton);

После замены новый button будет другим объектом, поэтому старый обработчик к нему не относится.

Если нужно сохранить поведение, обработчик нужно добавить заново:

newButton.addEventListener('click', handleClick);

Также replaceWith() может принимать несколько узлов:

element.replaceWith(title, text, button);

Браузер удалит старый элемент и вставит переданные узлы на его место. Причём это могут быть не только элементы, но и текстовые узлы:

element.replaceWith('Hello');

🔥 Подведем итог: replaceWith() удобен для точечной замены DOM-элементов без повторного парсинга HTML и пересоздания всей окружающей структуры. В отличие от innerHTML, он работает напрямую с узлами и даёт больше контроля над изменениями DOM.

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

👩‍💻 Отображаем математические формулы с помощью тега <math>!

Тег <math> используется для встраивания математических выражений на веб-страницу с помощью языка MathML. Он позволяет отображать дроби, степени, корни, индексы, матрицы и другие математические конструкции без изображений.

Кроме глобальных атрибутов, <math> поддерживает:

• display="inline" — формула отображается внутри строки (по умолчанию).
• display="block" — формула выводится отдельным блочным элементом.
• alttext — альтернативное текстовое описание формулы.

Все теги MathML чувствительны к регистру: используйте строго строчные (<msup>, а не <MSUP>). Для лучшего внешнего вида можно подключать стили к формуле, но аккуратно, некоторые свойства не работают

📣 Code Ready | #атрибут

CSS-вычисления теперь работают с auto и max-content!

Многие знают calc(), но он не умеет вычислять auto, max-content, fit-content и min-content.

Например, так написать нельзя:

.panel {
  width: calc(max-content + 2rem);
}

Такое значение считается невалидным.

Для этого появился calc-size().

.panel {
  width: calc-size(max-content, size + 2rem);
}

Теперь браузер сначала вычисляет max-content, а затем прибавляет к нему 2rem.

Это работает и с другими размерами, зависящими от содержимого.

.panel {
  height: calc-size(auto, size + 1rem);
}

Полезно, когда элемент должен сохранить естественный размер содержимого, но при этом стать немного больше без JS.

🔥 calc-size() позволяет выполнять вычисления с auto, max-content и fit-content — то, чего обычный calc() делать не умеет.

📣 Code Ready | #совет