اکنون در دسترس! پژوهش تلگرام ۲۰۲۵ — مهمترین بینشهای سال 
Yandex for Frontend
رفتن به کانال در Telegram
Канал для фронтендеров от Яндекса. Рассказываем о мероприятиях для фронтендеров и любителей красивых и функциональных интерфейсов, делимся экспертизой. Чат: https://t.me/yalovefrontend Каналы Яндекса про разработку: https://t.me/addlist/Hrq31w2p1vUyOGZi
نمایش بیشتر📈 تحلیل کانال تلگرام Yandex for Frontend
کانال Yandex for Frontend (@yandex4frontend) در بخش زبانی روسی بازیگری فعال است. در حال حاضر جامعه شامل 10 901 مشترک است و جایگاه 11 368 را در دسته فناوری و برنامهها و رتبه 59 926 را در منطقه روسيا دارد.
📊 شاخصهای مخاطب و پویایی
از زمان ایجاد در невідомо، پروژه رشد سریعی داشته و 10 901 مشترک جذب کرده است.
بر اساس آخرین دادهها در تاریخ 23 ژوئن, 2026، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر 5 و در ۲۴ ساعت گذشته برابر -6 بوده و همچنان دسترسی گستردهای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 30.39% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 14.50% واکنش نسبت به کل مشترکان کسب میکند.
- دسترسی پستها: هر پست به طور میانگین 3 313 بازدید دریافت میکند. در اولین روز معمولاً 1 581 بازدید جمعآوری میشود.
- واکنشها و تعامل: مخاطبان بهطور فعال حمایت میکنند؛ میانگین واکنش به هر پست 15 است.
- علایق موضوعی: محتوا بر موضوعات کلیدی مانند интерфейс, yandex, typescript, css, фронтендеров تمرکز دارد.
📝 توضیح و سیاست محتوایی
نویسنده این فضا را محل بیان دیدگاههای شخصی توصیف میکند:
“Канал для фронтендеров от Яндекса. Рассказываем о мероприятиях для фронтендеров и любителей красивых и функциональных интерфейсов, делимся экспертизой.
Чат: https://t.me/yalovefrontend
Каналы Яндекса про разработку: https://t.me/addlist/Hrq31w2p1vU...”
به لطف بهروزرسانیهای پرتکرار (آخرین داده در تاریخ 24 ژوئن, 2026)، کانال همواره بهروز و دارای دسترسی بالاست. تحلیلها نشان میدهد مخاطبان بهطور فعال با محتوا تعامل دارند و آن را به نقطه اثرگذاری مهم در دسته فناوری و برنامهها تبدیل کردهاند.
10 901
مشترکین
-624 ساعت
+37 روز
+530 روز
در حال بارگیری داده...
کانالهای مشابه
ابر برچسبها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
ژوئن '26
ژوئن '26
+52
در 2 کانالها
مه '26
+134
در 0 کانالها
Get PRO
آوریل '26
+147
در 1 کانالها
Get PRO
مارس '26
+80
در 1 کانالها
Get PRO
فوریه '26
+789
در 3 کانالها
Get PRO
ژانویه '26
+1 090
در 1 کانالها
Get PRO
دسامبر '25
+194
در 2 کانالها
Get PRO
نوامبر '25
+443
در 1 کانالها
Get PRO
اکتبر '25
+585
در 5 کانالها
Get PRO
سپتامبر '25
+101
در 3 کانالها
Get PRO
اوت '25
+106
در 2 کانالها
Get PRO
ژوئیه '25
+144
در 0 کانالها
Get PRO
ژوئن '25
+126
در 0 کانالها
Get PRO
مه '25
+204
در 1 کانالها
Get PRO
آوریل '25
+149
در 1 کانالها
Get PRO
مارس '25
+141
در 2 کانالها
Get PRO
فوریه '25
+224
در 1 کانالها
Get PRO
ژانویه '25
+125
در 1 کانالها
Get PRO
دسامبر '24
+173
در 1 کانالها
Get PRO
نوامبر '24
+149
در 0 کانالها
Get PRO
اکتبر '24
+157
در 0 کانالها
Get PRO
سپتامبر '24
+152
در 0 کانالها
Get PRO
اوت '24
+265
در 6 کانالها
Get PRO
ژوئیه '24
+133
در 0 کانالها
Get PRO
ژوئن '24
+889
در 9 کانالها
Get PRO
مه '24
+1 216
در 0 کانالها
Get PRO
آوریل '24
+744
در 6 کانالها
Get PRO
مارس '24
+1 741
در 8 کانالها
Get PRO
فوریه '24
+283
در 1 کانالها
Get PRO
ژانویه '24
+111
در 0 کانالها
Get PRO
دسامبر '23
+242
در 0 کانالها
Get PRO
نوامبر '23
+2 169
در 3 کانالها
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 24 ژوئن | 0 | |||
| 23 ژوئن | 0 | |||
| 22 ژوئن | +1 | |||
| 21 ژوئن | 0 | |||
| 20 ژوئن | +3 | |||
| 19 ژوئن | +7 | |||
| 18 ژوئن | +5 | |||
| 17 ژوئن | +1 | |||
| 16 ژوئن | +1 | |||
| 15 ژوئن | +1 | |||
| 14 ژوئن | +2 | |||
| 13 ژوئن | +3 | |||
| 12 ژوئن | 0 | |||
| 11 ژوئن | +1 | |||
| 10 ژوئن | +3 | |||
| 09 ژوئن | +1 | |||
| 08 ژوئن | 0 | |||
| 07 ژوئن | +1 | |||
| 06 ژوئن | +9 | |||
| 05 ژوئن | +2 | |||
| 04 ژوئن | +7 | |||
| 03 ژوئن | +3 | |||
| 02 ژوئن | +1 | |||
| 01 ژوئن | 0 |
پستهای کانال
⏮ Как запустить AI в браузере
Когда привычные решения не подходят, а встроить искусственный интеллект в пользовательский интерфейс нужно уже сегодня — на помощь приходят локальные модели.
Алиса Пюльзю, фронтенд-разработчик РКС, в своём докладе на конференции «Я 💛 Фронтенд 2026» рассказала, как с помощью WebGPU запускать AI-агентов прямо в браузере без увеличения нагрузки на сервер.
В докладе:
🟡 Библиотеки, которые поддерживают WebGPU
🟡 Альтернативные способы запуска моделей в браузере
🟡 Реальные примеры использования локальных моделей и перспективы их применения в различных областях, в том числе в космической отрасли
➡️ Смотрите полное выступление на ютубе и в VK Видео.
Подписывайтесь:
💬 @Yandex4Frontend
| 2 | Серафим_Четвертухин_Синхронизация_компонентов_в_Figma_и_коде.pdf | 3 468 |
| 3 |  +8⏮ Как происходит синхронизация компонентов в Figma и коде
Меня зовут Серафим Четверухин, я ведущий дизайнер продукта в Yandex Cloud. На Я.Субботнике по разработке интерфейсов я рассказал про Figma Code Connect — фичу, о которой почти никто не знает, но она реально меняет работу с дизайн-системами.
🕵️♀️ Читайте, как она устроена, в карточках выше
➡️ Смотрите полное видео на ютубе или в VK Видео. Там я поделился и другими подробностями настройки Code Connect, объяснил, как работает функция Figma Instance и что делать, когда у одного компонента два разных API. А также поделился примерами кода и сравнил вёрстку с MCP и без него.
🔻 Презентацию ищите под этим постом.
📺 А доклады остальных спикеров можно найти в плейлистах на ютубе или в VK Видео.
Подписывайтесь:
💬 @Yandex4Frontend | 3 415 |
| 4 |  🧠 Как мы локализуем приложение без ручного труда
Привет! Это снова Ирина Туманова, разработчик интерфейсов в Яндекс 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 | 3 719 |
| 5 | ✨ Системный взгляд на асинхронность в 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 | 4 645 |
| 6 | 🐾 Наши любимые петы: карта воспоминаний
Впечатления остаются с нами на всю жизнь: восторг от красоты горного перевала, усталость после длинного велосипедного трека и вкус кофе на заправке в незнакомом городе, где вы остановились на ночлег. А вот точные названия интересных мест, даты и имена людей, которые были рядом, ускользают.
🕵️♀️ Артём Гуслов, веб-разработчик в Яндекс Пэй, создал Map of Moments — пет-проект, который помогает сохранить в памяти всю важную информацию из путешествий. Это дневник впечатлений, где можно ставить точки на карте и добавлять к ним фото, теги и описание. Или объединить их в хронологическую цепочку, чтобы заново прожить тот самый маршрут.
➡️ Ссылка на карту
➡️ Ссылка на гитхаб
Подписывайтесь:
💬 @Yandex4Frontend | 3 954 |
| 7 |  🤩 Как оптимизировать видеоплеер под новую реальность
🤝 Привет, это Рамиль Габдрахманов. Я руковожу разработкой видеоплееров в Yandex Infrastructure. Нашу платформу используют Кинопоиск, Маркет, Музыка и другие сервисы, в том числе вне Яндекса. Сегодня я хочу рассказать, как мы делаем ленты коротких видео.
С приходом короткого формата видео UX просмотра контента сильно изменился. Раньше пользователи выбирали фильм в галерее и смотрели его в отдельном экране. Современную систему можно представить скорее как ряд карточек: слева и справа (или сверху и снизу) от выбранного видео они уходят в бесконечность.
Если бы мы просто по старинке подключали наш плеер на SDK к каждой карточке и воспроизводили видео, это работало бы плохо. Во-первых, появилась бы существенная конкуренция за ресурсы. Во-вторых, нам было бы тяжело найти общую точку знаний, ведь все компоненты работали бы независимо. Это потенциально усложняет поддержку. А ещё оптимизации и улучшения в таком формате сложнее переиспользовать.
⏮ Поэтому пришлось многое переосмыслить:
🟡 Нам нужна информация о списке элементов, которые пользователь видит на экране непосредственно сейчас и от которых ожидает воспроизведения
🟡 Необходима некоторая эпсилон-окрестность элементов — не вся лента, но какая-то её часть, которая готовится к воспроизведению
🟡 Важно хранить данные о видео, которые пользователь только-только посмотрел
➡️ За этими простыми на первый взгляд задачами стоит много разработки и исследований. Читайте о них в статье на Хабре ✨
Подписывайтесь:
💬 @Yandex4Frontend | 3 764 |
| 8 | 🐾 Пет-проекты наших подписчиков: библиотека React-хуков
Во многих командах разработчикам приходится из раза в раз писать одни и те же хуки. Работа со скроллом, мышью, событиями браузера, таймерами... А ведь это время можно потратить на что-нибудь более полезное.
⏮ Чтобы решить проблему, разработчики из коллектива siberiacancode создали Reactuse. Это большая и удобная инфраструктура готовых хуков, которые можно свободно брать и использовать в собственных проектах.
✨ Внутри Reactuse:
🈶 Строгая типизация
🈶 Продвинутая архитектура API
🈶 Большое покрытие тестами
🈶 Стабильное поведение в разных сценариях
➡️ Ссылка на гитхаб
➡️ Сайт Reactuse с интерактивными примерами
➡️ Доклад Дмитрия о Reactuse на MoscowJS 69
Подписывайтесь:
💬 @Yandex4Frontend | 4 702 |
| 9 |  🌕 Приходя, гасите свет
⏮ Роман Ахмадуллин, лид фронтенда в Дроме, рассказал о директиве @media. Она позволяет интерфейсу адаптироваться под предпочтения конкретного пользователя: настроить тёмную тему, прозрачность, контрастность, включить или отключить анимации.
✨ Больше о @media в Доке
А на конференции «Я 💛 Фронтенд» Роман поделился и другими фичами, с которыми можно строить по-настоящему адаптивные интерфейсы. Этот подход отходит от классических вьюпортов и брейк-пойнтов: ключевую роль в нём играет контекст и окружение компонента.
➡️ Смотрите полный доклад на ютубе и в VK Видео.
Подписывайтесь:
💬 @Yandex4Frontend | 4 168 |
| 10 |  ⏮ Строю карьеру без профильного образования
✌️ Привет, это Анастасия Берия, разработчик интерфейсов в Yandex Infrastructure. Я научилась кодить самостоятельно и на чистом энтузиазме доросла до мидл-инженера 🙃 Хочу рассказать, какой путь я прошла, чтобы им стать.
🈶 Таможенная академия вместо программирования
В старших классах родители сказали мне, что профильная математика не для девочек. И отправили учиться в таможенную академию.
Мне это было не близко. На втором курсе я стала смотреть в сторону веб-дизайна — тем более что я люблю рисовать. Но макетов в фигме быстро стало мало. Я решила научиться делать настоящие веб-приложения.
🈶 Трансляции на Twitch
Я выбрала нестандартный путь. Почитала книги по программированию и пришла на Twitch. Там есть сегмент, как люди чему-то учатся. Этот формат не очень популярен в русскоязычном пространстве, поэтому моим единственным соседом был бородатый тридцатилетний парень, который писал свой компилятор. И рядом с ним девятнадцатилетняя я изучала JavaScript.
У меня появились классные зрители. Со многими я переписываюсь и спустя шесть лет. Там же я нашла ментора, который взял меня под своё крыло и многому научил — мы до сих пор общаемся.
🈶 Школа разработки интерфейсов
Однажды во время стрима я заикнулась, что было бы классно как-нибудь поработать в Яндексе. Это казалось мне несбыточной мечтой. Но один зритель написал, что у Яндекса как раз открылись школы по программированию и мне стоит попробовать. Мы с ребятами из чата потренировали типовые задачи, и я смогла поступить.
После школы разработки я пришла в Яндекс. Секцию с кодом мне засчитали сразу, а вот алгоритмы нужно было пройти заново, чтобы подтвердить свой уровень.
🈶 Сильный инфраструктурный сервис
Я попала в Yandex Monium, мы занимаемся мониторингом систем. Изначально это был внутренний инструмент, который разрабатывает Yandex Infrastructure, но со временем он стал внешним продуктом.
Я пришла, когда платформа менялась, и добавила в её новую версию много важных вещей: работала над алертингом, каналами нотификаций, интеграциями с другими сервисами. А сейчас занимаюсь фичами, за которыми к нам приходят пользователи: дашборды, графики и просмотр метрик.
Все три года в Яндексе я работаю в одной команде и не хочу её менять. Мне здесь уютно, я подружилась со многими коллегами, с некоторыми после работы играю в онлайн-игры. А каждый раз, когда я приезжаю в Москву, мы куда-то выбираемся ✨
➡️ Читайте все подробности моего пути в блоге о работе в Яндексе. Там я также рассказала, как полностью поменяла подход к разработке, почему нужно тормозить себя при написании кода и зачем ломать собственный интерфейс. А ещё поделилась историями о том, как менторю ребят в Школе разработки интерфейсов и провожу собеседования.
Подписывайтесь:
💬 @Yandex4Frontend | 4 382 |
| 11 |  🔆 Vertis JS: Summer Edition
Приглашаем вас зарядиться летним настроением и полезными знаниями на встрече фронтенд-разработчиков. Мы расскажем, как создавать интерфейсы быстрее и качественнее: применять AI в реальных задачах и ускорять проверку изменений на мобильных устройствах. А также как выстраивать процессы, которые экономят время команды и снижают риски в продакшене.
Когда и где:
📆 23 мая, 13:00
📍 Москва, БЦ «Морозов», «Синий кит»
В программе:
🟡 Егор Заплатин, руководитель службы разработки фронтенда в Яндекс Недвижимости. Покажет, как за счёт инженерных практик — контекста, feedback loop, MCP и скилов — можно прокачать AI-агента до уровня мидла, который решает реальные задачи в продакшене
🟡 Константин Сарвилов, разработчик интерфейсов в Яндекс Недвижимости. Расскажет, как разрабатывать локально запущенное приложение на мобильном устройстве. А ещё поделится принципами работы сетевых протоколов и полным набором инструментов для мгновенного мобильного тестирования в любых условиях
🟡 Максим Алмаев, разработчик интерфейсов в Авто.ру. Объяснит на примере объединения Figma MCP, AI-агента и реального проекта, как автоматизировать путь от теоретической задачи до готового интерфейса
Также после докладов вас ждут квиз с призами и стенды, где мы соберём своё TravelTech-приложение и проведём дебаг интерфейсов. А в конце — афтерпати! ✨
➡️ Зарегистрироваться на Vertis JS: Summer Edition
Подписывайтесь:
💬 @Yandex4Frontend | 4 074 |
| 12 | ⏮ Как мы интегрировали 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 | 0 |
| 13 |  📜 Интерфейс реальности в опасности. Фронтендеры, нужна ваша помощь
Вы наткнулись на архивный FTP-сервер. Внутри — код масштабного проекта и дневник неизвестного разработчика. Релиз почти готов. Но часть системы вошла в бесконечную рекурсию: тесты падают, пул-реквесты конфликтуют, а финальный merge так и не произошёл…
✨ Добро пожаловать в «Рекурсию по городу» — командное CTF-приключение для разработчиков, которое подготовили эксперты из Яндекса. Вам предстоит исследовать вечернюю Москву, распутать загадку проекта и починить реальность, чтобы релиз состоялся. В игре более 30 локаций, но какой маршрут выбрать и по какой стратегии двигаться — решать только вам.
На каждом пункте нужно выполнить задание: найти правильный вход, понять фразу на табличке, увидеть предмет на фасаде или человека. Часть квестов зашифрованы в головоломках и математических задачках. Вы сами выбираете сложность и маршрут.
Принять участие можно в двух форматах:
🟡 С командой — форму заполняет капитан и указывает данные всех участников
🟡 Самостоятельно — подберём вам команду для игры прямо на месте
Когда и где:
📆 23 мая с 17:00 до 01:00
📍 Москва, «Красная Роза»
➡️ Присоединиться к приключению
Подписывайтесь:
💬 @Yandex4Frontend | 0 |
| 14 |  🥲 Ломается вёрстка после правок? Есть решение
Михаил Балицкий, старший разработчик интерфейсов главной страницы Поиска, предлагает использовать сабгриды. Они позволяют писать легко поддерживаемый и качественный код с небольшим количеством усилий.
📺 Кстати, во время своего выступления на Я.Субботнике в Минске Михаил также рассказал о будущем вёрстки и всех современных технологиях — от grid и CSS Nesting до Popover API, Invoker Commands и Web Transition API. И на примере главной страницы Яндекса объяснил, что из этого уже можно использовать, а к чему пока стоит приглядеться.
➡️ Смотрите полный доклад на ютубе и в VK Видео.
Подписывайтесь:
💬 @Yandex4Frontend | 0 |
| 15 | Денис_Платонов_Что_такое_дистрибутивность_типов_в_TypeScript.pdf | 0 |
| 16 |  Как 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 | 0 |
| 17 |  ✨ Встречайте собственную библиотеку 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 | 0 |
| 18 |  ✨ Разбор Capture the Flag 2026
Никита Дубко и Сергей Иванов показали, как решить все задачи с фронтендерского турнира, который прошёл уже в шестой раз.
Помимо головоломок и скрытых в коде флагов, в игре есть сюжет и персонажи. Так что видео можно воспринимать как летсплей от разработчиков — в нём они погружаются в многолетнюю и загадочную историю фантастической технокорпорации.
💻 Посмотреть разбор можно на ютубе или в VK Видео.
🐚 Ещё у Capture the Flag есть чат участников, где они делятся тем, как проходят задачи.
🔆 Новый турнир проведём следующей весной, а если вы хотите порешать задачки прямо сейчас, то на этом сайте лежат все игры с 2021 года.
Подписывайтесь:
💬 @Yandex4Frontend | 0 |
| 19 |  🔆 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 | 0 |
| 20 | 🛣 «Я хотел быть ближе к пользователям»: история одной ротации
Меня зовут Даниэль Ленц. Раньше я создавал интерфейсы в Поиске с Алисой, а затем перешёл в Yandex Infrastructure. Хочу рассказать, как так получилось и чем различается работа для внешних и внутренних пользователей.
🈶 Как я попал в Яндекс
Всё вышло случайно. Я планировал полгода готовиться к собеседованиям и только потом откликаться на вакансии. Но примерно через месяц сходил на наймовое мероприятие, а после него мне написали и предложили вакансию. Так я прошёл все секции и попал в Поиск.
Тогда там было около семи команд. Кто-то отвечал за рекламу, кто-то — за скорость поиска, его архитектуру и так далее. Я же занимался интерфейсами карусели товаров в выдаче, а через год перешёл в сервис «Картинки», который делала одна команда.
Нас было всего четверо, и мы отвечали за всё: за поиск, за страницу, которая рендерит сетку, за просмотрщик картинок, рекламу и пользовательские сценарии. Так что я попробовал себя в командах, которые несут ответственность как за весь продукт, так и за его часть.
Также я успел покоммитить в запуск Поиска с Алисой. За пару недель до первого релиза разработчики попросили помочь пофиксить баги и довести сервис до продакшена. Мы очень драйвово поработали две недели. И хотя я не делал проект с нуля, был рад в нём поучаствовать.
🈶 Почему я решил сменить фокус
Когда работаешь с задачами для миллиона очень разных людей, сложно представить, как они пользуются сервисом. А мне был нужен более близкий и конкретный фидбэк. Поэтому через полтора года я начал искать вакансии во внутренней инфраструктуре Яндекса.
Через специальный сервис нашёл место в одной из команд Yandex Infrastructure, связался с рекрутером, поговорил с тимлидом и ротировался.
🈶 Что изменилось:
«Инфраструктурой Яндекса пользуются несколько десятков тысяч человек. Я представляю, кто эти люди, чем они занимаются и какие у них потребности. Со многими общаюсь, и связь с ними ближе, поэтому разрабатывать для них мне интереснее».
🈶 Чем я занимаюсь сейчас
Делаю инфраструктуру для коллег уже год 😌 Первой моей задачей стала разработка большой фичи для сервиса выдачи ресурсов. Раньше, чтобы получить GPU, команды вручную создавали тикет или писали запрос в одну из таблиц. Периодически заказы дублировались, возникала путаница, а выдача графических процессоров задерживалась.
Мы добавили в наш сервис раздел про GPU. Теперь команде нужно просто заполнить заявку. Запрос согласуют без дополнительных таблиц и траты времени.
Ещё я делал интерфейс Bootstrap. Он по шаблонам позволяет развернуть микросервис в инфраструктуре Яндекса, что существенно экономит время и силы. А теперь я занимаюсь доработками под продуктовые задачи и помогаю коллегам заехать к нам.
➡️ В блоге о работе в Яндексе я также рассказал, какие решения значительно упрощают и ускоряют работу нашей команды, и поделился небольшой историей о том, как пофиксил Ретродоску.
🧽 Кстати, заглядывайте в мой канал. Там я пишу об интересных вещах из мира фронтенда.
Подписывайтесь:
💬 @Yandex4Frontend | 0 |
