У меня была задача - передача видео с минимальной задержкой с Raspberry Pi до веб-интерфейса моего робота. Причем необходима была реализация на Node JS.В этой статье я расскажу как можно реализовать стриминг с Raspberry Pi до веб-страницы используя WebRTC и Node JS.Немного об WebRTCWebRTC позволяет устанавливать p2p соединение между пользователями и передавать друг другу данные.Принципиальная блок-схема показана на рисунке ниже:Картинка с простор интернета Как видно из блок-схемы, для начала о…
Что такое пропагация?Пропогация события — от английского «распространение» — это процесс возникновения, перемещения и обработки события внутри DOM.Это одно из фундаментальных свойств поведения Document Object Model, зная которое, вы сможете лучше манипулировать поведением события.Фазы распространенияРаспространение состоит из двух фаз (строго говоря из трех, но фазу достижения таргета для упрощения будем считать частью фазы всплытия).Распространение события начинается с объекта окна (window). …
В декабре 2021 года под новогодние праздники в приложении Кинопоиска для SmartTV появился раздел с Яндекс Музыкой. Он позволил пользователям на телевизорах открывать новые для себя треки в Моей волне, включать популярные подборки и слушать собственную коллекцию на телевизорах.При создании этого раздела я впервые столкнулась с миром SmartTV. Не каждый фронтендер встречает в своей практике подобные задачи, даже несмотря на то, что сейчас разработка под ТВ довольно популярна.Меня зовут Лена и я ф…
Асинхронность – это способ координации поведения программы на протяжении какого-то временного отрезка. Разбираем, как в синхронном JavaScript вынести операции за рамки единого потока, чтобы не блокировать действие кода после тяжёлых операций. Приветствую! Меня зовут Андрей Степанов, я CTO во fuse8. Мне интересно знакомиться с опытом коллег по цеху и делиться своим. В сфере я уже больше 20 лет. В этой статье – небольшое погружение в тему асинхронности в контексте разработки на JavaScript с объя…
Примечание: авторский перевод статьи Web Content ElementsВ HTML разработке мы используем тег в качестве дескриминатора - тег определяет элемент. Мы используем классы, чтобы применять стили к HTML элементам. Разработчик создает структуру и описывает стили руководствуясь правилами конкретного проекта, своим опытом и общепринятыми рекомендациями.В результате мы получаем проекты состоящие из длинного списка кастомных решений в моменте принятых разработчиком лично, либо в составе команды, например …
Система СИ и взаимосвязи между единицами физических величин.Программируя традиционным образом, очень просто упустить из виду, в каких единицах измеряются числа, с которыми мы оперируем. Например, можно сложить метры с литрами, и никакой компилятор нам при этом не поможет. Эта проблема реальная и уже доказано приводила к авариям, обошедшимся во многие миллионы долларов. (Одна из историй здесь).Избежать этого помогает использование специальных библиотек, которые корректно работают с физическими …
В этом уроке научимся сокращать число мешей в сцене путем слияния их по одинаковым материалам.Пример блока на сайте с 3D модельюИзвестно, что, чем больше мешей внутри сцены, тем чаще нашему приложению требуется задействовать дорогостоящие операции по загрузке данных в видеокарту устройства пользователя (так называемые draw calls).Чтобы уменьшить число вызовов, замедляющих рендер нашей сцены, можно из мешей с одинаковыми материалами сделать один меш.Реализация алгоритмаНапишем фрагмент кода с п…
ПредисловиеВсем привет, в последнее время, много вижу/читаю/слышу про astro, про то, какой он быстрый, производительный. Поэтому я решил потыкать Astro и параллельно проверить насколько он быстр - я написал на нем примитивный блог с 600 карточками и сравнил его по производительности с Nuxt 3 SSG.Производительность замерял с помощью pagespeed.Сразу хочу сказать, что я не претендую на правильность этих тестов - мне просто было интересно как обстоят дела в некоторых кейсах + было интересно потыка…
Недавно столкнулся с одной из "типовых" задач на собеседованиях. Просто увидел такое выражение где-то в интернете и не совсем понял как оно работает. А именно не понимал почему пустой массив дает 0.![] == [] Такое выражение вернет true.Решил конкретно рассмотреть данный пример по спецификации, и понять что происходит шаг за шагом.TL;DR![] - возвращаетfalse, потому что объект в Boolean всегда true и противоположность true - это falseПри нестрогом сравнении где операнды имеют разный тип,…