Code Ready | Frontend

Отслеживаем производительность через PerformanceObserver! Когда нужно понять, что именно тормозит страницу (долгие задачи, layout shifts, загрузка ресурсов) — PerformanceObserver даёт нативный доступ к метрикам браузера прямо в рантайме, без devtools и сторонних SDK. API позволяет подписываться на события производительности в реальном времени. Создаём наблюдатель:

const observer = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    console.log(entry);
  });
});

Пример 1 — отслеживание long tasks (блокировки main thread):

observer.observe({
  entryTypes: ['longtask']
});

longtask — любая задача, блокирующая основной поток дольше 50 мс. Прямой индикатор лагов и фризов UI (Long Tasks API, поддержка зависит от браузера). Пример 2 — отслеживание layout shifts (CLS):

let clsValue = 0;

const clsObserver = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
      console.log('CLS:', clsValue);
    }
  });
});

clsObserver.observe({
  type: 'layout-shift',
  buffered: true
});

Используется для поиска скачков интерфейса при загрузке контента. CLS считается как накопленное значение layout shift’ов без пользовательского ввода. Пример 3 — анализ загрузки ресурсов:

const resourceObserver = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    console.log(
      entry.name,
      entry.initiatorType,
      Math.round(entry.duration) + ' мс'
    );
  });
});

resourceObserver.observe({
  entryTypes: ['resource']
});

Позволяет видеть реальные тайминги загрузки скриптов, стилей и изображений (для кросс-доменных ресурсов подробные данные доступны при Timing-Allow-Origin). PerformanceObserver работает асинхронно — данные предоставляет сам браузер, без ручных замеров. Когда наблюдение больше не нужно:

observer.disconnect();
clsObserver.disconnect();
resourceObserver.disconnect();

🔥 PerformanceObserver — базовый инструмент диагностики производительности и поиска узких мест прямо в коде приложения. 📣 Code Ready | #практика

📱 Chips Input — теги как в Notion / Gmail! Привет! В этом гайде создаём поле ввода, которое превращает текст в аккуратные теги по нажатию Enter и поддерживает удаление с клавиатуры. Ключевые моменты:

• HTML: простая структура — контейнер, поле ввода и зона для тегов. • CSS: аккуратные chips и card-оформление компонента. • JS: логика добавления тегов, обработка Enter и Backspace, управление DOM.

Такой элемент отлично подойдёт для форм, тегов, навыков, категорий и email-полей в веб-приложениях и админках. 📣 Code Ready | #гайд

Изоляция рунета ближе, чем ты думаешь

Loading … ██████████████] 99%

Роскомнадзору дали карт-бланш на блокировки, а «белые списки» сайтов тестируют уже в десятках регионов. И гайки будут закручиваться только сильнее. Чтобы в одночасье не лишиться доступа к свободному Интернету, просто сохрани Only Hack. Тут профессиональный хакер делится фишками, с которыми доступ к глобальной сети у тебя будет даже в случае ядерного апокалипсиса. Не жди момента «Х». Перестрахуйся подпиской.

👩‍💻 Смещение якорей через scroll-margin-top! Когда на странице есть position: sticky фиксированная шапка, переход по якорю почти всегда ломается. Контент прокручивается, но заголовок уезжает под хедер:

<a href="#section">Перейти</a><h2 id="section">Раздел</h2>

По умолчанию браузер скроллит элемент ровно к верху вьюпорта, не зная про фиксированную шапку. Решение есть нативное и очень простое, добавить отступ для скролла самому элементу:

h2 {
  scroll-margin-top: 72px;
}

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

:root {
  --header-h: 72px;
}

h2 {
  scroll-margin-top: var(--header-h);
}

🔥 Это работает для якорных ссылок, scrollIntoView(), навигации по оглавлению, документации и лонгридов. 📣 Code Ready | #совет

👨👨👨👨👨👨👨👨👨👨 Каналы с Junior 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. Вакансии, которых нет на ХХ.РУ

