🚀 Погружаемся в технологии на deep tech night

5 сентября пройдёт deep tech night — масштабная онлайн-конференция Яндекса о технологических вызовах, с которыми IT-индустрия сталкивается в эпоху AI: от изменений в разработке до новых требований к архитектуре и инфраструктуре.

Это событие для бэкендеров, фронтендеров, тимлидов, аналитиков, продактов и всех, кто работает в IT-индустрии, внедряет AI в процессы, проектирует сложные системы и ищет новые решения.

⏮ В программе доклады экспертов из Яндекса и международных IT-компаний:

🟡 Мо Гавдат, ex-Chief Business Officer, Google X

🟡 Алексей Гусаков, CTO Поисковых сервисов и ИИ

🟡 Сергей Мельник, руководитель сервиса Автономного транспорта и роботов

И другие спикеры (некоторые из них пока что секретные — расскажем о них в ближайшее время 🤫).

➡️ Зарегистрироваться

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

Читать полностью…

⏮ Как запустить AI в браузере

Когда привычные решения не подходят, а встроить искусственный интеллект в пользовательский интерфейс нужно уже сегодня — на помощь приходят локальные модели.

Алиса Пюльзю, фронтенд-разработчик РКС, в своём докладе на конференции «Я 💛 Фронтенд 2026» рассказала, как с помощью WebGPU запускать AI-агентов прямо в браузере без увеличения нагрузки на сервер.

В докладе:

🟡 Библиотеки, которые поддерживают WebGPU

🟡 Альтернативные способы запуска моделей в браузере

🟡 Реальные примеры использования локальных моделей и перспективы их применения в различных областях, в том числе в космической отрасли

➡️ Смотрите полное выступление на ютубе и в 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

Читать полностью…

🐾 Наши любимые петы: карта воспоминаний

Впечатления остаются с нами на всю жизнь: восторг от красоты горного перевала, усталость после длинного велосипедного трека и вкус кофе на заправке в незнакомом городе, где вы остановились на ночлег. А вот точные названия интересных мест, даты и имена людей, которые были рядом, ускользают.

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

➡️ Ссылка на карту

➡️ Ссылка на гитхаб

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🐾 Пет-проекты наших подписчиков: библиотека React-хуков

Во многих командах разработчикам приходится из раза в раз писать одни и те же хуки. Работа со скроллом, мышью, событиями браузера, таймерами... А ведь это время можно потратить на что-нибудь более полезное.

⏮ Чтобы решить проблему, разработчики из коллектива siberiacancode создали Reactuse. Это большая и удобная инфраструктура готовых хуков, которые можно свободно брать и использовать в собственных проектах.

✨ Внутри Reactuse:

🈶 Строгая типизация
🈶 Продвинутая архитектура API
🈶 Большое покрытие тестами
🈶 Стабильное поведение в разных сценариях

➡️ Ссылка на гитхаб
➡️ Сайт Reactuse с интерактивными примерами
➡️ Доклад Дмитрия о Reactuse на MoscowJS 69

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

⏮ Строю карьеру без профильного образования

✌️ Привет, это Анастасия Берия, разработчик интерфейсов в Yandex Infrastructure. Я научилась кодить самостоятельно и на чистом энтузиазме доросла до мидл-инженера 🙃 Хочу рассказать, какой путь я прошла, чтобы им стать.

🈶 Таможенная академия вместо программирования

В старших классах родители сказали мне, что профильная математика не для девочек. И отправили учиться в таможенную академию.

Мне это было не близко. На втором курсе я стала смотреть в сторону веб-дизайна — тем более что я люблю рисовать. Но макетов в фигме быстро стало мало. Я решила научиться делать настоящие веб-приложения.

🈶 Трансляции на Twitch

Я выбрала нестандартный путь. Почитала книги по программированию и пришла на Twitch. Там есть сегмент, как люди чему-то учатся. Этот формат не очень популярен в русскоязычном пространстве, поэтому моим единственным соседом был бородатый тридцатилетний парень, который писал свой компилятор. И рядом с ним девятнадцатилетняя я изучала JavaScript.

