Yandex for Frontend

⏮ Как запустить AI в браузере Когда привычные решения не подходят, а встроить искусственный интеллект в пользовательский интерфейс нужно уже сегодня — на помощь приходят локальные модели. Алиса Пюльзю, фронтенд-разработчик РКС, в своём докладе на конференции «Я 💛 Фронтенд 2026» рассказала, как с помощью WebGPU запускать AI-агентов прямо в браузере без увеличения нагрузки на сервер. В докладе: 🟡 Библиотеки, которые поддерживают WebGPU 🟡 Альтернативные способы запуска моделей в браузере 🟡 Реальные примеры использования локальных моделей и перспективы их применения в различных областях, в том числе в космической отрасли ➡️ Смотрите полное выступление на ютубе и в VK Видео. Подписывайтесь: 💬 @Yandex4Frontend

⏮ Как происходит синхронизация компонентов в Figma и коде Меня зовут Серафим Четверухин, я ведущий дизайнер продукта в Yandex Cloud. На Я.Субботнике по разработке интерфейсов я рассказал про Figma Code Connect — фичу, о которой почти никто не знает, но она реально меняет работу с дизайн-системами. 🕵️‍♀️ Читайте, как она устроена, в карточках выше ➡️ Смотрите полное видео на ютубе или в VK Видео. Там я поделился и другими подробностями настройки Code Connect, объяснил, как работает функция Figma Instance и что делать, когда у одного компонента два разных API. А также поделился примерами кода и сравнил вёрстку с MCP и без него. 🔻 Презентацию ищите под этим постом. 📺 А доклады остальных спикеров можно найти в плейлистах на ютубе или в 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

✨ Системный взгляд на асинхронность в 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

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

🤩 Как оптимизировать видеоплеер под новую реальность 🤝 Привет, это Рамиль Габдрахманов. Я руковожу разработкой видеоплееров в Yandex Infrastructure. Нашу платформу используют Кинопоиск, Маркет, Музыка и другие сервисы, в том числе вне Яндекса. Сегодня я хочу рассказать, как мы делаем ленты коротких видео. С приходом короткого формата видео UX просмотра контента сильно изменился. Раньше пользователи выбирали фильм в галерее и смотрели его в отдельном экране. Современную систему можно представить скорее как ряд карточек: слева и справа (или сверху и снизу) от выбранного видео они уходят в бесконечность. Если бы мы просто по старинке подключали наш плеер на SDK к каждой карточке и воспроизводили видео, это работало бы плохо. Во-первых, появилась бы существенная конкуренция за ресурсы. Во-вторых, нам было бы тяжело найти общую точку знаний, ведь все компоненты работали бы независимо. Это потенциально усложняет поддержку. А ещё оптимизации и улучшения в таком формате сложнее переиспользовать. ⏮ Поэтому пришлось многое переосмыслить: 🟡 Нам нужна информация о списке элементов, которые пользователь видит на экране непосредственно сейчас и от которых ожидает воспроизведения 🟡 Необходима некоторая эпсилон-окрестность элементов — не вся лента, но какая-то её часть, которая готовится к воспроизведению 🟡 Важно хранить данные о видео, которые пользователь только-только посмотрел ➡️ За этими простыми на первый взгляд задачами стоит много разработки и исследований. Читайте о них в статье на Хабре ✨ Подписывайтесь: 💬 @Yandex4Frontend

🐾 Пет-проекты наших подписчиков: библиотека React-хуков Во многих командах разработчикам приходится из раза в раз писать одни и те же хуки. Работа со скроллом, мышью, событиями браузера, таймерами... А ведь это время можно потратить на что-нибудь более полезное. ⏮ Чтобы решить проблему, разработчики из коллектива siberiacancode создали Reactuse. Это большая и удобная инфраструктура готовых хуков, которые можно свободно брать и использовать в собственных проектах. ✨ Внутри Reactuse: 🈶 Строгая типизация 🈶 Продвинутая архитектура API 🈶 Большое покрытие тестами 🈶 Стабильное поведение в разных сценариях ➡️ Ссылка на гитхаб ➡️ Сайт Reactuse с интерактивными примерами ➡️ Доклад Дмитрия о Reactuse на MoscowJS 69 Подписывайтесь: 💬 @Yandex4Frontend

