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

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

.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