Веб-разработка *

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

В этой статье я покажу вам, как делать селфи в браузере.

Мы разработаем простое приложение со следующим функционалом:

• при инициализации приложение запрашивает у пользователя разрешение на захват медиапотока (далее также — поток) из видеокамеры его устройства;
• захваченный поток передается в элемент video;
• из потока извлекается видеотрек (далее также — трек), который передается в интерфейс для захвата изображений;
• из экземпляра интерфейса извлекается список поддерживаемых возможностей (capabilities) и настроек (settings) для фото;
• из трека также извлекается список поддерживаемых возможностей и настроек;
• формируется список диапазонных полей (<input type="range">) для установки настроек для фото;
• пользователь имеет возможность снимать фото (take photos) и захватывать фреймы (grab frames);
• фото выводится в элемент img, генерируется ссылка для его скачивания;
• фрейм инвертируется и отрисовывается на холсте (canvas), генерируется ссылка для его скачивания.

Репозиторий.

Приложение будет разработано на чистом JavaScript.

Для создания шаблона приложения будет использован Vite.

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

Что было до

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

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

Привет, меня зовут Феликс Пискунов. Разрабатываю веб-приложения уже 16 лет. Решил поделиться своими размышлениями по поводу выбора фреймворка и что меня подвигло оставить Angular и уйти без оглядки в React

В одном переданном проекте на NextJs и typescript, попалась “интересная” ошибка при использовании библиотеки react-svg-worldmap. Для решения ошибки, пришлось обращаться к разработчику библиотеки.

Taiga UI — это огромная библиотека компонентов на Angular. Мы в Тинькофф разрабатывали ее внутри пару лет, прежде чем выпустили вторую, мажорную версию на публику. С тех пор прошел год, и я хочу подвести итоги и обозначить планы на 2022 год.

Бывает так: заказчику нужен лендинг еще вчера. К фронтендеру обращаться не хочется — долго, дорого, дизайнеру не понравятся отступы, а вся задача превратится в череду долгих согласований.

Привет, меня зовут Соня! Я – UX/UI дизайнер в hh.ru. В этой статье мы разбираем популярные мифы о конструкторе сайтов и рассказываем, можно ли сделать классный сайт на Тильде и почему это доступнее, чем кажется.

У этой статьи есть видеоверсия для тех, кто захочет посмотреть на фишечки Тильды в динамике.

Привет, Хабр! Меня зовут Евгений Лабутин, я из команды разработки продукта МТС Твой бизнес. Мы разработали свой рецепт приготовления картинок для нашего портала. Благодаря ему удалось сократить их вес на странице до 10 раз относительно уже оптимизированного jpg/png, сохранив при этом простоту разработки – как будто это стандартный img элемент. Разработанный микросервис называется ImageOptimize, из этой статьи вы узнаете, как он работает и что у него под капотом. Мы уже выложили код микросервиса в OpenSource (чему очень рады), поэтому вы тоже можете использовать такую компрессию, настроив ее в несколько простых шагов.

У терминов, которые мы используем в процессах CI/CD, много общего с терминами из фабричного производства. Например, пайплайн — его наиболее близкий литературный перевод «производственная линия» и это не случайно: лучшие подходы разработки ПО похожи на подходы фабричного производства. 

Эта статья — адаптированный урок Тимофея Ларкина, ведущего инженера X5 Retail Group, «Принципы работы CI и CD» курса по CI/CD. В ней мы расскажем про то, через какие боли проходят те, кто делает софт, как помогают правила бережливого производства, и какие шаги включить в пайплайн, чтобы 20% усилий дали 80% результата. 

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

В этой статье я покажу вам, как разработать приложение для совершения аудио/видео звонков с помощью WebRTC.

Функционал нашего приложения будет следующим:

• при запуске приложения пользователь А получает уникальный идентификатор;
• он передает этот идентификатор пользователю Б;
• пользователь Б использует идентификатор пользователя А для совершения аудио или видео звонка;
• пользователь А получает уведомление о звонке пользователя Б и может ответить на него с видео или без либо отклонить звонок;
• в процессе соединения пользователи имеют возможность включать/выключать аудио и видео;
• после завершения звонка выполняется перезагрузка WebRTC для обеспечения возможности совершения нового звонка.

Демо приложения.

Репозиторий с исходным кодом.

Основной источник вдохновения.

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

Меня зовут Аксёнов Вячеслав, я старший бэкенд Java/Kotlin разработчик в крупном энтерпрайзе. Однажды я попал на проект, полный микросервисов, в котором за конфигурацию отвечала такая штука как Spring Cloud. Чтобы разобраться как именно это работает я исследовал и прикрутил этот диковенный элемент к одному своему пет проекту. И в этой статье я пошагово покажу как я это сделал

Мы разрабатываем ati.su, это площадка где грузоотправитель находит грузоперевозчика. Между собой они общаются заявками. Заявка — это карточка с множеством полей. Так мы её и зовём — «Карточка груза». Поиск таких заявок по сложным фильтрам — то, зачем к нам приходят сотни тысяч пользователей.

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

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

Статья будет интересна бизнес-аналитикам, project-менеджерам, тимлидам, CEO начинающих студий по разработке и всем причастным и интересующимся. 

Hola, Amigos!

Меня зовут Артем, и я TeamLead. Сегодня расскажу, как мы настроили процессы взаимодействия с командой и заказчиками внутри команды, и об инструменте, с помощью которого все реализовали. Итак, поехали!

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

Если провести аналогию с обычным кодом, то достижение таких объёмов в рамках одного модуля/класса/компонента/сущности становится сигналом, чтобы заняться декомпозицией и разделить ответственность по более мелким и независимым составляющим.

Но если говорить о конфигурации сборки, то такая декомпозиция скорее редкость, и в больших проектах часто можно встретить огромные webpack.config.js, модификация которых может доставить немало проблем и привести к ошибкам.

Если вам хочется сделать работу со сборкой проще и надёжнее при модификациях, то добро пожаловать под кат.

Добрый день, меня зовут Павел Поляков, я Principal Engineer в каршеринг компании SHARE NOW, в Гамбурге в ?? Германии. А еще я автор телеграм канала Хороший разработчик знает, где рассказываю обо всем, что обычно знает хороший разработчик.

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

Меня зовут Алексей Комаров, я — старший frontend-разработчик в SuperJob. Хочу поделиться опытом реализации механизма обновления данных в реальном времени у нас на сайте. Под катом — подробности о выборе подхода, о проблемах, с которыми мы столкнулись при разработке, о наших кейсах оптимизации 
клиентской стороны и, конечно, немного кода и наглядных схем.

А вы когда-нибудь задумывались сколько может быть разных эмоциональных состояний за 2 года на одном проекте? От вовлеченности до выгорания, от неизведанности до рутины. И причем это все не обязательно меняется линейно, а может меняться волнообразно на протяжении всего периода.

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

История об одном баге, который превратил переход с .NET Core 3.1 на .NET 6 в «приключение на 20 минут», самописной библиотеке Dodo.Primitives.Uuid, которая помогла этот баг починить, и размышления о бренности бытия важности своевременного рефакторинга и его приёмах.