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

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

❤️ The Odin Project — путь от новичка до веб-разработчика!

Хочешь пройти путь от основ до уверенного разработчика без скучной теории и бесконечного поиска информации? The Odin Project - это платформа, где обучение строится на практике: создаёшь полноценные сайты и приложения, реально прокачиваешь навыки фронтенда, бэкенда и даже DevOps.

📌 Оставляю ссылочку: theodinproject.com

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

👩‍💻 Как сделать кастомный “Highlight” текста без JS!

Когда выделяешь текст на сайте, браузер по умолчанию красит его голубым. Но можно полностью кастомизировать выделение.

::selection {
  background: #ffcc00;
  color: #111;
}

Это псевдоэлемент, который управляет стилем только выделенного текста. Работает со шрифтами, цветами и даже с прозрачностью.

Делаем тему динамической:

[data-theme="dark"] ::selection {
  background: #444;
  color: #fff;
}

Можно стилизовать и выделение в input / textarea:

input::selection,
textarea::selection {
  background: #222;
  color: #0ff;
}

🔥 Из таких мелочей складывается ощущение продуманного интерфейса.

📣 Code Ready | #совет