Code Ready | Frontend

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

IT мероприятия 🤘 Всё самое интересное для карьеры в IT: митапы, хакатоны, конференции, стажировки и обучение. Подписывайся 🤘 1. Москва 2. Санкт-Петербург 3. Для стажеров и студентов

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

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

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

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Поможем добавить в портфолио проект стоимостью 50 000 рублей и получить опыт работы с опытными разработчиками. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение 🔥 Набор идёт до 21.07.

👩‍💻 Добавляем подсказки в поля формы с помощью атрибута placeholder! Атрибут, который подсказывает пользователю, что именно нужно ввести в поле ввода (обычно это пример слова или фразы). А ещё значение атрибута исчезает, как только пользователь начинает вводить текст. Чаще всего используется с:

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

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

16 июля встречаемся с JS‑сообществом SberProfi в Сбер.Среде. AI уже меняет JavaScript‑разработку. Вопрос не в том, заменит ли он инженеров, а в том, кто освоит его быстрее и качественнее. 🔥 Обсудим изменения на реальных кейсах от Сбера, Cloud․ru и Mish. Очные участники увидят спецформат от блогеров и пообщаются с экспертами GigaCode и GitVerse. ⏳ Начало в 17:00, встреча очных гостей - в 16:00. Количество очных мест ограничено – успейте зарегистрироваться!

📂 Напоминалка для работы с Query Parameters! Например, get() позволяет получить значение параметра, set() обновить существующий параметр, append() добавить новый, а delete() удалить ключ вместе со всеми значениями. На картинке — основные методы URLSearchParams, примеры работы с параметрами запроса и базовые сценарии использования в современной web-разработке. Сохрани, чтобы не потерять! 📣 Code Ready | #ресурс

Как убрать лишние классы для пустых блоков? Часто в компонентах есть контейнеры для описания, ошибки, подсказки или дополнительного контента. Если данных нет — элемент остаётся пустым, но продолжает занимать место. Обычно это решают через JS или условный рендеринг.

.error {
  display: none;
}

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

.error:empty {
  display: none;
}

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

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

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

error,
hint,
description,
badge

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

❤️‍🔥"Это разъ*бный сетап, бро!" 😤 Так сказал мой друг из Африки, когда увидел этот стол) Не знаю уж че за сетап, меня зовут Саша и качественную необычную мебель из натурального дерева я делаю уже больше 12-ти лет, столько же занимаюсь и темой здоровья. Когда я услышал, что до 10% смертности связано с сидячим образом жизни, меня это поразило и я задался целью делать максимально функциональные и полезные рабочие пространства, ибо геморрой в 30 это конечно довольно нишево, но все же сомнительно 😂 Ну а собрать такой комплект под свои задачи и при этом сразу прикинуть цены вы можете в удобном Mini App конструкторе ➕

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

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

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

0nix — Новая экосистема для профи. Здесь не просто форум. Это готовая биржа, где заказчики находят исполнителей, а исполнители — живые деньги. 🛡Для кибербезопасников: Threat Intelligence, Осинтеров , Геоинтеров, Red Team, разработчиков инструментов. Ваша аудитория ждет ваши услуги. 💻 Для разработчиков и дизайнеров: Отдельные разделы с заказами на разработку, дизайн и графику. Портфолио — в топ! Условия для первых участников: Минимальные комиссии на сделки, быстрый арбитраж и модерация. Регистрируйся и забирай свою скидку на привилегии уже сегодня → 0nix.cc , 0nix.top

Генерируем 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 | #совет

Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании? На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂 👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке.

В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде.

И у тебя тоже получится 😎 У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров И регулярно выкладываю полезное: ▪️ Задачи, на которых валятся кандидаты ▪️ Подборка из 100+ каналов с вакансиями для разработчиков ▪️ 100 вопросов, которые помогут тебе на собеседовании ▪️ Чек-лист для проверки своего резюме Подписывайся: https://t.me/+sgJCNZlkZtg4MzZi Реклама, erid: 2W5zFJSTc97 ИП Галактионов Тихон Витальевич, ИНН 771618975809

📱 Раскрывающийся блок FAQ без библиотек! Привет! В этом гайде соберём аккордеон для часто задаваемых вопросов — лёгкий и доступный. Ключевые моменты:

• HTML: семантическая разметка и aria-атрибуты для доступности. • CSS: плавное открытие/закрытие блоков без прыжков. • JavaScript: простой toggle и синхронизация с aria-expanded.

Полезный UI-паттерн, который улучшает читаемость и делает интерфейс чище. 📣 Code Ready | #гайд

Как сегодня оплачивают ChatGPT, Claude, Cursor и другие зарубежные сервисы из РФ? Через мутных ботов, ребят с Авито или сайты-прокладки. В итоге вы: — Переплачиваете 20–30% сверху при каждой оплате. — Отдаёте свои логины и пароли незнакомым людям. — Рискуете получить бан аккаунта из-за чужой карты. Картон убирает посредников. Теперь вы сами контролируете свои оплаты: • Выпускаете виртуальную карту прямо в Telegram за 3 минуты. • Пополняете криптой (USDT) или рублями через СБП. • Оплачивайте любые сервисы за 5 минут. Вы сами оплачиваете нейросети, хостинги, отели и любые подписки. Без левых комиссий. Apple Pay работает везде, где есть бесконтактная оплата. Пополнение и вывод рублей - бесплатно. Пополнение криптой - 2%. Карта — ваша, платите сами. Хватит кормить «помогаторов» и переплачивать за каждую подписку. Забирайте карту здесь: 👉 Открыть Картон 👉 Открыть Картон 👉 Открыть Картон Чтобы выпустить карту, надо перейти в канал и посмотреть закреп.

Почему 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 | #практика

🔍Тестовое собеседование на Frontend-разработчика с ex. TeamLead в Сбер 9 июля(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. TeamLead в Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Даниилу Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

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

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

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