📌 Как получить данные до загрузки JS

Хотите ускорить первый рендер или мгновенные переходы по сайту? Подгружайте важные ресурсы заранее.

Для текущей страницы:

<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'">

Для будущих переходов:

<link rel="prefetch" href="/next-page-data.json" as="fetch">

➡️ preload — грузит ресурс сразу. Указываем as, чтобы браузер правильно приоритизировал загрузку.

➡️ prefetch — грузит «на будущее» с низким приоритетом, полезно для данных следующей страницы.

Для шрифтов добавляйте crossorigin, если они с другого домена.

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

#буст

🛠 Фишка инструмента: 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 и сразу показать правки команде.

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

#буст

😂 Как отлавливать запросы к GraphQL и строить схему

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

1️⃣ Ищем запросы

В DevTools → Network фильтруем по graphql или POST.
Чаще всего endpoint — /graphql или /api.

2️⃣ Смотрим тело запроса

Открываем вкладку Payload. Там будет поле query:

query {
  user(id: "1") {
    name
    email
  }
}

3️⃣ Восстанавливаем схему

Берем несколько таких запросов и запускаем GraphQL Voyager или graphql-inspector.
Они помогут превратить сырые запросы в визуальную схему.

4️⃣ Автоматизация

Если нужно вытянуть всё:

npm install -g get-graphql-schema
get-graphql-schema https://example.com/graphql > schema.graphql

5️⃣ Бонус

Если сервер не закрыт introspection-запросами, можно отправить:

{
  __schema {
    types {
      name
      fields { name }
    }
  }
}

И получить полную схему официальным способом.

Перехватив всего пару запросов, можно понять структуру GraphQL API, а иногда и найти забытые поля (типа isAdmin 🙃).

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

#буст

📌 Интерактивная шпаргалка для веб-разработчика

Здесь есть подсказки по HTML, CSS, JavaScript, PHP, jQuery и SEO — всё разложено по категориям и с примерами.

🔗 Ссылка

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

#буст