🐾 Яндексоиды рассказывают про свои пет-проекты: supervenn

Выпустили новое видео про пет-проекты ребят из Яндекса — на этот раз про опенсорс-пакет для визуализации пересекающихся множеств.

🔜 Мы уже рассказывали об этом проекте в нашем канале, а теперь хотим познакомить вас с героем поближе!

Фёдор Индукаев создал, по сути, прокачанную версию диаграмм Эйлера — Венна. Это инструмент в Python, который позволяет точно и удобно визуализировать структуру пересечения большого числа множеств с соблюдением пропорций (сравнение с аналогами можно найти в статье на Хабре).

📺 Смотрите 13-минутный ролик с подробностями на ютубе, а всю серию видео про пет-проекты яндексоидов — в плейлистах на ютубе и в VK Видео.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

📺 «Нерешённые задачи» — премьера к празднику

Сегодня, 13 сентября, мы отмечаем День программиста, а ещё этот праздник совпадает с днём рождения Ильи Сегаловича, сооснователя Яндекса. Так что это идеальный день для премьеры нашего документального фильма «Нерешённые задачи» на Кинопоиске.

🟡 О чём картина

Это 30-минутная история о разработчиках Яндекса, которые каждый день берутся за задачи без готовых решений. Герои из команд Автономного транспорта, Алисы, Yandex Infrastructure и Yandex Cloud расскажут об экспериментах, ошибках и моментах, когда неудача становилась шагом к большому открытию.

Обсудим, почему некоторых пассажиров автономного транспорта укачивает, как подготовить инфраструктуру к трафику, который каждый год растёт вдвое, и что делать программисту, если модели уже пишут код быстрее него.

Готовых инструкций нет. Есть гипотезы, эксперименты, ошибки и новые попытки разобраться. Поэтому если вы не знаете, что делать, — это нормально. Вы просто оказались перед настоящей задачей.

🍿 Смотрим фильм на Кинопоиске или на YouTube

🔅 Приятного просмотра и с Днём программиста!

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🚀 Погружаемся в технологии на deep tech night

Уже 5 сентября пройдёт deep tech night — масштабная онлайн-конференция Яндекса о технологических вызовах, с которыми IT-индустрия сталкивается в эпоху AI: от изменений в разработке до новых требований к архитектуре и инфраструктуре.

Это событие для ML-разработчиков, бэкендеров, фронтендеров, тимлидов, аналитиков, продактов и всех, кто работает в IT-индустрии, внедряет AI в процессы, проектирует сложные системы и ищет новые решения.

🔥 Вас ждут темы от инфраструктуры и железа для нейросетей до AI-агентов и внедрения AI в разработку и два формата:

🟡 Hard — доклады о сложных и масштабных задачах для тех, кто хочет вдумчиво разобраться в технической стороне сферы.

🟡 Experiment — лайтнинги и интерактивные кейсы об экспериментах с AI-агентами, новых подходах и продуктовых находках. Для всех, кому интересно пробовать новое и следить за трендами.

Среди спикеров — Мо Гавдат, десять лет руководивший бизнес-развитием в Google X, Алексей Гусаков, CTO Поисковых сервисов и ИИ, Сергей Мельник, руководитель сервиса Автономного транспорта и роботов, и другие эксперты из Яндекса и других IT-компаний.

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

➡️ Смотрите полную программу и регистрируйтесь на deep tech night.

До встречи!

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

📕 Я перепоручил ведение базы знаний AI-агенту — расскажу как

Привет, это Толя Панов, CTO Яндекс Карт. Я довольно давно веду базу знаний в Obsidian и, как любой уважающий себя «хомяк», накопил запас необработанных материалов. Это репосты и ссылки из любимых каналов в телеграме, ссылки в to-do-листе и рекомендации книг, которые некогда разобрать.

➡️ Основная идея проста: перепоручить ведение базы знаний AI-агенту. Чтобы суммаризацией, систематизацией и построением связей занималась машина. В результате получится та самая LLM Wiki с источниками.

🔜 Как выглядит структура базы знаний?

🟡 Папка inbox со всеми исходными материалами. Телеграм-бот копирует сюда посты, web clipper — тексты статей, а PDF с white papers я кладу руками

🟡 Папка AI workspace для самой Wiki. Только в ней агенту разрешено делать изменения. Такое ограничение даёт спокойствие, что остальная часть базы будет не тронута массовыми правками и галлюцинациями

Потом я создал три новых навыка AI-агента. И выложил их на GitHub:

🟡 compile — обрабатывает заметки из inbox по моим правилам ведения базы и обновляет AI Wiki

🟡 vault-health-check — быстрая проверка. Чинит сломанные ссылки, заметки без ссылок, устаревшие заметки, незакоммиченные изменения. Полезно запускать после ручных правок

🟡 deep-audit — глубокий аудит заметок: структура, связи, валидность утверждений и ссылок на источники

🔜 Как с этим работать?

Я прошу агента искать ответы в первую очередь в базе. И при необходимости собирать ответ в новую заметку. Например, спрашиваю: «Какие есть лучшие практики использования AI при разработке ПО?» Получаю суммаризацию статей и собранные вместе мысли из evergreen notes. Такой конспект можно быстро прочитать и провалиться глубже по ссылкам. Если информации в базе не хватило, прошу собрать дополнительные материалы и ссылки из моих источников. Сохраняю, компилирую, уточняю. И так по кругу 🙂

🔜 Что получилось в результате?

🟡 Я обработал весь накопившийся за годы текстовый бэклог, свыше 250 источников

