🛠 Фишка инструмента: Bundle Buddy

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

Что дает:

➖ Находит повторяющиеся строки кода между чанками

➖ Работает через source-map (нужно включить исходники)

➖ Для Webpack есть плагин bundle-buddy-webpack-plugin

➖ В интерфейсе видно, какой код встречается в нескольких бандлах

Пример запуска:

npx bundle-buddy ./build/*.js.map

После этого открываете браузер и видите интерактивный граф с пересечениями кода.

🔗 GitHub проекта

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

#буст

📌 Шпаргалка по Performance API и DevTools

Когда проект начинает «тормозить», в ход идут инструменты для поиска узких мест.

DevTools → Memory

1. Делайте Heap snapshot, чтобы находить утечки.

2. Смотрите на Retained size, чтобы увидеть, какие объекты удерживают память.

3. Проверяйте, не остались ли «висящие» DOM-ноды или слушатели после удаления элементов.

Всё про замеры времени и оптимизацию рендера — на картинке ⤴️

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

#буст

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

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

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

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

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

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

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

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

#буст

🔤 Как реализовать 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 «Пропустить к контенту»

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

#буст

📌 Инструмент недели: VisBug

Расширение для браузера от Google Chrome Labs, которое превращает любую страницу в живой макет — без DevTools и Figma.

Что умеет:

➡️ Изменять стили элементов прямо на сайте (цвета, размеры, шрифты)

➡️ Перетаскивать блоки, двигать отступы, менять z-index

➡️ Делать инспекцию типографики, линий сетки и расстояний

➡️ Сохранять быстрые заметки и подсветку на странице

➡️ Работает с любой страницей, даже без доступа к коду

Как начать:

1. Установка VisBug в Chrome Web Store

2. Кликаете иконку — и страница превращается в «песочницу».

💡 Отличный инструмент для дизайнеров и фронтендеров: можно быстро проверить гипотезы по UI и сразу показать правки команде.

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

#буст