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

#буст

👀 Как находить 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

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

#буст

📚 FrontendBooks — канал с лучшими книгами по FrontEnd технологиям!

1️⃣ JavaScript
2️⃣ React
3️⃣ Angular и Vue
4️⃣ HTML и CSS

Подпишитесь и скачивайте книги: @frontendbook

Реклама. Киренкина Марина Дмитриевна, ИНН 345702417736. Erid 2VtzqwJF3ej

⏱ Почему браузеры ограничивают JavaScript таймеры

Статья объясняет, зачем браузеры замедляют setTimeout и другие таймеры, как это защищает пользователей и влияет на производительность.

💡 Разбираются альтернативы — MessageChannel, window.postMessage, scheduler.postTask — и показано, какие из них работают быстрее.

🔗 Читать статью

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

Знакомая ситуация 🍻

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

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

😎 Антипаттерны фронтенда

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

1️⃣ ТОП 7 антипаттернов React

➡️ Видео с наглядными примерами ошибок, которые превращают проект в хаос: от пропс-дриллинга до гигантских компонентов.

2️⃣ Организация потоков данных во фронтенд-приложениях

➡️ Хотя статья не полностью «антипаттерны», есть разбор того, как плохая организация потоков данных может породить антипаттерны. Полезно понять, как избежать каша в данных.

3️⃣ Паттерны и антипаттерны написания условий в JS

➡️ Разбор типичных if-else и тернарных адов. Показывает, как простые привычки могут убить читаемость.

4️⃣ Избегайте 5 антипаттернов с коллекциями в JS

➡️ Как неправильно работать с массивами и коллбэками, и какие практики реально спасают от багов.

5️⃣ Антипаттерны в разработке: что с ними делать

➡️ Теория и практика: откуда берутся антипаттерны, как их распознавать и как чинить, если уже всё плохо.

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

#свежак

🧩 Ловушка оптимизации

{orders.map(order => (
  <OrderCard key={order.id} data={order} />
))}

На тесте заметили:

— При 3000 заказах список подлагивает, даже после добавления виртуализации.

— Профайлер показывает сотни повторных ререндеров OrderCard, хотя данные не меняются.

❓ В чём настоящая проблема? Отмечайте правильный эмодзи 👋

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

#междусобойчик

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

Frontend Стажер — удаленно (Чебоксары)

Middle Frontend-разработчик — от 170 000 до 220 000 ₽, удаленно (Новосибирск)

Frontend Engineer — от $99 500 до $200 000 per year, office (New York)

Frontend Developer (React) — удаленно

Junior Frontend Developer — удаленно (part-time)

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

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

#свежак

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

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

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

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

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

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

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

2️⃣ Фиксы:

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

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

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

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

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

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

#буст