🟡 Разобрался в темах, до которых не доходили руки: geospatial AI, тренды по AI в разработке, паттерны агентных систем

🟡 База стала не просто архивом ссылок, а рабочим инструментом. Теперь не нужно вспоминать, где именно видел нужную мысль. Достаточно задать вопрос агенту и провалиться в источники

В итоге мне зашло. Я наконец-то разгрёб старые запасы ссылок, оставленных на потом, и создал процесс, в котором база знаний не просто копится, а сама помогает думать. Промпты, формат заметок и audit-сценарии я ещё дорабатываю. Но направление выглядит очень перспективным.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🟡 Как мы пустили сторонний код в продукт с 600 000 пользователей

Меня зовут Женя Успенский, я руковожу разработкой фронтенда в Яндекс Трекере и отвечаю за архитектуру платформы плагинов. Это отдельный механизм, который позволяет без навыков кодинга расширять Трекер собственными модулями без модификации его ядра.

Хочу рассказать, как построить безопасную экосистему плагинов: изолировать сторонний JavaScript, организовать взаимодействие с API и при этом сохранить удобный Developer Experience.

🤯 Когда мы задумали дать пользователям возможность писать свой код прямо внутри Трекера, первая реакция команды безопасности была: «Вы что, с ума сошли?» И ребят можно понять. Пустить сторонний JavaScript в B2B-продукт с чувствительными данными — это прямой путь к XSS, вытаскиванию токенов и утечкам.

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

🈶 Как мы изолировали код

Взвесив все за и против, остановились на классической изоляции через iframe. Это решение выглядит не так концептуально, зато даёт гарантии безопасности и позволяет быстро выйти в продакшен.

Как это устроено:

🟡 Каждый плагин отдаётся с отдельного изолированного хоста, у которого нет доступа к cookie и хранилищу основного приложения

🟡 В параметрах iframe мы явно разрешаем только выполнение скриптов (allow-scripts) и жёстко ограничиваем все остальные возможности

🟡 Политика безопасности запрещает практически всё, в том числе сетевые запросы на любые внешние адреса, которые отличаются от собственного домена iframe

Все ключевые модули получившейся системы мы оформили как самостоятельные, независимые пакеты. Это позволяет подключать к платформе плагинов любые другие сервисы и не переписывать архитектуру изоляции с нуля. А общение плагина с сервисом и внешним миром происходит через специальный объект Bridge, который для транспорта использует postMessage.

✨ Мы хотели дать авторам плагинов хороший Developer Experience: строгую типизацию, автокомплит параметров в IDE и подсказки, но стандартные пути нас не устраивали. Поэтому мы нашли решение на стыке возможностей TypeScript-типов и объекта Proxy.

🈶 Что мы сделали

Мы отказались от генерации JS-кода в пользу генерации исключительно TypeScript-типов (.d.ts) напрямую из нашей OpenAPI-схемы. А вместо абстрактных имён методов мы стали использовать нативные REST-пути в виде строковых литералов. Синтаксис вызова API в нашем SDK выглядит так:

const issue = await sdk.api.v3.get['/issues/{id}']({
  path: { id: 'QUEUE-123' },
  query: { expand: 'comments' }
});

