⭐️ Как поведёт себя элемент с box-sizing: content-box

Выше — фрагмент HTML и CSS.

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

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

🔑 Как я решал проблему с аутентификацией через OAuth2 в SPA

Один из подписчиков поделился своим опытом:

«Когда мы начали интегрировать OAuth2 для аутентификации в нашем SPA на React, проблемы начали сыпаться одна за другой. Хранение токенов, обновление сессий без перезагрузки страницы — всё это стало настоящим головным болем.

Мы решили хранить токены в httpOnly cookie для безопасности — так они менее уязвимы для атак. Но вот как обновить их, не теряя сессию?

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

Добавили небольшой интерцептор для axios, который автоматически добавлял свежий токен в заголовки запросов, если он был обновлён. Всё заработало как часы, и пользователи больше не сталкивались с проблемами сессий.»

❓ А вы сталкивались с подобными трудностями при интеграции OAuth2? Как решали такие задачи?

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

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

🚬 Не фича, а почти рефлекс фронтенда

Подсказка: он не виден на экране, но без него интерфейс — просто картинка. Тихий наблюдатель, который просыпается при первом твоём движении.

Какой термин зашифрован! Пишите свою версию ✏️

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

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

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

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

В коде используется функциональный компонент, передаётся 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 при рендере, и старые стили не удалялись — вечером перенёс провайдер кеша в корень приложения, и лаги исчезли.»

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

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

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