🌕 Приходя, гасите свет ⏮ Роман Ахмадуллин, лид фронтенда в Дроме, рассказал о директиве @media. Она позволяет интерфейсу адаптироваться под предпочтения конкретного пользователя: настроить тёмную тему, прозрачность, контрастность, включить или отключить анимации. ✨ Больше о @media в Доке А на конференции «Я 💛 Фронтенд» Роман поделился и другими фичами, с которыми можно строить по-настоящему адаптивные интерфейсы. Этот подход отходит от классических вьюпортов и брейк-пойнтов: ключевую роль в нём играет контекст и окружение компонента. ➡️ Смотрите полный доклад на ютубе и в VK Видео. Подписывайтесь: 💬 @Yandex4Frontend

⏮ Строю карьеру без профильного образования ✌️ Привет, это Анастасия Берия, разработчик интерфейсов в Yandex Infrastructure. Я научилась кодить самостоятельно и на чистом энтузиазме доросла до мидл-инженера 🙃 Хочу рассказать, какой путь я прошла, чтобы им стать. 🈶 Таможенная академия вместо программирования В старших классах родители сказали мне, что профильная математика не для девочек. И отправили учиться в таможенную академию. Мне это было не близко. На втором курсе я стала смотреть в сторону веб-дизайна — тем более что я люблю рисовать. Но макетов в фигме быстро стало мало. Я решила научиться делать настоящие веб-приложения. 🈶 Трансляции на Twitch Я выбрала нестандартный путь. Почитала книги по программированию и пришла на Twitch. Там есть сегмент, как люди чему-то учатся. Этот формат не очень популярен в русскоязычном пространстве, поэтому моим единственным соседом был бородатый тридцатилетний парень, который писал свой компилятор. И рядом с ним девятнадцатилетняя я изучала JavaScript. У меня появились классные зрители. Со многими я переписываюсь и спустя шесть лет. Там же я нашла ментора, который взял меня под своё крыло и многому научил — мы до сих пор общаемся. 🈶 Школа разработки интерфейсов Однажды во время стрима я заикнулась, что было бы классно как-нибудь поработать в Яндексе. Это казалось мне несбыточной мечтой. Но один зритель написал, что у Яндекса как раз открылись школы по программированию и мне стоит попробовать. Мы с ребятами из чата потренировали типовые задачи, и я смогла поступить. После школы разработки я пришла в Яндекс. Секцию с кодом мне засчитали сразу, а вот алгоритмы нужно было пройти заново, чтобы подтвердить свой уровень. 🈶 Сильный инфраструктурный сервис Я попала в Yandex Monium, мы занимаемся мониторингом систем. Изначально это был внутренний инструмент, который разрабатывает Yandex Infrastructure, но со временем он стал внешним продуктом. Я пришла, когда платформа менялась, и добавила в её новую версию много важных вещей: работала над алертингом, каналами нотификаций, интеграциями с другими сервисами. А сейчас занимаюсь фичами, за которыми к нам приходят пользователи: дашборды, графики и просмотр метрик. Все три года в Яндексе я работаю в одной команде и не хочу её менять. Мне здесь уютно, я подружилась со многими коллегами, с некоторыми после работы играю в онлайн-игры. А каждый раз, когда я приезжаю в Москву, мы куда-то выбираемся ✨ ➡️ Читайте все подробности моего пути в блоге о работе в Яндексе. Там я также рассказала, как полностью поменяла подход к разработке, почему нужно тормозить себя при написании кода и зачем ломать собственный интерфейс. А ещё поделилась историями о том, как менторю ребят в Школе разработки интерфейсов и провожу собеседования. Подписывайтесь: 💬 @Yandex4Frontend

🔆 Vertis JS: Summer Edition Приглашаем вас зарядиться летним настроением и полезными знаниями на встрече фронтенд-разработчиков. Мы расскажем, как создавать интерфейсы быстрее и качественнее: применять AI в реальных задачах и ускорять проверку изменений на мобильных устройствах. А также как выстраивать процессы, которые экономят время команды и снижают риски в продакшене. Когда и где: 📆 23 мая, 13:00 📍 Москва, БЦ «Морозов», «Синий кит» В программе: 🟡 Егор Заплатин, руководитель службы разработки фронтенда в Яндекс Недвижимости. Покажет, как за счёт инженерных практик — контекста, feedback loop, MCP и скилов — можно прокачать AI-агента до уровня мидла, который решает реальные задачи в продакшене 🟡 Константин Сарвилов, разработчик интерфейсов в Яндекс Недвижимости. Расскажет, как разрабатывать локально запущенное приложение на мобильном устройстве. А ещё поделится принципами работы сетевых протоколов и полным набором инструментов для мгновенного мобильного тестирования в любых условиях 🟡 Максим Алмаев, разработчик интерфейсов в Авто.ру. Объяснит на примере объединения Figma MCP, AI-агента и реального проекта, как автоматизировать путь от теоретической задачи до готового интерфейса Также после докладов вас ждут квиз с призами и стенды, где мы соберём своё TravelTech-приложение и проведём дебаг интерфейсов. А в конце — афтерпати! ✨ ➡️ Зарегистрироваться на Vertis JS: Summer Edition Подписывайтесь: 💬 @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

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

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

✨ Добро пожаловать в «Рекурсию по городу» — командное CTF-приключение для разработчиков, которое подготовили эксперты из Яндекса. Вам предстоит исследовать вечернюю Москву, распутать загадку проекта и починить реальность, чтобы релиз состоялся. В игре более 30 локаций, но какой маршрут выбрать и по какой стратегии двигаться — решать только вам. На каждом пункте нужно выполнить задание: найти правильный вход, понять фразу на табличке, увидеть предмет на фасаде или человека. Часть квестов зашифрованы в головоломках и математических задачках. Вы сами выбираете сложность и маршрут. Принять участие можно в двух форматах: 🟡 С командой — форму заполняет капитан и указывает данные всех участников 🟡 Самостоятельно — подберём вам команду для игры прямо на месте Когда и где: 📆 23 мая с 17:00 до 01:00 📍 Москва, «Красная Роза» ➡️ Присоединиться к приключению Подписывайтесь: 💬 @Yandex4Frontend

🥲 Ломается вёрстка после правок? Есть решение Михаил Балицкий, старший разработчик интерфейсов главной страницы Поиска, предлагает использовать сабгриды. Они позволяют писать легко поддерживаемый и качественный код с небольшим количеством усилий. 📺 Кстати, во время своего выступления на Я.Субботнике в Минске Михаил также рассказал о будущем вёрстки и всех современных технологиях — от grid и CSS Nesting до Popover API, Invoker Commands и Web Transition API. И на примере главной страницы Яндекса объяснил, что из этого уже можно использовать, а к чему пока стоит приглядеться. ➡️ Смотрите полный доклад на ютубе и в VK Видео. Подписывайтесь: 💬 @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

✨ Встречайте собственную библиотеку 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

✨ Разбор Capture the Flag 2026 Никита Дубко и Сергей Иванов показали, как решить все задачи с фронтендерского турнира, который прошёл уже в шестой раз. Помимо головоломок и скрытых в коде флагов, в игре есть сюжет и персонажи. Так что видео можно воспринимать как летсплей от разработчиков — в нём они погружаются в многолетнюю и загадочную историю фантастической технокорпорации. 💻 Посмотреть разбор можно на ютубе или в VK Видео. 🐚 Ещё у Capture the Flag есть чат участников, где они делятся тем, как проходят задачи. 🔆 Новый турнир проведём следующей весной, а если вы хотите порешать задачки прямо сейчас, то на этом сайте лежат все игры с 2021 года. Подписывайтесь: 💬 @Yandex4Frontend

🔆 UI Kit + AI-помощник: как подружить дизайн и код Привет, я Валерий Баранов, руководитель технологий фронтенда в Яндекс 360. 90% нашей команды уже используют AI-помощников. Но мы столкнулись с проблемой: ассистент перестаёт понимать проект, когда дело доходит до сложного UI. Сначала он пишет код за пять минут, а потом начинает ломать работающие компоненты, предлагать библиотеки, которых нет, и путать пропсы. Знакомая ситуация? Мы проанализировали процесс и поняли: модель не знает структуру репозитория, не видит дизайн-систему и не понимает контекст внутренних библиотек. Чтобы это исправить, мы выстроили три уровня контекста. 🈶 Первый уровень — описание проекта Мы используем файл AGENTS.md. Это стандарт для всех современных ассистентов. В одном файле мы прописываем: 🟡 Структуру директорий 🟡 Команды для сборки и проверки 🟡 Жёсткие правила: что можно, а что нельзя Пишите только то, что модель не может узнать сама дёшево. Исследования показывают, что инструкции в повелительном наклонении («Используй CSS Modules для новых компонентов») AI выполняет в 94% случаев. 🈶 Второй уровень — контекст UI Kit У нас есть внутренняя библиотека компонентов Orbita. Чтобы ассистент не генерировал несуществующие пропсы, мы разработали собственный MCP-сервер. Через него модель получает актуальный API компонентов, токены и паттерны композиции. 🈶 Третий уровень — связь дизайна и кода Мы договорились с дизайнерами: Figma задаёт требования, а реализация остаётся за кодом. Инструмент Figma Code Connect описывает маппинг свойств. Теперь LLM видит, как называется параметр, и больше не путает enabled с isDisabled. 🈶 Что в итоге AGENTS.md требует один день на настройку, MCP-сервер — около недели. Синхронизация с Figma наступает через 28 дней. Вложения окупаются, ассистент перестаёт гадать и начинает генерировать корректный код, который проходит дизайн-ревью с первого раза. ➡️ А в полной статье на Хабре я разбираю: 🟡 Как структурировать AGENTS.md, чтобы он работал, а не пылился в репозитории 🟡 Почему собственный MCP-сервер меняет правила игры для внутренних библиотек 🟡 Как синхронизировать Figma и код, чтобы ассистент перестал ошибаться в пропсах Подписывайтесь: 💬 @Yandex4Frontend

