Search
Write a publication
Pull to refresh
12
0
Александр Шатилов @alexbraun

Tech Lead using Angular & .net

Send message

Мониторинг ошибок с помощью Sentry во фронтенд-приложениях, написанных на JavaScript: Часть 1

Reading time4 min
Views120K

Сервис Sentry позволяет удаленно мониторить баги в фронтенд-приложениях, написанных на JavaScript.



Попытка устранить проблемы в фронтенд-приложениях на JavaScript может оказаться непростой задачкой, поскольку они возникают в браузере пользователя, к чему, зачастую, у вас нет доступа. Однако, Sentry дает возможность удаленно мониторить баги.

Читать дальше →

Адаптивный layout — как переверстать весь проект, не перевёрстывая его

Reading time9 min
Views17K


Вёрстка — это первое, чему обычно учатся начинающие фронтендеры. Но когда вёрстки в вашем проекте становится очень много, поменять что-то — особенно везде и сразу — становится непросто. Переверстать большой проект, как правило, почти нереально. И если начинает казаться, что в какой-то задаче это нужно, вероятно, пришло время для более нестандартных методов.


Всем привет! Меня зовут Юрий Голубев, я разрабатываю frontend в Почте Mail.ru. Сегодня я хочу поделиться опытом того, как мы добавили адаптивности и возможности кастомизации в интерфейс, а заодно — открыли новый для себя способ написания адаптивных компонентов.

Читать дальше →

Flutter: о разработке плагинов с интерфейсом ActivityAware

Reading time6 min
Views5.3K


В былые времена клиенты присылали цветные изображения документов со сканера по емейлу. Кто ленился или не мог — отправлял свой загранник по почте. С этим неплохо справлялось решение от ABBYY. Потом появились телефоны и люди стали присылать фотографии паспортов. ABBYY сломался. Перешли на решение от Smart Engines и даже с фотографиями, посланными через WhatsApp особых проблем не было. Но потом пошли умные мобилки с включенными по умолчанию водяными знаками типа «Xiaomi 9T» часто перекрывающими важнейшую часть паспорта. Вдобавок к этому наличие в кадре на фотографии пальцев и бликов тормозило общение с клиентом.

Примеры паспортов, непригодных к распознаванию

Когда паспорт распознается в видеопотоке на телефоне клиента, то этой проблемы так остро не стоит. Почему?

  1. Мобильное ядро отображает рамку документа в процессе распознавания, не просто маску поверх видео, а именно рамку документа, находящегося в руках. По моим ощущениям, это дает человеку понимание, где не должно быть его пальцев. Вообще, это интересная тема для отдельного исследования.
  2. Система использует механизм сатурации данными и готова выдать результат только после определенной уверенности в них.
Читать дальше →

Небинарный *ngIf

Reading time3 min
Views7.2K

Вам когда-нибудь хотелось отобразить состояние загрузки, пока ngIf ждет ответа от async-пайпа? Или, может, вы мечтали передать в ngFor шаблон для пустого массива? Возможно, вы бросили это, потому что вам не хотелось реализовывать базовую логику этих директив самому. На самом деле в этом нет нужды! Один и тот же селектор может подцепить несколько директив, что позволяет расширить функциональность встроенных директив дополнительной логикой.

Читать далее

35 вопросов с собеседования JavaScript-разработчика

Reading time8 min
Views102K

Это перевод статьи, в которой Abdo Amin приводит 35 вопросов на собеседованиях JavaScript-разработчиков, которые он сам задает. К вопросам прилагаются и ответы.

Читать далее

Критерии качества вёрстки 2021

Reading time32 min
Views52K

6 лет назад мы обсуждали с сообществом критерии качества вёрстки, которые мы используем в обучении, чтобы наши выпускники радовали рынок своими умениями и подходом к работе.

С тех пор в разработке интерфейсов произошло море изменений: сначала в продакшн пришли флексы, потом подтянулись гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на наши критерии, и мы постоянно их дорабатывали.

Сейчас пришло время обсудить с сообществом обновлённые критерии.

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

Читать далее

Концепция контроллеров компонента в Angular: часть вторая

Reading time7 min
Views8.3K

