😎 You Don’t Know JS — русский перевод легендарной серии книг!

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

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

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

👩‍💻 Когда нужно быстро показать свой код коллегам!

Live Share — позволяет делиться сессией VS Code в реальном времени: другой человек видит твой проект, может перемещаться по файлам, писать код, запускать команды и помогать с отладкой, даже если у него нет такого же окружения.

📣 Code Ready | #vscode

👍 На Хабре недавно вышел отличный обзор: «Новые CSS-фичи, появившиеся к началу 2026 года»!

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

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

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

👍 Proglang — отличный ресурс для изучения html/css!

Здесь по шагам объясняют, как создаются html-страницы, как работают теги, формы, таблицы, семантика. А также как оформлять всё это с помощью CSS: селекторы, цвета, layout, Flexbox, Grid и адаптивный дизайн. Материалы поданы простым языком и с примерами, удобно для новичков и тех, кто хочет повторить базу.

📌 Оставляю ссылочку: proglang.su

📣 Code Ready | #ресурс

👩‍💻 Создаём нативные модальные окна!

Тег <dialog> предназначен для создания диалоговых окон и модалок прямо в HTML, по умолчанию не показывается на странице.

Основные возможности <dialog>:

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

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

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

👩‍💻 Смещение якорей через 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 | #совет

Отслеживаем производительность через 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 | #практика

👩‍💻 Точность и согласованность кода благодаря функции автозаполнения!

IntelliCode — улучшает автодополнение в VS Code: предлагает варианты на основе контекста, типа данных и того, что ты уже написал. Удобно в больших проектах, где важно быстрее находить нужные методы и не отвлекаться.

📣 Code Ready | #vscode

👩‍💻 Нужно визуально показать, что введённое значение допустимо?

Псевдоклассы :in-range и :out-of-range в CSS позволяют стилизовать поля формы в зависимости от того, попадает ли введённое значение в заданный диапазон. Они работают с элементами, у которых указаны min и max.

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

• :in-range — значение корректное и находится в пределах диапазона;

• :out-of-range — значение выходит за допустимые границы;

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

Если атрибуты min и max не заданы, то при пустом поле сработает :in-range, а при введённом значении ни один из псевдоклассов не сработает.

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

📂 Напоминалка по циклам в JavaScript!

Например, for удобно использовать, когда заранее известно количество итераций, а for...of — когда нужно пройтись по массиву или строке.

На картинке — 5 циклов, которые постоянно встречаются в коде.

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

📣 Code Ready | #ресурсы