У меня появились классные зрители. Со многими я переписываюсь и спустя шесть лет. Там же я нашла ментора, который взял меня под своё крыло и многому научил — мы до сих пор общаемся.

🈶 Школа разработки интерфейсов

Однажды во время стрима я заикнулась, что было бы классно как-нибудь поработать в Яндексе. Это казалось мне несбыточной мечтой. Но один зритель написал, что у Яндекса как раз открылись школы по программированию и мне стоит попробовать. Мы с ребятами из чата потренировали типовые задачи, и я смогла поступить.

После школы разработки я пришла в Яндекс. Секцию с кодом мне засчитали сразу, а вот алгоритмы нужно было пройти заново, чтобы подтвердить свой уровень.

🈶 Сильный инфраструктурный сервис

Я попала в Yandex Monium, мы занимаемся мониторингом систем. Изначально это был внутренний инструмент, который разрабатывает Yandex Infrastructure, но со временем он стал внешним продуктом.

Я пришла, когда платформа менялась, и добавила в её новую версию много важных вещей: работала над алертингом, каналами нотификаций, интеграциями с другими сервисами. А сейчас занимаюсь фичами, за которыми к нам приходят пользователи: дашборды, графики и просмотр метрик.

Все три года в Яндексе я работаю в одной команде и не хочу её менять. Мне здесь уютно, я подружилась со многими коллегами, с некоторыми после работы играю в онлайн-игры. А каждый раз, когда я приезжаю в Москву, мы куда-то выбираемся ✨

➡️ Читайте все подробности моего пути в блоге о работе в Яндексе. Там я также рассказала, как полностью поменяла подход к разработке, почему нужно тормозить себя при написании кода и зачем ломать собственный интерфейс. А ещё поделилась историями о том, как менторю ребят в Школе разработки интерфейсов и провожу собеседования.

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

Читать полностью…

🥲 Ломается вёрстка после правок? Есть решение

Михаил Балицкий, старший разработчик интерфейсов главной страницы Поиска, предлагает использовать сабгриды. Они позволяют писать легко поддерживаемый и качественный код с небольшим количеством усилий.

📺 Кстати, во время своего выступления на Я.Субботнике в Минске Михаил также рассказал о будущем вёрстки и всех современных технологиях — от grid и CSS Nesting до Popover API, Invoker Commands и Web Transition API. И на примере главной страницы Яндекса объяснил, что из этого уже можно использовать, а к чему пока стоит приглядеться.

➡️ Смотрите полный доклад на ютубе и в 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

Читать полностью…

🔆 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

Читать полностью…

⏮ Трудности перевода: как мы автоматизировали локализацию

Привет, это Ирина Туманова, разработчик интерфейсов в Яндекс Go. Я работаю в Диспетчерской — это команда, которая помогает таксопаркам и водителям из разных стран пользоваться нашим приложением. Сегодня расскажу о сложностях с переводом Диспетчерской на языки местных рынков и о том, как наша команда их преодолела.

🈶 Давайте разбираться с терминами

🟡 Интернационализация — подготовка продукта к тому, что в него можно будет добавлять новые языки (и не только, но об этом в другой раз)

🟡 Локализация — перенос интерфейса и текстов на другие языки

🟡 Translation Management System — админка, где все тексты хранятся в виде ключей

Для полноценной интернационализации обычно мы заводим либу для вывода текста и TMS для хранения ключей. Благодаря этой системе не нужно переписывать тысячи строк при запуске в новой стране. Достаточно добавить к ключу ещё один вариант на нужном языке — и интерфейс автоматически подхватит перевод.

На первый взгляд всё выглядит просто: добавляем в админку новую локаль и файл со строками, и всё готово. Но что происходит, когда в репозитории появляются новые элементы интерфейса, для которых ещё нет ключей? В этом случае разработчику приходится:

🟡 Запускать скрипт, который находит новые ключи в коде и отправляет их в TMS
🟡 Вручную создавать задачи для переводчиков
🟡 Отдельно следить за тем, чтобы готовые переводы из TMS вовремя возвращались в проект

