Всем привет! Меня зовут Женя, я разработчик из QIWI, занимаюсь созданием внутренних сервисов. Совсем недавно мы провели эксперимент по использованию микрофронтендов, и я хочу поделиться с вами опытом использования. В качестве основы для построения системы мы выбрали фичу Webpack - Module Federation.
Frontend Developer
Wireshark — подробное руководство по началу использования
Wireshark – это широко распространённый инструмент для захвата и анализа сетевого трафика, который активно используется как для образовательных целей, так и для устранения неполадок на компьютере или в сети. Wireshark работает практически со всеми протоколами модели OSI, обладает понятным для обычного пользователя интерфейсом и удобной системой фильтрации данных. Помимо всего этого, программа является кроссплатформенной и поддерживает следующие операционные системы: Windows, Linux, Mac OS X, Solaris, FreeBSD, NetBSD, OpenBSD.
AbortController: Варианты применения для эффективного управления асинхронными операциями
В современных веб-приложениях асинхронные операции играют ключевую роль. Однако управление ими может быть сложным, особенно когда нужно отменить задачи, уже отправленные на выполнение. До появления AbortController разработчики прибегали к различным костылям, таким как создание глобальных переменных, которые отслеживали состояние запроса или использование оберток над XMLHttpRequest.
React и Typescript: Создание динамического компонента на примере кнопки
React и Typescript являются очень мощными инструментами для создания динамичных пользовательских интерфейсов. Создание универсального компонента, который может использоваться в различных ситуациях, является одной из ключевых задач при разработке веб-приложений. В этой статье мы рассмотрим создание такого компонента на примере кнопки, разберемся как использовать типизацию для создания динамических компонентов с использованием React и Typescript.
WebRTC для всех и каждого. Часть 1
Привет, друзья!
Представляю вашему вниманию первую часть перевода этой замечательной книги по WebRTC. Данная часть посвящена тому, что такое WebRTC
, процессу сигнализации и установки соединения (первые 3 части оригинала).
Справедливости ради следует отметить, что на Хабре уже публиковался "вольный" перевод первых 2 частей оригинала (часть 1, часть 2), но автор по какой-то причине решил не продолжать. Я, свою очередь, решил начать с самого начала, без лишних вольностей и сокращений.
Ссылка на вторую часть перевода.
Если вам это интересно, прошу под кат.
Мониторинг WebRTC стримов с помощью Prometheus и Grafana
Системы мониторинга — очень нужная для админа вещь, ведь они позволяют получать от сервисов метрики, которые:
WebRTC: как два браузера договариваются о голосовых и видеозвонках
Спойлер: никак. За них это делает разработчик.
Когда много лет назад начали убивать Flash, пострадали не только браузерные игры. Flash традиционно была сильна в голосовых и видеозвонках: прямой доступ к микрофону, камере, динамикам, возможность работать с UDP-пакетами. В HTML5 заменой стала технология WebRTC. Та самая, которая несколько месяцев назад наконец-то приземлилась в Safari и Edge. Теперь можно звонить с веб-страницы, открытой на iPhone, на другую веб-страницу, например, открытую в Firefox Quantum на линуксе.
Одна из «фишек» WebRTC, которой не было у Flash — это возможность P2P-соединений между браузерами. Но чтобы peer-to-peer работал, программисту придется помучиться. О том, как браузеры договариваются куда слать UDP-пакеты, и что при этом должен сделать разработчик — под катом.
React + mobx путь с нуля. Mobx + react, взгляд со стороны
В «настоящих» проектах мы получаем данные от сервера или пользовательского ввода, форматируем, валидируем, нормализуем и производим другие операции над ними. Всё это принято считать бизнес логикой и должно быть помещено в Model. Так как react — это только треть MVC пирога, для создания пользовательских интерфейсов, то нам потребуется еще что-то для бизнес логики. Некоторые используют паттерны redux или flux, некоторые — backbone.js или даже angular, мы же будем использовать mobx.js в качестве Model.
Как дизайн влияет на метрики: показываем на примере личного кабинета врача
Привет! Я Даша Почекуева, дизайнер в СберЗдоровье. В последние полтора года я работаю над личным кабинетом врача телемедицины — платформой, на которой врачи СберЗдоровья общаются с пациентами.
Эта статья о влиянии интерфейсных фич на метрики. Здесь не будет универсальных советов, волшебных таблеток и зрелищных картинок, но будут опросы, графики и решения, выдержавшие проверку временем.
Статья пригодится продуктовым дизайнерам, которые работают над интерфейсами для внутренних заказчиков, особенно медицинскими.
Использование Effector в стеке React + TypeScript
В этой статье я поделюсь своим кратким обзором внедрения стейт-менеджера Effector в продуктовый проект на стеке React + TypeScript, а также покажу на примере, как легко это можно сделать.
Разработка Telegram бота для массфаловинга в Instagram
Хочу поделиться результатом своей работы, разработка Telegram бота для массфолловинга в Instagram.
Скорее всего, некоторые из вас не знакомы с таким термином, вот небольшое описание:
Массфолловинг — массовая подписка на людей по определённым критериям.Сервисы для массфолловинга уже существуют давольно давно, еще года 2 назад я заметил активность моих друзей в Instagram, а именно желание продвинуть свой бизнес через эту социальную сеть. Для этого они использовали разные сервисы массовой подписки, где месячная подписка стоит около 1000 руб., и по их словам эффект достаточно ощутимый, особенно для ресторанов, служб доставки еды.
Простым языком, вы подписываетесь на человека, он видит в ленте, что на него кто-то подписался, переходит к вам на страницу.
На этом цель данного инструмента для бизнеса выполнена.
Масштабирование CI/CD монорепозитория
Дано
- Монорепозиторий на базе Lerna и Yarn workspaces.
- Десяток приложений, и десятки общих пакетов на TypeScript, Angular, NodeJS.
- Высокое покрытие тестами самых разных мастей (модульные, интеграционные, e2e).
- и Atlassian Bamboo CI/CD.
Задача
Ускорить имеющиеся пайплайны в 2 раза (до, хотя бы, получаса). Попутно повысив стабильность до 90%.
Забегая вперед, скажу что требуемые показатели были достигнуты.
Отслеживание ошибок в приложении React с помощью Sentry
Сегодня я расскажу вам об отслеживании ошибок в реальном времени в приложении React. Приложение внешнего интерфейса обычно не используется для отслеживания ошибок. Некоторые компании часто откладывают отслеживание ошибок, возвращаясь к нему после документации, тестов и прочего. Однако, если вы можете изменить свой продукт в лучшую сторону, то просто сделайте это!
Сила PWA: Система видеонаблюдения с нейросетью в 300 строчек JS-кода
Веб-браузеры медленно но верно реализуют большинство функций операционной системы, и остается все меньше причин разрабатывать нативное приложение, если можно написать веб-версию (PWA). Кроссплатформенность, богатое API, высокая скорость разработки на TS/JS, и даже производительность движка V8 — все идет в плюс. Браузеры уже давно умеют работать с видеопотоком и запускать нейронные сети, то есть мы имеем все компоненты для создания системы видеонаблюдения с распознаванием объектов. Вдохновленный этой статьей, я решил довести демо-пример до уровня практического применения, чем и хочу поделиться.
Приложение записывает видео с камеры, периодически отправляя кадры на распознавание в COCO-SSD, и если обнаружен человек — фрагменты видеозаписи порциями по 7 секунд начинают отправляться на указанный емейл через Gmail-API. Как и во взрослых системах — ведется предзапись, то есть мы сохраняем один фрагмент до момента детекции, все фрагменты с детекцией, и один после. Если интернет недоступен, или возникает ошибка при отправке — видеозаписи сохраняются в локальной папке Downloads. Использование емейла позволяет обойтись без серверной части, мгновенно оповестить хозяина, а если злоумышленник завладел устройством и взломал все пароли — он не сможет удалить почту у получателя. Из минусов — перерасход трафика за счет Base64 (хотя для одной камеры вполне хватает), и необходимость собирать итоговый видеофайл из множества емейлов.
Работающее демо здесь.
Проблемы возникли следующие:
JavaScript в 3D: введение в Three.js
Введение
Three.js это мощный инструмент. Он помогает использовать 3D дизайн в браузере с приемлемой производительностью. По началу Three.js может быть сложным, особенно если вы никогда не погружались в мир 3D программирования ранее.
У меня есть базовый опыт работы с игровым движком Unity и C#, но все равно многие концепции оказались новыми для меня. Я пришел к выводу, что сейчас совсем мало ресурсов для начинающих разработчиков, поэтому я и решил написать эту статью. В ней мы рассмотрим основные элементы Three.js сцены от полигональных сеток и материалов до геометрии, загрузчиков и много другого.
Что нам стоит CDN построить?
Ещё мы сделаем это всё на IIS, работающим под Windows Server 2019 Core.
Мои «Ого, я этого не знал!» моменты с Jest
Jest всегда был моим незаменимым инструментом для юнит-тестирования. Он настолько надежен, что я начинаю думать, что я всегда недоиспользовал его. Хотя тесты работали, со временем я рефакторил их то здесь, то там, потому что не знал, что Jest так может. Каждый раз это новый код, когда я проверяю документацию Jest.
Web tools, или с чего начать пентестеру?
Наш коллега BeLove уже делал подобную подборку около семи лет назад. Интересно взглянуть, какие инструменты сохранили и укрепили свои позиции, а какие отошли на задний план и сейчас используются редко.
Введение в машинное обучение
Оригинальный курс на английском доступен по этой ссылке.
Интеграция Jira с GitLab
Цель
При коммите в git упоминаем в комментарии какую-либо задачу из Jira по имени, после чего происходит две вещи:
- в GitLab название задачи превращается в активную ссылку на нее в Jira
- в Jira к задаче добавляется комментарий со ссылками на коммит и пользователя, его совершившего, а также добавляется сам текст упоминания
Information
- Rating
- Does not participate
- Location
- Дербент, Дагестан, Россия
- Date of birth
- Registered
- Activity