Когда разработчик пишет sdk.api.v3.get[ и ставит открывающую кавычку, TypeScript воспринимает это как обращение к свойству огромного интерфейса. Благодаря этому движки автокомплита и в VS Code, и в WebStorm моментально выводят список всех доступных эндпойнтов. И самое главное: IDE показывает полную JSDoc-документацию прямо во время набора строки.

Весь рантайм-роутер умещается буквально в 10 строк благодаря ES6 Proxy. Так что в исполняемом JS-файле нашего SDK нет ни одного упоминания эндпойнтов.

➡️ Читайте все подробности в статье на Хабре. Там я рассказал, как работает платформа плагинов и как мы тестировали её внутри Яндекса. А также поделился тем, что ещё есть под капотом нашего механизма.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🤖 Как создать AI-агента прямо в браузере

В новом выпуске подкаста #ГриненкоПро принял участие наш коллега Андрей Мелихов, ведущий фронтенд-разработчик из Yandex Cloud. Он рассказал, как создал и развивает браузерный AI-агент в DataLens. Кстати, Андрей ведёт авторский канал в телеграме — melikhov.dev.

Какие темы вы найдёте в полном выпуске:

🟡 Почему готовых фреймворков не хватает
🟡 В чём проблемы разных моделей и инференсов
🟡 Как работать с безопасностью и корпоративными ограничениями
🟡 Заменит ли GenBI аналитиков
🟡 Почему AI ускоряет разработчиков в 3–5 раз, но задач становится только больше

➡️ И это ещё не всё. Коснулись, например, и использования нейронок в быту. Послушать подкаст можно здесь.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

✨ Принципы дизайн-системы под AI-генерацию, новый класс автопроверок кода и CSS вместо JS для всё более сложных интерфейсов. Всё это и многое другое — в новом дайджесте Yandex for Frontend

Подписывайтесь на рассылку, чтобы получать наш дайджест по почте 💛

📖 Почитать

🟡 State of AI 2026: AI-код уже 54%
🟡 Экономика фейковых GitHub-звёзд
🟡 AI помог ускорить компилятор Angular до 20 раз
🟡 Новый HTTP-метод QUERY для чтения с телом
🟡 CSS вместо JS для всё более сложных интерфейсов
🟡 Claude-анимации пересобрали покадрово на SVG и GSAP
🟡 Bun переписали на Rust за 6755 коммитов
🟡 ​​Принципы дизайн-системы под AI-генерацию
🟡 Fallow: новый класс автопроверок кода
🟡 Читаемый код может скрывать квадратичную сложность
🟡 DOOM в терминале через Node.js FFI

📺 Посмотреть

🟡 Figma Code Connect связывает дизайн и код
🟡 AI меняет рутину тимлида

🦾 Инструменты

🟡 TypeScript 7.0 RC — Go-компилятор в 10 раз быстрее
🟡 Rolldown 1.0 — быстрая замена Rollup для Vite 8 и не только
🟡 Aube — быстрый пакетный менеджер с автоустановкой зависимостей
🟡 Deno Desktop — самодостаточное приложение из веб-проекта
🟡 MDN MCP — актуальная веб-документация для агентов
🟡 Линтер лишних React-эффектов — производное состояние, цепочки setState, события через эффект и другие
🟡 JS Crossword — странности JavaScript как кроссворд

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🤨 А точно ли я всё делаю правильно?

Работу разработчика сложно оценить по результату здесь и сейчас: она часто не приводит к «видимому эффекту», и из-за этого легко начать сомневаться в себе. Как понять, что вы правда хорошо работаете? И почему даже крутые специалисты не всегда верят в свои силы?

🕵️‍♀️ Наши коллеги-аналитики в подкасте «Доверительный интервал» поделились советами, которые помогут вам обрести уверенность. Разобрали основные в карточках

➡️ А если хотите узнать подробности, смотрите подкаст на ютубе и в VK Видео или слушайте в Яндекс Музыке.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

⏮ Как происходит синхронизация компонентов в Figma и коде

Меня зовут Серафим Четверухин, я ведущий дизайнер продукта в Yandex Cloud. На Я.Субботнике по разработке интерфейсов я рассказал про Figma Code Connect — фичу, о которой почти никто не знает, но она реально меняет работу с дизайн-системами.

🕵️‍♀️ Читайте, как она устроена, в карточках выше

➡️ Смотрите полное видео на ютубе или в VK Видео. Там я поделился и другими подробностями настройки Code Connect, объяснил, как работает функция Figma Instance и что делать, когда у одного компонента два разных API. А также поделился примерами кода и сравнил вёрстку с MCP и без него.

🔻 Презентацию ищите под этим постом.

📺 А доклады остальных спикеров можно найти в плейлистах на ютубе или в VK Видео.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

✨ Системный взгляд на асинхронность в React, архитектурные принципы группировки кода и DOOM на 3D-<div> — об этом и не только в новом дайджесте Yandex for Frontend

Подписывайтесь на рассылку, чтобы получать наш дайджест по почте 🔅

📆 Мероприятия

🟡 23 мая — Vertis JS: Summer Edition в Москве. Митап про AI-агентов и дизайн от Яндекс Вертикалей и Авто.ру

📖 Почитать

🟡 Петиция против AI в ядре Node.js
🟡 Системный взгляд на асинхронность в React
🟡 Веб-компоненты заменили React на MDN
🟡 Архитектурные принципы группировки кода по функциональности или технологиям в Node.js и не только
🟡 Причины раздувания JavaScript-зависимостей
🟡 Перенос из WASM в TypeScript ускорил парсер в 3 раза
🟡 Выбор библиотеки логирования для JavaScript в 2026 году
🟡 Intl форматирует даты и валюты
🟡 Кастомизация <select> до сложных элементов интерфейса
🟡 DOOM собрали из 3D-<div> на CSS

📺 Посмотреть

🟡 Авторский разбор CTF-задач с «Я 💛 Фронтенд 2026»
🟡 Один SDK для чат-ботов в Slack, Teams и Discord

🤖 Инструменты

🟡 Vite+ — единый CLI для полного процесса веб-разработки
🟡 Grafana 13 — новые панели, адаптивные дашборды и AI-помощник
🟡 Boneyard генерирует скелетоны загрузки из реального UI
🟡 Mockdown рисует ASCII-прототипы интерфейсов
🟡 Can’t Maintain — игра про именование и хороший API

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🤩 Как оптимизировать видеоплеер под новую реальность

🤝 Привет, это Рамиль Габдрахманов. Я руковожу разработкой видеоплееров в Yandex Infrastructure. Нашу платформу используют Кинопоиск, Маркет, Музыка и другие сервисы, в том числе вне Яндекса. Сегодня я хочу рассказать, как мы делаем ленты коротких видео.

С приходом короткого формата видео UX просмотра контента сильно изменился. Раньше пользователи выбирали фильм в галерее и смотрели его в отдельном экране. Современную систему можно представить скорее как ряд карточек: слева и справа (или сверху и снизу) от выбранного видео они уходят в бесконечность.

Если бы мы просто по старинке подключали наш плеер на SDK к каждой карточке и воспроизводили видео, это работало бы плохо. Во-первых, появилась бы существенная конкуренция за ресурсы. Во-вторых, нам было бы тяжело найти общую точку знаний, ведь все компоненты работали бы независимо. Это потенциально усложняет поддержку. А ещё оптимизации и улучшения в таком формате сложнее переиспользовать.

⏮ Поэтому пришлось многое переосмыслить:

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

🟡 Необходима некоторая эпсилон-окрестность элементов — не вся лента, но какая-то её часть, которая готовится к воспроизведению

🟡 Важно хранить данные о видео, которые пользователь только-только посмотрел

➡️ За этими простыми на первый взгляд задачами стоит много разработки и исследований. Читайте о них в статье на Хабре ✨

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🌕 Приходя, гасите свет

⏮ Роман Ахмадуллин, лид фронтенда в Дроме, рассказал о директиве @media. Она позволяет интерфейсу адаптироваться под предпочтения конкретного пользователя: настроить тёмную тему, прозрачность, контрастность, включить или отключить анимации.

✨ Больше о @media в Доке

А на конференции «Я 💛 Фронтенд» Роман поделился и другими фичами, с которыми можно строить по-настоящему адаптивные интерфейсы. Этот подход отходит от классических вьюпортов и брейк-пойнтов: ключевую роль в нём играет контекст и окружение компонента.

➡️ Смотрите полный доклад на ютубе и в VK Видео.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🔆 Vertis JS: Summer Edition

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

Когда и где:

📆 23 мая, 13:00
📍 Москва, БЦ «Морозов», «Синий кит»

В программе:

🟡 Егор Заплатин, руководитель службы разработки фронтенда в Яндекс Недвижимости. Покажет, как за счёт инженерных практик — контекста, feedback loop, MCP и скилов — можно прокачать AI-агента до уровня мидла, который решает реальные задачи в продакшене

🟡 Константин Сарвилов, разработчик интерфейсов в Яндекс Недвижимости. Расскажет, как разрабатывать локально запущенное приложение на мобильном устройстве. А ещё поделится принципами работы сетевых протоколов и полным набором инструментов для мгновенного мобильного тестирования в любых условиях

🟡 Максим Алмаев, разработчик интерфейсов в Авто.ру. Объяснит на примере объединения Figma MCP, AI-агента и реального проекта, как автоматизировать путь от теоретической задачи до готового интерфейса

Также после докладов вас ждут квиз с призами и стенды, где мы соберём своё TravelTech-приложение и проведём дебаг интерфейсов. А в конце — афтерпати! ✨

➡️ Зарегистрироваться на Vertis JS: Summer Edition

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

📜 Интерфейс реальности в опасности. Фронтендеры, нужна ваша помощь

Вы наткнулись на архивный FTP-сервер. Внутри — код масштабного проекта и дневник неизвестного разработчика. Релиз почти готов. Но часть системы вошла в бесконечную рекурсию: тесты падают, пул-реквесты конфликтуют, а финальный merge так и не произошёл…

✨ Добро пожаловать в «Рекурсию по городу» — командное CTF-приключение для разработчиков, которое подготовили эксперты из Яндекса. Вам предстоит исследовать вечернюю Москву, распутать загадку проекта и починить реальность, чтобы релиз состоялся. В игре более 30 локаций, но какой маршрут выбрать и по какой стратегии двигаться — решать только вам.

На каждом пункте нужно выполнить задание: найти правильный вход, понять фразу на табличке, увидеть предмет на фасаде или человека. Часть квестов зашифрованы в головоломках и математических задачках. Вы сами выбираете сложность и маршрут.

Принять участие можно в двух форматах:

🟡 С командой — форму заполняет капитан и указывает данные всех участников

🟡 Самостоятельно — подберём вам команду для игры прямо на месте

Когда и где:

📆 23 мая с 17:00 до 01:00

📍 Москва, «Красная Роза»

➡️ Присоединиться к приключению

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

Как Omit {T, K} растворяет типы и что с этим можно сделать

Привет, меня зовут Денис Платонов, я старший разработчик интерфейсов в Яндекс 360. Сегодня на примере своего кейса хочу рассказать, почему важно знать, как работают типы и дистрибутивность в TypeScript.

🔜 Представьте: вы пишете привычный Omit<T, K>, ожидаете аккуратный тип без служебных полей, а вместо этого теряете автокомплит и только потом замечаете, что контракт уже превратился в {}. Ситуация знакомая и неприятная сама по себе, а в проде на on-premise-инсталляциях может обойтись особенно дорого: ошибка между фронтом и бэком здесь редко заканчивается «быстрым откатом».

В одном из кейсов Яндекс 360 проблема оказалась именно такой. На уровне кода всё выглядело разумно: есть union-типы событий и служебные поля вроде type и timestamp, которые не нужно передавать дальше. Значит, можно взять привычный Omit. Интуитивное ожидание — получить тот же union, только без пары ключей. Фактический результат может быть другим: тип схлопывается в {}.

Причина не в «магии», а в том, как устроен стандартный Omit. Внутри это Pick<T, Exclude<keyof T, K>>. И здесь важен keyof: для union-типов он видит только общие ключи всех веток. Если убрать именно их, Exclude возвращает never, а затем Pick<T, never> даёт {}. В этот момент исчезает видимая структура данных. Вместе с ней пропадает автокомплит, а это хороший практический сигнал, что контракт уже потерян и compile-time-защита работает не так, как ожидает разработчик.

Главный риск в том, что {} в TypeScript — это не полезная модель «пустого объекта», а тип, который пропускает слишком многое. Код продолжает собираться, но перестаёт надёжно описывать форму данных. Для систем, где строгий контракт между фронтом и бэком — часть эксплуатационной надёжности, это уже не частность типизации, а источник тихих ошибок. Runtime-проверки по-прежнему нужны, но и compile-time-слой не должен отключаться незаметно.

✨ Исправление есть, и оно практичное: включить дистрибутивность и применять Omit к каждой ветке union отдельно. Для этого подходит DistributiveOmit:

DistributiveOmit<T, K> = T extends any ? Omit<T, K> : never

Такой тип сохраняет структуру каждой ветки, возвращает нормальный union и вместе с ним — автокомплит, читаемость и ожидаемую типобезопасность. Это тот случай, где одна короткая утилита заметно повышает предсказуемость контракта и экономит время на поиск причин «странного» поведения уже после релиза.

Полезный вывод здесь простой: Omit над union-типами нельзя применять на автопилоте. Если T может быть union, итоговый тип стоит проверить отдельно — особенно если IDE внезапно перестала подсказывать поля. Исчезающий автокомплит в таких местах — не мелочь интерфейса, а повод посмотреть, не превратился ли ваш тип в {}.

➡️ В моём полном докладе с Я.Субботника — продовый кейс из Телемоста, разбор того, как keyof ведёт себя на union-типах и почему DistributiveOmit лучше сделать стандартным инструментом для таких сценариев. Посмотреть выступление можно на ютубе или в VK Видео.

🔻 Презентацию ищите под этим постом.

📺 А доклады остальных спикеров можно найти в плейлистах на ютубе или в VK Видео.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

✨ Рассказываем, почему понимание кода стало узким местом AI-разработки и как Bun и pnpm перешли на Rust. А ещё запускаем Morrowind прямо в браузере. Всё это и многое другое — в новом дайджесте Yandex for Frontend

Подписывайтесь на рассылку, чтобы получать наш дайджест по почте 🔅

🚕 Куда сходить

🟡 24 сентября — Yandex Scale 2026 в Москве и онлайн. Вас ждут четыре трека, но отдельный DeepTech — только онлайн

📖 Что почитать

🟡 Понимание кода стало узким местом AI-разработки
🟡 Агентская обвязка превращает модель в AI-агента
🟡 Теперь на Rust: Bun за 11 дней, pnpm без миграции pnpm-lock.yaml
🟡 Наглядный и подробный путь простого действия на сайте
🟡 Деструктуризация может скрывать происхождение переменных
🟡 Так ли нужны выпадающие списки в формах?
🟡 Закрывать ли диалог внешним кликом?
🟡 Переключение тем может быть проще
🟡 Border-shape и border-image для растягивания фона

🤖 Инструменты

🟡 TypeScript 7 — Go-компилятор в 10 раз быстрее
🟡 Vite+ вышел в бету
🟡 Safari MCP — превью инструментов для AI
🟡 Burrow — разработческая машина прямо в браузере
🟡 Oj — быстрая и лёгкая альтернатива Vite
🟡 Performative-UI — библиотека клише для лендингов стартапов

⚽️ Во что поиграть

🟡 Morrowind — прямо в браузере и исходники

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

✨ Яндексоиды рассказывают про свои пет-проекты: Screen Ready

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

ℹ️ Мы уже рассказывали об этом проекте в нашем канале, а теперь представим героев поближе!

Над проектом работали Кристина Пижевская и Никита Ляпин. Вместе они создали Screen Ready — плагин для Figma, который автоматизирует работу с доступностью интерфейсов прямо на этапе дизайна.

🈶 Зачем создан проект

Часто о требованиях к доступности вспоминают уже в процессе разработки или когда продукт почти готов. Это приводит к барьерам для пользователей с особенностями здоровья, которые используют скринридеры и другие вспомогательные технологии. Screen Ready помогает решить эту проблему и интегрирует accessibility-требования в дизайн-макеты с самого начала.

🈶 В ролике ребята рассказывают:

🟡 С какими задачами помогает плагин
🟡 Как с его помощью можно сделать продукты доступнее
🟡 Как вообще всё это работает

📺 Смотрите все подробности на ютубе, а всю серию видео про пет-проекты яндексоидов можно найти в плейлистах на ютубе и в VK Видео.

➡️ Ссылка на гитхаб

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🔥 Новости программы deep tech night

На конференции deep tech night вас ждут два формата:

• Hard — технические доклады о сложных и масштабных задачах. Формат подойдёт тем, кто хочет вдумчиво разобраться в технической стороне темы.

• Experiment — лайтнинги и интерактивные кейсы об экспериментах с AI-агентами, новых подходах и продуктовых находках. Этот формат для всех, кому интересно пробовать новое и следить за трендами.

🕵️‍♀️ В карточках рассказываем о новых спикерах и их темах. Смотрите полную программу и регистрируйтесь на deep tech night, которая пройдёт 5 сентября. Присоединиться к конференции онлайн можно по предварительной регистрации.

➡️ Зарегистрироваться

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🔥 Делимся первыми спикерами на deep tech night

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

➡️ Подробности о докладах и форма регистрации

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🔆 Авторские каналы наших фронтендеров

В Яндексе мы не только пишем код, но и много размышляем о технологиях, управлении, AI и даже искусстве.

➡️ Собрали для вас классную подборку авторских каналов, где ребята делятся мыслями, инсайтами и личным опытом

Кто пишет сейчас:

🟡 Veged and Code
Сергей Бережной, CTO Практикума и директор по взаимодействию с разработчиками, ведёт канал о работе в IT, принятии решений и опенсорсе.

🟡 mefody.dev
Никита Дубко, Chief Contest Officer, пишет про фронтенд, тимлидство и спикерство.

🟡 Synaptic Garden
Роман Барлос, руководитель группы Storage Platform UI, и его канал на стыке AI, науки, философии и искусства.

🟡 Даниэль Ленц — блог
Даниэль Ленц, разработчик интерфейсов, говорит про фронтенд и делится личным опытом.

🟡 ТОП — Тёма о программировании
Тёма Сенюков, руководитель сектора в службе разработки AI-продуктов, преподаёт и рассказывает о частых проблемах во фронтенде, обучении, карьере.

🟡 axaxadev
Денис Князев, старший разработчик интерфейсов, ведёт канал про фронтенд, UX/UI, дизайн-системы, DX и Node.js.

🟡 nikalexxx
Александр Николаичев, руководитель разработки IDP, делает инфраструктуру Яндекса, рисует и любит математику.

🟡 Гриненко про ИИ, бизнес и образование
Владимир Гриненко, предприниматель и экс-CTO Яндекс ID, рассказывает про переход из найма в своё дело и про то, как AI меняет правила игры.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🚀 Погружаемся в технологии на deep tech night

5 сентября пройдёт deep tech night — масштабная онлайн-конференция Яндекса о технологических вызовах, с которыми IT-индустрия сталкивается в эпоху AI: от изменений в разработке до новых требований к архитектуре и инфраструктуре.

Это событие для бэкендеров, фронтендеров, тимлидов, аналитиков, продактов и всех, кто работает в IT-индустрии, внедряет AI в процессы, проектирует сложные системы и ищет новые решения.

⏮ В программе доклады экспертов из Яндекса и международных IT-компаний:

🟡 Мо Гавдат, ex-Chief Business Officer, Google X

🟡 Алексей Гусаков, CTO Поисковых сервисов и ИИ

🟡 Сергей Мельник, руководитель сервиса Автономного транспорта и роботов

И другие спикеры (некоторые из них пока что секретные — расскажем о них в ближайшее время 🤫).

➡️ Зарегистрироваться

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🟡 Фронтенд + CTF + Мона Лиза = ?

На связи Никита Дубко, Lead Product в Яндексе. И я один из тех, кто каждый год делает Frontend CTF в рамках конференции «Я 💛 Фронтенд». Хочу немного пробежаться по нашей истории и рассказать, как и зачем мы создаём соревнование для тех, кто любит пробираться сквозь загадки, секреты и спрятанные подсказки в браузерной игре.

🈶 Что такое CTF

Это Capture the Flag (захват флага). Соревнование ещё в 1993 году придумали для конференции DEFCON, чтобы проверить знания участников в области кибербезопасности. В игре нужно найти флаги: либо украсть у соперников, либо отыскать в исходниках от организаторов.

Наш Frontend CTF — второго типа. Есть веб-сайт в виде игры, а в различных его местах (или на сторонних ресурсах) спрятаны строки вида {flag_something}, где something — искомый флаг. Для решения большинства наших задач игрокам нужны знания фронтенда, сетей и инструментов разработки.

🈶 С чего всё начиналось

Нам хотелось делать классный онлайн: что-нибудь запоминающееся и выделяющееся. Так в 2021 году небольшая команда из трёх человек за две недели собрала полноценную CTF-игру с различными по сложности заданиями. В итоге у нас получилось 17 флагов, 8 уровней, 384 прохождения игры и один уютный чатик.

В 2022 году мы переписали движок и добавили номинации, в 2023-м — обзавелись собственной игровой вселенной и определились с визуальным стилем, в 2024-м — отправили героев в космос. А в этом году мы снова обновили сценарий и движок, чтобы ещё сильнее мотивировать участников исследовать мир.

🈶 Как придумываем задания

Мы собираем идеи заранее: в течение года находим странное и интересное, например особенности браузера, новые фичи CSS, необычные демки с CodePen и так далее. Потом для каждого задания пишем пояснение, как с ним работать.

До игры мы прорешиваем задачи самостоятельно и силами сторонних участников. В итоге у нас получается список заданий, которые отранжированы по сложности. Дальше остаётся только встроить их в игру без конфликтов с основным сюжетом.

➡️ В статье на Хабре я рассказал больше подробностей о том, как мы развиваем игру (и при чём тут Мона Лиза). А ещё поделился примерами заданий прошлых CTF.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

⏮ Как запустить AI в браузере

Когда привычные решения не подходят, а встроить искусственный интеллект в пользовательский интерфейс нужно уже сегодня — на помощь приходят локальные модели.

Алиса Пюльзю, фронтенд-разработчик РКС, в своём докладе на конференции «Я 💛 Фронтенд 2026» рассказала, как с помощью WebGPU запускать AI-агентов прямо в браузере без увеличения нагрузки на сервер.

В докладе:

🟡 Библиотеки, которые поддерживают WebGPU

🟡 Альтернативные способы запуска моделей в браузере

🟡 Реальные примеры использования локальных моделей и перспективы их применения в различных областях, в том числе в космической отрасли

➡️ Смотрите полное выступление на ютубе и в VK Видео.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🧠 Как мы локализуем приложение без ручного труда

Привет! Это снова Ирина Туманова, разработчик интерфейсов в Яндекс Go.
Недавно я рассказывала, как мы всего за две недели сократили количество ключей без задач на перевод с 3300 до 170. А теперь хочу поделиться другими интересными деталями нашей автоматизации 🙃

🈶 Как именно работает скрипт доставки ключей

Процесс самостоятельно запускается в момент, когда Pull Request вливается в основную ветку:

intl-push:
   title: Intl Push
   triggers:
     - on: commit
       into: trunk
   max-active: 1
   flow: intl-push

Скрипт проходит по изменениям в PR, находит добавленные ключи и формирует из них список. Затем для каждого воркспейса запускает команду, которая отправляет все ключи из кода в TMS, и туда же попадают новые. Свежие ключи улетают через API в систему управления переводами.

Но отправка ключей — полдела, нужно ещё забирать готовые переводы обратно в код. Поэтому ровно в 05:00 по Москве запускается cron-job:

intl-pull:
   title: Intl Pull
   flow: intl-pull
   max-active: 1
   schedule:
     timezone: MSK
     cron: 0 5 * * *

Скрипт выкачивает переводы для всех 27 языков, раскладывает данные по файлам локализации в репозитории и сам создаёт Pull Request с изменениями. И, если тесты проходят, отправляет его на автоапрув.

🧽 А ещё мы добавили в CI дополнительную проверку на дубликаты, чтобы нельзя было случайно слить два PR с одинаковыми ключами.

⏮ В рамках проекта мы сделали дашборд, который помогает нам узнавать статус перевода на конкретный язык. В нём видно всё: синие столбцы означают ключи, у которых задача есть, а красные, что её нет. Если графа какого-то языка внезапно покраснела на 30%, мы сразу понимаем, что кто-то влил крупную фичу, а переводы застряли. Поэтому можем среагировать до того, как это заметит пользователь.

❗️ У нас есть правило: фичу открываем на конкретную страну только после появления переводов на нужный язык.

Английский и русский обязательны всегда. Если фича нужна только в России, она открывается только для российских парков. Если нужна на зарубежные рынки, то ждём, пока переводы доедут. Дашборд позволяет отслеживать этот момент в реальном времени.

🈶 Какую проблему подсветила автоматизация

Когда вы удаляете React-компонент — вы устраняете вызов <Message>. ID исчезает из кодовой базы, но в TMS он остаётся.

Мы тратили ресурсы на хранение того, что пользователь никогда не увидит. И на момент аудита в TMS накопилось около 4–5 тысяч таких ключей-призраков. Но у нас уже давно есть скрипт, который сравнивает слепок ключей в коде со слепком в TMS, поэтому их можно постепенно удалять.

🈶 Как мы сэкономили рабочее время

В среднем разработчики раньше заводили 2,5 задачи на перевод в день, тратили около 2 минут на каждую и 15 минут на обновление файлов. Это 20 минут ручной работы на команду ежедневно — достаточно, чтобы выбить из рабочего потока. Теперь всё это делает CI.

💡 И мы можем гарантировать: если код в мастере сегодня, перевод будет на проде через N дней. Менеджеры планируют маркетинговые запуски и релизы в новых странах с точностью до дня.

➡️ Читайте все подробности в моей статье на Хабре. Там я рассказала, как мы жили до появления автоматизации и как устраняли накопившийся лингвистический долг, чтобы насладиться её результатами. А также поделилась метриками и задачами на будущее.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🐾 Наши любимые петы: карта воспоминаний

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

🕵️‍♀️ Артём Гуслов, веб-разработчик в Яндекс Пэй, создал Map of Moments — пет-проект, который помогает сохранить в памяти всю важную информацию из путешествий. Это дневник впечатлений, где можно ставить точки на карте и добавлять к ним фото, теги и описание. Или объединить их в хронологическую цепочку, чтобы заново прожить тот самый маршрут.

➡️ Ссылка на карту

➡️ Ссылка на гитхаб

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🐾 Пет-проекты наших подписчиков: библиотека React-хуков

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

⏮ Чтобы решить проблему, разработчики из коллектива siberiacancode создали Reactuse. Это большая и удобная инфраструктура готовых хуков, которые можно свободно брать и использовать в собственных проектах.

✨ Внутри Reactuse:

🈶 Строгая типизация
🈶 Продвинутая архитектура API
🈶 Большое покрытие тестами
🈶 Стабильное поведение в разных сценариях

➡️ Ссылка на гитхаб
➡️ Сайт Reactuse с интерактивными примерами
➡️ Доклад Дмитрия о Reactuse на MoscowJS 69

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

⏮ Строю карьеру без профильного образования

✌️ Привет, это Анастасия Берия, разработчик интерфейсов в Yandex Infrastructure. Я научилась кодить самостоятельно и на чистом энтузиазме доросла до мидл-инженера 🙃 Хочу рассказать, какой путь я прошла, чтобы им стать.

🈶 Таможенная академия вместо программирования

В старших классах родители сказали мне, что профильная математика не для девочек. И отправили учиться в таможенную академию.

Мне это было не близко. На втором курсе я стала смотреть в сторону веб-дизайна — тем более что я люблю рисовать. Но макетов в фигме быстро стало мало. Я решила научиться делать настоящие веб-приложения.

🈶 Трансляции на Twitch

Я выбрала нестандартный путь. Почитала книги по программированию и пришла на Twitch. Там есть сегмент, как люди чему-то учатся. Этот формат не очень популярен в русскоязычном пространстве, поэтому моим единственным соседом был бородатый тридцатилетний парень, который писал свой компилятор. И рядом с ним девятнадцатилетняя я изучала JavaScript.

У меня появились классные зрители. Со многими я переписываюсь и спустя шесть лет. Там же я нашла ментора, который взял меня под своё крыло и многому научил — мы до сих пор общаемся.

🈶 Школа разработки интерфейсов

Однажды во время стрима я заикнулась, что было бы классно как-нибудь поработать в Яндексе. Это казалось мне несбыточной мечтой. Но один зритель написал, что у Яндекса как раз открылись школы по программированию и мне стоит попробовать. Мы с ребятами из чата потренировали типовые задачи, и я смогла поступить.

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

🈶 Сильный инфраструктурный сервис

Я попала в Yandex Monium, мы занимаемся мониторингом систем. Изначально это был внутренний инструмент, который разрабатывает Yandex Infrastructure, но со временем он стал внешним продуктом.

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

Все три года в Яндексе я работаю в одной команде и не хочу её менять. Мне здесь уютно, я подружилась со многими коллегами, с некоторыми после работы играю в онлайн-игры. А каждый раз, когда я приезжаю в Москву, мы куда-то выбираемся ✨

➡️ Читайте все подробности моего пути в блоге о работе в Яндексе. Там я также рассказала, как полностью поменяла подход к разработке, почему нужно тормозить себя при написании кода и зачем ломать собственный интерфейс. А ещё поделилась историями о том, как менторю ребят в Школе разработки интерфейсов и провожу собеседования.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

⏮ Как мы интегрировали LLM в продукт силами фронтенда

Меня зовут Андрей Мелихов, я ведущий разработчик интерфейсов DataLens в команде Yandex Cloud.

В прошлом году мы запустили Нейроаналитика — AI-ассистента, который строит графики, пишет формулы и решает задачи. И знаете что? Первый этап интеграции с LLM мы сделали без участия бэкенда. Только фронтенд, BFF и немного времени на прототип.

🈶 Преимущества такого подхода:

🟡 Данные уже под рукой. В современные интерфейсы сходится информация из множества бэкендов. Если построить поверх них AI-инструмент — контекст уже будет на клиенте, а дозапросить необходимые сведения несложно

🟡 Быстрые итерации. Когда команда ищет подходящую нишу для AI в продукте, скорость экспериментов критична. Фронтенд позволяет быстро проверять гипотезы без изменений в основном бэкенде

🟡 Меньше координации на старте. BFF на Node.js — это привычная инфраструктура. Можно подключиться к совместимому API и двигаться без блокировки других команд

Это не значит, что бэкенд не нужен. Но начать можно силами фронтенда — и получить работающий продукт.

🈶 Что под капотом

Между клиентом и LLM есть слой BFF, который можно добавить на Node.js или Bun. Он берёт на себя в том числе взаимодействие с моделью. Существующий бэкенд остаётся без изменений — интеграция на первом этапе фактически переходит в зону ответственности фронтенд-команды.

В периметре BFF находятся ключи доступа, реализуется работа с rate limiting и CORS, настраивается мониторинг и логирование. Таким образом, логика взаимодействия с API LLM переносится на сервер.

🈶 Четыре компонента интеграции:

1️⃣ UI-кит. Элементы чат-интерфейса

2️⃣ API SDK. Библиотека для общения с LLM

3️⃣ Тулинг. Механизм, который позволяет модели вызывать функции и получать данные

4️⃣ Контекст. Информация и состояние приложения, которые передаются модели вместе с запросом

➡️ В статье на Хабре я подробно разбираю каждый компонент и показываю работу нашей архитектуры на практике. А в своём докладе на Я.Субботнике по разработке интерфейсов я поделился историей о том, что бывает, когда вся разработка от начала и до конца ложится на плечи фронтендеров. Смотрите выступление на ютубе и в VK Видео.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🥲 Ломается вёрстка после правок? Есть решение

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

📺 Кстати, во время своего выступления на Я.Субботнике в Минске Михаил также рассказал о будущем вёрстки и всех современных технологиях — от grid и CSS Nesting до Popover API, Invoker Commands и Web Transition API. И на примере главной страницы Яндекса объяснил, что из этого уже можно использовать, а к чему пока стоит приглядеться.

➡️ Смотрите полный доклад на ютубе и в VK Видео.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

✨ Встречайте собственную библиотеку DataLens для графиков

Привет, это Евгений Алаев, разработчик интерфейсов в команде Yandex DataLens. Мы делаем BI-систему для анализа данных и построения дашбордов. Соответственно, графики в нём — не просто «одна из фич», а сердце продукта.

Долгое время графики в DataLens строились на Highcharts. Но со временем наш инструмент становился всё сложнее, и в какой-то момент сторонняя библиотека начала больше мешать, чем помогать.

📖 Поэтому мы решили написать собственную библиотеку для визуализации — @gravity‑ui/charts. Она опенсорсная, а я один из двух её core-контрибьюторов.

В основе библиотеки лежит декларативный подход. Пользователь передаёт в компонент один объект-конфиг: серии, оси, заголовок, легенду, тултип. Большая его часть легко сериализуется, логируется и передаётся между системами. А там, где декларативного описания недостаточно, конфиг принимает функции — кастомный рендерер тултипа, обработчики кликов, форматеры меток. Структура данных остаётся предсказуемой, а точки расширения явными.

Ещё один важный момент — гибридный рендер. Основным слоем выступает SVG. Он обеспечивает чёткие границы, масштабирование без потери качества и полный контроль над позиционированием. Но не умеет переносить текст и не поддерживает богатую HTML-разметку. Поэтому для тултипов, data labels с переносами и интерактивных элементов поверх графика мы добавили отдельный HTML-слой, который синхронизируется с координатами SVG.

И немного про производительность. Все взаимодействия с графиком (ховер, клик, движение мыши) проходят через централизованную шину событий на основе d3.dispatch. Это позволяет тултипу, легенде и crosshair реагировать согласованно, без прямых зависимостей. Но главное — движение мыши не вызывает перерендер React. На частоте ховера мы обновляем DOM напрямую через D3, а React подключается только там, где действительно нужно менять структуру или глобальное состояние.

➡️ В статье на Хабре я подробнее рассказал, зачем мы начали разрабатывать свою библиотеку и почему нам не подошли альтернативы, которые уже были на рынке. И по шагам расписал весь процесс миграции.

🧽 Библиотека @gravity‑ui/charts открыта под MIT-лицензией. Вы можете попробовать поработать с ней в вашем проекте: документация, storybook, гитхаб.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…