📂 Напоминалка по HTML <input> типам!

Например, type="email" автоматически включает базовую валидацию e-mail, а type="date", type="time" и type="range" дают нативные контролы без лишнего JS.

На картинке — часто используемые типы <input>, которые стоит держать под рукой.

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

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

👩‍💻 Устанавливаем несколько разрешений и типов фонового изображения!

CSS-функция image-set() позволяет перечислить несколько фоновых изображений с условиями, по которым браузер решит, какое из них наиболее подходящее для загрузки в данный момент.

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

• Загрузка @1x / @2x / @3x изображений для Retina-экранов;

• Выбор более лёгкого изображения для обычных дисплеев;

• Указание альтернативных форматов (webp / avif) с фолбэком.

Конечно, есть тег <picture>, но если изображение декоративное, будет правильнее установить его как фон элемента.

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

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

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

.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 | #ресурс