Yandex for Frontend

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

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

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

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

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

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

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