Pull to refresh
7
0
Хазрат Гаджикеримов @hazratgs

Frontend Developer

Send message

Микрофронтенды на Module Federation — наш опыт. Часть 1

Level of difficultyMedium
Reading time11 min
Views5.2K

Всем привет! Меня зовут Женя, я разработчик из QIWI, занимаюсь созданием внутренних сервисов. Совсем недавно мы провели эксперимент по использованию микрофронтендов, и я хочу поделиться с вами опытом использования. В качестве основы для построения системы мы выбрали фичу Webpack - Module Federation.

Читать далее
Total votes 22: ↑22 and ↓0+22
Comments0

Wireshark — подробное руководство по началу использования

Level of difficultyMedium
Reading time8 min
Views165K

Wireshark – это широко распространённый инструмент для захвата и анализа сетевого трафика, который активно используется как для образовательных целей, так и для устранения неполадок на компьютере или в сети. Wireshark работает практически со всеми протоколами модели OSI, обладает понятным для обычного пользователя интерфейсом и удобной системой фильтрации данных. Помимо всего этого, программа является кроссплатформенной и поддерживает следующие операционные системы: Windows, Linux, Mac OS X, Solaris, FreeBSD, NetBSD, OpenBSD.

Читать далее
Total votes 33: ↑31 and ↓2+37
Comments21

AbortController: Варианты применения для эффективного управления асинхронными операциями

Level of difficultyMedium
Reading time5 min
Views14K

В современных веб-приложениях асинхронные операции играют ключевую роль. Однако управление ими может быть сложным, особенно когда нужно отменить задачи, уже отправленные на выполнение. До появления AbortController разработчики прибегали к различным костылям, таким как создание глобальных переменных, которые отслеживали состояние запроса или использование оберток над XMLHttpRequest.

Читать далее
Total votes 15: ↑15 and ↓0+15
Comments30

React и Typescript: Создание динамического компонента на примере кнопки

Level of difficultyMedium
Reading time6 min
Views16K

React и Typescript являются очень мощными инструментами для создания динамичных пользовательских интерфейсов. Создание универсального компонента, который может использоваться в различных ситуациях, является одной из ключевых задач при разработке веб-приложений. В этой статье мы рассмотрим создание такого компонента на примере кнопки, разберемся как использовать типизацию для создания динамических компонентов с использованием React и Typescript.

Читать далее
Total votes 10: ↑10 and ↓0+10
Comments6

WebRTC для всех и каждого. Часть 1

Reading time26 min
Views60K



Привет, друзья!


Представляю вашему вниманию первую часть перевода этой замечательной книги по WebRTC. Данная часть посвящена тому, что такое WebRTC, процессу сигнализации и установки соединения (первые 3 части оригинала).


Справедливости ради следует отметить, что на Хабре уже публиковался "вольный" перевод первых 2 частей оригинала (часть 1, часть 2), но автор по какой-то причине решил не продолжать. Я, свою очередь, решил начать с самого начала, без лишних вольностей и сокращений.


Ссылка на вторую часть перевода.


Если вам это интересно, прошу под кат.

Читать дальше →
Total votes 14: ↑14 and ↓0+14
Comments6

Мониторинг WebRTC стримов с помощью Prometheus и Grafana

Reading time18 min
Views5K

Системы мониторинга — очень нужная для админа вещь, ведь они позволяют получать от сервисов метрики, которые:

Читать далее
Total votes 3: ↑3 and ↓0+3
Comments2

WebRTC: как два браузера договариваются о голосовых и видеозвонках

Reading time7 min
Views19K

Спойлер: никак. За них это делает разработчик.

Когда много лет назад начали убивать Flash, пострадали не только браузерные игры. Flash традиционно была сильна в голосовых и видеозвонках: прямой доступ к микрофону, камере, динамикам, возможность работать с UDP-пакетами. В HTML5 заменой стала технология WebRTC. Та самая, которая несколько месяцев назад наконец-то приземлилась в Safari и Edge. Теперь можно звонить с веб-страницы, открытой на iPhone, на другую веб-страницу, например, открытую в Firefox Quantum на линуксе.

