gram news
Аватар канала Виталий и Платформа

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

@web_platform

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

1,810подписчиков

Открыть канал

Последние посты

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

    14 авг., 14:56

    Мой воркфлоу с ИИшками сейчасУ меня счас несколько подписок: • антропик 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 становится как бы средой, накапливающей память обо всех
    7741174321Открыть в Telegram
  • Виталий и Платформа

    13 июл., 08:47изменён

    Hermes vs OpenClawВ комметах к прошлому посту @fogrew спросил, чем Hermes отличается от OpenClaw1. OpenClaw идеологически и архитектурно построен как гейтвей, а Hermes как самообучающаяся агентная среда. Соответственно Hermes польше подходит для создания персональных ассистентов, которые учатся и со временем подстраиваются под пользователя. Агент на Hermes из коробки явно дополняет свои скиллы и память во время его использования (и сообщает об этом), у OpenClaw это всё довольно неявно происходило и не автоматом. 2. Hermes легче устанавливать и настраивать (причём настройки из коробки на 99% ок), чем OpenClaw + у Hermes меньше требования к железу, на котором он развёрнут. На одной VPS, где был раньше развёрнут один Openclaw, у меня сейчас уже крутятся два Hermes и ещё есть много оставшихся ресурсов. 3. API у обоих примерно одинаковый, поэтому миграция OpenClaw -> Hermes проходит по
  • Виталий и Платформа

    8 июл., 09:14изменён

    Недавний инцидент с ДЦ сподвиг меня причесать всё на VPS с ботом-дайджестёром.Раньше было как: просто предустановленный образ с OpenClaw, ну и я там прям в системе был запущенный лонг-поллинг телеграма (чтоб бот обрабатывал команды старта/подписки/отписки), серты, настроенный туннель на другой сервер, донастроенный nginx.Во всём этом богатстве жил клешнебот openclaw с нужными скиллами и по собственному крону запускал node-скрипты для сбора дайджестов, суммаризации и процесса апрува/ревью получившихся черновиков, а затем отсылки сообщений подписчикам бота.Потом я на тот же сервер накрутил ещё self-host хранилище Obsidian + сервер WebDAV для синхронизации его между моими устройствами. И в того же бота добавил скиллы по работе с заметками obsidian: типа найти инфу в хранилище, добавить что-то, удалить прям через тг-бота.В общем, мигрировать всё это хозяйство на другой VPS как-то
    1,190311Открыть в Telegram
  • Виталий и Платформа

    2 июл., 13:41изменён

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

    22 июн., 09:07изменён

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

    22 июн., 09:06

    Как superset.sh привёл меня к собственной теме для Zed В последнее время моя ежедневная работа всё больше смещается в терминал. Когда параллельно открыто несколько проектов и у каждого по несколько вкладок в терминале, обычный плоский список табов терминала
  • Виталий и Платформа

    18 июн., 10:19

    Как пошарить системное видео/аудио в расширение браузераНедавно увидел в одном расширении в Chrome интересное решение, расковырял исходники, решил поделиться.Функциональность расширения — запись звука, сохранение в файл и дальнейшая отправка его в сервис транскрибации.Так вот интересный момент как именно расширение получает аудио. Допустим вы открываете во браузере Google Meet, десктопный Zoom или любой другой апп для созвонов. Начинаете созвон, приложение/браузер стримит туда-сюда звук и видео. И этот поток направляется в браузерное расширение. В Chrome при этом надо дать явное разрешение и затем появляется уведомление, что происходит шаринг вкладки или всей системы в расширение (аналогичным образом вы обычно шарите свой экран в веб-приложение, а тут веб-приложением выступает браузерное расширение).Как это работает под капотом. Там Manifest V3 приложение. Микрофон получается
    1,5501321Открыть в Telegram
  • Виталий и Платформа

    21 мая, 15:42

    #Лаборатория_веб_платформы Look Ma, это я в 2025 пишу фича-флаги прямо в CSS! / обычные стили / / ... / @container style(--wow-such-a-feature: true) { / стили за фича-флагом / / ... / } @container style(--wow-such-an-another
    1,590932Открыть в Telegram
  • Виталий и Платформа

    30 апр., 16:08изменён

    Как superset.sh привёл меня к собственной теме для ZedВ последнее время моя ежедневная работа всё больше смещается в терминал. Когда параллельно открыто несколько проектов и у каждого по несколько вкладок в терминале, обычный плоский список табов терминала (у меня iTerm) слишком скукоживается.Не хватает ещё одного измерения: горизонтально — вкладки внутри одного проекта, вертикально — сами проекты.И тут узнал про superset.sh, и он мне зашёл. Получается такой 2D-терминал: слева список проектов, внутри каждого свои табы.Параллельно с увеличением количества времени проводимого в терминале меняется и роль редактора кода. Если раньше IDE была главным рабочим местом, то в агентоцентричной разработке "редактор" больше нужен для просмотра diff, точечных правок и удобной навигации по файлам.У меня эту роль уже около года выполняет Zed: быстрый, легковесный и менее прожорливый по
    2,390911Открыть в Telegram
  • Виталий и Платформа

    3 апр., 11:38

    Не теряемсяРаньше я составлял и публиковал дайжесты #Пульс_веб_платформы. Дело это было довольно муторное и меня хватило на выпуск где-то примерно 80 еженедельных дайджестов. В процессе я каждый четверг пропускал через себя несколько других дайджестов, около сотни тг-каналов и примерно столько же отдельных RSS-блогов.С момент последнего выпуска прошло около 10 месяцев, одно время я совсем бросил что-то читать, но потом интерес вернулся. Попробовал собрать несколько дайджестов, но мозг сразу сказал, что заниматься написанием дайджестов больше не будет. Но читать дайджесты при этом хочется!И я решил построить автоматизированный пайплайн сборки дайджестов (прежде всего для себя, но может быть и вам зайдёт).В общем, дождался блокировки телеги и вынес дайджест в отдельного бота @web_platform_pulse_bot.В нём ежедневно утром бот публикует примерно 10 ссылок с самым интересным, что
    2,160201652Открыть в Telegram
  • Виталий и Платформа

    22 мар., 16:31

    Скриншот-тестирование компонентов в DockerВ нескольких проектах, где я работал, пробовали внедрить скриншот-тестирование компонентов. Принцип работы такой:1) меняем компонент 2) делаем эталонный скриншот, сохраняем в репе 3) повторяем на всех компонентах 4) при повторных изменениях запускаем тесты, в которых сравниваются эталонные скриншоты и текущее отображение компонентов 5) если все расхождения запланированные, меняем эталонные скрины; если есть незапланированные расхождения, поздравляю, тесты нашли регресс!Такие тесты хорошо подходят для теста вёрстки элементов ui-kit-а (многочисленные состояниях ховера, фокуса, разные режимы компонента) или же каких-то критичных компонентов (форма логина, чекаут), которые никак нельзя случайно поломать.Снепшотные тесты, юниты, e2e тут не помогут, нужно именно сравнение скринов. Звучит хорошо, но есть одно НО. Во всех случаях на моей
    2,00020921Открыть в Telegram
  • Виталий и Платформа

    1 мар., 12:14

    End-to-end разработчикДеление на фронтенд и бэкенд никогда не было про технику. Это было больше про бизнес-процессы и найм: в индустрии удобнее искать заменяемых специалистов на узкий скоуп. Фронтендер имплементит "клиентскую" логику, бэкендер — API и "серверную" логику. Но по сути это единое целое и деление, если посмотреть свежим взглядом, весьма условное. Я прекрасно помню времена, когда фреймворки не затачивались конкретно на фронт/бэк, а были про веб-разработку проекта целиком.И сейчас это деление начинает терять смысл. ИИшки привносят собой инфляцию ценности навыков (и стоимости строк кода). Уметь писать код стоит меньше, чем год назад. И будет стоить ещё меньше через год. Причём стоит меньше и в деньгах, и в самой ценности навыка: знания становятся все более и более общедоступны и легкодоступны, и само понятие конкретного навыка — это теперь не что-то труднодостигаемое и
    1,6302194322Открыть в Telegram
  • Виталий и Платформа

    18 февр., 13:29

    npm lifecycle scriptsTIL, что в npm есть lifecycle scripts. Перед и после стандартных команд типа dev, build, test есть "хуки", на которые можно подцепить нужные дополнительные команды.npm run dev | predev → dev → postdev npm run build | prebuild → build → postbuild npm test | pretest → test → posttestДобавляете в package.json скрипт с префиксом pre или post — npm запустит их с соответствующем порядке:{ "scripts": { "build:client": "node esbuild.client.mjs", "predev": "npm run build:client" "dev": "tsx src/server/index.ts", } }Сначала predev соберёт клиент, dev запустит сервер.
    1,8201263Открыть в Telegram
  • Виталий и Платформа

    13 февр., 06:05

    Что нового Baseline Widely Available, часть 4...продолжениеWeb APIsOffscreen Canvas — рендеринг canvas в отдельном потоке без зависимостей от DOM.const offscreen = canvas.transferControlToOffscreen(); worker.postMessage({ canvas: offscreen }, [offscreen]);Мнение: 4 из 5, по идее довольно мощная возможность для оптимизации, опять же в связке с web worker-ом, куда можно кинуть "внеэкранную канву" для рендера чего-либо тяжёлого.—Screen Orientation — API для управления ориентацией экрана.await screen.orientation.lock('landscape');Мнение: 4 из 5, мастхэв для работы с мобилками, пригождалось.
    1,6001187Открыть в Telegram
  • Виталий и Платформа

    11 февр., 06:04

    Что нового Baseline Widely Available, часть 3...продолжениеJavaScriptArray findLast() и findLastIndex() — поиск в массиве в обратном порядке.const array = [5, 12, 8, 130, 44]; const isLargeNumber = (element) => element > 100; console.log(array.findLast(isLargeNumber)); // 130 console.log(array.findLastIndex(isLargeNumber)); // 3Мнение: 3 из 5, хорошо, когда удаётся утилиты заменять на встроенные методы, так что мелочь, а приятно.—Array by Copy — методы toSorted(), toReversed(), toSpliced(), возвращающие новый массив без изменения оригинала.const arr = [1, 2, 3];
    1,3101064Открыть в Telegram
  • Виталий и Платформа

    9 февр., 07:14

    playwright-cliТут вышел https://github.com/microsoft/playwright-cli, более эргономичный, чем MCP, способ запускать ботом безголового playwright для выполнения действий в браузере.Да, собственно, не обязательно ботом, можно просто в рамках CLI-API написать скрипт для автоматизации действия в браузере:playwright-cli open https://demo.playwright.dev/todomvc/ --headed playwright-cli type "Buy groceries" playwright-cli press Enter playwright-cli type "Water flowers" playwright-cli press Enter playwright-cli check e21 playwright-cli check e35 playwright-cli screenshotВот эти вот e21 и e35 — это наименования DOM-нод в открытом сайте. Командой open сайт открывается и записывается его снепшот в виде yaml-файла. Каждая нода помечается своим айдишником.По необходимости можно вызывать playwright "с головой":playwright-cli open https://playwright.dev --headed
    Иллюстрация к посту канала Виталий и ПлатформаИллюстрация к посту канала Виталий и Платформа
  • Виталий и Платформа

    5 февр., 07:37изменён

    Что нового Baseline Widely Available, часть 2...продолжениеCSSTwo-value display property — свойство display теперь принимает два значения для явного указания внешнего и внутреннего режима layouts. Например, inline flex или block flow..card { display: inline flex; } .container { display: block flow; }Мнение: 2 из 5, любопытно, но не более.—overflow: clip — обрезка содержимого без создания скроллов, с возможностью обрезки только по одной стороне
  • Виталий и Платформа

    4 февр., 13:33

    Что нового Baseline Widely Available, часть 1В прошлом году (+ в январе 2026) довольно много платформенных фич достигли статуса Baseline Widely Available — это значит, что они поддерживаются во всех основных браузерах уже 30 месяцев! А это повод бескомпромиссно тащить их в прод проверить аналитику по пользовательским устройствам и браузерам в вашем проекте (скорее всего ваши пользователи уже обзавелись браузером, которые эти фичи поддерживают).Собрал списком все фичи с кратким описанием и моими комментами к их использованию.CSSContainer Queries — применение стилей на основе размеров родительского контейнера, а не viewport. Позволяет создавать адаптивные компоненты, которые реагируют на свой контейнер..card { container-type: inline-size; }@container (min-width: 300px) { .card { background-color: lightblue; } }Мнение: 5 из 5, но требует перестроить майндсет в целом при
    1,9402011311Открыть в Telegram
  • Виталий и Платформа

    16 янв., 07:49изменён

    react-best-practicesТут Vercel подогнали мозгов для ваших frontend-агентов набор бестпрактисов и антипаттернов по React, можно установить в виде скиллов в ваш любимый агент или просто почитать. Темы, рассматриваемые внутри: устранение вотерфоллов, оптимизация размера бандла, SSR, дата-фетчинг на клиенте (жаль, что без tanstack, а только swr), оптимизация ререндеров, перфоманс рендеринга и JS, а также ещё немного мелочей.#Пульс_веб_платформы@web_platform | Поддержать платформу 🌀
    2,2602721111Открыть в Telegram
  • Виталий и Платформа

    14 янв., 09:53изменён

    А вы заметили, что со всеми этими ии-движухами как-то морально проще стало экспериментировать с новым софтом и подходами в работе. Раньше ну узнаешь, что какая-то там либа вышла, ну подумаешь, что надо когда-нибудь попробовать, и всё на том. Ну максимум на свежем проекте или новом компе что-то свежее ставишь, пробуешь.А теперь как-то реально попроще со всем этим стало: узнаёшь, сразу пробуешь, профит (наверное это можно назвать таблеткой от FOMO, правда хоть это и купирует приступы, но провоцирует повторные 😁).Возможно на такой волне стоит присмотреться и к остальной экосистеме. Например, вот в pnpm подвели итоги прошлого года. В v10 много всего интересного.Самое важное — pnpm перестал доверять всем пакетам. Раньше pnpm install давал любому пакету в дереве зависимостей запускать произвольный код (preinstall, postinstall). Это само собой создавало вектор атак через supply chain.В
    1,67018711Открыть в Telegram