🈶 Теперь поговорим про ключи и числа

В какой-то момент мы решили узнать, сколько строк теряется в процессе ручной постановки задач, и написали для этого специальный скрипт. Вот результаты аналитики:

🟡 Всего в Диспетчерской было 9,5 тысячи ключей
🟡 Около 3,5 тысячи перевели не на все языки
🟡 Из них около 3,3 тысячи вообще не имели задач на перевод
🟡 Получается, в среднем по языкам около 37% текстов оказывались частично непереведёнными

🈶 Мы решили, что так больше жить нельзя

И принялись автоматизировать процессы. Что получили в итоге:

🟡 Новые ключи автоматически отправляются в TMS. После мёрджа скрипт ищет изменения в диффе и сразу передаёт найденные ключи в систему переводов

🟡 Задачи на перевод создаются автоматически. Как только ключ появляется в TMS, система заводит тикет для переводчиков

🟡 Готовые переводы регулярно подтягиваются в код. Каждый день примерно в 05:00 CI скачивает обновления из TMS и добавляет их в проект

🔜 Результат: всего за две недели количество ключей без задач на перевод упало с 3,3 тысячи до 170 штук!

💻 Этот пост я написала, опираясь на своё выступление на Я.Субботнике по разработке интерфейсов. Смотрите запись доклада на ютубе и в VK Видео — там будут технические подробности и мемы по мотивам истории. Примеры кода и графики с результатами найдёте в презентации, прикрепила её ниже.

Думаю, что тема заинтересует не только локализаторов и переводчиков, а всех, кто хочет расширить узкие горлышки в своих продуктах и автоматизировать процессы в командах.

➡️ Все доклады с Я.Субботника ищите в плейлистах на ютубе и в VK Видео.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

✨ Эволюция версий Node.js, новый ESLint и Descent на Three.js — об этом и не только в новом дайджесте Yandex for Frontend

Подписывайтесь на рассылку, чтобы получать наш дайджест по почте 💛

📖 Почитать

🟡 Эксперимент от OpenAI: код, который полностью написан нейросетью
🟡 Markdown — универсальный язык для AI-агентов, который помогает растить трафик
🟡 Как менялась производительность Node.js от 16-й до 25-й версии
🟡 Эволюция метрик пользовательского опыта с Core Web Vitals
🟡 Node.js релизится по-новому: годовые LTS вместо чётных и нечётных
🟡 Как переписать Next.js за неделю с помощью AI
🟡 Тихая революция в CSS: сверлим дырки в блоках
🟡 Как самораспространяющийся JS-червь вандалил Википедию

📺 Посмотреть

🟡 Записи докладов «Я 💛 Фронтенд 2026» — адаптивные интерфейсы, веб-компоненты и будущее UI
🟡 Гайд по TanStack Router — маршрутизация в React

🤖 Инструменты

🟡 Новая версия ESLint v10.0.0 — теперь Flat config обязателен, JSX-ссылки наконец работают
🟡 Electrobun — десктопное приложение на TypeScript с минимальным размером
🟡 Web Rewind — 30 лет веба на одной странице от Opera
🟡 npmx.dev — исходники, размеры и формат модулей, которых нет на npmjs.com
🟡 Modern CSS — современная нативная замена для старых хаков

💻 Поиграть

🟡 Descent. Легендарный шутер из 90-х возвращается на Three.js. Тут исходники, а здесь — дневник разработки
🟡 RetroTick. FreeCell, «Сапёр» и QBasic прямо в браузере. Гитхаб с исходным кодом

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

✉️ Подписывайтесь на email-рассылку от Yandex for Frontend

У нас есть ежемесячная email-рассылка без лишнего — только контент от фронтендеров и для фронтендеров.

Наши разработчики регулярно просматривают профильные источники и собирают то, что читают и смотрят сами. В рассылке — короткие подборки статей с Хабра, подкасты и видео, новости индустрии, полезные инструменты, а также ключевые мероприятия и технологические анонсы Яндекса.

➡️ Подписаться на ежемесячную рассылку можно здесь

В форме выберите дайджест Yandex for Frontend. По этой же ссылке можно подписаться и на общую рассылку для разработчиков — Yandex for Developers.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🐾 Пет-проекты наших подписчиков: онлайн-среда для обучения программированию

Сегодня рассказываем про Qumir — пет-проект Алексея Озерицкого, C++ разработчика в HFT фонде. Эта история вдохновлена Школьным Алгоритмическим Языком академика А.П. Ершова и системой КуМир.

Алексей создал компилятор и интерпретатор с русскоязычным синтаксисом для обучения программированию и алгоритмическому мышлению. Он намеренно упрощён и доступен для понимания теми, кто только начинает свой путь в разработке. Qumir — это экспериментальное развитие идей и синтаксиса из языков обучения в стиле Ершова.

🧽 Проект полностью написан на C++ с использованием С++23, поддерживает WebAssembly (можно работать прямо в браузере без установки) и имеет открытый исходный код 👀

Основные возможности Qumir:

🟡 Компиляция в машинный код через LLVM

🟡 Интерпретатор для быстрого тестирования

🟡 Графические исполнители

🟡 AI-ассистент для анализа ошибок

➡️ Ссылка на гитхаб

➡️ Ссылка на сайт

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

Читать полностью…

🤨 А точно ли я всё делаю правильно?

Работу разработчика сложно оценить по результату здесь и сейчас: она часто не приводит к «видимому эффекту», и из-за этого легко начать сомневаться в себе. Как понять, что вы правда хорошо работаете? И почему даже крутые специалисты не всегда верят в свои силы?

🕵️‍♀️ Наши коллеги-аналитики в подкасте «Доверительный интервал» поделились советами, которые помогут вам обрести уверенность. Разобрали основные в карточках

➡️ А если хотите узнать подробности, смотрите подкаст на ютубе и в VK Видео или слушайте в Яндекс Музыке.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

⏮ Как происходит синхронизация компонентов в Figma и коде

Меня зовут Серафим Четверухин, я ведущий дизайнер продукта в Yandex Cloud. На Я.Субботнике по разработке интерфейсов я рассказал про Figma Code Connect — фичу, о которой почти никто не знает, но она реально меняет работу с дизайн-системами.

🕵️‍♀️ Читайте, как она устроена, в карточках выше

➡️ Смотрите полное видео на ютубе или в VK Видео. Там я поделился и другими подробностями настройки Code Connect, объяснил, как работает функция Figma Instance и что делать, когда у одного компонента два разных API. А также поделился примерами кода и сравнил вёрстку с MCP и без него.

🔻 Презентацию ищите под этим постом.

📺 А доклады остальных спикеров можно найти в плейлистах на ютубе или в VK Видео.

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

Читать полностью…

🤩 Как оптимизировать видеоплеер под новую реальность

🤝 Привет, это Рамиль Габдрахманов. Я руковожу разработкой видеоплееров в Yandex Infrastructure. Нашу платформу используют Кинопоиск, Маркет, Музыка и другие сервисы, в том числе вне Яндекса. Сегодня я хочу рассказать, как мы делаем ленты коротких видео.

С приходом короткого формата видео UX просмотра контента сильно изменился. Раньше пользователи выбирали фильм в галерее и смотрели его в отдельном экране. Современную систему можно представить скорее как ряд карточек: слева и справа (или сверху и снизу) от выбранного видео они уходят в бесконечность.

Если бы мы просто по старинке подключали наш плеер на SDK к каждой карточке и воспроизводили видео, это работало бы плохо. Во-первых, появилась бы существенная конкуренция за ресурсы. Во-вторых, нам было бы тяжело найти общую точку знаний, ведь все компоненты работали бы независимо. Это потенциально усложняет поддержку. А ещё оптимизации и улучшения в таком формате сложнее переиспользовать.

⏮ Поэтому пришлось многое переосмыслить:

