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

Когда кастомный шрифт не успевает загрузиться, браузер подставляет свой стандартный 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 | #практика

👩‍💻 Удобная работа с API внутри VS Code!

REST Client - расширение, которое превращает редактор в удобный инструмент для работы с HTTP-запросами. Можно тут же получать ответ от сервера. Плагин поддерживает переменные и окружения, так что можно хранить токены, URL или параметры для разных проектов и легко подставлять их в запросы.

📣 Code Ready | #vscode

Нативная проверка, находится ли элемент в зоне видимости!

Когда нужно показать подсказку только если элемент действительно в зоне просмотра, подсветить активный пункт меню, автоплейнуть видео или зафиксировать секцию — можно использовать нативный getBoundingClientRect().

Проверяем частичную вертикальную видимость элемента в зоне просмотра:

function isVisible(el) {
  const r = el.getBoundingClientRect();
  return r.top < window.innerHeight && r.bottom > 0;
}

Использование:

const box = document.querySelector(".box");
console.log("Виден:", isVisible(box));

Наблюдение за видимостью при скролле:

window.addEventListener("scroll", () => {
  if (isVisible(box)) {
    console.log("Элемент в зоне просмотра");
  }
});

Мини-вариант для группы элементов:

document.querySelectorAll(".item").forEach(el => {
  if (isVisible(el)) {
    el.classList.add("active");
  }
});

🔥 Подходит для ленивых анимаций, подсветки активных блоков и аналитики скролла. А если нужен более точный и энергоэффективный вариант — используйте IntersectionObserver.

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

👩‍💻 Удобный способ унаследовать цвет текста родительского элемента!

currentColor — ключевое слово, которое берёт текущий color элемента и позволяет использовать его в других свойствах, например в рамке, тени или заливке.

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

• border: 2px solid currentColor; — рамка того же цвета, что и текст;

• box-shadow: 0 0 10px currentColor; — тень с цветом текста;

• fill: currentColor; — окрашивает SVG в цвет шрифта;

• outline-color: currentColor; — обводка совпадает с текстом.

Это полезно для упрощения стилей: если изменить color, все зависящие элементы автоматически обновят свой цвет.

📣 Code Ready | #свойство

👩‍💻 Стартовый экран на мобильных устройствах может занимать всё пространство без проблем!

На мобильных 100vh считает и адресную строку, поэтому блок получается выше видимой области, появляется лишний скролл:

.hero {
min-height: 100vh;
}

Современные браузеры дают точную единицу измерения — dvh:

.hero {
min-height: 100dvh;
}

🔥 В отличие от vh, 100dvh учитывает реальную доступную высоту без вмешательства UI браузера. Поддержка уже широкая, а где нужно, можно оставить vh как fallback.

📣 Code Ready | #совет

🤓 Напоминалка для работы с Git.

Например, git push отправляет твои изменения на сервер, а git checkout позволяет быстро переключаться между ветками.

На картинке — 12 самых нужных команд, которые стоит держать под рукой.

Сохрани, чтобы не забыть!

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