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

В этом цикле из 2 статей я хочу рассказать вам о Supabase — открытой (open source), т.е. бесплатной альтернативе Firebase. Первая статья будет посвящена теории, во второй — мы вместе с вами разработаем полноценное social app с аутентификацией, базой данных, хранилищем файлов и обработкой изменения данных в режиме реального времени.

Что такое Supabase?

Supabase, как и Firebase — это SaaS (software as a service — программное обеспечение как услуга) или BaaS (backend as a service — бэкенд как услуга). Что это означает? Это означает, что при разработке fullstack app мы разрабатываем только клиентскую часть, а все остальное предоставляется Supabase через пользовательские комплекты для разработки программного обеспечения (SDK) и интерфейсы прикладного программирования (API). Под "всем остальным" подразумевается сервис аутентификации (включая возможность использования сторонних провайдеров), база данных (PostgreSQL), файловое хранилище, realtime (реакцию на изменение данных в реальном времени), и сервер, который все это обслуживает.

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

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

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

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

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

• имеется три вкладки: для ручного редактирования HTML, CSS и JavaScript, соответственно;
• пользователь имеет возможность загружать файлы, соответствующие текущей вкладке;
• пользователь имеет возможность бросать (drop) файлы, соответствующие текущей вкладке;
• код, введенный пользователем, загружается в iframe и выполняется в режиме песочницы (sandbox) при нажатии соответствующей кнопки.

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

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

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

Законодательство о дронах развивается стремительно и меняется каждый год. Между тем, кажется, сейчас оно пришло в состояние относительной стабильности, позволяющей говорить о тех общих правилах, которые будут применяться уже на длительный срок. В этой статье я постарался обобщить всю информацию и прояснить аспекты правового регулирования дронов в России и Европе, которые помогут сориентироваться любителям этих машин в ближайшем будущем. Как зарегистрировать дрон? Какие действуют ограничения его использования? Что надо знать при перевозке дрона в ЕС или из ЕС? Этим вопросам посвящен данный лонгрид.

• У «Шаттла» было 2,5 млн деталей, у SpaceX и Blue Origin — 100 000 на ракету. У Relativity Space тысяча деталей, меньше, чем в автомобиле.
• От 80 до 90% стоимости ракеты уходит на оплату труда при обычном способе производства.
• Два основателя Relativity Space в 2015 году написали холодное письмо инвестору и тот выслал чек на $500к.
• Адрес электронной почты инвестора они нашли перебором 20 вариантов.
• Следующая инвестиция была $10 млн, потом еще $35 млн, а в октябре 2019 г. – еще $140 млн. В ноябре 2020 г. был проведен очередной раунд финансирования на $500 млн, в 2021 — $650 млн.
• Общий объем инвестиций — более 1,3 млрд долларов, при оценке всей компании в $4,2 млрд.
• Первая ракета стартапа Relativity Space – Terran 1 успешно прошла все наземные испытания.
• Чтобы напечатать вторую ступень ракеты высотой 6 м, потребовалось около трех недель.
• Демонстрационный запуск ракеты Terran 1 назначен на начало 2022 года с мыса Канаверал LC-16.
• Девять компаний уже подписали контракты на запуски своих спутников в космос с помощью дебютной ракеты стартапа.
• Долгосрочная цель Relativity Space — стать частью инфраструктуры колонизации Марса.

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

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

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

• пользователь выбирает одно видео и несколько аудио, хранящихся в его файловой системе;
• когда пользователь нажимает на кнопку для начала записи, запускается воспроизведение выбранных файлов, захватываются их медиапотоки;
• захваченные потоки объединяются в один и передаются для записи;
• в процессе записи пользователь может менять источник аудиоданных;
• пользователь может приостанавливать (например, для изменения источника аудиоданных) и продолжать запись;
• по окончанию записи генерируется видеофайл в формате WebM — превью сведенного контента и ссылка для его скачивания.

В качестве фреймворка для фронтенда я буду использовать React, однако все функции по работе с медиа будут автономными (сигнатура этих функций будет framework agnostic), так что вы можете использовать любой другой фреймворк или ограничиться чистым JavaScript.

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

О том, как разработать приложение для создания аудиозаметок, можно прочитать в этой статье, а о том, как разработать приложение для захвата и записи экрана — в этой.

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

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

На днях, бороздя просторы Сети в поисках вдохновения, наткнулся на Zustand, инструмент для управления состоянием React-приложений, наиболее полно (среди более чем многочисленных альтернатив) отвечающий моим представлениям о, если не идеальном, то адекватном современному React state manager (см., например, эту статью).

Рассказу о нем и будет посвящена данная статья. Сначала немного теории, затем немного практики — по традиции, "запилим" простую "тудушку".

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

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

Проблема традиционных цветовых пространств

RGB

• градиент красного — это цвета #000, #100, #200, #FEE, #FFFи т.д.;
• градиент зеленого — это цвета #000, #010, #020и т.д.;
• градиент синего — это цвета #000, #001, #002и т.д.;
• градиент желтого — это цвета #000, #110, #220и т.д.;
• градиент голубого — это цвета #000, #011, #022и т.д.;
• градиент пурпурного — это цвета #000, #101, #202и т.д.

• Яркость цветов увеличивается неравномерно: чем оттенок ближе к белому цвету, тем изменение яркости меньше;
• Яркость разных цветов различается: синий намного темнее остальных;
• Насыщенность также неравномерна: синий и красный выглядят «ненасыщенными» в правой части градиента.