❤️ Interview Questions — сборник вопросов для подготовки к собеседованиям!

Отличный репозиторий с большим набором вопросов по разным направлениям разработки: JavaScript, HTML, CSS, React, Node.js и множеству других тем. Вопросы с примерами, объяснениями и ссылками на ресурсы для углублённого изучения. Помогает освежить знания по ключевым темам стеков, которые встречаются в проектах.

Оставляю ссылочку: 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 | #совет

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