Yandex for Frontend

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

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

✨ Принципы дизайн-системы под AI-генерацию, новый класс автопроверок кода и CSS вместо JS для всё более сложных интерфейсов. Всё это и многое другое — в новом дайджесте Yandex for Frontend Подписывайтесь на рассылку, чтобы получать наш дайджест по почте 💛 📖 Почитать 🟡 State of AI 2026: AI-код уже 54% 🟡 Экономика фейковых GitHub-звёзд 🟡 AI помог ускорить компилятор Angular до 20 раз 🟡 Новый HTTP-метод QUERY для чтения с телом 🟡 CSS вместо JS для всё более сложных интерфейсов 🟡 Claude-анимации пересобрали покадрово на SVG и GSAP 🟡 Bun переписали на Rust за 6755 коммитов 🟡 ​​Принципы дизайн-системы под AI-генерацию 🟡 Fallow: новый класс автопроверок кода 🟡 Читаемый код может скрывать квадратичную сложность 🟡 DOOM в терминале через Node.js FFI 📺 Посмотреть 🟡 Figma Code Connect связывает дизайн и код 🟡 AI меняет рутину тимлида 🦾 Инструменты 🟡 TypeScript 7.0 RC — Go-компилятор в 10 раз быстрее 🟡 Rolldown 1.0 — быстрая замена Rollup для Vite 8 и не только 🟡 Aube — быстрый пакетный менеджер с автоустановкой зависимостей 🟡 Deno Desktop — самодостаточное приложение из веб-проекта 🟡 MDN MCP — актуальная веб-документация для агентов 🟡 Линтер лишних React-эффектов — производное состояние, цепочки setState, события через эффект и другие 🟡 JS Crossword — странности JavaScript как кроссворд Подписывайтесь: 💬 @Yandex4Frontend

🟡 Фронтенд + CTF + Мона Лиза = ? На связи Никита Дубко, Lead Product в Яндексе. И я один из тех, кто каждый год делает Frontend CTF в рамках конференции «Я 💛 Фронтенд». Хочу немного пробежаться по нашей истории и рассказать, как и зачем мы создаём соревнование для тех, кто любит пробираться сквозь загадки, секреты и спрятанные подсказки в браузерной игре. 🈶 Что такое CTF Это Capture the Flag (захват флага). Соревнование ещё в 1993 году придумали для конференции DEFCON, чтобы проверить знания участников в области кибербезопасности. В игре нужно найти флаги: либо украсть у соперников, либо отыскать в исходниках от организаторов. Наш Frontend CTF — второго типа. Есть веб-сайт в виде игры, а в различных его местах (или на сторонних ресурсах) спрятаны строки вида {flag_something}, где something — искомый флаг. Для решения большинства наших задач игрокам нужны знания фронтенда, сетей и инструментов разработки. 🈶 С чего всё начиналось Нам хотелось делать классный онлайн: что-нибудь запоминающееся и выделяющееся. Так в 2021 году небольшая команда из трёх человек за две недели собрала полноценную CTF-игру с различными по сложности заданиями. В итоге у нас получилось 17 флагов, 8 уровней, 384 прохождения игры и один уютный чатик. В 2022 году мы переписали движок и добавили номинации, в 2023-м — обзавелись собственной игровой вселенной и определились с визуальным стилем, в 2024-м — отправили героев в космос. А в этом году мы снова обновили сценарий и движок, чтобы ещё сильнее мотивировать участников исследовать мир. 🈶 Как придумываем задания Мы собираем идеи заранее: в течение года находим странное и интересное, например особенности браузера, новые фичи CSS, необычные демки с CodePen и так далее. Потом для каждого задания пишем пояснение, как с ним работать. До игры мы прорешиваем задачи самостоятельно и силами сторонних участников. В итоге у нас получается список заданий, которые отранжированы по сложности. Дальше остаётся только встроить их в игру без конфликтов с основным сюжетом. ➡️ В статье на Хабре я рассказал больше подробностей о том, как мы развиваем игру (и при чём тут Мона Лиза). А ещё поделился примерами заданий прошлых CTF. Подписывайтесь: 💬 @Yandex4Frontend

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

⏮ Как запустить AI в браузере Когда привычные решения не подходят, а встроить искусственный интеллект в пользовательский интерфейс нужно уже сегодня — на помощь приходят локальные модели. Алиса Пюльзю, фронтенд-разработчик РКС, в своём докладе на конференции «Я 💛 Фронтенд 2026» рассказала, как с помощью WebGPU запускать AI-агентов прямо в браузере без увеличения нагрузки на сервер. В докладе: 🟡 Библиотеки, которые поддерживают WebGPU 🟡 Альтернативные способы запуска моделей в браузере 🟡 Реальные примеры использования локальных моделей и перспективы их применения в различных областях, в том числе в космической отрасли ➡️ Смотрите полное выступление на ютубе и в VK Видео. Подписывайтесь: 💬 @Yandex4Frontend

