❔ Grid vs Flex для центрирования — как делать правильно

Когда нужен простой и предсказуемый центр по обеим осям — Grid справляется быстрее и чище, чем Flex.

➡️ Когда Grid — точное решение:

• модальные окна
• лоадеры и спиннеры
• empty states
• hero-блоки
• карточки с иконками и коротким текстом

Любой статичный компонент, где центр — ключевая точка внимания.

💡 Полезный приём

place-items — это шорткат для align-items + justify-items.

Можно настраивать оси раздельно:

.container {
  display: grid;
  place-items: start center; /* вертикаль | горизонталь */
}

➡️ Когда Flex всё ещё лучше:

Flex выигрывает в динамических сценариях:
• несколько элементов в строке
• space-between / space-around
• адаптивный wrap
• навигация, списки, карточки в ряду

Если нужно распределить несколько элементов, а не центрировать один — выбирайте Flex.

🌐 Поддержка: Chrome 59+, Firefox 45+, Safari 11+, Edge 79+

🐸 Библиотека фронтендера

#hotfix #css

🛡️ TypeScript: безопасный доступ к вложенным свойствам

Никаких больше “Cannot read property of undefined”!

// Опасно
const city = user.address.city;
// Ошибка, если address === undefined

// Многословно
const city = user && user.address && user.address.city;

// Безопасно и элегантно
const city = user?.address?.city ?? 'Не указан’;

🔴 Optional chaining (?.)
Возвращает undefined, если слева null или undefined, и не пытается читать свойство дальше.

🔴 Nullish coalescing (??)
Возвращает правую часть только если слева null или undefined.

💡 Чем отличается от ||:

const volume = settings.volume ?? 0.5;
// Если volume = 0, вернёт 0 — корректно

const volume = settings.volume || 0.5;
// Если volume = 0, вернёт 0.5 — нежелательное поведение

✅ Где использовать:

— ответы API
— вложенные объекты конфигурации
— поля форм, которые могут отсутствовать
— опциональные коллбэки

🈁 Примеры:

// Массивы
const first = users?.[0]?.name ?? 'Гость';

// Функции
onClick?.();

// Сложные цепочки
const price = product?.variants?.[0]?.price?.amount ?? 0;

🐸 Библиотека фронтендера

#hotfix #ts