ng-container в Ангулар - это структурная директива в Angular, которая позволяет создавать группы элементов без добавления дополнительного узла в DOM. Это полезно, когда нужно применить директиву или использовать условные конструкции или циклы *ngFor для группы элементов, но при этом не добавлять лишних тегов в разметку.ng-container не является компонентом и не создает своего собственного экземпляра, поэтому к нему не получится доступ через ViewChild или ContentChild. Он просто действует как ко…
Привет всем! Я Кирилл Мыльников, frontend разработчик компании Usetech. Сегодня хочу поделиться информацией о новых методах, которые скоро появятся в коллекции Set в JavaScript.Set был добавлен в стандарте ES2015, но всегда казался немного ограниченным. Работать с ним можно было только через добавление, удаление и проверку наличия элементов. Однако, при работе с несколькими коллекциями или сравнении их, приходилось писать дополнительные функции. Но теперь нам готовят новые методы, которые значи…
Всем привет! Меня зовут Кирилл и я работаю фронтенд-разработчиком. Я расскажу о том, как мы перевели несколько тысяч файлов, написанных на JavaScript, с легаси кода, который использовал goog.module, на новые ES6-модули с помощью построения и преобразования абстрактного синтаксического дерева.Эта статья будет полезна тем, у кого тоже возникла потребность в рефакторинге большого количества кода.Причины, почему мы решили переводить нашу кодовую базуВ нашем проекте мы используем Google Closure Libr…
Привет! Меня зовут Света, я фронтенд-разработчик отдела спецпроектов в 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…