tgindex

Виталий и Платформа

описание

📍 О том, как всё устроено в веб-платформе и что происходит в индустрии фронтенда ⭐️ Новости, полезные выжимки, находки и напоминания 👨‍💻 Вопросы и предложения @web_platform_support 🔗 juwain.github.io/web-platform

1 825
подписчиков

Лучшие посты

за три месяца
  • 21 мая1 569 просмотров14 реакций

    Ну ошибся на годик, с кем не бывает. Там в FF 151, наконец, завезли 🥳 The @container CSS at-rule supports style() queries

  • 18 июн.1 507 просмотров16 реакций9 пересылок

    Как пошарить системное видео/аудио в расширение браузера Недавно увидел в одном расширении в Chrome интересное решение, расковырял исходники, решил поделиться. Функциональность расширения — запись звука, сохранение в файл и дальнейшая отправка его в сервис транскрибации. Так вот интересный момент как именно расширение получает аудио. Допустим вы открываете во браузере Google Meet, десктопный Zoom или любой другой апп для созвонов. Начинаете созвон, приложение/браузер стримит туда-сюда звук и видео. И этот поток направляется в браузерное расширение. В Chrome при этом надо дать явное разрешение и затем появляется уведомление, что происходит шаринг вкладки или всей системы в расширение (аналогичным образом вы обычно шарите свой экран в веб-приложение, а тут веб-приложением выступает браузерное расширение). Как это работает под капотом. Там Manifest V3 приложение. Микрофон получается через getUserMedia из (Media Capture and Streams API). А вот звук стрима берётся через getDisplayMedia — это уже Screen Capture API, в рамках которой браузер показывает системный диалог "чем поделиться". Таким образом и получается что угодно шарить в браузерное расширение. Потом два независимых потока, микрофон и собеседник, нужно свести в один. И делается это Web Audio API: const ctx = new AudioContext(); const mix = ctx.createMediaStreamDestination(); ctx.createMediaStreamSource(micStream).connect(micGain).connect(mix); ctx.createMediaStreamSource(tabStream).connect(tabGain).connect(mix); const combined = mix.stream; // снова обычный MediaStream, его и пишем То есть по сути Web Audio используется как микшер. В процессе там заодно можно что-то дополнительно обработать, например, усилить микрофон, а на выходе получить единый поток. Ок, поток получили, теперь задача его записать. Для этого используется MediaStream Recording API и интерфейс MediaRecorder. Пишется не одним куском в конце, а порциями: start(timeslice) отдаёт данные кусками по ходу записи, и если что-то пойдёт не так на втором часу разговора, то всё не будет потеряно. У WebM при этом есть давняя болячка — MediaRecorder не проставляет длительность в заголовок, и готовый файл выглядит «бесконечным» для плееров и сервера. Лечится это пост-обработкой блоба, дописыванием правильных метаданных уже после остановки. То есть кратенько: Media Capture and Streams и Screen Capture добывают MediaStream (с устройств или с экрана), Web Audio умеет этот поток обрабатывать и микшировать, а MediaStream Recording берёт готовый MediaStream на вход и сериализует его в сжатые байты — Blob в webm/mp4/ogg, которые уже можно сохранить на устройство или отправить в какой-то внешний сервис дальше. И ещё один интересный момент уже про само браузерное расширение. Вообще оно работает в service worker, у которого нет доступа к DOM и всем веб-API. И чтоб это обойти используется Chrome-специфичное chrome.offscreen, которое создаёт полноценную "невидимую" страницу, где и выполняется код. #Лаборатория_веб_платформы @web_platform | Поддержать блог 💙

  • 22 июн.1 485 просмотров5 реакций4 пересылок

    btw там интересная система в репе, используются git submodules: в .gitmodules указывается источник субмодуля (внешний реп): [submodule "extensions/superset-theme"] path = extensions/superset-theme url = https://github.com/juwain/superset-zed-theme.git SHA коммита в .gitmodules не хранится, она лежит в самом git-дереве реестра (специальная запись с режимом 160000 (gitlink)). По пути extensions/superset-theme в дереве лежит не папка с файлами, а запись типа commit = aa134f47…. а в extensions.toml указывается, что публиковать: [superset-theme] submodule = "extensions/superset-theme" version = "0.0.1"

  • 2 июл.1 310 просмотров7 реакций5 пересылок

    вчера мой ботик @web_platform_pulse_bot не прислал новости, а всё потому что кукольный театр сгорел один дата-центр в Нидерландах перегрелся, а дальше всё как-то очень интересно начало происходить: сломалась система кондиционирования в ДЦ (стационарные чиллеры), заказали мобильный чиллер, он приехал, но сразу не получилось подключить, тк понадобились силовые кабели, заказали их, а там уже и ночь настала, поспим до утра, утром проснулись-потянулись, подключили кабели, давай подключать резервный чиллер, подключили, теперь надо дождаться, пока охладится помещение, проверить, что всё ок работает и всё поэтапно включить обратно бэкапа конфигов/энвов у меня конечно же не было, поэтому пока сервер не работал, выгрузить их я не мог, чтоб в другом месте развернуть походу теперь надо переезжать в общем, как-то с софтом всё попроще будет, чем с железом 😅 хотяяя

  • 22 июн.1 241 просмотров7 реакций2 пересылок

    4 мая -> 20 июня, столько провисел мой pr в zed до мерджа зато теперь тема superset доступна через сам zed https://zed.dev/extensions/superset-theme 👍

  • 8 июл.1 087 просмотров5 реакций8 пересылок

    Недавний инцидент с ДЦ сподвиг меня причесать всё на VPS с ботом-дайджестёром. Раньше было как: просто предустановленный образ с OpenClaw, ну и я там прям в системе был запущенный лонг-поллинг телеграма (чтоб бот обрабатывал команды старта/подписки/отписки), серты, настроенный туннель на другой сервер, донастроенный nginx. Во всём этом богатстве жил клешнебот openclaw с нужными скиллами и по собственному крону запускал node-скрипты для сбора дайджестов, суммаризации и процесса апрува/ревью получившихся черновиков, а затем отсылки сообщений подписчикам бота. Потом я на тот же сервер накрутил ещё self-host хранилище Obsidian + сервер WebDAV для синхронизации его между моими устройствами. И в того же бота добавил скиллы по работе с заметками obsidian: типа найти инфу в хранилище, добавить что-то, удалить прям через тг-бота. В общем, мигрировать всё это хозяйство на другой VPS как-то казалось сложным, поэтому всё откладывал. И тут возникла ещё идея поднять персонального агента-ассистента для родственников, чтоб пользовались для бытовых целей иишками, не продавая данные корпорациям. В общем, поднял на том же серваке Coolify, начал рассовывать всё по контейнерам. Основной профит в том, что можно из ui управлять сервисами, прописывать энвы, запускать деплои. А самое главное, что в случае чего, проще мигрировать на другой сервер. Попутно переключился с ручного nginx на Traefik, встроенный в Coolify, маршруты описаны в конфигах, серты выпускаются на лету. WebDAV для хранилища Obsidian засунул в отдельный контейнер. При этом само хранилище осталось в общей системе, в том числе бэкапилка в github. Там когда прилетают по WebDAV правки с отдельного устройства, по крону раз в 15 минут чекаются изменения в гит-репе и автокомитятся в github (надо будет, кстати, крон-бэкапилку тоже вынести в отдельный контейнер, пока осталась в системе вынес). Затем openclaw-агента, который собирает дайджесты и помогает мне с obsidian-ом, мигрировал на Hermes (переосмысленный подход клешнеботоводов в самообучающуюся систему) и посадил в свой отдельный контейнер. И заодно подцепил другую модель, поумнее. Была qwen3.6-35b-a3b, а стала kimi-k2.6. С qwen периодически ботяра запутывался: то скиллы не прочтёт, то войдёт в цикл и несколько постов отправит. С kimi-ком счас чётко, методично работает и минималистично-молчаливо общается. И, собственно, поднял в соседнем контейнере ещё одного Hermes-агента, уже для семьи. Со своими конфигами, душой, а также мозгами (пробую модель gemma-4-31b, она такая же болтливая, как qwen3.6-35b-a3b, но вдобавок мультмодальная, что важно для бытового агента). Hermes-бота можно настроить как командного ассистента (а чем семья не команда?). Поставил заодно родственниками отдельный ui-клиент для работы с агентом (типа claude desktop и иже с ними) для тех, кто на компутере работает, но в терминал не умеет. Модели все юзаю с лампового российского хаба hub.neuraldeep (не сочтите за заказную рекламу, вот честная рефералка) в рамках подписки. Кстати, с проблемного ДЦ в итоге так и не мигрировал 😂 Что ж, поиспытываю судьбу ещё раз. #Лаборатория_веб_платформы @web_platform | Поддержать блог 💙

  • 13 июл.975 просмотров4 реакций12 пересылок

    Hermes vs OpenClaw В комметах к прошлому посту @fogrew спросил, чем Hermes отличается от OpenClaw 1. OpenClaw идеологически и архитектурно построен как гейтвей, а Hermes как самообучающаяся агентная среда. Соответственно Hermes польше подходит для создания персональных ассистентов, которые учатся и со временем подстраиваются под пользователя. Агент на Hermes из коробки явно дополняет свои скиллы и память во время его использования (и сообщает об этом), у OpenClaw это всё довольно неявно происходило и не автоматом. 2. Hermes легче устанавливать и настраивать (причём настройки из коробки на 99% ок), чем OpenClaw + у Hermes меньше требования к железу, на котором он развёрнут. На одной VPS, где был раньше развёрнут один Openclaw, у меня сейчас уже крутятся два Hermes и ещё есть много оставшихся ресурсов. 3. API у обоих примерно одинаковый, поэтому миграция OpenClaw -> Hermes проходит по факту в одну команду. Вкратце, у обоих есть гейтвей, пейринг с мессенджерами (поллинг/вебхук), крон, скиллы/тулы, память. 4. У Hermes есть полноценный десктоп-клиент для тех, кто хочет работать не через CLI/телеграм. То есть в двух словах: Hermes лучше для перс ассистентов, OpenClaw как общий гейтвей (но надо иметь в виду, что его ещё надо дополнительно настраивать + он требует больше ресурсов). #Лаборатория_веб_платформы @web_platform | Поддержать блог 💙

  • 14 авг.508 просмотров25 реакций19 пересылок

    Мой воркфлоу с ИИшками сейчас У меня счас несколько подписок: • антропик 20$ (для разработки) • опенай кодекс 20$ (для разработки) • и российская hub.neuraldeep.ru (в основном не для разработки) Пользую через claude code консольный, через него можно пользовать и модели сlaude нативно, и любую другую модель подцеплять. Для этого можно задать/отредактировать в энвах переменные ANTHROPIC_BASE_URL, ANTHROPIC_MODEL. Либо если хочется вариант поинтереснее, то есть инструмент ccs, который через поднятие локального прокси CLIProxy позволяет прокидывать запросы в формате claude code и конвертировать его в формат нужного провайдера (OpenAI/Gemini/Codex/Kimi…), а заодно и авторизовываться по OAuth. Какой профит все модели гонять через харнесс Claude Code? В едином месте собрана вся история моих взаимодействий с иишками, папка .claude становится как бы средой, накапливающей память обо всех проектах (менеджер сессий), процессах, что я делаю по работе и нет. Отсюда из этой среды можно черпать инфу для статей, идей, вспоминать какие-то моменты и возвращаться, то есть по сути это хранилище ВСЕГО контекста взаимодействия меня/ИИ. Кстати, сам CC именно как менеджер сессий не оч, и когда сессий становится много, ориентироваться начинает становиться сложно, для этого есть спец тула codbash, которая позволяет менеджерить все свои cc, codex и прочие ии-сессии на компутере и удобно к ним возвращаться (кстати, с недавних пор эта тулза стала уметь запускать сессии прямо внутри себя). Важный момент: сессии по умолчанию в СС подчищаются/ротируются раз в месяц, это регулируется настройкой ~/.claude/settings.json (можно выставить большое значение, чтобы старые сесии не пропадали + бэкапить с помощью codbash-а, там есть спец команда). Например, сейчас с начала года у меня накопилось 2363 сессий (по работе и не по работе). Все сессии запускаю в режиме --dangerously-skip-permissions, чтобы не просило лишний раз разрешений, а просто делало работу. Для защиты от случайных деструктивных действий использую защиту. В качестве редактора использую zed, иишные штуки там в основном не пользую, только для редактирования кода и просмотра диффов. Раньше для управления терминалами использовал отдельное приложение superset + iterm2, теперь перешёл на мультиплексор herdr + iterm2 (плюс в том, что это не приложение на electron и не ест много памяти). Есть ли разница между антропиком за 20$ и кодексом за 20$ в плане решения ежедневных задач? Я их использую обычно вместе, типа опус 4.8/5 делает задачу, гпт 5.5/sol/luna ревьюит или наоборот. Плюс запускать разные модели в одном харнессе: они имеют лёгкий доступ к сессиям друг друга (буквально можно указать id сессии и модель разберётся, как туда попасть). В харнессе codex недавно появилась возможность запуска сессий/общения меж сессиями не вручную, а самим агентом, в CC пока нет, ожидаю. Насчёт именно ревью кодексом опуса есть спец средство для этого — плагин codex для cc, которое позволяет запустить ревью кода кодексом прям внутри сессии клода /codex: review, запустится субпроцесс. Также есть /codex:codex-rescue для того, чтобы просто "спросить совета" у codex. Скорее всего эта инфа устареет уже через месяц и полностью превратится в тыкву через год, но всё же решил зафисировать текущее ссотояние дел, может кому пригодится. #Лаборатория_веб_платформы @web_platform | Поддержать блог 💙