Frontend | Иван Усынин

описание

👨🏻‍💻 TechLead Frontend в Альфа-Банк. Запускал проекты в production до того, как это стало мейнстримом. 💡 На канале: рабочие заметки, решение возникающих проблем, полезные материалы про Frontend Связаться: @usyninis

← к каналу @usyninis_dev

119

подписчиков

Охват к подписчикам

133,6%

ERR

Реакции к просмотрам

2,42%

83 на 21 постов

Пересылки к просмотрам

0,58%

Постов в день

0,0

всего 21

Где отзываются чаще

доля реакций к просмотрам

25 июл.RBAC и permission-based проверки на frontend: как мы управляем доступом на проекте 🔐 В больших системах требуется гибкая и масштабируемая модель прав. Классическая проверка доступа строится вокруг ролей: пользователь получает одну или несколько ролей (например, admin, manager, viewer), и каждая роль содержит набор разрешений. Однако при использовании такого подхода появляются проблемы: - Роли начинают разрастаться и дублировать друг друга. - Возникают “почти одинаковые” роли с минимальными отличиями. - Сложно управлять точечными исключениями: если одному пользователю нужно дать доступ только к одной дополнительной кнопке, добавлять новую роль становится избыточно. Чтобы решить эту задачу и избежать подобных проблем мы используем комбинацию RBAC (Role-Based Access Control) и permission-based подхода ⚙️ У нас есть два уровня: 1 уровень — группы пользователей (можно назвать их ролями: admin, manager, top-manager и т.д). Это верхнеуровневая агрегация прав. Группа содержит набор доступных для неё permissions. 2 уровень — permissions (разрешение на выполнение действия) Это атомарные флаги, которые описывают конкретное действие: - user.edit - order.create - order.cancel - feature.toggleX Конечный пользователь в итоге получает список доступных permissions через включение его в группы + индивидуальные permissions. Как это выглядит на frontend После аутентификации backend возвращает список permissions пользователя. Frontend не работает напрямую с кодами групп/ролей — только с уже “развернутыми” permissions. const canEdit = usePermission('user.edit'); return <Plate>{canEdit && <EditButton />}</Plate>; Такой подход даёт баланс между управляемостью и гибкостью: роли упрощают администрирование, permissions позволяют точно контролировать поведение интерфейса, а изменение прав пользователей осуществляется без доработок front/back-сервисов ✨14,29%
30 окт.Выступил на A?.Frontend B-Day Meetup Вчера прошел очень душевный митап, посвященный дню рождения сообщества разработчиков A?.Frontend 🎂 Уютный зал, полностью заполненный гостями, диджей с отличной музыкой , вкусные угощения, крутые и полезные доклады - все это оставило приятные впечатления. Рекорд регистраций был побит 🏆 Я выступал первым - запись выступления можно найти тут: ⚡️ YouTube ⚡️ VK Спасибо нашей отличной команде организаторов 😎 #frontend #js #meetup6,74%
12 апр.Выступил с лекцией в ITHub В минувшую субботу в колледже информационных и креативных технологий IThub в Санкт-Петербурге прошел «профдэй» - в этот день специалисты из индустрии приезжают в колледж, чтобы рассказать студентам о профессии и решить вместе с ними разные кейсы. Я выступил c лекцией о том, какой путь ждет студентов-разработчиков выходящих на рынок труда и поделился практическими советами для развития компетенции frontend. Спасибо ITHub за приглашение! Каждый визит сюда - это погружение в атмосферу студенчества в сочетании с ИТ-технологиями!6,06%
8 мар.Поздравляю прекрасных дам с 8 Марта! Пусть весна цветет не только на улице, но и в душе! Ну а чтобы сделать такой градиент+ascii-арт или прокачать ваши cli-скрипты прикладываю набор полезных npm-пакетов, в том числе, которые использую в работе: 1. Это база - различные утилиты для цветного текста в консоли: https://www.npmjs.com/package/chalk 2. Для написания текста через ascii символы: https://www.npmjs.com/package/figlet 3. Для окрашивания градиентом результатов вызова в консоль: https://www.npmjs.com/package/gradient-string 4. Обводка текста рамкой (блоком): https://www.npmjs.com/package/boxen 5. Готовая уведомлялка в консоль про выход новой версии вашего npm-пакета: https://www.npmjs.com/package/update-notifier 6. Готовый лоадер в консоли для ваших скриптов с поддержкой смены статусов и текста: https://www.npmjs.com/package/ora 7. Отображение красивых шрифтов в консоли: https://www.npmjs.com/package/cfonts 8. Готовые шаблоны для вывода уведомлений об успехе, ошибках или предупреждениях: https://www.npmjs.com/package/cli-alerts 👨‍💻 Ну и на последок - фреймворки для интерактивного взаимодействия вашего скрипта с пользователем через консоль: https://www.npmjs.com/package/commander https://www.npmjs.com/package/inquirer https://www.npmjs.com/package/@clack/core https://www.npmjs.com/package/@oclif/core #js #javascript #typescript #frontend #фронтенд #разработка #dev #webdev #react #nodejs4,52%
27 дек.Приглашаю в Сетку - соц сеть для нетворкинга от hh.ru ⭐️ Пробил 500 подписчиков в сетке, а так же получил мерч за участие в новогоднем конкурсе! 🎁 Подписывайся, давай нетворкаться вместе )3,98%
1 янв.С Новым годом 🎉 Пусть в 2026 ваш код работал без багов, тесты покрывали все сценарии, пайплайны не падали, поставки были в срок, сервера выдерживали нагрузку, память не текла, соблюдались SLA, перевыполнялись планы и KPI, выполнялись все поставленные задачи, юзер стори и цели 🎯 Ну и по классике: счастья! Здоровья! Ура! 🎄 🎉🎅3,87%
28 окт.A?.Frontend B-Day Meetup 🎉 Уже завтра - 29 октября в Санкт-Петербурге пройдет frontend-meetup, где будем праздновать день рождения комьюнити A?.Frontend. Приглашаю всех на событие: участвовать можно как офлайн, так и онлайн 🧑‍💻 . На митапе выступлю с докладом, где расскажу про миграцию frontend-кода и покажу рабочие решения, которые позволяют нам избавиться от рутинных задач по обновлению библиотек на множестве проектов. Зарегистрироваться и ознакомиться с полной программой мероприятия можно по ссылке: https://digital.alfabank.ru/events/frontend-b-day-meetup3,61%
28 нояб.Мой доклад на FrontendConf 2025 Делюсь с вами ссылками на видео моего доклада на FrontendConf 2025! 📱 Смотреть на YouTube: https://youtu.be/-p9HlfTrZkw 📺Смотреть в VK Видео: https://vkvideo.ru/video-163338141_456239798?list=ln-9nWZi5eW3aadSoc4Rf3,37%
2 мар.React.lazy — еще один полезный сценарий 🚀 Одни из самых популярных кейсов использования React.lazy + Suspense — динамическая загрузка отдельных страниц или тяжелых библиотек: // code splitting по роутам const Dashboard = lazy(() => import('./Dashboard')); <Route path="/dashboard" element={<Suspense fallback={<Loader />}><Dashboard /></Suspense>} /> // code splitting для тяжелых библиотек const ImageEditor = lazy(() => import('./ImageEditor')); <Suspense fallback={<Loader />}><ImageEditor /></Suspense> На нашем проекте все построено на микрофронтендах, отчего появились сценарии когда на странице может быть несколько модулей, подгружающихся с разных микрофронтов (remote-модули), но при этом экран загрузки нужен один, к тому же — в разных представлениях, в зависимости от текущей страницы. 👨‍💻 Для подобных сценариев можно собрать компонент-контейнер с Suspense+ErrorBoundary, который будет показывать процесс загрузки и отлавливать ошибки независимо от уровня вложенности remote-модулей. Итоговая структура выглядит так: // контейнер для remote-модулей const ModulesContainer = ({ loadingView, errorView, children }) => ( <Suspense loadingView={loadingView}> <ErrorBoundary errorView={errorView}> {children} </ErrorBoundary> </Suspense> ); // используем модули на любом уровне с одним лоадером: <ModulesContainer loadingView={<CustomLoader />} errorView={<CustomError />} > <ComponentHeader> <ComponentBody> <RemoteModule2 value="a" /> </ComponentBody> </ComponentHeader> <RemoteModule1 value="b" /> </ModulesContainer> P.S.: Не забываем логировать ошибки в ErrorBoundary! 📊 #react #microfrontends #lazy #js #javascript #typescript #frontend #фронтенд #разработка #dev #webdev #react #nodejs3,15%
17 июл.Remotion: make videos programmatically 📹 Remotion — это программный фреймворк, который позволяет создавать видеоролики и моушен-графику с помощью кода, используя веб-технологии: React, HTML, CSS и JavaScript. Вместо традиционного монтажа вы описываете видео компонентами, а затем компилируете их в MP4 или GIF. Говорят что аудитория инструмента — front-разработчики и команды, занимающиеся автоматизацией видеоконтента. Если вы уже умеете писать на React, кривая обучения получается почти нулевой: анимации задаются пропсами и хуками, а не перетаскиванием слоёв мышкой. Немного поигрался в Remotion — скормил свой профиль в сетке через ИИ, вот что получилось ☝️3,13%
24 янв.Навайбкодился В январе решил плотно повайбкодить в Cursor — генерил отдельные UI формы, тапалки, различные фабрики с поддержкой типизации - результаты реально впечатляют ✨👍 Но есть нюанс: лимит токенов закончился довольно быстро (подписка pro). Следующий шаг — разобраться, как именно расходуются токены 🤔: что съедает больше всего (промты/файлы в контексте), и как набить руку так, чтобы профит от использования остался высоким, а лимиты не сгорали за пару сеансов. Если у кого-то уже есть практический опыт оптимизации расхода токенов — делитесь лайфхаками, будет интересно узнать 👀2,92%
4 сент. 2025 г.без подписи2,88%