#инструмент дня

Так вышло, что в своей карьере я умудрился поработать в компании, которая хотела сделать стримы на веб-сайте своей основной фишкой. С тех пор HLS, RTP и nginx-rtmp-plugin были моими друзьями.

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

Но сегодня я наткнулся на нечто прекрасное: https://compositor.live/

Это набор React-компонентов и медиасервер, который позволяет стримить видео и микшировать несколько потоков, управляя ими как обычными компонентами и элементами страницы!

Можно построить нечто аналогичное Google Meet за считанные дни.

Вырезать зелёный экран, добавить текст, поменять видео местами, наложить блупер — всё на месте. Напоминает react-three-fiber по своей сути.

#react #video #mixer #media #stream

#видео дня

Где-то с 2012 года я работал на диджитал-агентства. Если кто не в курсе, диджитал агентства — они про рекламу в интернете. Про сайты, лендинги, рекламные кампании — вот это вот всё.

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

Да-да Awwwards — они тоже про это самое и из того же и выросли.

Так вот, на вопросы:
— как при знакомстве с макетом оценить его реализацию;
— какие могут возникнуть сложности, кроме письма от Муфалды Хмелкирк, и как с ними справиться;
— как эффективно строить общение между дизайнерами и разработчиками.

Отвечает доклад моего товарища Романа Баранова «Дизайн глазами креативного разработчика».

Ссылка на посмотреть:
https://www.youtube.com/watch?v=j5YWb8SPR94

Делитесь своим опытом вёрстки чего-то необычного.

#video #design #markup

Пост часа через четыре. Всё, не могу говорить, пока! 😘

#заметка дня

В Твиттере набирает обороты термин anti-under-engineering.

Ну то есть вы понял, да? Понятие оver-engineering известно давно и всем: как сделать простые вещи максимально и не к месту сложно.

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

Вот вы знали, например, что Codepen.io целиком был построен вокруг и хранил все свои данные, включая файлы, в PostgreSQL базе данных? А ведь могли бы с самого начала попытаться сделать потрясающе сложную систему хранения стилей, скриптов, картинок... и никогда ее не закончить.

Одной из техник в этом понятии является отказ от булевых флагов в пользу временных меток, timestamp.

Например:
❌ emailVerified
✅ emailVerifiedAt

❌ isDeleted
✅ deletedAt

То есть ты вместо логического true или false записываешь или null или timestamp. Дату и время, если коротко.

И действительно, сразу больше информации без потери сути. Техника эта хорошо описана в гайдах по языку ReasonML и называется Boolean blindness: https://github.com/leostera/reason-design-patterns/blob/master/patterns/boolean-blindness.md

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

Примером такой техники в верстке я могу назвать префиксы CSS-классов, если вы, конечно, все ещё их используете. Ну и неймспейсы вообще.

Какие будут ваши примеры? :)

#видео дня


Итак, системы сборки проектов. Бандлеры, по простому. Старые и современные. От Webpack до OXC.

Зачем были нужны и как появились. Как развивались и при чём тут Rust. Почему oxc быстрее swc в пять раз, но это не всегда имеет значение.

На всё это отвечает Девон Говетт, создатель Parcel.js и разработчик проектов React Aria и React Spectrum в Adobe: https://www.youtube.com/watch?v=JUS6EPMbk0U&feature=youtu.be

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

Если вы, котаны, запутались в JS-тулинге — вот самое оно.

#js #bundler #swc #webpack

#codepen дня

Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.

Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz

1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.

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

Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.

3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.

Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:

label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
 transform: translateY(100%);
}

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

Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.

И да, поддерживается везде.

#css #has #appearance #бородач