Code Ready | Frontend

DocumentFragment: как делать пакетные DOM-вставки аккуратнее! Когда элементы добавляются в DOM по одному, браузеру приходится постоянно обновлять структуру документа. На небольших объёмах это почти незаметно, но при рендере больших списков или сложных интерфейсов такие операции могут начать стоить дороже. Для таких случаев в DOM API есть DocumentFragment. Создаём fragment:

const fragment = document.createDocumentFragment();

Это временный контейнер, который существует вне основного DOM-дерева. Пока элементы находятся внутри fragment — они не участвуют в рендеринге страницы. Можно спокойно собрать структуру в памяти, а потом вставить всё одной операцией. Пример — массовое добавление элементов:

const fragment = document.createDocumentFragment();

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

  li.textContent = `Item ${i}`;

  fragment.appendChild(li);
}

document
  .querySelector('.list')
  .appendChild(fragment);

Здесь элементы сначала собираются внутри fragment, а затем одной вставкой попадают в основной DOM. Такой подход уменьшает количество промежуточных вставок в live DOM и делает массовый рендер более предсказуемым. Пример через append():

const fragment = document.createDocumentFragment();

users.forEach(user => {
  const item = document.createElement('div');

  item.className = 'user';
  item.textContent = user.name;

  fragment.append(item);
});

container.append(fragment);

append() тоже работает с DocumentFragment. По смыслу разницы почти нет — append() просто современнее и удобнее. Плюс он умеет принимать строки и несколько узлов сразу. Пример с переносом существующих элементов:

const fragment = document.createDocumentFragment();

document
  .querySelectorAll('.item')
  .forEach(el => {
    fragment.appendChild(el);
  });

newContainer.appendChild(fragment);

Здесь элементы не копируются, appendChild() физически переносит DOM-узлы в новый контейнер. Один и тот же элемент не может одновременно находиться в двух местах дерева. Ещё один частый кейс — работа с template:

const template = document.querySelector('#card');

const fragment = document.createDocumentFragment();

data.forEach(item => {
  const cardFragment = template.content
    .cloneNode(true);

  cardFragment
    .querySelector('.title')
    .textContent = item.title;

  fragment.appendChild(cardFragment);
});

container.appendChild(fragment);

template.content уже является DocumentFragment, поэтому cloneNode(true) возвращает готовый набор DOM-узлов, который удобно изменять перед вставкой. И ещё один момент:

const fragment = document.createDocumentFragment();

fragment.appendChild(
  document.createElement('div')
);

container.appendChild(fragment);

console.log(fragment.childNodes.length); // 0

После вставки содержимое fragment переносится в DOM, а сам fragment остаётся пустым. По сути это временный контейнер для группы узлов. Важно понимать, что DocumentFragment — не полноценный HTML-элемент:

console.log(
  fragment instanceof HTMLElement
); // false

🔥 У него нет собственного layout, стилей или визуального отображения. Но при больших объёмах DOM, сложных компонентах или частых обновлениях интерфейса DocumentFragment всё ещё остаётся удобным способом собрать структуру отдельно от основного DOM и вставить её одним действием. 📣 Code Ready | #практика

📝 Собран список свежих сервисов и нейронок за неделю:

🥩 Сгенерируй готовую презентацию по одной ссылке [открыть] 📇 Собери досье на любого человека по никнейму [открыть] 🕵️‍♂️ Открой сборник детективных загадок и разгадай их [открыть] 🎧 Получи бесконечный плейлист под любой вайб [открыть] 💻 Создай любой сайт со смартфона за 10 минут [открыть]

На канале «Будущее сегодня» публикуют все последние новости из мира технологий для русскоязычной аудитории 🌐 📁 Собрано 99+ самых полезных и интересных сервисов, сохрани: @futurenow

📂 Напоминалка для работы браузера и сети! Например, когда вводишь google.com, браузер сначала ищет IP-адрес через DNS, затем устанавливает TCP/TLS-соединение, отправляет HTTPS-запрос и только после этого начинает рендерить страницу. На картинке — полный путь от ввода URL до отображения сайта. Сохрани, чтобы быстро освежить в памяти, как работает Web под капотом! 📣 Code Ready | #ресурс