⏮ Как происходит синхронизация компонентов в Figma и коде Меня зовут Серафим Четверухин, я ведущий дизайнер продукта в Yandex Cloud. На Я.Субботнике по разработке интерфейсов я рассказал про Figma Code Connect — фичу, о которой почти никто не знает, но она реально меняет работу с дизайн-системами. 🕵️‍♀️ Читайте, как она устроена, в карточках выше ➡️ Смотрите полное видео на ютубе или в VK Видео. Там я поделился и другими подробностями настройки Code Connect, объяснил, как работает функция Figma Instance и что делать, когда у одного компонента два разных API. А также поделился примерами кода и сравнил вёрстку с MCP и без него. 🔻 Презентацию ищите под этим постом. 📺 А доклады остальных спикеров можно найти в плейлистах на ютубе или в VK Видео. Подписывайтесь: 💬 @Yandex4Frontend

🧠 Как мы локализуем приложение без ручного труда Привет! Это снова Ирина Туманова, разработчик интерфейсов в Яндекс Go. Недавно я рассказывала, как мы всего за две недели сократили количество ключей без задач на перевод с 3300 до 170. А теперь хочу поделиться другими интересными деталями нашей автоматизации 🙃 🈶 Как именно работает скрипт доставки ключей Процесс самостоятельно запускается в момент, когда Pull Request вливается в основную ветку:

intl-push:
   title: Intl Push
   triggers:
     - on: commit
       into: trunk
   max-active: 1
   flow: intl-push

Скрипт проходит по изменениям в PR, находит добавленные ключи и формирует из них список. Затем для каждого воркспейса запускает команду, которая отправляет все ключи из кода в TMS, и туда же попадают новые. Свежие ключи улетают через API в систему управления переводами. Но отправка ключей — полдела, нужно ещё забирать готовые переводы обратно в код. Поэтому ровно в 05:00 по Москве запускается cron-job:

intl-pull:
   title: Intl Pull
   flow: intl-pull
   max-active: 1
   schedule:
     timezone: MSK
     cron: 0 5 * * *

Скрипт выкачивает переводы для всех 27 языков, раскладывает данные по файлам локализации в репозитории и сам создаёт Pull Request с изменениями. И, если тесты проходят, отправляет его на автоапрув. 🧽 А ещё мы добавили в CI дополнительную проверку на дубликаты, чтобы нельзя было случайно слить два PR с одинаковыми ключами. ⏮ В рамках проекта мы сделали дашборд, который помогает нам узнавать статус перевода на конкретный язык. В нём видно всё: синие столбцы означают ключи, у которых задача есть, а красные, что её нет. Если графа какого-то языка внезапно покраснела на 30%, мы сразу понимаем, что кто-то влил крупную фичу, а переводы застряли. Поэтому можем среагировать до того, как это заметит пользователь. ❗️ У нас есть правило: фичу открываем на конкретную страну только после появления переводов на нужный язык. Английский и русский обязательны всегда. Если фича нужна только в России, она открывается только для российских парков. Если нужна на зарубежные рынки, то ждём, пока переводы доедут. Дашборд позволяет отслеживать этот момент в реальном времени. 🈶 Какую проблему подсветила автоматизация Когда вы удаляете React-компонент — вы устраняете вызов <Message>. ID исчезает из кодовой базы, но в TMS он остаётся. Мы тратили ресурсы на хранение того, что пользователь никогда не увидит. И на момент аудита в TMS накопилось около 4–5 тысяч таких ключей-призраков. Но у нас уже давно есть скрипт, который сравнивает слепок ключей в коде со слепком в TMS, поэтому их можно постепенно удалять. 🈶 Как мы сэкономили рабочее время В среднем разработчики раньше заводили 2,5 задачи на перевод в день, тратили около 2 минут на каждую и 15 минут на обновление файлов. Это 20 минут ручной работы на команду ежедневно — достаточно, чтобы выбить из рабочего потока. Теперь всё это делает CI. 💡 И мы можем гарантировать: если код в мастере сегодня, перевод будет на проде через N дней. Менеджеры планируют маркетинговые запуски и релизы в новых странах с точностью до дня. ➡️ Читайте все подробности в моей статье на Хабре. Там я рассказала, как мы жили до появления автоматизации и как устраняли накопившийся лингвистический долг, чтобы насладиться её результатами. А также поделилась метриками и задачами на будущее. Подписывайтесь: 💬 @Yandex4Frontend

