👩‍💻 Управляем состоянием интерфейса через :has()!

Чтобы изменить стиль родителя, когда вложенный элемент находится в активном состоянии делают:

parent.classList.toggle('open', child.checked)

Но CSS может делать это сам:

.card:has(.toggle:checked) .content {
  max-height: 400px;
}

Если внутри .card есть элемент.toggle, который checked, то .content автоматически раскрывается.

Изменение внешнего вида родителя в зависимости от действий пользователя:

.input:has(input:focus) {
  border-color: #4da3ff;
}

Подсветка активного пункта меню:

nav:has(a.active) {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

🔥 Родитель сам понимает, что внутри есть активный элемент.

📣 Code Ready | #совет

Проверяем, находится ли элемент в фокусе!

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

Браузер хранит текущий фокус в document.activeElement:

console.log(document.activeElement);

Проверяем, сфокусирован ли конкретный элемент:

const input = document.getElementById('username');

if (document.activeElement === input) {
  console.log('Поле username сейчас в фокусе!');
}

Отслеживаем смену фокуса:

document.addEventListener('focusin', (e) => {
  console.log('Фокус перешёл на:', e.target);
});

Проверяем, что фокус ушёл:

document.addEventListener('focusout', (e) => {
  console.log('Элемент потерял фокус:', e.target);
});

🔥 Такой подход полезен для форм, модалок, горячих клавиш, редакторов и любых интерактивных интерфейсов.

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

👩‍💻 Хотите открыть проект из GitHub, не скачивая его?

Remote Repositories — расширение, которое позволяет работать с репозиторием прямо в VS Code: просматривать файлы, править код, создавать коммиты и пушить изменения, без локального клона. Идеально, когда нужно быстро проверить структуру проекта или что-то поправить.

📣 Code Ready | #vscode

👩‍💻 Готовые шаблоны регулярных выражений!

Regex Snippets — расширение, которое добавляет набор готовых шаблонов регулярных выражений: проверка email, поиск чисел, валидация пароля, извлечение групп, работа с пробелами, датами, URL и др. Пишешь короткий префикс и получаешь готовый рабочий паттерн.

📣 Code Ready | #vscode

Как избавиться от подмен в типографике?

Когда кастомный шрифт не успевает загрузиться, браузер подставляет свой стандартный generic sans-serif. Это может испортить вид интерфейса:

body {
  font-family: "PT Sans", sans-serif;
}

Но ещё хуже, когда fallback вообще не задан, тогда интерфейс может внезапно превратиться в дефолтный serif (на Windows это часто Times New Roman):

body {
  font-family: "PT Sans";
}

Современный CSS даёт более аккуратный и предсказуемый вариант, используй system-ui, чтобы браузер подставил нативный системный шрифт ОС:

body {
  font-family: "PT Sans", system-ui;
}

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

📣 Code Ready | #совет

Отменяем старые fetch-запросы — оставляем только актуальные данные!

В поиске, автокомплите и живых фильтрах ответы от сервера могут приходить не по порядку, из-за чего показывается не самый свежий результат. Один из простых и надёжных способов избежать этого — отменять предыдущий запрос через AbortController.

Проверяем поддержку:

console.log("AbortController" in window);

Делаем контроллер и отправляем запрос:

let controller;

function load(url) {
  if (controller) controller.abort();

  controller = new AbortController();
  return fetch(url, { signal: controller.signal });
}

Используем при вводе:

field.addEventListener("input", () => {
  load("/api/search?q=" + field.value)
    .then(r => r.json())
    .then(data => console.log("Актуальный ответ:", data))
    .catch(e => e.name === "AbortError" || console.error(e));
});

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

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