Как стать автором
Обновить
7
0
Хазрат Гаджикеримов @hazratgs

Frontend Developer

Отправить сообщение

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

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров5K

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

Читать далее
Всего голосов 22: ↑22 и ↓0+22
Комментарии0

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

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров153K

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

Читать далее
Всего голосов 41: ↑39 и ↓2+37
Комментарии21

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

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров14K

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

Читать далее
Всего голосов 15: ↑15 и ↓0+15
Комментарии30

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

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров16K

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

Читать далее
Всего голосов 10: ↑10 и ↓0+10
Комментарии6

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

Время на прочтение26 мин
Количество просмотров57K



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


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


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


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


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

Читать дальше →
Всего голосов 14: ↑14 и ↓0+14
Комментарии6

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

Время на прочтение18 мин
Количество просмотров4.9K

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

Читать далее
Всего голосов 3: ↑3 и ↓0+3
Комментарии2

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

Время на прочтение7 мин
Количество просмотров19K

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

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

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

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

Время на прочтение10 мин
Количество просмотров68K


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

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

Время на прочтение12 мин
Количество просмотров6.8K

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

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

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

Поехали
Всего голосов 11: ↑10 и ↓1+9
Комментарии11

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

Время на прочтение12 мин
Количество просмотров46K

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

Читать далее
Всего голосов 54: ↑53 и ↓1+52
Комментарии44

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

Время на прочтение9 мин
Количество просмотров17K


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

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

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

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

Время на прочтение3 мин
Количество просмотров5.5K

Lerna


Дано


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

Задача


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


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

Читать дальше →
Всего голосов 13: ↑12 и ↓1+11
Комментарии6

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

Время на прочтение6 мин
Количество просмотров12K

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

Читать дальше →
Всего голосов 11: ↑11 и ↓0+11
Комментарии0

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

Время на прочтение8 мин
Количество просмотров12K
Привет, Хабр!

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

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

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

Проблемы возникли следующие:
Читать дальше →
Всего голосов 12: ↑11 и ↓1+10
Комментарии1

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

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

Введение


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

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

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

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

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

Читать дальше →
Всего голосов 32: ↑26 и ↓6+20
Комментарии7

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

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



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

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

Время на прочтение11 мин
Количество просмотров45K
Продолжаем рассказывать о полезных инструментах для пентестера. В новой статье мы рассмотрим инструменты для анализа защищенности веб-приложений.

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

Читать дальше →
Всего голосов 46: ↑46 и ↓0+46
Комментарии8

Введение в машинное обучение

Время на прочтение19 мин
Количество просмотров59K
Полный курс на русском языке можно найти по этой ссылке.
Оригинальный курс на английском доступен по этой ссылке.


Всего голосов 40: ↑36 и ↓4+32
Комментарии25

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

Время на прочтение2 мин
Количество просмотров47K

Цель


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

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

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

Информация

В рейтинге
Не участвует
Откуда
Дербент, Дагестан, Россия
Дата рождения
Зарегистрирован
Активность