Одна из «фишек» WebRTC, которой не было у Flash — это возможность P2P-соединений между браузерами. Но чтобы peer-to-peer работал, программисту придется помучиться. О том, как браузеры договариваются куда слать UDP-пакеты, и что при этом должен сделать разработчик — под катом.
Читать дальше →
Total votes 29: ↑28 and ↓1+27
Comments16

React + mobx путь с нуля. Mobx + react, взгляд со стороны

Reading time10 min
Views68K


В «настоящих» проектах мы получаем данные от сервера или пользовательского ввода, форматируем, валидируем, нормализуем и производим другие операции над ними. Всё это принято считать бизнес логикой и должно быть помещено в Model. Так как react — это только треть MVC пирога, для создания пользовательских интерфейсов, то нам потребуется еще что-то для бизнес логики. Некоторые используют паттерны redux или flux, некоторые — backbone.js или даже angular, мы же будем использовать mobx.js в качестве Model.
Читать дальше →
Total votes 19: ↑18 and ↓1+17
Comments53

Как дизайн влияет на метрики: показываем на примере личного кабинета врача

Reading time12 min
Views7K

Привет! Я Даша Почекуева, дизайнер в СберЗдоровье. В последние полтора года я работаю над  личным кабинетом врача телемедицины — платформой, на которой врачи СберЗдоровья общаются с пациентами.

Эта статья о влиянии интерфейсных фич на метрики. Здесь не будет универсальных советов, волшебных таблеток и зрелищных картинок, но будут опросы, графики и решения, выдержавшие проверку временем.

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

Поехали
Total votes 8: ↑7 and ↓1+9
Comments11

Использование Effector в стеке React + TypeScript

Reading time12 min
Views47K

В этой статье я поделюсь своим кратким обзором внедрения стейт-менеджера Effector в продуктовый проект на стеке React + TypeScript, а также покажу на примере, как легко это можно сделать.

Читать далее
Total votes 48: ↑47 and ↓1+52
Comments44

Разработка Telegram бота для массфаловинга в Instagram

Reading time9 min
Views17K


Хочу поделиться результатом своей работы, разработка Telegram бота для массфолловинга в Instagram.

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

На этом цель данного инструмента для бизнеса выполнена.
Сервисы для массфолловинга уже существуют давольно давно, еще года 2 назад я заметил активность моих друзей в Instagram, а именно желание продвинуть свой бизнес через эту социальную сеть. Для этого они использовали разные сервисы массовой подписки, где месячная подписка стоит около 1000 руб., и по их словам эффект достаточно ощутимый, особенно для ресторанов, служб доставки еды.
Total votes 8: ↑4 and ↓40
Comments13

Масштабирование CI/CD монорепозитория

Reading time3 min
Views5.5K

Lerna


Дано


  1. Монорепозиторий на базе Lerna и Yarn workspaces.
  2. Десяток приложений, и десятки общих пакетов на TypeScript, Angular, NodeJS.
  3. Высокое покрытие тестами самых разных мастей (модульные, интеграционные, e2e).
  4. и Atlassian Bamboo CI/CD.

Задача


Ускорить имеющиеся пайплайны в 2 раза (до, хотя бы, получаса). Попутно повысив стабильность до 90%.


Забегая вперед, скажу что требуемые показатели были достигнуты.

Читать дальше →
Total votes 7: ↑6 and ↓1+11
Comments6

Отслеживание ошибок в приложении React с помощью Sentry

Reading time6 min
Views12K

Сегодня я расскажу вам об отслеживании ошибок в реальном времени в приложении React. Приложение внешнего интерфейса обычно не используется для отслеживания ошибок. Некоторые компании часто откладывают отслеживание ошибок, возвращаясь к нему после документации, тестов и прочего. Однако, если вы можете изменить свой продукт в лучшую сторону, то просто сделайте это!

Читать дальше →
Total votes 11: ↑11 and ↓0+11
Comments0

Сила PWA: Система видеонаблюдения с нейросетью в 300 строчек JS-кода

Reading time8 min
Views12K
Привет, Хабр!

Веб-браузеры медленно но верно реализуют большинство функций операционной системы, и остается все меньше причин разрабатывать нативное приложение, если можно написать веб-версию (PWA). Кроссплатформенность, богатое API, высокая скорость разработки на TS/JS, и даже производительность движка V8 — все идет в плюс. Браузеры уже давно умеют работать с видеопотоком и запускать нейронные сети, то есть мы имеем все компоненты для создания системы видеонаблюдения с распознаванием объектов. Вдохновленный этой статьей, я решил довести демо-пример до уровня практического применения, чем и хочу поделиться.

