Code Ready | Frontend

👩‍💻 Создаём нативные модальные окна! Тег <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

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

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

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

📱 Анимация загрузки с эффектом размытия! Привет! В этом гайде создаём экран загрузки с анимированным процентным индикатором и плавным переходом фона от размытого к чёткому состоянию. Ключевые моменты:

• HTML: минимальная структура — фоновый слой и текстовый индикатор загрузки. • CSS: blur-эффект, затемняющий оверлей и центрирование контента. • JS: анимация через requestAnimationFrame, масштабирование значений.

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

14 февраля пройдет главная фронтенд-конференция Яндекса — «Я 💛Фронтенд». Ивент для тех, кто создает современные интерфейсы. В программе — доклады о безопасном использовании LLM для ускорения разработки, влиянии локального ИИ на архитектуру веб-приложений, переходе к контекстно-ориентированной адаптивности и практическом применении веб-компонентов. Помимо докладов, можно будет посоревноваться в вёрстке в Code in the Dark, порисовать в CSS арт‑челлендже, собрать TravelTech-приложение, решить практические кейсы и принять участие в других активностях от сервисов Яндекса. Пока ждете ивент, заходите на сайт — там будут выкатываться онлайн-активности: решайте головоломки и соревнуйтесь в поиске «флагов» в Capture the flag и участвуйте другом интерактиве до конференции. Присоединяйтесь онлайн и офлайн в Москве! Полная программа и регистрация по ссылке.

Записываем звук с микрофона в браузере! Современные браузеры позволяют писать аудио без сторонних библиотек, используя 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 | #практика

Слили в телеграмм тонны инфы и отсортировали по каналам 🖥 Курсы & GitHub — 1579ГБ ⌨️ Python — 955ГБ 🤒 OSINT — 315ГБ ☁️ Хакинг & ИБ — 756ГБ 🙃 Linux & Bash — 459ГБ 😦 Работа в IT — 778ГБ 🖥 Общий архив — 2346ГБ ➡️ Практические инструкции, курсы, книги и инструменты.

📂 Напоминалка для работы с CSS-псевдоклассами! Например, :first-child применяется к элементу, который является первым дочерним элементом родителя, а :first-of-type выбирает первый элемент указанного типа среди дочерних. На изображении - наиболее используемые псевдоклассы для работы со структурой DOM. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурсы