👩‍💻 Задаем пропорции элементов одной строкой!

Раньше, чтобы сохранить пропорции блока (карточки, превью, видео), писали так:

.preview {
  position: relative;
  padding-top: 56.25%;
}

Работает, но сложно читать, неудобно поддерживать.

Современный CSS решает это одной строкой:

.preview {
  aspect-ratio: 16 / 9;
}

Браузер сам поддерживает пропорции элемента без абсолютного позиционирования и костылей.

Чтобы контент внутри не ломал пропорции:

.preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

🔥 Идеально для карточек, галерей, видео, skeleton-экранов

📣 Code Ready | #совет

👍 React Bits — готовые анимации и UI-эффекты!

Это коллекция интерактивных UI-эффектов, анимаций текста и компонентов для React. Здесь можно найти современные визуальные решения для hero-блоков, заголовков, интро и интерфейсных акцентов. Код аккуратный, легко читается и быстро интегрируется в собственные проекты.

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

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

📂 Напоминалка по CSS positioning!

Например, position: relative позволяет смещать элемент относительно его обычного положения, а position: absolute — позиционировать элемент внутри ближайшего спозиционированного родителя.

На картинке — 5 значений position, которые нужно уверенно понимать при верстке и работе с layout’ами.

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

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

Утилита для работы с URL-параметрами!

Вынесение фильтров и состояния в URL улучшает навигацию и восстановление страницы. Ниже — компактный инструмент для работы с query-строкой.

Разбираем строку запроса в объект:

function parseQuery(query = location.search) {
  return Object.fromEntries(new URLSearchParams(query));
}


URLSearchParams обеспечивает корректную обработку спецсимволов и предсказуемый парсинг — особенно важно при динамических параметрах.

Формируем query-строку из объекта:

function toQuery(obj) {
  return "?" + new URLSearchParams(obj).toString();
}

Это упрощает управление состоянием интерфейса и повышает устойчивость навигации.

Читаем параметры: пример, как быстро получить состояние фильтров или любой другой конфигурации из строки URL — удобно при инициализации страницы или восстановлении состояния.

const params = parseQuery("?page=2&sort=asc");
console.log(params);
// → { page: "2", sort: "asc" }

Создаём новый URL:

const next = toQuery({ page: 3, sort: "desc" });
console.log(next);
// → "?page=3&sort=desc"

🔥 Функции подходят для фильтров, пагинации, состояния таблиц, сохранения пользовательских настроек и формирования shareable-ссылок.

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

👩‍💻 Можно ли анимировать элемент при его первом появлении на странице?

Директива @starting-style позволяет задать начальные стили для элемента в момент его появления на странице.

Как это работает:

• Браузер применяет стили из @starting-style только в момент появления элемента;

• Затем элемент плавно переходит к основным стилям;

• Отлично работает с transition, без JavaScript.

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

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

📂 Напоминалка для работы с DOM!

DOM — это то, через что JavaScript управляет HTML: ищет элементы, создаёт новые узлы, вешает события и реагирует на действия пользователя.

На картинке — базовые методы document и node, а также самые часто используемые события мыши, клавиатуры и форм.

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

📣 Code Ready | #ресурс

👩‍💻 Размечает картинку невидимыми областями!

С помощью тега <area> можно сделать красивую навигацию, разметив обычную картинку областями и указав для них ссылки.

Основные формы областей:

• shape="rect" — прямоугольная область;
• shape="circle" — круг;
• shape="poly" — произвольный многоугольник.

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

📣 Code Ready | #атрибут

👩‍💻 Знали, что редактор может помогать вам писать код?

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

📣 Code Ready | #vscode

Определяем, предпочитает ли пользователь уменьшенную анимацию!

Современные ОС позволяют пользователю снизить количество анимаций. Браузер транслирует это предпочтение через media query prefers-reduced-motion, и интерфейс может адаптироваться автоматически.

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

const motionMQ = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
);

const isReducedMotion = motionMQ.matches;

matches читается синхронно и отражает текущее системное состояние на момент инициализации скрипта.

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

motionMQ.addEventListener("change", ({ matches }) => {
  document.documentElement.dataset.motion =
    matches ? "reduced" : "full";
});

Событие change срабатывает при изменении системной настройки, без polling и лишней логики.

Применяем режим при загрузке приложения:

document.documentElement.dataset.motion =
  isReducedMotion ? "reduced" : "full";

Это позволяет синхронизировать состояние интерфейса с системными настройками пользователя.

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

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

📂 Напоминалка по CSS :nth-child()!

Например, :nth-child(3) выберет третий элемент, :nth-child(even) — все чётные, а :nth-child(5n-1) — элементы по заданному шаблону.

На картинке — наглядная шпаргалка по синтаксису :nth-child(): числа, ключевые слова и формулы, которые чаще всего используются в верстке.

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

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

👩‍💻 UX фокус с :focus-visible!

Очень часто фокус делают так:

button:focus {
  outline: none;
}

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

Современный CSS даёт решение:

button:focus-visible {
  outline: 2px solid #4da3ff;
}

:focus-visible показывает фокус только тогда, когда он реально нужен: при навигации с клавиатуры, при accessibility-сценариях и не показывает его при клике мышью.

Если элемент получил фокус мышью — стиля не будет.
Если клавиатурой — будет.

Для полного контроля можно добавить:

button:focus {
  outline: none;
}

🔥 В итоге никакого лишнего фокуса, интерфейс выглядит профессионально и продуманно.

📣 Code Ready | #совет