✔ Разработали новый компонент распознавания паспортных данных

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

Компонент независим от контекста использования, т.е его можно встроить в любую форму, где может потребоваться работа с паспортом и его данными. Для пользователя это значит, что не надо вручную вводить данные, достаточно «скормить» документ форме - и она заполнится автоматически.

👨‍💻 С точки зрения бизнес функциональности можно так же считать документ невалидным в зависимости от результатов распознования (например, плохое качество изображения).

p.s: на записи все данные вымышлены :)

#workflow@usyninis_dev #js #javascript #frontend

Я на FrontendConf 2025

Уже совсем скоро: 21 октября выступаю на одной из крупнейших конференций для фронтенд-разработчиков в России.

✔️ Тема доклада: Микрофронтенды: упрощаем разработку через dev-окружение

Это мой первый опыт выступления на подобном мероприятии. Настрой отличный, постараюсь дать максимум пользы 💬

Подробнее о докладе и самой конференции: https://frontendconf.ru/moscow/2025/abstracts/16074

#js #javascript #front #frontend #web #developer #frontendconf2025

🧑‍💻 Инкапсуляция контекста

На досуге решил поизучать как устроен Fastify - фреймворк для Node.js. Если вы еще не знакомы с ним - советую присмотреться повнимательнее: он обещает высокую производительность и гибкость благодаря минимальному оверхеду и продуманномой архитектуре.

Fastify использует систему плагинов для расширения функциональности и самое интересное началось когда я в одном из плагинов попыталя повесить хук на запросы, ожидая что он отработает на все запросы к серверу. Но данный хук отрабатывал только на маршруты внутри самого плагина. Пошел читать доку и наткнулся на фундаментальную особенность Fastify - инкапсуляция контекста.

🤔 Что такое инкапсуляция контекста?

Это способ организации кода таким образом, чтобы каждый хук/декоратор/плагин имел доступ лишь к нужным объектам данных, т.е. к нужному контексту (см. картинку). Это помогает избежать проблем с глобальными обработчиками, сплетением хуков/обработчиков/переменных внутри проекта. Фактически, это значит, что ваш код становится чище и проще в поддержке.

При этом, в случае необходимости, шаринг контекста легко можно реализовать через отдельную утилиту fastify-plugin - о чем описано в официциальной доке, и все это с понятными примерами. Интересный подход 🙂

Fastify документация:
https://fastify.dev/

Про инкапсуляцию:
https://fastify.dev/docs/latest/Reference/Encapsulation/

#fastify #nodejs #javascript #typescript #js #ts #frontend #webdev #context

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 #nodejs

Поздравляю прекрасных дам с 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 #nodejs