Почему scroll иногда внезапно прыгает сам по себе? Добавляешь новый контент сверху и браузер внезапно меняет scroll-position. Особенно часто это ломает chat, infinite-feed и lazy-load layout. Обычно проблема появляется при:

prepend,
lazy-image,
dynamic-content

Браузер пытается помочь и автоматически удерживает пользователя на прежнем месте через scroll anchoring. Но в динамических интерфейсах это часто создаёт хаос.

.chat {
  overflow-anchor: none;
}

Теперь браузер перестаёт вмешиваться в scroll-position контейнера. Особенно полезно для:

chat,
feed,
virtual-list,
infinite-scroll

Где контент постоянно догружается или меняется. Можно отключать anchoring точечно даже у отдельных элементов.

.loader {
  overflow-anchor: none;
}

Например у skeleton, lazy-image или рекламных блоков. 🔥 overflow-anchor: none убирает один из scroll-багов в динамических интерфейсах. 📣 Code Ready | #совет

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сгенерировать сайт через Giga, DeepSeek, ChatGPT - Сверстать страницу на HTML + CSS по Figma макету - Оживить её логикой на JavaScript - Превратить сайт во фронтенд-приложение на Angular - Подключить backend и выложить проект на хостинг Чтобы в итоге ты своими руками всего за 7 дней разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд: «Фронтенд в 2026 году: стоит ли входить сейчас и что делать новичку в эпоху ИИ». Стартуем завтра.

👩‍💻 Нужно быстро обернуть текст или элемент в HTML-тег? Htmltagwrap — позволяет выделить любой фрагмент и за секунду обернуть его в нужный тег: div, span, section и любой другой, без ручного написания. Особенно удобно при верстке, работе с JSX и быстром редактировании разметки. 📣 Code Ready | #vscode

🧐 Крутая статья недавно вышла на Хабре: «Как я собрал кубик Рубика в браузере на чистом Canvas»! В этой статье: • Пошагово показывается создание собственного симулятора кубика Рубика на JS и Canvas; • Разбирается работа с 3D-проекцией, изометрией и ручным рендерингом объектов; • Объясняется, как хранить состояние куба и реализовывать алгоритмы поворотов; • Демонстрируются проблемы Canvas-рендеринга, сортировки граней и псевдо-3D.

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

📣 Code Ready | #статья

👩‍💻 Анимированная подсветка рамки без JavaScript! Обычные анимации рамки часто выглядят слишком примитивно: у элемента просто меняется цвет или прозрачность всей границы сразу. Но через conic-gradient можно создать полноценное вращающееся свечение вокруг элемента. Как работает:

• conic-gradient рисует сектор света вокруг центра; • псевдоэлемент становится отдельным glow-слоем; • animation вращает только градиент; • layout остаётся полностью стабильным, потому что анимируется compositing-слой.

Приём отлично подходит для интерфейсных панелей, акцентных кнопок и интерфейсов с акцентными состояниями. 📣 Code Ready | #фишка

Замечал странную штуку: дел не так уж много, но любое – как будто через сопротивление? Не то чтобы лень. Просто не делается и все тут! Зато видосики на Ютубе залетают на ура... Попался годный канал, советую почитать, если тоже чувствуешь, что превращаешься в апатичного зомби 👉 https://t.me/vadimpetrovpsi Мысль, которая зашла: когда перестаешь понимать "чего хочу Я", даже нормальная жизнь ощущается, как каторга. Подписывайся сюда и переходи в закреп. Там 3 видоса, которые помогут разобраться, что с тобой происходит и как снова начать испытывать ощущение, что ты живешь, а не существуешь 💃

💅 Ravesli JavaScript — курс по основам JS для начинающих! Сайт охватывает как основы языка, так и более продвинутые темы. Здесь разбираются переменные, функции, объекты, массивы, DOM, события, асинхронность, работа с браузером и др. Материал подаётся в формате последовательных уроков с примерами кода и подробными объяснениями. 📌 Оставляю ссылочку: ravesli.com 📣 Code Ready | #сайт

Как сделать sticky footer без layout-багов? Часто делают так:

footer {
  position: fixed;
  bottom: 0;
}

