📌 Команда дня: оптимизация 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

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

#буст

⭐️ Чек-лист фронтендера перед релизом

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

💡 В чек-листе собраны ключевые пункты — от структуры HTML и подключения шрифтов до оптимизации картинок, производительности, безопасности и SEO.

📑 В каждом разделе есть ссылки на статьи, тулзы и видео для проверки.

🔗 Ссылка на GitHub

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

#буст