📂 Напоминалка для работы с CSS-псевдоклассами!

Например, :first-child применяется к элементу, который является первым дочерним элементом родителя, а :first-of-type выбирает первый элемент указанного типа среди дочерних.

На изображении - наиболее используемые псевдоклассы для работы со структурой DOM.

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

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

Записываем звук с микрофона в браузере!

Современные браузеры позволяют писать аудио без сторонних библиотек, используя MediaRecorder API.

Для начала запрашиваем у пользователя доступ к микрофону (работает только в HTTPS или localhost окружении):

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

Перед созданием рекордера желательно проверить поддерживаемый формат:

const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
  ? 'audio/webm;codecs=opus'
  : 'audio/webm';

Создаём рекордер для записи аудио:

const recorder = new MediaRecorder(stream, { mimeType });

Подготавливаем массив для аудио-чанков и подписываемся на событие dataavailable:
(срабатывает минимум при stop(), а при использовании timeslice — периодически):

const chunks = [];

recorder.ondataavailable = (e) => {
  if (e.data && e.data.size > 0) {
    chunks.push(e.data);
  }
};

Запускаем запись (при необходимости можно передать timeslice, например recorder.start(1000)):

recorder.start();

Останавливаем запись, например, через 5 секунд:

setTimeout(() => {
  recorder.stop();
}, 5000);

После остановки записи собираем аудио в единый файл и воспроизводим его:

recorder.onstop = () => {
  const blob = new Blob(chunks, { type: mimeType });
  const url = URL.createObjectURL(blob);

  const audio = document.createElement('audio');
  audio.controls = true;
  audio.src = url;

  document.body.append(audio);

Воспроизведение может быть ограничено политикой autoplay:

  audio.play().catch(() => {});

Освобождаем ресурсы после использования:

  audio.onended = () => {
    URL.revokeObjectURL(url);
  };

  stream.getTracks().forEach(track => track.stop());
};

🔥 Формат аудио зависит от браузера — при необходимости проверяйте поддержку через MediaRecorder.isTypeSupported() и задавайте mimeType явно.

📣 Code Ready | #практика

❤️ 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 | #атрибут