Но fixed-footer перекрывает контент и ломает mobile layout. Есть нативный flex-способ без JS и вычислений высоты.

body {
  display: flex;
  flex-direction: column;
}

Теперь body становится вертикальным flex-контейнером. Остаётся отодвинуть footer вниз.

footer {
  margin-top: auto;
}

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

body {
  min-height: 100dvh;
}

🔥 Так layout занимает минимум всю высоту viewport даже при маленьком количестве контента. 📣 Code Ready | #совет

👨👨👨👨👨👨👨👨👨👨 Каналы с IT вакансиями и стажировками Подписывайся и забирай свой оффер 🤘 1. Стажировки и вакансии по России и миру 2. IT вакансии по СНГ 3. IT стажировки по СНГ 4. ИИ-ассистент для автооткликов 5. IT стажировки и волонтерства 6. IT стажировки в топовых компаниях мира 7. Удалённые IT вакансии и стажировки 8. Python вакансии и стажировки 9. БИГТЕХ вакансии и стажировки 10. Design вакансии и стажировки 11. QA вакансии и стажировки 12. Junior вакансии и стажировки 13. Frontend вакансии и вопросы собесов 14. Вакансии и стажировки для аналитиков 15. Вакансии в русских стартапах за границей 16. Вакансии и стажировки для DevOps 17. Вакансии, которых нет на ХХ.РУ

👩‍💻 Стили пишутся прямо в React-компонентах. vscode-styled-components — делает работу со styled-components намного удобнее: появляются подсказки CSS, подсветка цветов, автодополнение свойств и форматирование прямо внутри JS/TS-файлов. Всё работает почти как в отдельном CSS-файле. 📣 Code Ready | #vscode

🐱 Наткнулся на очень полезную статью на Хабре: «Мне этот Chrome DevTools теперь абсолютно понятен»! В этой статье: • Подробно разбираются основные инструменты Chrome DevTools — Elements, Console, Sources, Network и их применение; • Показывается, как эффективно искать баги, анализировать DOM, отлаживать JavaScript и отслеживать сетевые запросы; • Объясняются возможности DevTools: Workspaces, Snippets, performance-профилирование, live-редактирование и инструменты для адаптивной вёрстки.

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

📣 Code Ready | #статья

40 собесов и оффер за 1 месяц Алексей разработчик. Искал работу с декабря - написание сопроводов и отклики занимали очень много времени. Выхлоп - почти нулевой. В какой-то момент понял: так можно искать бесконечно. И по совету друга попробовал ии-ассистента Софи. ▫️За ~1 месяц прошел около 40 собеседований ▫️Получил оффер с вакансии, на которую, по его словам, не откликнулся бы сам

В описании она выглядела скучно, а по факту - одна из самых интересных компаний, с которыми я общался.

Весь процесс - от первого собеседования до оффера - занял 4 дня. P.S. Попробовать Софи бесплатно можно будет 16 июня. Не пропусти анонс здесь.

📂 Напоминалка по работе API и прокси! Например, Forward Proxy скрывает клиента и управляет исходящими запросами, Reverse Proxy принимает трафик на стороне сервера и распределяет его между сервисами, а API Gateway централизует авторизацию, rate limiting и маршрутизацию API. На картинке — базовые различия между Forward Proxy, Reverse Proxy и API Gateway, которые полезно держать под рукой каждому разработчику. Сохрани, чтобы не потерять! 📣 Code Ready | #ресурс

👩‍💻 Эффект цифрового сбоя для текста без JS! Обычный заголовок можно превратить в полноценный UI-эффект, если разделить его на несколько независимых слоёв. Как работает:

• ::before и ::after создают копии текста; • каждый слой анимируется отдельно; • разные цвета формируют chromatic aberration; • небольшие смещения создают эффект glitch-сигнала.

Приём отлично подходит для стартовых экранов, главных секций сайта, экранов загрузки и декоративных интерфейсов. 📣 Code Ready | #фишка

💪 Кто сейчас вообще получает офферы в IT в 2026? Я создатель YeaHub — базы IT собеседований. И я регулярно вижу, как реально выглядит рынок изнутри. Вакансий стало меньше, а ATS и фильтры просто не пропускают до живого рекрутера. Собеседования стали жёстче — задают абсурдные вопросы, о которых ты никогда не слышал. Из-за высокой конкуренции выросли ожидания: задач стало больше и они стали сложнее.

