Yandex for Frontend

🔥 Делимся первыми спикерами на 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

🚀 Погружаемся в технологии на 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