Несколько месяцев назад я написал статью «Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular». Я рассказал о том, как мы добавляем гибкости и избавляемся от дублирования кода с помощью DI. Пришло время продолжить статью.

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

Давайте посмотрим

Дайджест свежих материалов из мира фронтенда за последнюю неделю №485 (13 — 19 сентября 2021)

Reading time3 min
Views7.8K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Что готовит нам Angular? Заметки из changelog, новый синтаксис шаблонов, Ivy

Reading time4 min
Views5.9K

В этой статье приведу заметки к релизу Angular 13. Рассмотрим предложения по шаблонам которую будут рассматривать в Angular Team в ближайшем митинге.

Читать далее

Основы реактивного программирования с использованием RxJS. Часть 3. Higher Order Observables

Reading time8 min
Views38K


В данной статье мы рассмотрим, как можно в одном потоке обрабатывать другой, для чего это нужно, и как нам в этом помогут операторы Higher Order Observables (дальше HOO).

Серия статей «Основы реактивного программирования с использованием RxJS»:



При работе с потоками часто возникает ситуация, когда необходимо в качестве значения одному потоку передать результаты работы другого. Например, мы хотим выполнить ajax запрос и его ответ обработать в текущем потоке, или запустить несколько параллельных запросов, реализовать pooling. Думаю, многие привыкли решать подобные задачи, используя такой механизм как promise. Но можно ли решать их используя RxJS? Конечно, и все куда проще чем вы думаете!
Читать дальше →

Построение библиотек компонентов и их организация. Или как извлечь максимальную пользу для бизнеса c React и Angular

Reading time3 min
Views4.7K

Наша компания разрабатывает десятки продуктов. Ряд продуктов работает на Angular, ряд на React. Пользователи систем в зависимости от этапа бизнес-процесса и роли взаимодействует с определенным продуктом. Часто, в рамках бизнеса мы должны показывать одни и те же данные в разных продуктах. Эти данные отображаются в виде UI компонентов.

В этой статье мы узнаем как можно организовать библиотеки компонентов для решения задач бизнеса. Научимся переиспользовать и запускать React библиотеку внутри Angular. Таким способом мы сможем решать задачи бизнеса гибко и эффективно.

Читать далее

Angular: создание и публикация библиотеки

Reading time5 min
Views19K

Начнем с начала


Если мне не изменяет память, то с версии 6 в angular появилась возможность создавать в одном workspace проекты разных типов: application и library.

До этого момента люди, которые хотели создать библиотеку компонент, скорее всего, пользовались отличным и полезным пакетом ng-packagr, который помогал создавать пакет в принятом для angular формате. Собственно, предыдущую библиотеку я создавал при помощи этого инструмента. Теперь команда angular включила ng-packagr в angular-cli и добавила schematics для создания и сборки библиотек, расширила формат angular.json и добавила еще несколько приятностей. Давайте теперь пройдем путь от ng new до npm install — от создания пустой библиотеки до ее публикации и импорта в сторонний проект.
Читать дальше →

Индикатор качества канала серверного WebRTC через TCP

Reading time5 min
Views3.6K


Publish и Play


Существует две основных функции работы WebRTC на стороне сервера в области потокового видео: публикация и воспроизведение. В случае публикации видеопоток захватывается с вебкамеры и двигается от браузера к серверу. В случае воспроизведения, поток двигается в обратном направлении — от сервера к браузеру, декодируется и воспроизводится в браузерном HTML5 <video> элементе на экране устройства.

Читать дальше →

Рендеринг в веб

Reading time12 min
Views17K

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

Читать далее

Микросервисы vs. Монолит

Reading time20 min
Views71K
В начале ноября на ютуб-канале Яндекс.Практикума прошли дебаты «Микросервисы, Монолит и Зомби». Ведущие дебатов — наставник курса «Мидл Python-разработчик» Руслан Юлдашев и техлид курса Савва Демиденко — разобрали архитектуры двух систем, прошлись по реальным задачам и ошибкам из своей рабочей практики и по очереди защищали свои позиции.

Обсуждение растянулось на 100 минут, поэтому мы публикуем сокращённую текстовую расшифровку.



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