Но при этом каждый день кто-то всё равно получает офферы в крупные компании — даже в текущем рынке. Вопрос в другом: как получить оффер именно тебе?

✊🏻 Меня зовут Руслан. Я IT-Founder & Tech Lead, строю продукты и руковожу командами из 100+ человек. Занимаюсь подготовкой Frontend-разработчиков к собеседованиям и трудоустройству в Big Tech. И я просто систематизировал то, что вижу на рынке и в собеседованиях. 💼 На канале: • база реальных IT собеседований (РФ и зарубежные компании) • задачи, которые дают в BigTech и продуктовых компаниях • полный гайд по подготовке к собеседованиям • как привести в порядок резюме • материалы по System Design и архитектуре • подготовка к Frontend трудоустройству в BigTech • инфраструктура больших приложений

📍 Если хочешь понять, как сейчас реально устроены собеседования — начни с закрепа на канале.

👉 https://t.me/reactify_IT

🤔 Code JavaScript — большой учебник и практикум по JS! На сайте собрана полноценная база материалов по JavaScript: от базового синтаксиса и работы с DOM до более сложных тем вроде замыканий, событий, async/await и ООП. Материал построен в формате уроков и практических заданий, поэтому подходит не только для чтения, но и для закрепления знаний на практике. 📌 Оставляю ссылочку: code.mu 📣 Code Ready | #сайт

preventDefault(): контроль стандартного поведения браузера! При работе с DOM-событиями часто нужно отменить действие браузера: переход по ссылке, отправку формы, скролл и т.д. Для этого используется event.preventDefault(). Метод отменяет стандартное поведение браузера, но не останавливает всплытие события. Для этого используется stopPropagation(). Базовый пример:

document.querySelector('a').addEventListener('click', (e) => {
  e.preventDefault();

  console.log('link click handled manually');
});

После вызова preventDefault() переход по ссылке не произойдёт, и обработка полностью перейдёт под контроль JavaScript. Это особенно полезно в SPA-приложениях, где навигация управляется роутером без перезагрузки страницы. Пример — работа с формой:

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

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const data = new FormData(form);
  send(data);
});

По умолчанию форма отправляет данные и перезагружает страницу. preventDefault() позволяет перехватить submit и самостоятельно управлять отправкой данных. Так обычно реализуются AJAX-формы, async-запросы и кастомная валидация. Важно: preventDefault() работает только для событий, которые поддерживают отмену. Проверить это можно через свойство cancelable. Пример — проверка cancelable:

if (e.cancelable) {
  e.preventDefault();
}

Если событие не является cancelable, вызов preventDefault() не даст эффекта. Отдельный нюанс связан с passive listeners. Пример — passive listeners:

window.addEventListener('touchmove', (e) => {
  e.preventDefault(); // будет проигнорирован
}, { passive: true });

При passive: true браузер заранее считает, что обработчик не будет отменять действие события. Это используется для оптимизации scroll/touch-событий. В таком режиме preventDefault() игнорируется. Иногда отмена зависит от состояния интерфейса или бизнес-логики. Пример — условная отмена:

button.addEventListener('click', (e) => {
  if (!button.matches('.enabled')) {
    e.preventDefault();
  }
});

Здесь действие отменяется только при определённом условии. Также важно понимать разницу между preventDefault() и старым подходом через return false. Пример:

el.addEventListener('click', (e) => {
  e.preventDefault();
});

В addEventListener конструкция return false не отменяет действие браузера и не останавливает propagation. Такое поведение было характерно для inline-обработчиков и jQuery, поэтому многие разработчики до сих пор путают эти механики. Ещё момент: у кастомных событий (CustomEvent) обычно нет встроенного browser behavior. Это значит, что preventDefault() не отменяет никаких действий браузера. Но если событие создано с cancelable: true, вызов установит event.defaultPrevented = true. 🔥 preventDefault() — базовый инструмент управления пользовательскими взаимодействиями в js. 📣 Code Ready | #практика