👩‍💻 Создаём нативные модальные окна! Тег <dialog> предназначен для создания диалоговых окон и модалок прямо в HTML, по умолчанию не показывается на странице. Основные возможности <dialog>:

• метод show() — открыть диалог как обычный элемент; • метод showModal() — открыть модальное окно с блокировкой фона; • метод close() — закрыть диалог программно; • атрибут open — управляет видимостью элемента.

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

Фронтенд умер. Просто не все это поняли Любая нейросеть за 5 минут пишет React-компонент. Cursor или Claude по одному промту собирают целый Miro. Верстальщики и «рисовальщики кнопок» больше не нужны. Теперь ценятся те, кто умеет работать с ИИ и понимает архитектуру, а не просто код. Автор канала разработчик с 8-летним опытом, показывает, как использовать ИИ в разработке и разбираться во фронтенде глубже Узнать больше про ИИ во фронтенде 👉 @kostya_web_dev 👉 @kostya_web_dev 👉 @kostya_web_dev Реклама. Тишкунов К.И. ИНН 470710374461. erid: 2W5zFJsuw7n

👍 Proglang — отличный ресурс для изучения html/css! Здесь по шагам объясняют, как создаются html-страницы, как работают теги, формы, таблицы, семантика. А также как оформлять всё это с помощью CSS: селекторы, цвета, layout, Flexbox, Grid и адаптивный дизайн. Материалы поданы простым языком и с примерами, удобно для новичков и тех, кто хочет повторить базу. 📌 Оставляю ссылочку: proglang.su 📣 Code Ready | #ресурс

Отслеживаем изменения DOM через MutationObserver! Когда нужно понять, что именно поменялось в DOM (добавили элемент, удалили, изменили атрибут) — MutationObserver решает задачу нативно, без опроса DOM и таймеров. В примере будем следить за изменениями внутри корневого контейнера приложения:

const container = document.getElementById('app');

MutationObserver асинхронно передаёт список DOM-изменений, сгруппированных браузером перед следующим этапом рендеринга. Пример 1 — отслеживание изменений структуры DOM. Добавление и удаление узлов (childList):

const structureObserver = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log(
        'Добавленные узлы:',
        mutation.addedNodes,
        'Удалённые узлы:',
        mutation.removedNodes
      );
    }
  });
});

Используется, когда важно отследить появление или удаление элементов (рендер, условные блоки, динамические списки). Пример 2 — отслеживание изменений атрибутов. Изменения атрибутов элементов (attributes):

const attributesObserver = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes') {
      console.log(
        'Изменён атрибут:',
        mutation.attributeName,
        'было:',
        mutation.oldValue,
        'стало:',
        mutation.target.getAttribute(mutation.attributeName)
      );
    }
  });
});

Подходит для отслеживания изменений классов, data-атрибутов и состояний UI. mutation.oldValue доступен только при включённой опции attributeOldValue. Подписываемся на изменения DOM. Важно ограничивать типы мутаций и атрибуты, чтобы не ловить лишнего и не перегружать обработчик:

structureObserver.observe(container, {
  childList: true, // добавление / удаление узлов
  subtree: true    // всё поддерево
});

attributesObserver.observe(container, {
  attributes: true,                        // изменения атрибутов
  attributeOldValue: true,                 // предыдущее значение
  attributeFilter: ['class', 'data-test'], // только нужные атрибуты
  subtree: true
});

Для демонстрации вручную меняем DOM:

const el = document.createElement('div');
el.textContent = 'new node';
container.appendChild(el);

el.setAttribute('data-test', '123');

Когда наблюдение больше не нужно:

structureObserver.disconnect();
attributesObserver.disconnect();

🔥 MutationObserver особенно полезен, когда нужно реагировать на динамические изменения DOM. Изменения доставляются асинхронно и группируются браузером, без постоянного опроса DOM 📣 Code Ready | #практика

Совет на 2026 год — освойте ВАЙБ-КОДИНГ. ИИ уже пишет код, чинит баги, генерит тесты и документацию быстрее и качественнее любой команды айтишников И те, кто научится вайбкодить сейчас, будут зарабатывать в разы больше тех, кто всё ещё делает всё вручную Разобраться в этом с нуля поможет канал Вайб-кодинг. Там простым языком разбирают, какие инструменты действительно стоит использовать, как собирать проекты от идеи до релиза и что сейчас актуально в вайбкодинге Подписывайтесь, нас уже 13 тысяч: @vibecoding_tg

👍 На Хабре недавно вышел отличный обзор: «Новые CSS-фичи, появившиеся к началу 2026 года»! В этой статье: • Разбираются свежие возможности CSS, которые постепенно убирают необходимость в препроцессорах и JS; • Показано, как писать собственные функции, использовать условия через if() и media() прямо в стилях; • Объясняется, как работать с позициями элементов с помощью sibling-index(); • Рассматриваются новинки вроде interest-delay для hover-логики и field-sizing для адаптивных форм.

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

📣 Code Ready | #статья

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

• :active используется как источник состояния, он существует ровно столько, сколько пользователь удерживает кнопку; • прогресс визуализируется через transform: scaleX, без изменения размеров; • длительность подтверждения задаётся одной строкой transition; • при отпускании кнопки состояние автоматически сбрасывается.

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

Совет на 2026 год — переходите на Go. На Go собирают банки, маркетплейсы и highload-сервисы. Зарплаты мидлов начинаются от 200 000 ₽, а у сеньоров доходят до 600 000 ₽. А чтобы освоить его всего за 3 месяца — изучите канал Максима Аверина. Его бэкграунд: Senior Golang/Python (X5, Lamoda, BestDoctor), 7 лет в бэкенде, экс-тимлид и PM, 300+ собеседований с 2018 На канале вы найдёте: — Советы, которые в разы повысят ваши шансы на перекат в Go — Как легко выбивать себе ту ЗП, которую желаете: скрипты переговоров и шаблоны писем — Как сделать мощный проект с code-review и уже через три недели пойти на собесы. Огромный опыт, который ты можешь перенять абсолютно бесплатно. Переходи и изучай: @maksim_golang

👩‍💻 Когда нужно быстро показать свой код коллегам! Live Share — позволяет делиться сессией VS Code в реальном времени: другой человек видит твой проект, может перемещаться по файлам, писать код, запускать команды и помогать с отладкой, даже если у него нет такого же окружения. 📣 Code Ready | #vscode

😎 You Don’t Know JS — русский перевод легендарной серии книг! Здесь разбираются замыкания, this, области видимости, асинхронность, прототипы и др. важные темы. Отличный репозиторий, если хочешь не просто писать код, а понимать, почему он работает именно так. Полезно для роста и закрепления знаний.

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

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

Для пользователей, которые не хотят анимаций! Часть пользователей осознанно отключают анимации в системе (motion sickness, accessibility). По умолчанию интерфейсы часто это игнорируют, а зря.

.card {
transition: transform 0.3s ease;
}

Браузер передаёт это предпочтение через media query:

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

Анимации и резкие движения исчезают для тех, кому они мешают. Можно сделать только для сложных эффектов:

@media (prefers-reduced-motion: reduce) {
.animated {
animation: none !important;
transition: none !important;
}
}

🔥 Таким образом интерфейс подстраивается под пользователя, а не наоборот 📣 Code Ready | #совет

🖥 Javascript - С помощью понятных картинок и коротких видео  авторы объясняют сложные концепции и учат работать профессиональному подходу в разарботке. 🖥 React - 40,14% разработчиков сайтов использовали React в 2025 году - это самая популярная библиотека для создания пользовательских интерфейсов. 🧠 Machine learning - ИИ-инструменты для генерации кода, умные-агенты и все что нужно знать, чтобы не отставать. 📖 Frontend books - огромная библиотека бесплатны книг по фронту. 💼 Frontend Jobs - вакансии и подработка для Frontend разработчиков. 🔝 А здесь мы собрали целый кледезь полезных Frontend ресурсов для прокачки: https://t.me/addlist/mzMMG3RPZhY2M2Iy