📌 Шпаргалка по 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 — всё разложено по категориям и с примерами.

🔗 Ссылка

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

#буст

📌 Команда дня: оптимизация SVG прямо из CLI

SVG из Figma или Illustrator часто весят в несколько раз больше из-за мусорных тегов и метаданных. Это замедляет загрузку и раздувает бандл. Решение простое — оптимизировать иконки через CLI:

npx svgo logo.svg -o logo.min.svg

➡️ svgo — инструмент для чистки и сжатия SVG

➡️ -o logo.min.svg — сохранить результат в новый файл

💡 После прогонки иконка выглядит так же, но вес может упасть на 30–70%.

Можно оптимизировать сразу папку:

npx svgo -f icons/ -o icons-optimized/

Используйте флаг --multipass для более глубокого сжатия

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

#буст

👋 AI-фишки, которые стоит попробовать

Генерация кода, тестов, рефакторинг и документация — всё в одном репозитории.

➡️ Awesome AI for Programmers — must-have закладка для разработчика.

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

#буст

⚛️ Шпаргалка по ключевым фичам React

В гайде собраны основные примеры: server components, useOptimistic, работа с формами, ошибки, контекст и многое другое.

🔥 Удобный способ быстро освежить в памяти ключевые фичи без перелопачивания доков.

Ниже — полная шпаргалка с примерами, которую удобно держать под рукой 📌

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

#буст

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

#буст

👀 Как находить layout thrashing и фиксить

Иногда интерфейс начинает лагать: скролл рвётся, анимации дергаются. Причина часто в layout thrashing — код заставляет браузер многократно пересчитывать разметку.

Что это:

const h = el.offsetHeight; // пересчёт
el.style.height = (h + 10) + "px"; // новый пересчёт

💡 Если такое внутри scroll/resize или цикла → интерфейс задыхается.

Как найти:

➡️ DevTools → Performance: красные "Layout".

➡️ Console: Forced reflow warnings.

➡️ Rendering → Layout Shift Regions подсветят проблемные зоны.

Как исправить:

— Кэшировать значения layout;

— Использовать requestAnimationFrame;

— Обновлять классы пачкой, а не inline-стили;

— Для крупных проектов — fastdom (разделяет read/write).

📌 В 30% случаев «необъяснимые» лаги во фронте — это forced reflow.

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

#буст

❌ Генератор моков для API

Не всегда есть готовый бэкенд, а верстать и тестировать надо. Для этого можно использовать промпт:

You are a mock API generator.
Given an API schema (OpenAPI or JSON example), create realistic mock data.
– Include edge cases (empty, very long strings, invalid values).
– Output JSON arrays I can plug into MSW/Mock Service Worker.

💡 На выходе — готовые данные для разработки и отладки. Причём не только «идеальные», но и граничные кейсы: пустые строки, слишком длинные значения, некорректные типы.

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

#буст

📌 Сборник алгоритмов на JavaScript

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

➡️ Ресурс подойдёт для практики, подготовки к собеседованиям или как удобная шпаргалка по ключевым алгоритмам.

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

#буст

🔵 Фишка инструмента: Astro

Astro — фреймворк для сайтов «content-first», который по умолчанию отправляет в браузер только HTML, почти без JavaScript. Главная фишка — скорость: страницы загружаются мгновенно, а JS подключается только там, где он реально нужен.

Чем полезен:

— Поддержка компонентов React, Vue, Svelte и даже Solid в одном проекте

— Удобен для блогов, документации и маркетинговых страниц

— Большая экосистема плагинов (Markdown, Tailwind, CMS)

💡 Пример:

Весь сайт статичный, но компонент Counter подгружает JS только для себя:

<Counter client:load />

Итог: страница летает, а лишнего кода в бандле нет.

🔗 Ссылка на GitHub

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

#буст

🚦 Как ловить «висящие» запросы

SPA иногда «залипает» — индикатор крутится, ответа нет. Причина часто в pending-запросах.

1️⃣ Как искать:

— DevTools → Network → сортировка по Status

— Pending-запросы = кандидаты

— Вкладка Initiator покажет, что их вызвало

— Waterfall помогает увидеть длинные цепочки

2️⃣ Фиксы:

— Ставьтете таймауты (axios/fetch):

fetch(url, { signal: controller.signal })

— Отменяйте запросы в cleanup useEffect

— Избегайте дубликатов при повторных монтированиях

📌 Висящие запросы = главный источник «рандомных зависаний» в SPA.

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

#буст

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

Когда React начинает «задыхаться» на тяжёлых списках и таблицах — приходит Million.js. Drop-in библиотека, которая ускоряет рендер до x70 FPS без переписывания всего проекта.

Что умеет:

— Подменяет Virtual DOM React на более быстрый «компилятор»

— Работает как HOC: million/react оборачивает существующие компоненты

— Поддерживает списки, таблицы и часто перерисовывающиеся блоки

Как запустить:

1️⃣ Установка

npx million@latest

2️⃣ Использование

import { For } from 'million/react'

function List({ items }) {
  return (
    <ul>
      <For each={items}>
        {i => <li>{i}</li>}
      </For>
    </ul>
  )
}

💡 Отлично подходит для дашбордов, аналитики и любых «живых» интерфейсов, где много рендеров.

🔗 Ссылка на GitHub

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

#буст

⭐️ Интервью на Middle/Senior Frontend

Видео с живым собесом, где проверяют: React + TypeScript, оптимизация, работа с API, управление состоянием (Redux/MobX/Context), верстка на уровне (Flexbox, Grid), тесты и даже архитектурные подходы.

➡️ Полезно, если хотите понять, что ждут от фронтенд-разработчика с зарплатой 300К+ и как это выглядит на практике.

🔗 Ссылка на видео

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

#буст

📌 Команда дня: поиск неиспользуемого CSS

Оптимизация стилей перед продом:

npx purgecss --css styles.css --content index.html

➡️ --css — путь к стилям

➡️ --content — HTML/JS-файлы, откуда берутся используемые селекторы

➡️ На выходе — список «мёртвых» стилей, которые можно удалить

💡 Советы:

— Можно указать несколько файлов:

--content "./src/**/*.html" "./src/**/*.js»

— Работает с Tailwind, SCSS и шаблонизаторами

— Идеально подходит для прод-сборки: убирает всё лишнее из CSS

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

#буст