Привет! Меня зовут Света, я фронтенд-разработчик отдела спецпроектов в KTS.Наш отдел разрабатывает и запускает около 100 проектов в год. При такой загрузке мы постоянно ищем новые способы ускорить и автоматизировать работу.У нас много библиотек: с общими утилитами и хуками, стилями, классами базовых сторов, с утилитами для ВК- и ОК-приложений. Во всех этих библиотеках нужно постоянно дополнять и заменять какие-то элементы, а после этого тестировать библиотеки на работоспособность.Подключение би…
Методы замедления (Throttling) служат для контроля того, сколько раз мы разрешаем выполнение функции за определенный период времени. Обычно throttling реализуется через Higher Order Function. Функция - обертка должна контролировать, чтобы callback функция вызывалась не чаще одного раза каждые X миллисекунд. Callback функция вызывается немедленно и не может быть вызвана снова в течение оставшегося времени ожидания.Задача на реализацию Throttling часто дается на интервью и на первый взгляд кажетс…
Привет, Хабр! Меня зовут Виктор, я Frontend-разработчик в Clevertec. Сейчас мы с командой разрабатываем веб-версию банкинга с использованием React. Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, мы используем Web API. Подробно расскажу о них в этой статье и раскрою некоторые тонкости.Web Share APIWeb Share API позволяет веб-приложениям обмениваться ссылками, текстом и файлами с другими приложениями, установленными на устройстве, так же, как это д…
Привет, Хабр. Меня зовут Алексей, я занимаюсь разработкой в сервисе бронирования отелей МТС Travel. Нам примерно два года, но мы быстро растем, так что наши данные стали регулярно парсить, из-за чего пришлось искать методы защиты. В итоге мы решили использовать fingerprint для фильтрации трафика. Дальше расскажу о трудностях при его внедрении, а еще о том, как мы старались минимизировать неудобства для пользователя.Fingerprint в двух словахFingerprint — это технология, позволяющая идентифициров…
Модальные окна - важная часть UI современных веб-приложений. Управление ими в React может вызвать трудности, в частности, когда нужно избежать одновременного появления нескольких окон. Для этого и существует хук useModalControl, который облегчает эту задачу.ПроблемаРазработчики регулярно сталкиваются с задачей контроля за состояниями множества модальных окон. Отсутствие централизованного управления может привести к путанице в процессах открытия и закрытия окон, что, в свою очередь, увеличивает …
Дисклеймер: код испольуемый в данной статье предназначен исключительно для демонстрационных целей.Исходный код можно найти здесь Предусловие:имеется GraphQL API сервер. В данном примере, его адрес: http://localhost:5001/graphql. Он реализован с помощью postgraphile. Его настройка и запуск описаны ниже.Клиентское приложение создадим на основе vitejs и reactnpm create vite@latest client -- --template react-ts Для автогенерации api RTK Query предоставляет плагин @graphql-codegen/typescript-rtk-qu…
Впервые за весь свой опыт работы frontend разработчиком я столкнулся с задачей определения города (решение применимо не только для города, но и страны, улицы и т.д.) текущего пользователя и, порыскав в интернете, находил лишь кусочки того, что мне нужно, поэтому, чтобы сэкономить время тех, кто столкнулся с похожей задачей решил опубликовать данную статью.Прежде чем писать код, хотелось бы отметить, что моё решение не претендует на "чистое" и единственно-верное, поэтому если есть более …
Недавно мне посчастливилось развернуть Next.js на сервере с помощью PM2. Этот способ я не нашел в документации фреймворка, хотя считаю его довольно удобным, при этом гайдов по теме оказалось очень мало. Рассказываю, как всё сделать, и привожу рабочие примеры.Заманчивое предложениеВ конце весны в команде появилась задача на разработку веб-приложения с игровыми механиками для одного крупного клиента. К тому моменту давно хотел попробовать Next.js, но руки всё никак не доходили. В этот раз появилс…
Angular, один из самых популярных фреймворков для разработки одностраничных приложений (SPA), постоянно развивается, добавляя новые возможности и улучшая существующие. Одной из таких новых возможностей стали Standalone компоненты, представленные в Angular 14.Что такое Standalone компоненты?Standalone компоненты — это компоненты, которые могут использоваться без необходимости добавления их в модуль. Традиционно, в Angular каждый компонент должен быть объявлен в модуле (например, AppModule), чтоб…