🟡 Нам нужна информация о списке элементов, которые пользователь видит на экране непосредственно сейчас и от которых ожидает воспроизведения

🟡 Необходима некоторая эпсилон-окрестность элементов — не вся лента, но какая-то её часть, которая готовится к воспроизведению

🟡 Важно хранить данные о видео, которые пользователь только-только посмотрел

➡️ За этими простыми на первый взгляд задачами стоит много разработки и исследований. Читайте о них в статье на Хабре ✨

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🌕 Приходя, гасите свет

⏮ Роман Ахмадуллин, лид фронтенда в Дроме, рассказал о директиве @media. Она позволяет интерфейсу адаптироваться под предпочтения конкретного пользователя: настроить тёмную тему, прозрачность, контрастность, включить или отключить анимации.

✨ Больше о @media в Доке

А на конференции «Я 💛 Фронтенд» Роман поделился и другими фичами, с которыми можно строить по-настоящему адаптивные интерфейсы. Этот подход отходит от классических вьюпортов и брейк-пойнтов: ключевую роль в нём играет контекст и окружение компонента.

➡️ Смотрите полный доклад на ютубе и в VK Видео.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🔆 Vertis JS: Summer Edition

Приглашаем вас зарядиться летним настроением и полезными знаниями на встрече фронтенд-разработчиков. Мы расскажем, как создавать интерфейсы быстрее и качественнее: применять AI в реальных задачах и ускорять проверку изменений на мобильных устройствах. А также как выстраивать процессы, которые экономят время команды и снижают риски в продакшене.

Когда и где:

📆 23 мая, 13:00
📍 Москва, БЦ «Морозов», «Синий кит»

В программе:

🟡 Егор Заплатин, руководитель службы разработки фронтенда в Яндекс Недвижимости. Покажет, как за счёт инженерных практик — контекста, feedback loop, MCP и скилов — можно прокачать AI-агента до уровня мидла, который решает реальные задачи в продакшене

🟡 Константин Сарвилов, разработчик интерфейсов в Яндекс Недвижимости. Расскажет, как разрабатывать локально запущенное приложение на мобильном устройстве. А ещё поделится принципами работы сетевых протоколов и полным набором инструментов для мгновенного мобильного тестирования в любых условиях

🟡 Максим Алмаев, разработчик интерфейсов в Авто.ру. Объяснит на примере объединения Figma MCP, AI-агента и реального проекта, как автоматизировать путь от теоретической задачи до готового интерфейса

Также после докладов вас ждут квиз с призами и стенды, где мы соберём своё TravelTech-приложение и проведём дебаг интерфейсов. А в конце — афтерпати! ✨

➡️ Зарегистрироваться на Vertis JS: Summer Edition

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

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

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

✨ Добро пожаловать в «Рекурсию по городу» — командное CTF-приключение для разработчиков, которое подготовили эксперты из Яндекса. Вам предстоит исследовать вечернюю Москву, распутать загадку проекта и починить реальность, чтобы релиз состоялся. В игре более 30 локаций, но какой маршрут выбрать и по какой стратегии двигаться — решать только вам.

На каждом пункте нужно выполнить задание: найти правильный вход, понять фразу на табличке, увидеть предмет на фасаде или человека. Часть квестов зашифрованы в головоломках и математических задачках. Вы сами выбираете сложность и маршрут.

Принять участие можно в двух форматах:

🟡 С командой — форму заполняет капитан и указывает данные всех участников

🟡 Самостоятельно — подберём вам команду для игры прямо на месте

Когда и где:

📆 23 мая с 17:00 до 01:00

📍 Москва, «Красная Роза»

➡️ Присоединиться к приключению

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

Читать полностью…

✨ Разбор Capture the Flag 2026

Никита Дубко и Сергей Иванов показали, как решить все задачи с фронтендерского турнира, который прошёл уже в шестой раз.

Помимо головоломок и скрытых в коде флагов, в игре есть сюжет и персонажи. Так что видео можно воспринимать как летсплей от разработчиков — в нём они погружаются в многолетнюю и загадочную историю фантастической технокорпорации.

💻 Посмотреть разбор можно на ютубе или в VK Видео.

🐚 Ещё у Capture the Flag есть чат участников, где они делятся тем, как проходят задачи.

🔆 Новый турнир проведём следующей весной, а если вы хотите порешать задачки прямо сейчас, то на этом сайте лежат все игры с 2021 года.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🛣 «Я хотел быть ближе к пользователям»: история одной ротации

Меня зовут Даниэль Ленц. Раньше я создавал интерфейсы в Поиске с Алисой, а затем перешёл в Yandex Infrastructure. Хочу рассказать, как так получилось и чем различается работа для внешних и внутренних пользователей.

🈶 Как я попал в Яндекс

Всё вышло случайно. Я планировал полгода готовиться к собеседованиям и только потом откликаться на вакансии. Но примерно через месяц сходил на наймовое мероприятие, а после него мне написали и предложили вакансию. Так я прошёл все секции и попал в Поиск.

Тогда там было около семи команд. Кто-то отвечал за рекламу, кто-то — за скорость поиска, его архитектуру и так далее. Я же занимался интерфейсами карусели товаров в выдаче, а через год перешёл в сервис «Картинки», который делала одна команда.

Нас было всего четверо, и мы отвечали за всё: за поиск, за страницу, которая рендерит сетку, за просмотрщик картинок, рекламу и пользовательские сценарии. Так что я попробовал себя в командах, которые несут ответственность как за весь продукт, так и за его часть.

Также я успел покоммитить в запуск Поиска с Алисой. За пару недель до первого релиза разработчики попросили помочь пофиксить баги и довести сервис до продакшена. Мы очень драйвово поработали две недели. И хотя я не делал проект с нуля, был рад в нём поучаствовать.

🈶 Почему я решил сменить фокус

Когда работаешь с задачами для миллиона очень разных людей, сложно представить, как они пользуются сервисом. А мне был нужен более близкий и конкретный фидбэк. Поэтому через полтора года я начал искать вакансии во внутренней инфраструктуре Яндекса.

Через специальный сервис нашёл место в одной из команд Yandex Infrastructure, связался с рекрутером, поговорил с тимлидом и ротировался.

🈶 Что изменилось:

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

🈶 Чем я занимаюсь сейчас

Делаю инфраструктуру для коллег уже год 😌 Первой моей задачей стала разработка большой фичи для сервиса выдачи ресурсов. Раньше, чтобы получить GPU, команды вручную создавали тикет или писали запрос в одну из таблиц. Периодически заказы дублировались, возникала путаница, а выдача графических процессоров задерживалась.

Мы добавили в наш сервис раздел про GPU. Теперь команде нужно просто заполнить заявку. Запрос согласуют без дополнительных таблиц и траты времени.

Ещё я делал интерфейс Bootstrap. Он по шаблонам позволяет развернуть микросервис в инфраструктуре Яндекса, что существенно экономит время и силы. А теперь я занимаюсь доработками под продуктовые задачи и помогаю коллегам заехать к нам.

➡️ В блоге о работе в Яндексе я также рассказал, какие решения значительно упрощают и ускоряют работу нашей команды, и поделился небольшой историей о том, как пофиксил Ретродоску.

🧽 Кстати, заглядывайте в мой канал. Там я пишу об интересных вещах из мира фронтенда.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🤔 Когда нельзя слепо верить Web Vitals, или Как мы гонялись за Velocity Index в Трекере

Привет, это Роман Омельницкий, старший разработчик интерфейсов в команде Яндекс Трекера. Сегодня я расскажу, как мы ускоряли фронтенд Яндекс Трекера — платформы, в которой живут все планы, задачи и тикеты компании. У нас десятки миллионов хитов в месяц, и при такой нагрузке даже небольшие задержки становились критичными.

🈶 Как измеряли скорость сервиса

В Яндексе для этого используют Velocity Index — это агрегация пяти метрик из Web Vitals. Из них нам особенно интересны три:

🟡 FCP (First Contentful Paint) — время показа первого элемента на странице с контентом (текста или картинки)

