👩‍💻 Строки с Tailwind-классами становятся слишком длинными?

Headwind — расширение, которое автоматически сортирует классы Tailwind в правильном порядке, без ручного редактирования. Один запуск и строка становится аккуратной и одинаковой во всём проекте. Особенно полезно, если над кодом работает несколько человек.

📣 Code Ready | #vscode

👩‍💻 Быстро и просто обнуляем специфичность селекторов!

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

Со временем каждый новый селектор должен быть сложнее предыдущего:

.header .nav .item a {
  color: red;
}

Такой код работает, но он повышает специфичность и делает дальнейшие переопределения всё сложнее.

В CSS есть способ этого избежать, использовать :where():

:where(.header .nav .item a) {
  color: red;
}

Особенность :where() в том, что он всегда имеет нулевую специфичность, независимо от того, что находится внутри.

Это значит, что правило применяется, но никогда не мешает более конкретным стилям компонентов. Именно поэтому :where() идеально подходит для базовых и системных стилей:

:where(button) {
  font: inherit;
}

:where(a) {
  color: inherit;
  text-decoration: none;
}

🔥 Такие правила не ломают компоненты, легко переопределяются и позволяют обходиться без !important.

📣 Code Ready | #совет

👩‍💻 Нужно быстро проверить API?

Postman — инструмент для работы с API прямо из VS Code: отправка запросов, просмотр ответов, работа с headers, body, токенами и коллекциями. Удобно тестировать эндпоинты, проверять ответы и разбираться в API ещё до интеграции во фронт. Экономит время и помогает быстрее понять, что приходит с сервера.

📣 Code Ready | #vscode

📂 Напоминалка для работы с 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 | #совет