😰 Мошенники получается….

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

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

🚀 Как ускорить React на 300%: реальный кейс

Виртуальный DOM — вещь полезная, но не всемогущая. Если каждый клик запускает цепочку ререндеров, он не спасёт. Со временем даже шустрое React-приложение превращается в тормозящего гиганта.

Что в статье:

📍 Разбор реального кейса: как e-commerce приложение превратилось из быстрого в тормозное, и что помогло это исправить

📍 Причины медленной работы: ненужные ререндеры, монолитные компоненты, неоптимальный context

📍 Использование инструментов: React DevTools, why-did-you-render, профилирование

📍 Практические примеры кода «до» и «после»

📍 Хаки и техники: React.memo, useCallback, useMemo, react-window, динамическая загрузка компонентов

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

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

💧📈 Как сделать гидратацию в React 19 по настоящему эффективной

До выхода React 19 процесс гидратации оставлял желать лучшего: проблемы с производительностью, избыточное выполнение JavaScript и задержки в интерактивности тормозили создание быстрых и отзывчивых приложений.

В статье рассказывается про то, как:

1️⃣ Новые подходы в React 19 изменяют процесс гидратации

2️⃣ Выборочная и прогрессивная гидратация позволяют ускорить взаимодействие с пользователем

3️⃣ Потоковый серверный рендеринг с Suspense снижает нагрузку на клиент

4️⃣Серверные компоненты устраняют необходимость в гидратации для статических частей интерфейса.

Как новые возможности React 19 помогут вам создавать быстрее загружающиеся и более отзывчивые приложения, читаем по ссылке ⬇️

Статья 🔗

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

💭 Документация у него в голове

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

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

🚬 TypeScript вне учебников: продвинутая подборка для тех, кто уже в теме

1️⃣ 15 Advanced TypeScript Tips and Tricks You Might Not Know

Автор делится продвинутыми приёмами TypeScript, включая использование infer, шаблонных литералов и других мощных фич.

2️⃣ Thoughts on State Management Libraries in the React Compiler Era

Обзор изменений в управлении состоянием с приходом React Compiler и как это влияет на необходимость использования сторонних библиотек.

3️⃣ Zod: TypeScript-first Schema Validation

Zod предлагает декларативный подход к валидации схем с автоматическим выводом типов, упрощая разработку и повышая надёжность кода.

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

#свежак

Приглашаем на Frontend Mix — бесплатный митап ЮMoney для всех, кто интересуется фронтенд-разработкой 🔥

🕓 24 апреля, в четверг, в 19:00 (мск) приходите на митап в Санкт-Петербурге или подключайтесь онлайн.

Спикеры из ЮMoney и Сбера расскажут, как работают над задачами и улучшают процессы в команде.

Темы докладов:

🟣 Рефакторинг за 10 секунд. Как с помощью консольной утилиты производить автоматизированный рефакторинг крупных приложений за считанные секунды.
🟣 Подходы и практики тестирования во фронтенде. Зачем нужно тестирование во фронтенде, какие стандарты и подходы существуют и как мы применяем их в своей работе.
🟣 Уязвимости фронтенда в финтехе. Топ-3 атаки, или как построить защиту по всем фронтам — от планирования до релиза.
🟣 Анимация до кончиков пальцев. Поговорим про анимацию в целом и на вебе. Рассмотрим все способы сделать анимацию. Узнаем про композитные слои и как их посмотреть в Dev Tools — на примере одинаковых анимаций, но с использованием разных подходов.

Чтобы попасть на митап, нужна регистрация. Все подробности — на сайте Frontend Mix ❤️

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

Frontend Developer — удаленка/Офис (Москва/Санкт-Петербург)

Frontend Developer (Vue.js) — от 250 000 ₽, удаленно (Москва)

Разработчик JS (Middle) — от 150 000 ₽ до 300 000 ₽, удаленно (Казань)

Frontend-разработчик — офис (Санкт-Петербург)

Frontend-разработчик — 180 000 - 190 000 ₽, удаленно (Москва)

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

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

#свежак

🔧 Как устранить FOUC

FOUC (Flash of Unstyled Content) — это кратковременное отображение неоформленного HTML перед применением CSS, что может негативно сказаться на пользовательском опыте.

Почему возникает:

📍 Асинхронная загрузка стилей.

📍 Динамические изменения DOM через JavaScript до полной загрузки стилей.

📍 Использование async или defer при подключении скриптов, что может привести к несогласованности в порядке загрузки ресурсов.

Как устранить:

1️⃣ Предзагружаем критичные стили

<link rel="preload" href="/styles/main.css" as="style">

2️⃣ Встраиваем Critical CSS прямо в HTML

<style>
body { margin: 0; font-family: system-ui; }
</style>

Таким образом, мы обеспечиваем мгновенное появление базового оформления без скачков.

3️⃣ Минимизируем блокировки рендера

• Добавляем defer к скриптам
• Переносим второстепенные стили вниз
• Избавляемся от лишних <link> в <head>

4️⃣ Оптимизируем изображения

Пересобираем графику в WebP или AVIF, уменьшаем вес — и пользователь видит контент быстрее.

5️⃣ Переходим на SSR

Используем серверный рендеринг (Next.js, Astro и др.), чтобы отправлять уже отрендеренную страницу, а не заставлять браузер гадать, как это должно выглядеть.

💡Следуя приведённым рекомендациям, вы сможете обеспечить плавное и профессиональное отображение вашего веб-приложения с самого начала.

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

#буст