❓ Задача: лишний ререндер

Вы заметили, что компонент повторно рендерится при каждом изменении родителя, хотя его пропсы остаются теми же.

В коде используется функциональный компонент, передаётся onClick, определённый внутри родителя как анонимная функция.

Как можно избежать лишнего рендера этого компонента? 😐

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

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

🥲 Хотели новый опыт — получили новый вид боли

Сначала всё как в сказке: рендер за миллисекунду, бандл ноль, DX на десятку. А на деле — баги, костыли и ощущение, что ты не код пишешь, а фреймворк отлаживаешь за его авторов.

Вопрос от подписчика:

«Пробовал Solid — вроде быстрый, всё летает, но как только начинаешь что-то серьёзное делать, всё сыпется. Devtools нестабильные, баги вылазят на ровном месте. С Qwik вообще не понял, как с этим жить — ощущение, что дебажу не код, а магию. Marko — прикольный, но куда его вообще девать, кто его реально юзает? Есть тут кто юзал это всё в проде и не пожалел? Или всё это — больше про доклады, чем про реальные проекты?»

❓ Брали ли вы что-то из этих новых фреймворков под реальные задачи?

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

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

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

🔍 Soft skills для фронтендера

Веб-разработка требует не только технических навыков, но и умения эффективно коммуницировать, управлять задачами и работать с клиентами. Но на самом деле это так важно?

✅ Когда soft skills полезны:

— Командная синергия: четкая коммуникация помогает быстрее понять требования и избежать ошибок.

— Гибкость в сроках: грамотное общение с клиентом помогает находить компромиссы по времени и функциональности.

— Междисциплинарное сотрудничество: понимание особенностей других команд улучшает совместную работу и ускоряет процесс.

➖ Когда это не так важно:

— Фокус на коде: иногда важно просто погружаться в работу и не отвлекаться на обсуждения.

— Качество кода важнее: когда решение принято, главное — не общение, а правильная реализация.

💬 А как вы думаете? Нужны ли фронтендерам soft skills или достаточно быть крутым кодером?

Поделитесь мнением в комментариях! ✏️

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

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

😶 Задача: интерфейс реагирует не так, как ожидалось

Вы получаете баг-репорт:

«Кнопка ‘Продолжить’ не нажимается в Safari на iOS, хотя в других браузерах всё работает.»

Проверяете верстку и видите, что кнопка абсолютно позиционирована внутри div, у которого z-index: 10. Поверх неё расположен прозрачный div (opacity: 0, z-index: 20, pointer-events: auto).

Что с наибольшей вероятностью мешает клику по кнопке ❓

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

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

💬 Общие чаты в команде: за и против

Slack, Telegram, Discord — рабочие чаты стали центром всего: задачи, баги, апдейты, мемы. Удобно… пока не превращается в постоянный шум и расфокус.

🔘 Что удобно:

— Быстро решить вопрос без созвонов

— Видно, кто чем занят

— Меньше митингов, больше живого контекста

— Держит команду в тонусе

🔘 Что бесит:

— Поток отвлечений не прекращается

— Важное тонет в болтовне

— Нарушает фокус и deep work

— Появляется тревожка «а вдруг я что-то пропустил»

Чаты работают, когда в них есть правила: меньше @all, больше тредов, без лишнего шума — и никто не сходит с ума.

❓А как у вас: общие чаты помогают или выматывают? Расскажите, как вы с этим справляетесь👇

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

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

🧪 Feature-флаги во фронте

В проекте нужно включать/отключать экспериментальные фичи для разных пользователей. Вы решаете внедрить систему feature flag’ов.

Рассматриваются такие варианты:

➰ Получение флагов с сервера

➰ Чтение из .env

➰ Флаги на этапе билда

➰ Рендеринг на сервере с разными конфигурациями

Что обязательно нужно учесть при выборе способа ❓

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

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

🧑‍💻 Безумные запросы от дизайнеров, которые пришлось реализовать

Работа с дизайнерами — это всегда вызов, когда их креативные идеи выходят за рамки привычного.

Вопрос от подписчика:

«Однажды дизайнер настоял на том, чтобы кнопки в интерфейсе были в стиле старых приложений Windows 95 — с анимациями и даже с мигающими кнопками. «Старый стиль», «кнопки, которые моргают», — все это нужно было сделать с помощью CSS. Конечно, такой запрос вызвал у меня вопросы и у всей команды, но в итоге мы смогли воссоздать эту атмосферу, только с использованием современных технологий.»

❓ Какие странные идеи от дизайнеров вам приходилось выполнять? Что из этого точно не для продакшн?

Поделитесь своими историями в комментариях 🔚

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

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

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

🧩 Компоненты или все в одном

Когда разрабатываете интерфейс, всегда возникает вопрос: стоит ли разделять его на маленькие, атомарные компоненты или проще собрать всё в одном?

Каждый подход имеет свои плюсы и минусы, и важно выбрать тот, который подходит именно для вашего проекта.

✅ Преимущества разделения на компоненты:

— Маленькие компоненты легко переиспользуются, что упрощает поддержку и расширение проекта.

— Компоненты легче тестировать и изменять, что делает код более гибким и читаемым.

— Когда каждый работает над своим компонентом, это упрощает взаимодействие в команде.

⛔️ Почему всё в одном тоже имеет смысл:

— В небольших проектах бывает проще не заморачиваться на создание множества компонентов, а просто сделать один большой.

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