🛣 «Я хотел быть ближе к пользователям»: история одной ротации Меня зовут Даниэль Ленц. Раньше я создавал интерфейсы в Поиске с Алисой, а затем перешёл в Yandex Infrastructure. Хочу рассказать, как так получилось и чем различается работа для внешних и внутренних пользователей. 🈶 Как я попал в Яндекс Всё вышло случайно. Я планировал полгода готовиться к собеседованиям и только потом откликаться на вакансии. Но примерно через месяц сходил на наймовое мероприятие, а после него мне написали и предложили вакансию. Так я прошёл все секции и попал в Поиск. Тогда там было около семи команд. Кто-то отвечал за рекламу, кто-то — за скорость поиска, его архитектуру и так далее. Я же занимался интерфейсами карусели товаров в выдаче, а через год перешёл в сервис «Картинки», который делала одна команда. Нас было всего четверо, и мы отвечали за всё: за поиск, за страницу, которая рендерит сетку, за просмотрщик картинок, рекламу и пользовательские сценарии. Так что я попробовал себя в командах, которые несут ответственность как за весь продукт, так и за его часть. Также я успел покоммитить в запуск Поиска с Алисой. За пару недель до первого релиза разработчики попросили помочь пофиксить баги и довести сервис до продакшена. Мы очень драйвово поработали две недели. И хотя я не делал проект с нуля, был рад в нём поучаствовать. 🈶 Почему я решил сменить фокус Когда работаешь с задачами для миллиона очень разных людей, сложно представить, как они пользуются сервисом. А мне был нужен более близкий и конкретный фидбэк. Поэтому через полтора года я начал искать вакансии во внутренней инфраструктуре Яндекса. Через специальный сервис нашёл место в одной из команд Yandex Infrastructure, связался с рекрутером, поговорил с тимлидом и ротировался. 🈶 Что изменилось:

«Инфраструктурой Яндекса пользуются несколько десятков тысяч человек. Я представляю, кто эти люди, чем они занимаются и какие у них потребности. Со многими общаюсь, и связь с ними ближе, поэтому разрабатывать для них мне интереснее».

🈶 Чем я занимаюсь сейчас Делаю инфраструктуру для коллег уже год 😌 Первой моей задачей стала разработка большой фичи для сервиса выдачи ресурсов. Раньше, чтобы получить GPU, команды вручную создавали тикет или писали запрос в одну из таблиц. Периодически заказы дублировались, возникала путаница, а выдача графических процессоров задерживалась. Мы добавили в наш сервис раздел про GPU. Теперь команде нужно просто заполнить заявку. Запрос согласуют без дополнительных таблиц и траты времени. Ещё я делал интерфейс Bootstrap. Он по шаблонам позволяет развернуть микросервис в инфраструктуре Яндекса, что существенно экономит время и силы. А теперь я занимаюсь доработками под продуктовые задачи и помогаю коллегам заехать к нам. ➡️ В блоге о работе в Яндексе я также рассказал, какие решения значительно упрощают и ускоряют работу нашей команды, и поделился небольшой историей о том, как пофиксил Ретродоску. 🧽 Кстати, заглядывайте в мой канал. Там я пишу об интересных вещах из мира фронтенда. Подписывайтесь: 💬 @Yandex4Frontend