Определяем системную тему пользователя!

Современные браузеры умеют определять системные предпочтения пользователя — например, светлую или тёмную тему. Это позволяет интерфейсу автоматически адаптироваться под окружение без лишних настроек.

Проверим текущие настройки:

const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
console.log(isDark ? "🌙 Тёмная тема" : "☀️ Светлая тема");

Реагируем на изменение темы:

const mq = window.matchMedia("(prefers-color-scheme: dark)");

mq.addEventListener("change", e => {
  document.body.dataset.theme = e.matches ? "dark" : "light";
  console.log(`🎨 Тема: ${e.matches ? "dark" : "light"}`);
});

И сразу применяем тему при загрузке:

document.body.dataset.theme = isDark ? "dark" : "light";

🔥 Такой пример полезен для практики работы с браузерными API, реакцией на системные события и динамическим управлением интерфейсом.

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

👩‍💻 Масштабируй весь интерфейс одной строкой!

Все размеры заданы в rem?
Значит, масштабировать дизайн можно одним изменением:

html {
  font-size: 62.5%; /* 1rem = 10px при базовых 16px */
}

Хочешь увеличить всю страницу на 20% — достаточно поменять одно значение:

html {
  font-size: 75%;
}

Всё: шрифты, отступы, кнопки, автоматически подстроятся, если их размеры заданы в rem:

h1 {
  font-size: 2.4rem; /* 24px при font-size:10px */
}

.button {
  padding: 1.2rem 2rem;
}

Подходит для дизайн-систем, адаптива и гибкой настройки интерфейса под пользователя.

📣 Code Ready | #совет

👩‍💻 Нужно быстро перевести текст, название переменной или комментарий?

VS Code Google Translate — помогает перевести выделенный фрагмент, получить варианты перевода и даже использовать его для именования функций, переменных или комментариев. Особенно удобно, если работаешь с мультиязычными проектами или документацией.

📣 Code Ready | #vscode

Определяем, активна ли вкладка!

Когда вкладка не в фокусе, нет смысла выполнять тяжёлые операции — можно приостановить рендер, обновления данных или анимации. Для этого существует событие visibilitychange.

Проверим текущую видимость:

console.log(document.visibilityState);
// Обычно "visible" или "hidden"

Реагируем на изменение состояния вкладки:

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    console.log("Вкладка неактивна — ставим процесс на паузу");
    stopRendering();
  } else {
    console.log("Вкладка снова активна — продолжаем работу");
    resumeRendering();
  }
});

Для удобства можно оформить в небольшую утилиту:

function onVisibilityChange(callback) {
  const handler = () => callback(!document.hidden);

Вызываем сразу, чтобы получить текущее состояние при инициализации:

  callback(!document.hidden);

  document.addEventListener("visibilitychange", handler);
  return () => document.removeEventListener("visibilitychange", handler);
}

Пример использования:

const unsubscribe = onVisibilityChange(isVisible => {
  console.log(`Вкладка ${isVisible ? "активна" : "скрыта"}`);
});

🔥 Такой подход лежит в основе умного управления активностью приложения — автоматической паузы фоновых процессов, оптимизации real-time обновлений и снижения нагрузки.

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