🟡 LCP (Largest Contentful Paint) — как быстро появляется самый крупный элемент

🟡 TBT (Total Blocking Time) — суммарное время, когда основной поток был заблокирован парсингом или выполнением JS

🔜 Тизер: что нам нужно было ускорить

🟡 На странице тикетов 20 миллионов посещений каждый день и огромное количество контента, который должен быть отформатирован определённым образом

🟡 В некоторые тикеты складывают очень много информации: объёмные описания, комментарии, таблицы и картинки. Прогружаются такие странички очень долго

🟡 В каждом тикете есть блок с комментариями и связями, данные для которых нужно прогружать с бэкенда отдельно

➡️ В статье на Хабре я рассказываю, как мы решили все эти (и не только эти) проблемы, но итоговый Velocity Index почти не изменился. Текст будет интересен фронтендерам, техлидам и всем, кто хочет повысить скорость загрузки своих интерфейсов.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🔥 Как мы сделали игру весом в 5 Мб и внедрили её в приложение Яндекс Маркета

Привет! Меня зовут Миша Лардугин, я руководитель разработки веб-интерфейсов рекламы в Яндекс Маркете. Обычно моя команда делает баннеры и спецпроекты на лендингах. Но у нас давно зрела одна идея: мы хотели разработать по-настоящему живую рекламу.

🚚 Так родилась концепция мини-игры внутри приложения: пользователь едет на фирменном красном фургончике Маркета и уклоняется от других машин, а за высокие результаты получает призы. В карточках я показал, какие этапы прошла наша идея и как выглядит готовый продукт.

⏮ А здесь хочу рассказать, как мы выбирали игровой движок

Обычного Canvas для нашей идеи не хватило бы. Нужен был движок, который возьмёт на себя физику, коллизии и управление сценами.

При этом было и строгое ограничение: мы хотели уложить код и ассеты в 5–6 Мб. Потому что игра должна загружаться мгновенно: пользователь заходит в приложение, видит баннер, тапает и сразу играет.

Было три кандидата:

🟡 Unity. Это мощный инструмент, который мы хорошо знаем. Но для веба он не подходит. Unity имеет свой WebGL-плеер, который сам по себе весит около 20 Мб! К тому же его интеграция в интерфейс Маркета вряд ли была бы бесшовной. Кстати, Unreal Engine мы отмели ещё раньше: он вообще не про веб

🟡 PixiJS. Это отличный быстрый рендерер, но он представляет собой конструктор из разряда «собери сам». Нет ни встроенной физики, ни системы коллизий, ни менеджера сцен. Пришлось бы писать всё это с нуля или подключать сторонние библиотеки

🟡 Phaser. Этот вариант стал разумным компромиссом между мощностью и лёгкостью. У него из коробки есть система сцен, готовая физика, универсальный API для обработки input’а и отличная документация

На Phaser мы собрали и MVP, и сам релиз.

➡️ В блоге Городских сервисов можно узнать подробности. Например, про оптимизацию игры и наши планы на будущие проекты.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

🔥 Обзор: лучшие техники атак на веб-приложения в 2025 году

Всем привет, на связи Денис Макрушин, директор по продуктам безопасной разработки в SourceCraft, Yandex Infrastructure. Сегодня я хочу погрузиться в Top 10 web hacking techniques — это мой любимый рейтинг. Его составляют в сообществе исследователей инфобеза по инициативе компании Portswigger, чтобы собрать самые важные материалы про инновации в области поиска и эксплуатации уязвимостей.

🕵️‍♀️ В карточках выше я рассказываю про интересное из списка номинаций. Познакомиться с другими техниками можно тут.

Понимание этих трендов полезно не только специалистам по информационной безопасности, но и разработчикам интерфейсов.

➡️ А вот полезные ссылки:

🟡 Работа с пользовательскими анализаторами в CI
🟡 Список промпт-инъекций
🟡 Запросы через CONNECT в HTTP/2
🟡 Возвращение Zip Slip
🟡 Фундаментальная уязвимость HTTP/1.1

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…

⏮ От финансов к фронтенду

На связи Лена Макарова. Сейчас я тимлид команды разработки в Yandex Infrastructure и делаю фронтенд для YDB — СУБД Яндекса (хотя пять лет назад я не могла об этом даже мечтать 🫢). Хочу поделиться историей, как это произошло.

🈶 Начало пути

После университета я несколько лет работала финансовым аналитиком. Сначала было интересно, но постепенно атмосфера в коллективе становилась всё более тяжёлой. Я выгорела, а каждое утро дорога на работу была для меня настоящим испытанием.

Я нашла отдушину в спорте и даже получила диплом фитнес-тренера. У меня появились первые клиенты, но я по-прежнему ходила на основную работу, а по вечерам и выходным тренировала.

🈶 Первая встреча с кодом

Всё изменилось, когда один из моих клиентов-разработчиков показал мне свой пет-проект — сайт, где тренер разрабатывает программу, а клиент отслеживает свой прогресс. Он рассказал мне про архитектуру сервиса, показал, как вживую пишет код. Я тогда ничего не понимала, но мне стало очень интересно.

Я начала решать задачи из учебника по программированию в каждую свободную от работы минуту, потом пошла на курсы по веб-разработке на Python. Там я поняла, что больше всего меня привлекает фронтенд, и стала самостоятельно изучать дополнительные материалы на эту тему. В итоге на курсах я вошла в тройку лучших студентов.

🈶 Карьерный поворот

У меня родился сын, и я твёрдо решила, что после декрета не вернусь в старую компанию. Хотелось начать что-то новое. Когда сыну исполнился год, я начала искать работу в IT.

О Яндексe сначала даже не думала: казалось, что это недостижимо. Но знакомая, которая уже работала здесь, убедила меня попробовать. Я успешно прошла все этапы собеседования, и мне предложили позицию стажёра, на что я согласилась без лишних раздумий.

🈶 Старт в Яндексе

Первый рабочий день поразил меня атмосферой: все очень уважительно и дружелюбно со мной общались. После моего предыдущего опыта это было невероятно. А через три месяца, когда закончилась стажировка, мне сделали офер и я стала джуном в команде разработки интерфейсов инфраструктурных сервисов, в числе которых была и YDB.

Мне доверили проект, из которого уходил разработчик. И он здорово меня подготовил: за полгода научил осознавать архитектуру и понимать, как всё хорошо построить, чтобы потом это было легко поддерживать. Когда я осталась на проекте одна и стала его вести, уже спокойно во всём ориентировалась. И параллельно меня позвали техлидить в YDB.

🈶 Харды или софты?

В какой-то момент мой руководитель спросил меня, по какому пути я хочу развиваться. Я поняла, что для роста по хард-скилам начинаю поздновато. А я хочу делать что-то лучше всех, поэтому решила взять другим: опытом, умением решать комплексные сложные задачи и навыком договариваться.

🈶 Баланс между кодом и тимлидством

Полгода назад я получила жёлтую шапку. Так мы называем золотую корону рядом с логином яндексоида, которая означает, что человек — руководитель. Пока у меня небольшая команда, всего 4 человека, и управленческой работы не так много. Поэтому я сделала себе два дня без встреч, когда всё время занимаюсь только кодом. Я понимаю, что когда-то будет движение вверх и людей в моей команде станет больше, а времени на код — меньше. Но сейчас я просто наслаждаюсь жизнью.

Как и все фронтендеры, я люблю сразу видеть результат своей работы. Но больше всего меня драйвят задачи, в которых поначалу вообще ничего не понятно.

В момент, когда из полнейшего хаоса начинает вырисовываться нечто структурированное, — в этот момент я чувствую себя живой. И понимаю, что в чём-то я молодец, раз смогла усмирить эту стихию, раз заставила её работать и приносить результаты.

➡️ В блоге о работе в Яндексе вы можете прочитать полную версию моего рассказа со всеми деталями и размышлениями.

Подписывайтесь:
💬 @Yandex4Frontend

Читать полностью…