✨ Системный взгляд на асинхронность в React, архитектурные принципы группировки кода и DOOM на 3D-<div> — об этом и не только в новом дайджесте Yandex for Frontend Подписывайтесь на рассылку, чтобы получать наш дайджест по почте 🔅 📆 Мероприятия 🟡 23 мая — Vertis JS: Summer Edition в Москве. Митап про AI-агентов и дизайн от Яндекс Вертикалей и Авто.ру 📖 Почитать 🟡 Петиция против AI в ядре Node.js 🟡 Системный взгляд на асинхронность в React 🟡 Веб-компоненты заменили React на MDN 🟡 Архитектурные принципы группировки кода по функциональности или технологиям в Node.js и не только 🟡 Причины раздувания JavaScript-зависимостей 🟡 Перенос из WASM в TypeScript ускорил парсер в 3 раза 🟡 Выбор библиотеки логирования для JavaScript в 2026 году 🟡 Intl форматирует даты и валюты 🟡 Кастомизация <select> до сложных элементов интерфейса 🟡 DOOM собрали из 3D-<div> на CSS 📺 Посмотреть 🟡 Авторский разбор CTF-задач с «Я 💛 Фронтенд 2026» 🟡 Один SDK для чат-ботов в Slack, Teams и Discord 🤖 Инструменты 🟡 Vite+ — единый CLI для полного процесса веб-разработки 🟡 Grafana 13 — новые панели, адаптивные дашборды и AI-помощник 🟡 Boneyard генерирует скелетоны загрузки из реального UI 🟡 Mockdown рисует ASCII-прототипы интерфейсов 🟡 Can’t Maintain — игра про именование и хороший API Подписывайтесь: 💬 @Yandex4Frontend

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

🤩 Как оптимизировать видеоплеер под новую реальность 🤝 Привет, это Рамиль Габдрахманов. Я руковожу разработкой видеоплееров в Yandex Infrastructure. Нашу платформу используют Кинопоиск, Маркет, Музыка и другие сервисы, в том числе вне Яндекса. Сегодня я хочу рассказать, как мы делаем ленты коротких видео. С приходом короткого формата видео UX просмотра контента сильно изменился. Раньше пользователи выбирали фильм в галерее и смотрели его в отдельном экране. Современную систему можно представить скорее как ряд карточек: слева и справа (или сверху и снизу) от выбранного видео они уходят в бесконечность. Если бы мы просто по старинке подключали наш плеер на SDK к каждой карточке и воспроизводили видео, это работало бы плохо. Во-первых, появилась бы существенная конкуренция за ресурсы. Во-вторых, нам было бы тяжело найти общую точку знаний, ведь все компоненты работали бы независимо. Это потенциально усложняет поддержку. А ещё оптимизации и улучшения в таком формате сложнее переиспользовать. ⏮ Поэтому пришлось многое переосмыслить: 🟡 Нам нужна информация о списке элементов, которые пользователь видит на экране непосредственно сейчас и от которых ожидает воспроизведения 🟡 Необходима некоторая эпсилон-окрестность элементов — не вся лента, но какая-то её часть, которая готовится к воспроизведению 🟡 Важно хранить данные о видео, которые пользователь только-только посмотрел ➡️ За этими простыми на первый взгляд задачами стоит много разработки и исследований. Читайте о них в статье на Хабре ✨ Подписывайтесь: 💬 @Yandex4Frontend

🐾 Пет-проекты наших подписчиков: библиотека React-хуков Во многих командах разработчикам приходится из раза в раз писать одни и те же хуки. Работа со скроллом, мышью, событиями браузера, таймерами... А ведь это время можно потратить на что-нибудь более полезное. ⏮ Чтобы решить проблему, разработчики из коллектива siberiacancode создали Reactuse. Это большая и удобная инфраструктура готовых хуков, которые можно свободно брать и использовать в собственных проектах. ✨ Внутри Reactuse: 🈶 Строгая типизация 🈶 Продвинутая архитектура API 🈶 Большое покрытие тестами 🈶 Стабильное поведение в разных сценариях ➡️ Ссылка на гитхаб ➡️ Сайт Reactuse с интерактивными примерами ➡️ Доклад Дмитрия о Reactuse на MoscowJS 69 Подписывайтесь: 💬 @Yandex4Frontend

🌕 Приходя, гасите свет ⏮ Роман Ахмадуллин, лид фронтенда в Дроме, рассказал о директиве @media. Она позволяет интерфейсу адаптироваться под предпочтения конкретного пользователя: настроить тёмную тему, прозрачность, контрастность, включить или отключить анимации. ✨ Больше о @media в Доке А на конференции «Я 💛 Фронтенд» Роман поделился и другими фичами, с которыми можно строить по-настоящему адаптивные интерфейсы. Этот подход отходит от классических вьюпортов и брейк-пойнтов: ключевую роль в нём играет контекст и окружение компонента. ➡️ Смотрите полный доклад на ютубе и в VK Видео. Подписывайтесь: 💬 @Yandex4Frontend