🏃‍♀️ Новый поток курса — собери своих AI-агентов

7 октября стартует второй поток курса «AI-агенты для DS-специалистов».
За 5 недель вы научитесь собирать агентов, которые уже сейчас будут помогать бизнесу.

В кружке выше Максим Шаланкин, наш преподаватель, рассказывает подробнее — включай, чтобы не пропустить.

👉 Записаться на курс

😎 Топ-вакансий для фронтендеров за неделю

Middle/Senior Frontend разработчик — удаленно (Минск)

Frontend-разработчик (React) — офис (Краснодар)

React Developer (Middle/Senior) — удаленно

Middle / Middle+ Frontend Developer (Vue) — от 200 000 до 250 000 ₽, удаленно (Казань)

Frontend-разработчик — офис (Ярославль)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак

📱 Эмуляция viewport’а в e2e и SSR

Чтобы протестить мобильный рендер без devtools — эмулируй размер экрана прямо из CLI:

npx playwright open --viewport-size=375,667 https://localhost:3000

Подходит для проверки:

— SSR-адаптивности до загрузки JS

— бага isMobile() в Next.js

— layout’а на разных устройствах

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

#буст

👩 Что добавили в CSS в 2025: от if() до новых анимаций

CSS продолжает удивлять — теперь это уже не просто язык стилей, а почти мини-язык логики и анимаций. В 2025 появились функции, которые раньше казались фантастикой:

➖ Расширенные возможности attr()

➖ Новая математика с calc-size()

➖ Аккуратный перенос строк через text-wrap: pretty

➖ Плавные анимации с interpolate-size

🔗 Подробности с примерами — в статье

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

🔤 Как реализовать Skeleton Loading для плавной загрузки интерфейса

Skeleton Loading — это «серые заглушки», которые показываются до загрузки контента. Пользователь видит структуру страницы и не думает, что сайт завис.

Почему важно:

➖ Реже закрывают страницу

➖ Интерфейс кажется быстрее

Как внедрить:

1. CSS-анимация shimmer:

.skeleton {
  background: linear-gradient(90deg,#eee 25%,#ddd 50%,#eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

2. React/Vue:

показываем <Skeleton /> вместо контента при loading=true.

3. Есть готовые решения:

react-loading-skeleton, MUI Skeleton, primevue/skeleton.

💡 Skeleton Loading не ускоряет загрузку, но делает её «ощутимо» быстрее для пользователя.

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

#буст

Дикий канбан 😱

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

#развлекалово

🔥 Финальный митап лета от Альфа-Банк

В программе:

— DeFi для JavaScript-инженеров

— Микрофронтенды от принципов до single-spa

— Под капотом платформы: десятки приложений вместе

— Гильдия фронтендера: рост, опыт и поддержка

📅 28 августа, 19:00 (МСК)
💻 Онлайн-трансляция • Бесплатно

🔗 Регистрация открыта

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

#буст

📌 Чек-лист доступности (a11y)

Интерфейс может выглядеть идеально, но ломаться для части пользователей. Чтобы продукт был удобным для всех, стоит проверить базовые вещи.

1️⃣ Навигация

— Все кнопки и ссылки доступны через Tab
— Есть видимый focus state

2️⃣ Семантика и ARIA

— aria-label там, где текст скрыт
— Корректные роли (`button`, `dialog`, `alert`)
— Нет лишних ARIA-атрибутов

3️⃣ Контрастность

— Текст соответствует WCAG AA (4.5:1)
— Ошибки/статусы дублируются не только цветом

4️⃣ Screen reader

— Страница читается логично (NVDA/VoiceOver)
— Картинки с alt или role="presentation"
— У форм есть label и подсказка об ошибке

5️⃣ Медиа и динамика

— Видео с субтитрами и стопом
— Анимации не вызывают мерцаний
— Есть skip link «Пропустить к контенту»

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

#буст