Yandex for Frontend
Канал для фронтендеров от Яндекса. Рассказываем о мероприятиях для фронтендеров и любителей красивых и функциональных интерфейсов, делимся экспертизой. Чат: https://t.me/yalovefrontend Каналы Яндекса про разработку: https://t.me/addlist/Hrq31w2p1vUyOGZi
Show more📈 Analytical overview of Telegram channel Yandex for Frontend
Channel Yandex for Frontend (@yandex4frontend) in the Russian language segment is an active participant. Currently, the community unites 10 886 subscribers, ranking 10 977 in the Technologies & Applications category and 58 697 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 10 886 subscribers.
According to the latest data from 09 September, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -32 over the last 30 days and by -1 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 29.95%. Within the first 24 hours after publication, content typically collects 13.83% reactions from the total number of subscribers.
- Post reach: On average, each post receives 3 260 views. Within the first day, a publication typically gains 1 505 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 11.
- Thematic interests: Content is focused on key topics such as интерфейс, yandex, typescript, css, фронтендеров.
📝 Description and content policy
The author describes the resource as a platform for expressing subjective opinions:
“Канал для фронтендеров от Яндекса. Рассказываем о мероприятиях для фронтендеров и любителей красивых и функциональных интерфейсов, делимся экспертизой.
Чат: https://t.me/yalovefrontend
Каналы Яндекса про разработку: https://t.me/addlist/Hrq31w2p1vU...”
Thanks to the high frequency of updates (latest data received on 10 September, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.
Data loading in progress...
| Date | Subscriber Growth | Mentions | Channels | |
| 10 September | +2 | |||
| 09 September | 0 | |||
| 08 September | +2 | |||
| 07 September | 0 | |||
| 06 September | +2 | |||
| 05 September | 0 | |||
| 04 September | 0 | |||
| 03 September | 0 | |||
| 02 September | 0 | |||
| 01 September | +3 |
| 2 | 🔥 Новости программы deep tech night
На конференции deep tech night вас ждут два формата:
• Hard — технические доклады о сложных и масштабных задачах. Формат подойдёт тем, кто хочет вдумчиво разобраться в технической стороне темы.
• Experiment — лайтнинги и интерактивные кейсы об экспериментах с AI-агентами, новых подходах и продуктовых находках. Этот формат для всех, кому интересно пробовать новое и следить за трендами.
🕵️♀️ В карточках рассказываем о новых спикерах и их темах. Смотрите полную программу и регистрируйтесь на deep tech night, которая пройдёт 5 сентября. Присоединиться к конференции онлайн можно по предварительной регистрации.
➡️ Зарегистрироваться
Подписывайтесь:
💬 @Yandex4Frontend | 3 550 |
| 3 | 📕 Я перепоручил ведение базы знаний 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 | 3 831 |
| 4 | 🔥 Делимся первыми спикерами на deep tech night
В карточках рассказываем, кто и на какие темы будет выступать на конференции 5 сентября. А чтобы получить доступ к эфиру, задать вопросы экспертам в прямом эфире и первыми посмотреть запись после события, зарегистрируйтесь на сайте.
➡️ Подробности о докладах и форма регистрации
Подписывайтесь:
💬 @Yandex4Frontend | 4 166 |
| 5 | 🟡 Как мы пустили сторонний код в продукт с 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 | 4 833 |
| 6 | 🔆 Авторские каналы наших фронтендеров
В Яндексе мы не только пишем код, но и много размышляем о технологиях, управлении, 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 | 4 011 |
| 7 | 🤖 Как создать AI-агента прямо в браузере
В новом выпуске подкаста #ГриненкоПро принял участие наш коллега Андрей Мелихов, ведущий фронтенд-разработчик из Yandex Cloud. Он рассказал, как создал и развивает браузерный AI-агент в DataLens. Кстати, Андрей ведёт авторский канал в телеграме — melikhov.dev.
Какие темы вы найдёте в полном выпуске:
🟡 Почему готовых фреймворков не хватает
🟡 В чём проблемы разных моделей и инференсов
🟡 Как работать с безопасностью и корпоративными ограничениями
🟡 Заменит ли GenBI аналитиков
🟡 Почему AI ускоряет разработчиков в 3–5 раз, но задач становится только больше
➡️ И это ещё не всё. Коснулись, например, и использования нейронок в быту. Послушать подкаст можно здесь.
Подписывайтесь:
💬 @Yandex4Frontend | 4 860 |
| 8 | 🚀 Погружаемся в технологии на deep tech night
5 сентября пройдёт deep tech night — масштабная онлайн-конференция Яндекса о технологических вызовах, с которыми IT-индустрия сталкивается в эпоху AI: от изменений в разработке до новых требований к архитектуре и инфраструктуре.
Это событие для бэкендеров, фронтендеров, тимлидов, аналитиков, продактов и всех, кто работает в IT-индустрии, внедряет AI в процессы, проектирует сложные системы и ищет новые решения.
⏮ В программе доклады экспертов из Яндекса и международных IT-компаний:
🟡 Мо Гавдат, Former Chief Business Officer Google X
🟡 Алексей Гусаков, CTO Поисковых сервисов и ИИ
🟡 Сергей Мельник, руководитель сервиса Автономного транспорта и роботов
И другие спикеры (некоторые из них пока что секретные — расскажем о них в ближайшее время 🤫).
➡️ Зарегистрироваться
Подписывайтесь:
💬 @Yandex4Frontend | 4 704 |
| 9 | ✨ Принципы дизайн-системы под 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 | 4 331 |
| 10 | 🟡 Фронтенд + 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 | 4 444 |
| 11 | 🤨 А точно ли я всё делаю правильно?
Работу разработчика сложно оценить по результату здесь и сейчас: она часто не приводит к «видимому эффекту», и из-за этого легко начать сомневаться в себе. Как понять, что вы правда хорошо работаете? И почему даже крутые специалисты не всегда верят в свои силы?
🕵️♀️ Наши коллеги-аналитики в подкасте «Доверительный интервал» поделились советами, которые помогут вам обрести уверенность. Разобрали основные в карточках
➡️ А если хотите узнать подробности, смотрите подкаст на ютубе и в VK Видео или слушайте в Яндекс Музыке.
Подписывайтесь:
💬 @Yandex4Frontend | 4 491 |
| 12 | ⏮ Как запустить AI в браузере
Когда привычные решения не подходят, а встроить искусственный интеллект в пользовательский интерфейс нужно уже сегодня — на помощь приходят локальные модели.
Алиса Пюльзю, фронтенд-разработчик РКС, в своём докладе на конференции «Я 💛 Фронтенд 2026» рассказала, как с помощью WebGPU запускать AI-агентов прямо в браузере без увеличения нагрузки на сервер.
В докладе:
🟡 Библиотеки, которые поддерживают WebGPU
🟡 Альтернативные способы запуска моделей в браузере
🟡 Реальные примеры использования локальных моделей и перспективы их применения в различных областях, в том числе в космической отрасли
➡️ Смотрите полное выступление на ютубе и в VK Видео.
Подписывайтесь:
💬 @Yandex4Frontend | 4 926 |
| 13 | Серафим_Четвертухин_Синхронизация_компонентов_в_Figma_и_коде.pdf | 4 294 |
| 14 | ⏮ Как происходит синхронизация компонентов в Figma и коде
Меня зовут Серафим Четверухин, я ведущий дизайнер продукта в Yandex Cloud. На Я.Субботнике по разработке интерфейсов я рассказал про Figma Code Connect — фичу, о которой почти никто не знает, но она реально меняет работу с дизайн-системами.
🕵️♀️ Читайте, как она устроена, в карточках выше
➡️ Смотрите полное видео на ютубе или в VK Видео. Там я поделился и другими подробностями настройки Code Connect, объяснил, как работает функция Figma Instance и что делать, когда у одного компонента два разных API. А также поделился примерами кода и сравнил вёрстку с MCP и без него.
🔻 Презентацию ищите под этим постом.
📺 А доклады остальных спикеров можно найти в плейлистах на ютубе или в VK Видео.
Подписывайтесь:
💬 @Yandex4Frontend | 4 292 |
| 15 | 🧠 Как мы локализуем приложение без ручного труда
Привет! Это снова Ирина Туманова, разработчик интерфейсов в Яндекс 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 | 4 282 |
| 16 | ✨ Системный взгляд на асинхронность в 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 |
| 17 | 🐾 Наши любимые петы: карта воспоминаний
Впечатления остаются с нами на всю жизнь: восторг от красоты горного перевала, усталость после длинного велосипедного трека и вкус кофе на заправке в незнакомом городе, где вы остановились на ночлег. А вот точные названия интересных мест, даты и имена людей, которые были рядом, ускользают.
🕵️♀️ Артём Гуслов, веб-разработчик в Яндекс Пэй, создал Map of Moments — пет-проект, который помогает сохранить в памяти всю важную информацию из путешествий. Это дневник впечатлений, где можно ставить точки на карте и добавлять к ним фото, теги и описание. Или объединить их в хронологическую цепочку, чтобы заново прожить тот самый маршрут.
➡️ Ссылка на карту
➡️ Ссылка на гитхаб
Подписывайтесь:
💬 @Yandex4Frontend | 3 954 |
| 18 | 🤩 Как оптимизировать видеоплеер под новую реальность
🤝 Привет, это Рамиль Габдрахманов. Я руковожу разработкой видеоплееров в Yandex Infrastructure. Нашу платформу используют Кинопоиск, Маркет, Музыка и другие сервисы, в том числе вне Яндекса. Сегодня я хочу рассказать, как мы делаем ленты коротких видео.
С приходом короткого формата видео UX просмотра контента сильно изменился. Раньше пользователи выбирали фильм в галерее и смотрели его в отдельном экране. Современную систему можно представить скорее как ряд карточек: слева и справа (или сверху и снизу) от выбранного видео они уходят в бесконечность.
Если бы мы просто по старинке подключали наш плеер на SDK к каждой карточке и воспроизводили видео, это работало бы плохо. Во-первых, появилась бы существенная конкуренция за ресурсы. Во-вторых, нам было бы тяжело найти общую точку знаний, ведь все компоненты работали бы независимо. Это потенциально усложняет поддержку. А ещё оптимизации и улучшения в таком формате сложнее переиспользовать.
⏮ Поэтому пришлось многое переосмыслить:
🟡 Нам нужна информация о списке элементов, которые пользователь видит на экране непосредственно сейчас и от которых ожидает воспроизведения
🟡 Необходима некоторая эпсилон-окрестность элементов — не вся лента, но какая-то её часть, которая готовится к воспроизведению
🟡 Важно хранить данные о видео, которые пользователь только-только посмотрел
➡️ За этими простыми на первый взгляд задачами стоит много разработки и исследований. Читайте о них в статье на Хабре ✨
Подписывайтесь:
💬 @Yandex4Frontend | 3 764 |
| 19 | 🐾 Пет-проекты наших подписчиков: библиотека React-хуков
Во многих командах разработчикам приходится из раза в раз писать одни и те же хуки. Работа со скроллом, мышью, событиями браузера, таймерами... А ведь это время можно потратить на что-нибудь более полезное.
⏮ Чтобы решить проблему, разработчики из коллектива siberiacancode создали Reactuse. Это большая и удобная инфраструктура готовых хуков, которые можно свободно брать и использовать в собственных проектах.
✨ Внутри Reactuse:
🈶 Строгая типизация
🈶 Продвинутая архитектура API
🈶 Большое покрытие тестами
🈶 Стабильное поведение в разных сценариях
➡️ Ссылка на гитхаб
➡️ Сайт Reactuse с интерактивными примерами
➡️ Доклад Дмитрия о Reactuse на MoscowJS 69
Подписывайтесь:
💬 @Yandex4Frontend | 4 702 |
| 20 | 🌕 Приходя, гасите свет
⏮ Роман Ахмадуллин, лид фронтенда в Дроме, рассказал о директиве @media. Она позволяет интерфейсу адаптироваться под предпочтения конкретного пользователя: настроить тёмную тему, прозрачность, контрастность, включить или отключить анимации.
✨ Больше о @media в Доке
А на конференции «Я 💛 Фронтенд» Роман поделился и другими фичами, с которыми можно строить по-настоящему адаптивные интерфейсы. Этот подход отходит от классических вьюпортов и брейк-пойнтов: ключевую роль в нём играет контекст и окружение компонента.
➡️ Смотрите полный доклад на ютубе и в VK Видео.
Подписывайтесь:
💬 @Yandex4Frontend | 4 168 |
