Что по мидлам? 👀

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

#pixel_pause

💫 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

💳 Коллекция готовых React-хуков

В неё входят решения для работы с событиями браузера, состояниями, сетевыми запросами, таймерами и другими типовыми задачами. Всё реализовано аккуратно, понятно и готово к продакшну.

➕ Проект связан с React.gg — интерактивной платформой, где показывают, как эти хуки создаются и почему работают именно так.

📎 Ссылка на коллецекцию useHooks

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

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

#stack #react

Но все же криво.. 🙂

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

#pixel_pause

🟦 Git restore — когда нужно аккуратно вынуть файлы из staged

Большинство разработчиков знают только git add . и git reset, но есть команда, которая позволяет работать чище и безопаснее — git restore --staged.

Она снимает изменения только из индекса (staged), не трогая рабочую директорию. То есть код остаётся в файлах, но не попадёт в коммит.

Когда это используют:

🔢 Случайно сделали git add .

Добавили лишние файлы?
Вернуть индекс в чистое состояние проще простого:

git restore --staged .

🔢 Собираете «чистый» коммит

Когда в PR важно отделить:

– правки логики
– форматирование
– обновления зависимостей
– рефакторинг

Если что-то случайно попало — легко убрать из staged:

git restore --staged src/utils/helpers.js

🔢 Работа через git add -p

Интерактивно добавляли куски кода и выбрали не тот?
Команда помогает быстро исправить ошибку — без потери изменений в файле.

🔢 Перед rebase или amend

Нужно собрать идеальный коммит.
Важно иметь чистый staged — restore отлично помогает контролировать этот процесс.

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

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

#readme #git

🖥 Bun переходит под крыло Anthropic

Anthropic приобрела команду Oven — разработчиков JavaScript-платформы Bun.

Зачем это Anthropic:

Bun уже используется в Claude Code и Claude Agent SDK. Покупка закрепляет его как технологическую основу продуктов компании.

Что изменится для разработчиков 🔜

По заявлению команды — ничего критичного:
• проект остаётся open-source;
• разработка продолжится на GitHub;
• команда сохраняется;
• roadmap не меняется.

Фактически это усиление стабильности проекта и гарантия его долгосрочной поддержки.

📎 Источник

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

#release_digest