Yandex for Frontend

✨ Рассказываем, почему понимание кода стало узким местом 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подписывайтесь:
💬 @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

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

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

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

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

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

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

Подписывайтесь:
💬 @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

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

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

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

Подписывайтесь:
💬 @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 и даже искусстве.

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

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

🟡 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

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

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

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

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

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

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