Вы узнаете, как врачи регионов России не получали зарплату из-за микросервисов и сколько монолитов можно запустить, пока согласовывается интерфейс между сервисами.
Читать дальше →

Прекратите использовать Ngrx/effects для этого

Reading time9 min
Views24K
перебор с эффектами

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

Как работает JS: WebRTC и механизмы P2P-коммуникаций

Reading time14 min
Views45K
[Советуем почитать] Другие 19 частей цикла
Часть 1: Обзор движка, механизмов времени выполнения, стека вызовов
Часть 2: О внутреннем устройстве V8 и оптимизации кода
Часть 3: Управление памятью, четыре вида утечек памяти и борьба с ними
Часть 4: Цикл событий, асинхронность и пять способов улучшения кода с помощью async / await
Часть 5: WebSocket и HTTP/2+SSE. Что выбрать?
Часть 6: Особенности и сфера применения WebAssembly
Часть 7: Веб-воркеры и пять сценариев их использования
Часть 8: Сервис-воркеры
Часть 9: Веб push-уведомления
Часть 10: Отслеживание изменений в DOM с помощью MutationObserver
Часть 11: Движки рендеринга веб-страниц и советы по оптимизации их производительности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 13: Анимация средствами CSS и JavaScript
Часть 14: Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация
Часть 15: Как работает JS: классы и наследование, транспиляция в Babel и TypeScript
Часть 16: Как работает JS: системы хранения данных
Часть 17: Как работает JS: технология Shadow DOM и веб-компоненты
Часть 18: Как работает JS: WebRTC и механизмы P2P-коммуникаций
Часть 19: Как работает JS: пользовательские элементы

Сегодня мы публикуем перевод 18 части серии материалов, посвящённых всему, что связано с JavaScript. Здесь мы поговорим о технологии WebRTC, которая направлена на организацию прямого обмена данными между браузерными приложениями в реальном времени.

image
Читать дальше →

Медитации, обновленный дизайн видеозвонков, компоненты Fluid и другие новые функции в Microsoft Teams

Reading time3 min
Views2.7K

Компания Microsoft представила обновления для Teams, Microsoft Teams Rooms и Viva, ориентированные на гибридную рабочую среду и продуктивную совместную работу. 

Заглядывайте под кат и изучайте 7 нововведений!

Читать далее

Могучие Typescript Декораторы — как работают, во что компилируются и для каких прикладных задач применимы

Reading time9 min
Views51K

Каждый Ангуляр разработчик видел декораторы в тайпскрипт коде. Их используют, чтобы описать Модули, сконфигурировать Dependency Injection или настроить компонент. Другими словами, декораторы используются, чтобы описать дополнительную информацию, или метаданные, для фреймворка или компилятора (в случае Ангуляра). При чем, Ангуляр лишь один из примеров. Существуют многие другие библиотеки, использующие декораторы для простоты и наглядности кода, как декларативный подход. Как .NET разработчик в прошлом, я вижу много сходства между TS декораторами и .NET аттрибутами. Наконец, набирающий популярность NestJS фреймворк для бекенд приложений (абстракция над Node), также построен на интенсивном использовании декораторов и декларативном подходе. Как это все работает и каким образом использовать декораторы в своем коде, чтобы он был более удобным и читабельным? Мы все понимаем, что после компиляции TS кода мы получаем Javascript код. В котором нет понятия декоратор, как и многих других Typescript особенностей. Поэтому для меня наиболее интересным является вопрос, во что превращается декоратор после компиляции. Занимаясь этим вопросом, я сделал выступление на митапе в Минске и хочу поделиться статьей.


Читать дальше →

WebSockets в Angular: cоздаем Angular Service для работы с вебсокетами

Reading time9 min
Views47K
image
В этой статье я постараюсь детально охватить узкую сферу применения технологии в рамках фреймворка Angular и его уже неотъемлемого помощника — RxJs, при этом мы намеренно не будем касаться серверных реализаций, т.к. это полноценная тема для отдельной статьи.

Данный текст будет полезен тем, кто уже знаком с Angular, но хочет углубить свои знания непосредственно по теме.
Читать дальше →

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity