Yandex for Frontend

🚀 Погружаемся в технологии на deep tech night 5 сентября пройдёт deep tech night — масштабная онлайн-конференция Яндекса о технологических вызовах, с которыми IT-индустрия сталкивается в эпоху AI: от изменений в разработке до новых требований к архитектуре и инфраструктуре. Это событие для бэкендеров, фронтендеров, тимлидов, аналитиков, продактов и всех, кто работает в IT-индустрии, внедряет AI в процессы, проектирует сложные системы и ищет новые решения. ⏮ В программе доклады экспертов из Яндекса и международных IT-компаний: 🟡 Мо Гавдат, ex-Chief Business Officer, Google X 🟡 Алексей Гусаков, CTO Поисковых сервисов и ИИ 🟡 Сергей Мельник, руководитель сервиса Автономного транспорта и роботов И другие спикеры (некоторые из них пока что секретные — расскажем о них в ближайшее время 🤫). ➡️ Зарегистрироваться Подписывайтесь: 💬 @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

🟡 Фронтенд + 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

🤨 А точно ли я всё делаю правильно? Работу разработчика сложно оценить по результату здесь и сейчас: она часто не приводит к «видимому эффекту», и из-за этого легко начать сомневаться в себе. Как понять, что вы правда хорошо работаете? И почему даже крутые специалисты не всегда верят в свои силы? 🕵️‍♀️ Наши коллеги-аналитики в подкасте «Доверительный интервал» поделились советами, которые помогут вам обрести уверенность. Разобрали основные в карточках ➡️ А если хотите узнать подробности, смотрите подкаст на ютубе и в VK Видео или слушайте в Яндекс Музыке. Подписывайтесь: 💬 @Yandex4Frontend

⏮ Как запустить 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