💫 CSS в движении: 4 базовых эффекта

Вращение, появление, пульсация и bounce — четыре примера, которые пригодятся в любом проекте.

Каждый эффект — это @keyframes и несколько строк CSS. Копируйте и адаптируйте под свои задачи.

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

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

#readme #css

🧩 Архитектура, которая делает код предсказуемым

Смешивание бизнес-логики и побочных эффектов приводит к хрупкости системы: тесты становятся тяжёлыми, изменения — рискованными, а переиспользование — ограниченным.

➡️ Imperative Shell — работа с внешним миром

email.bulkSend(
  generateExpiryEmails(
    getExpiredUsers(db.getUsers(), Date.now())
  )
);

Оболочка отвечает только за взаимодействие с БД и отправку сообщений. Бизнес-логика остаётся неизменной и предсказуемой.

➡️ Переиспользование без боли

Добавление новой функциональности не требует переписывать логику — только меняется контекст использования:

const fiveDaysFromNow = ...
email.bulkSend(
  generateReminderEmails(
    getExpiredUsers(db.getUsers(), fiveDaysFromNow)
  )
);

💡 Принцип простой:

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

Результат — тестируемый, модульный и надёжный код, устойчивый к изменениям.

🔗 Источник: Google Testing Blog

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

#blueuprint #react

🚀 WebGPU получил поддержку всех браузеров

Chrome, Edge, Firefox и Safari официально добавили WebGPU — новый низкоуровневый API для работы с видеокартой прямо в браузере.

Что это меняет:

🟡 Современная 3D-графика — чище и мощнее WebGL, новые шейдеры и нормальная типизация

🟡 ML в браузере — Transformers.js и ONNX Runtime гоняют модели локально с GPU-ускорением

🟡 Рост производительности — Render Bundles дают ускорение рендеринга до х10

🟡 Тяжёлые вычисления — видео, физика и генеративная графика работают почти как в десктопных движках

Статус платформ:

• Android — поддержка с Chrome 121+;
• Linux и Intel Mac — в активной разработке;
• WebGPU уже пригоден для production: экосистема растёт, документация стабилизируется.

🔗 Источник

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

#release_digest

❔ 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