— Когда всё в одном компоненте, проще контролировать логику и избежать излишней абстракции.

Что для вас удобнее: дробить интерфейс на множество маленьких компонентов или работать с одним большим?

Поделитесь в комментариях! ✏️

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

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

🤔 Задача: как должен вести себя интерфейс при удалении

Вы создаёте SPA для управления задачами. У каждой задачи есть id, title и status. Удаление реализовано так:

await fetch(`/api/tasks/${id}`, { method: 'DELETE' });

Далее замечаете следующую проблему: после клика по «Удалить» задача исчезает из интерфейса, но при ошибке сервера (например, 500) остаётся в базе.

Пользователь думает, что задача удалена, но при обновлении страницы она возвращается 😭

❓ Как улучшить UX и корректно реализовать удаление задачи?

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

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

🫠 Как я отловил «утечку» стилей через CSS-in-JS в крупном SPA

Наш подписчик работал над крупным корпоративным SPA на React с использованием Emotion для стилизации компонентов. В какой-то момент приложение стало заметно «тормозить» после нескольких переключений между разделами:

«Заглянув в DevTools, увидел, что <head> заполняется дублирующимися <style>-тегами. Оказалось, я каждый раз создавал новый Emotion-cache при рендере, и старые стили не удалялись — вечером перенёс провайдер кеша в корень приложения, и лаги исчезли.»

❓ А вы сталкивались с такими «утечками»?

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

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

❤️ Производительность при рендеринге больших списков

В вашем приложении есть список из 1000+ элементов, который подгружается на страницу сразу. Пользователь жалуется на низкую производительность и долгую загрузку страницы.

❓ Как бы вы улучшили производительность?

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

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

😶 Редкие баги из продакшена

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

Вопрос от подписчика:

«Недавно словили кейс: приложение периодически зависало у пользователей в Южной Америке. Логи — пустые, трейсей нет, на стендах всё стабильно. Подозрения на сеть и какой-то специфичный браузер. Но проверить напрямую — никак. Как вы в таких случаях находите причину и воспроизводите баги?»

❓ Какие техники, инструменты или хитрости помогают вам вылавливать такие баги? Пишите в комментах 👇

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

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

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

💬 Фриланс vs найм: что лучше

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

➡️ Фриланс:

— Гибкий график, проекты на вкус
— Быстро прокачиваешь навыки
— Доход выше при умелом подходе
— Каждый день новые вызовы

📎 Нет соцпакета, нестабильный доход, всё на вас

➡️ Корпоратив:

— Стабильная зарплата и соцпакет
— Менторство и карьерный рост
— Процессы уже налажены
— Работа в команде

📎 Менее гибко, проекты выбираете компания, бюрократия

Фриланс и офис не конкурируют, а показывают разные пути развития. Главное — понять, что важнее именно вам.

А вы что выбрали бы: свободу фриланса или стабильность в найме ❓

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

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

🤦‍♀️ Проблемы с порядком после drag & drop

Вы реализуете drag & drop для задач с сохранением порядка через поле order (например, 1, 2, 3…).

После нескольких быстрых перестановок (10+), список отображается неправильно — некоторые задачи «прыгают» на старые позиции при обновлении.

❓ Что с наибольшей вероятностью вызывает эту проблему?

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

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

🙃 Пропавшие уведомления

Приложение получает уведомления по WebSocket. Пользователи жалуются, что после переподключения к интернету они не видят часть уведомлений.

Что скорее всего не реализовано ❓

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

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

💬 Тесты: e2e против unit

У каждого фронтендера был момент: билд зелёный, все unit-тесты проходят, а на проде кнопка «Купить» не работает. Или наоборот — e2e гоняются часами, падают от любого чиха, а баг кроется в двух строках функции.

⚡️ e2e
— Проверяют продукт глазами пользователя
— Сразу видно, что реально сломалось
— Цепляют баги, мимо которых пройдут юнит-тесты

📎 Но: тяжёлые, нестабильные, требуют инфраструктуры и нервов

⚡️ Unit
— Легко писать и поддерживать
— Ловят мелкие баги в логике
— Дают уверенность при рефакторинге

📎 Но: могут показать «всё ок», когда приложение падает в бою

👉 Что важнее: быстро ловить баги в коде или рабочий сценарий для юзера❔

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

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

🤔 SSR и гидратация

Приложение на Next.js отрендерено на сервере. На клиенте после загрузки React «гидратирует» DOM. Вы замечаете ошибку:

“Warning: Text content did not match. Server: ‘100’ Client: ‘101’”.

Что это означает ❓

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

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

🧩 Скрытый баг в списке

{items.map((item, index) => (
  <input
    key={index}
    defaultValue={item.name}
  />
))}

На тесте замечено:

— При удалении элемента данные «съезжают» — значения в инпутах не совпадают с item.name.

— Иногда при редактировании одного поля меняется значение в другом.

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

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

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

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

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

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

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

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

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

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

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

🗿 Незаметные ререндеры

const FiltersContext = createContext({ filters: {} });

function App({ filters, items }) {
  return (
    <FiltersContext.Provider value={{ filters }}>
      {items.map(i => <Item key={i.id} />)}
    </FiltersContext.Provider>
  );
}

— Даже если filters не меняются, при любом апдейте родителя все Item снова ререндерятся.

❓ Почему так происходит?

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

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