Приложение записывает видео с камеры, периодически отправляя кадры на распознавание в COCO-SSD, и если обнаружен человек — фрагменты видеозаписи порциями по 7 секунд начинают отправляться на указанный емейл через Gmail-API. Как и во взрослых системах — ведется предзапись, то есть мы сохраняем один фрагмент до момента детекции, все фрагменты с детекцией, и один после. Если интернет недоступен, или возникает ошибка при отправке — видеозаписи сохраняются в локальной папке Downloads. Использование емейла позволяет обойтись без серверной части, мгновенно оповестить хозяина, а если злоумышленник завладел устройством и взломал все пароли — он не сможет удалить почту у получателя. Из минусов — перерасход трафика за счет Base64 (хотя для одной камеры вполне хватает), и необходимость собирать итоговый видеофайл из множества емейлов.

Работающее демо здесь.

Проблемы возникли следующие:
Читать дальше →
Total votes 9: ↑8 and ↓1+10
Comments1

JavaScript в 3D: введение в Three.js

Reading time10 min
Views45K
Привет, Хабр! Представляю Вашему вниманию перевод статьи «JavaScript in 3D: an Introduction to Three.js» автора Брета Кемерона (Bret Cameron).

Введение


Three.js это мощный инструмент. Он помогает использовать 3D дизайн в браузере с приемлемой производительностью. По началу Three.js может быть сложным, особенно если вы никогда не погружались в мир 3D программирования ранее.

У меня есть базовый опыт работы с игровым движком Unity и C#, но все равно многие концепции оказались новыми для меня. Я пришел к выводу, что сейчас совсем мало ресурсов для начинающих разработчиков, поэтому я и решил написать эту статью. В ней мы рассмотрим основные элементы Three.js сцены от полигональных сеток и материалов до геометрии, загрузчиков и много другого.
Total votes 20: ↑20 and ↓0+20
Comments14

Что нам стоит CDN построить?

Reading time8 min
Views8.1K
Привет Хабр! В этой статье мы будем строить свой CDN. Почему не воспользоваться готовыми решениями? Потому что сайт автора полностью статический, сделанный на Jekyll, с большими картинками, которые нужно отдавать максимально быстро. Сервер не должен быть кэширующим, он должен хранить сайт целиком, поддерживать HTTP/2 и Brotli, а на всех серверах должен быть установлен один и тот же сертификат.

Ещё мы сделаем это всё на IIS, работающим под Windows Server 2019 Core.

Читать дальше →
Total votes 32: ↑26 and ↓6+20
Comments7

Мои «Ого, я этого не знал!» моменты с Jest

Reading time6 min
Views13K
Всем привет! Курс «Разработчик JavaScript» стартует уже в этот четверг. В связи с этим мы решили поделиться переводом еще одного интересного материала. Приятного прочтения.



Jest всегда был моим незаменимым инструментом для юнит-тестирования. Он настолько надежен, что я начинаю думать, что я всегда недоиспользовал его. Хотя тесты работали, со временем я рефакторил их то здесь, то там, потому что не знал, что Jest так может. Каждый раз это новый код, когда я проверяю документацию Jest.
Читать дальше →
Total votes 14: ↑13 and ↓1+12
Comments5

Web tools, или с чего начать пентестеру?

Reading time11 min
Views46K
Продолжаем рассказывать о полезных инструментах для пентестера. В новой статье мы рассмотрим инструменты для анализа защищенности веб-приложений.

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

Читать дальше →
Total votes 46: ↑46 and ↓0+46
Comments8

Интеграция Jira с GitLab

Reading time2 min
Views47K

Цель


При коммите в git упоминаем в комментарии какую-либо задачу из Jira по имени, после чего происходит две вещи:

  • в GitLab название задачи превращается в активную ссылку на нее в Jira

  • в Jira к задаче добавляется комментарий со ссылками на коммит и пользователя, его совершившего, а также добавляется сам текст упоминания
Читать дальше →
Total votes 17: ↑15 and ↓2+13
Comments6
1
23 ...

Information

Rating
Does not participate
Location
Дербент, Дагестан, Россия
Date of birth
Registered
Activity