Yet Another Frontend Night: глубже про AI в реальных проектах Яндекса

Бизнес-группа Поисковых сервисов и ИИ Яндекса приглашает на Yet Another Frontend Night 29 ноября. Главная тема — практическая интеграция AI в фронтенд. Команда Яндекса поделится своими инсайтами, какие нейросетевые инструменты помогают им в работе, как меняется процесс разработки и какие вызовы возникают при решении реальных задач.

Доклады топовых экспертов Яндекса:

— Иван Артамонов, руководитель группы конверсионных инструментов в Яндекс Бизнесе, расскажет про преимущества AI-ассистентов
— Павел Осташкин, старший разработчик интерфейсов в международной Рекламе, объяснит, как он со своей командой написал и встроил MCP в рабочие процессы и что из этого получилось
— Валерий Баранов, AI-оптимист и тимлид группы технологий фронтенда в Яндекс 360, разберет инструменты управления контекстом во фронтенде и покажет, как MCP-серверы снижают галлюцинации и делают дизайн-систему AI-ready
— Александр Иванков, руководитель группы развития инфраструктуры поисковых интерфейсов в Яндекс Поиске, поделится опытом разработки AI-помощника и подходами промпт-инжиниринга под разные роли
— Андрей Дегтярев, разработчик интерфейсов в Яндекс Браузере, рассмотрит в докладе агентские сценарии по частям, чтобы наглядно показать, какие реальные задачи пользователя они решают

Где и когда: 29 ноября, 15:00, Москва, офис Яндекса на Льва Толстого
Yet Another Frontend Night пройдет только в offline-формате, трансляция не планируется.
Подробности и регистрация

#фишка дня

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

Но вот обратное направление не работает. Скопировал диапазон из Sheets — а в браузере всё рассыпалось в текст, будто ничего и не было.

Иногда это мешает: есть форма с табличкой на сайте, есть данные в Google Sheets, и единственное желание — просто вставить их туда, не перепечатывая по ячейке. Чтобы привычный Ctrl+V вёл себя так же естественно, как в Excel.

Для таких случаев можно сделать маленькую, но удобную вещь — ловить событие вставки и парсить табличные данные из буфера, распределяя их по нужным полям:

document.addEventListener("paste", function (e) {
  const text = e.clipboardData.getData("text");
  const rows = text.trim().split(/\r?\n/).map(r => r.split("\t"));

  const inputs = [...document.querySelectorAll("input")]; 
  let index = 0;

  for (const row of rows) {
    for (const cell of row) {
      if (inputs[index]) {
        inputs[index].value = cell;
        index++;
      }
    }
  }

  e.preventDefault();
});

Так можно взять диапазон в Google Sheets, нажать Ctrl+V в браузере — и данные разложатся по ячейкам формы, словно это штатная функция.

Я пример забыл, а вы и молчите: https://codepen.io/alinaki/pen/KwzvEeX

#js #table

#новость дня

Если нужно превратить HTML в картинку, приходится пользоваться утилитами разной степени кривизны — ведь нужно имитировать DOM. Cтабильного решения не было вообще (наверное, только Playwright и скриншот).

Теперь начинает появляться что-то вменяемое.

WICG выкатили идею под названием HTML-in-Canvas: холст учат рисовать обычные HTML-элементы: https://github.com/WICG/html-in-canvas

Прямо так, как браузер их и так рисует в DOM — со стилями, размерами, текстом, вложенностями. Только вместо того, чтобы показывать их на странице, он превращает элемент в картинку внутри <canvas>.

На самом деле, выглядит весьма проклято, вот пример с иллюстрации:

<canvas id="canvas" width="638" height="318" layoutsubtree="true">
  <div id="drawElement" style="width: 550px;">
    Hello from <a href="https://github.com/WICG/html-in-canvas">html-in-canvas</a>!
    <br>I'm multi-line, <b>formatted</b>,
    rotated text with emoji (&#128512;), RTL text
    <span dir=rtl>من فارسی صحبت میکنم</span>,
    vertical text,
    <p style="writing-mode: vertical-rl;">
      这是垂直文本
    </p>
    an inline image (<img width="150" src="wolf.jpg">), and
    <svg width="50" height="50">
      <circle cx="25" cy="25" r="20" fill="green" />
      <text x="25" y="30" font-size="15" text-anchor="middle" fill="#fff">
        SVG
      </text>
    </svg>!
  </div>
</canvas>

Почему нельзя просто API для DOM? Потому что там целая плеяда сесурити-специалистов выступает против.

Работает это пока только в Chrome Canary от 138 и выше, и включать надо отдельный флаг. Плюс есть ограничения: рендерятся только те элементы, которые лежат внутри самого канваса, и некоторые штуки браузер сознательно блокирует — типа чужих iframe или странных SVG. Но в целом — оно работает.

Флаг, кстати, такой: --enable-blink-features=CanvasDrawElement.

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

#html #canvas

#дайджест недели

Понедельник
Supercookie — демонстрация того, как обычная favicon может работать как устойчивый идентификатор. Старый трюк, но теперь есть аккуратный POC, который узнаёт вас по иконке.
https://t.iss.one/htmlshit/3909

Четверг
Как вставлять табличные данные из Google Sheets прямо в форму на сайте: ловим paste, парсим табы, раскладываем по input’ам.
https://t.iss.one/htmlshit/3911

Пятница
HTML-in-Canvas: эксперимент, который позволяет <canvas> рисовать настоящий HTML со стилями и вложенностями. Пока сыро, но выглядит как первый нормальный путь к HTML-в-картинку без костылей.
https://t.iss.one/htmlshit/3912

Короткая неделя вышла, котаны.

#codepen дня

Jhey стал очень редко радовать нас новыми дропами — готовится к изданию своего курса по эффектной вёрстке, потому кодом делиться — увы — почти перестал.

Но надо отдать должное, когда идея не полностью исходит от него — он всё ещё продолжает демонстрировать уровень!

Итак, помните мы с вами пытались делать эффект Ambilight? Как оказалось, ту же идею можно применить чтобы подсветить края карточек!

Немного JS для передачи координат курсора в CSS, немного SVG-фильтров для размытия продублированного контента — и вы неотразимы!

Собственно, пример: https://codepen.io/jh3y/pen/WbwZaNa

Не забудьте потыкать настройки, чтобы понять реализацию.

#svg #css #ambilight

#инструмент дня

Кому адекватной современной виртуализации списков?

Как-то так повелось, что задача отрисовки десятков, и даже сотен тысяч строк или ячеек на экране решается... волнами. Появляется решение, принимается всеми, а потом — буквально забрасывается. И вот мы годами ждём обновления того же react-window просто чтобы получить возможность рендерить строки разной высоты из коробки. А react-window сам по себе был и является рекомендованной заменой react-virtualized.

В других фреймворках и ванильных средах ситуация ещё веселее.

При этом разработчики, например, мобильных приложений на тех же Flutter и SwiftUI в принципе лишены этой проблемы, просто потому что им надо заботиться о рендере элементов самостоятельно, заранее объявляя, что тут должен быть скролл. Насильная виртуализация, так сказать.

Если вы были застигнуты врасплох моими утверждениями и не понимаете вообще, о чём я, то вкратце поясню: чтобы дать возможность человеку поскроллить тысячи и сотни тысяч объектов на экране, совсем не обязательно отрисовывать их все разом. Можно отрисовать штук 10-20 строк, заполнив экран, и просто переиспользовать эти элементы раз за разом. Виртуальные списки, буквально.

Итак, для чего я всё это пишу? А вот: вашему вниманию предъявляется универсальная библиотека виртуализации списков virtua.

GitHub: https://github.com/inokawa/virtua

Умеет в динамические высоты строк из коробки! Умеет в бесконечный скролл. Умеет занимать всю высоту окна. Умеет в RSC.

Ну и не ограничивается одним только React: Vue, Solid и Svelte тоже поддерживаются.

Отличное современное решение.

#scroll #virtual #бородач

#инструмент дня

Зачем писать !(a && !b && c >= 10 && d !== e), если можно !a || b || c < 10 || d === e?

Ответ на эти и другие вопросы прост: «Потому что не подумал».

Но думать — сложно. И не всегда нужно. Поэтому в IDE от JetBrains встроен преобразователь логических вырадений по законам де Моргана.

А тем, кто предпочитает быть свободным, приходится искать иные решения.

Иногда — даже думать.

И тут есть вариант, откуда не ждали: правило для ESLint!

ESLint Plugin De Morgan: https://github.com/azat-io/eslint-plugin-de-morgan

Запросто преобразует ваши const value = !(a || b !== c) в const value = !a && b === c.

В плагине два правила:

- no-negated-conjunction
- no-negated-disjunction

Все правила имеют автофикс. У плагина нет зависимостей. Поддерживает как современный, так и легаси формат ESLint конфигов.

Твиттер автора с анонсом: https://x.com/azat_io/status/1888874193007132762

Пользуемся, котаны!

#boolean #eslint #logic #бородач

#дайджест недели

Понедельник
Jhey показал эффект с подсветкой краёв карточек по движению мыши — координаты курсора, CSS и SVG-фильтры. Аккуратная демка, чистая реализация.
https://t.iss.one/htmlshit/3914

Вторник
virtua — библиотека для виртуализации списков с динамическими размерами, бесконечным скроллом и поддержкой популярных фреймворков. Быстрая и универсальная.
https://t.iss.one/htmlshit/3916

Среда
ESLint Plugin De Morgan переписывает отрицания по законам де Моргана. Два правила, автофикс, без зависимостей — мелочь, но делает логику чище.
https://t.iss.one/htmlshit/3917

Пятница
Хороший буст к скорости тестов: заменить ts-jest на @swc/jest. SWC работает быстрее за счёт native-кода и отсутствия проверки типов — проекты ощутимо ускоряются.
https://t.iss.one/htmlshit/3919

#статья дня

Google в очередной раз доказал всем, что дизайн — это не про них.

Если вы, как и я, понимаете, что на этой иллюстрации не так — обнимемся.

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

— Почему при обычном центрировании слоёв и фигур иконки всё равно могут выглядеть «смещёнными» и невыровненными?
— Почему важно не просто «на глаз» выравнивать иконки, а знать, где у фигуры настоящий центр — её геометрический «центр тяжести» (барицентр)?
— Почему автоматизация поиска центра фигуры и её выравнивание — более надёжный путь, чем ручная корректировка, особенно при большом количестве иконок в интерфейсе?

Всё там :) Очень рекомендую.

Кстати, раз уж снова подняли эту тему, маленький лайфхак для дизайнеров: размойте иконку и сразу станет понятно, сбалансирована она, или нет. Вот как тут.

#design #alignment #icons

#поделись дня

Я в этом году просрал все сроки поиска интересных адвент-календарей по коду и разным статьям.

Поэтому, делитесь, котаны. Кто что читает в этом декабре?

Я вот только календарь от HTMHell сходу вспомнил: https://htmhell.dev/adventcalendar/, одна статья в день.

Ну и, пожалуй, ещё https://adventjs.dev/en, возможно, я даже в него ещё запрыгну и буду с вами делиться.

Показывайте ваши!

#advent

#молния дня


В React обнаружили критическую уязвимость в механизме серверных компонентов (React Server Components). Из-за ошибки в том, как React разбирает входящие данные, сервер может попытаться выполнить вредоносный объект как часть своей логики. Достаточно специально подготовленного HTTP-запроса — и код на сервере окажется под контролем не того, кто его писал.

Это не проблема конкретного фреймворка. Под удар попадает любой проект, где используются RSC: Next.js, Remix (с RSC-вставками), любые кастомные серверные интеграции, экспериментальные рантаймы, кастомные бандлы — неважно. Если у вас есть React Server Components, риск реальный.

Уязвимы версии пакетов react-server-dom-* — 19.0.0, 19.1.0, 19.1.1, 19.2.0.
Официальное описание: https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components

Next.js упоминают чаще всего просто потому, что он массово использует RSC «из коробки», и поэтому количество уязвимых приложений там особенно велико. Но это не его эксклюзивная проблема — это дыра именно в React.

Патчи уже вышли: React закрыл её в версиях 19.0.1, 19.1.2, 19.2.1.

Если у вас Next.js, то актуальные безопасные релизы: 15.0.5+ и 16.0.7
(детали: https://nextjs.org/blog/CVE-2025-66478)

Суть в том, что если ваш сервер хоть как-то отдаёт RSC-ответы и принимает RSC-запросы, обновиться нужно обязательно. Если серверных компонентов нет — пофигу.

Кстати, вот и технический разбор как проблемы, так и патча: https://www.ox.security/blog/rce-in-react-server-components/

#react #rsc #next

#ссылка дня

Недавно в нашем чате был жаркий спор на тему доступности. Мол, нормально делай — нормально будет и вообще морочить себе голову не надо, таких людей единицы.

Кстати, в X прямо сейчас очередной напоминающий жабогадюкинг срач как раз на эту тему.

Оно как бы и да и нет. Например, давайте представим себе на минуту средних дизайнеров сайтов и приложений.

Чаще всего они сидят в условиях, близких к идеальным. На стуле, перед большим монитором. И рисуют, не знаю, приложение для оплаты парковки. Он или она молоды и здоровы, мышка твёрдо лежит в руке. Идиллия.

Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил?

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

И так с любым проектом. Думать надо.

Собственно, вот и ссылка на сегодня: https://a11ymyths.com/ru/

Мифы о доступности на разных языках. Всем читать, котаны.

#a11y #бородач

#игра дня

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

Проект родился как университетская учебная разработка: автор сделал GameShell для студентов, которым нужно было быстро освоить базовые Linux-команды. Идея сработала — вместо скучных лекций студенты начали проходить практические миссии, используя реальные инструменты командной строки.

GameShell полностью open-source, работает на Linux, macOS, есть образ Docker. Установка минимальна: скачал скрипт, запустил — и получил тренировочное окружение с сохранением прогресса.

Каждая задача — маленькая текстовая «комната» из старых приключенческих игр, только с реальными командами.

Очень круто, однозначно рекомендация.

#bash #game #console

#заметка дня

Cloudflare стал так часто падать, блокируя доступ ко всему и вся, что хочешь-не хочешь приходится извлекать из этого хоть какую-то полезную информацию.

Ну, помимо того, что Rust не настолько и крут в руках посвеместно проникших вайб-кодеров, если верить соцсетям.

Но нас тут заинтересовало, зачем Cloudflare добивает стандартную страницу ошибки комментариями?

<!-- a padding to disable MSIE and Chrome friendly error page -->

...не, ну ок, вроде оно само говорит, зачем. Но почему?

Дело в том, что если страница ошибки короче определённого минимального размера (обычно 512 байт), браузер скрывает её и показывает свою стандартную ошибку вида «This page cannot be displayed».

Очевидно, это не шибко-то и удобно: скрывает реальную причину проблемы, мешает автотестам. Собственно, в Internet Explorer была настройка скрытия дружелюбных страниц ошибок, а вот в Chrome так никогда и не сделали.

Да-да, динозаврик — это вот оно, оттуда. Очень весело, очень бесполезно.

Вот даже проблему в трекере подняли лет 15 назад: https://issues.chromium.org/issues/40361889, без подвижек.

На самом деле, добитие комментариями, конечно, не решение Cloudflare. Это работа сервера nginx: https://hg.nginx.org/nginx/file/release-1.6.0/src/http/ngx_http_special_response.c

Одобряем такое поведение, или динозаврик получше будет, котаны?

#nginx #cloudflare #error

#такое дня

Отлично провёл вечер в компании шестигранных ключей. Засор чистил-с.

#фишка дня

Не совсем про разработку, но достаточно интересно.

Итак, понадобилось мне вчера отправить фотографии костюмов из одного сериала знакомой портной. Зашёл я на стриминг HBO Max, нашёл нужные кадры, снял скриншот...

А он чёрный. Элементы UI и... чёрный экран.

— DRM, — подумал Штирлиц.

И таки да, DRM. Защита авторских прав содержимого.

Виральность? Не, не слышали.

Технология, по которой работает DRM на стримингах, называется EME: Encrypted Media Extensions. Разработана совместно Netflix, Google и Microsoft.

Есть хорошее описание её работы: https://hsivonen.fi/eme/

Encrypted Media Extensions (EME) — это JavaScript API для <video> и <audio>, предназначенное для работы с DRM-защищенным контентом. Для расшифровки требуется Content Decryption Module (CDM), который доверен правообладателями и скрывает определенные данные от пользователя. Браузер при этом считается ненадежным.

CDM может быть встроен в браузер, загружен отдельно или реализован на уровне ОС и железа. Он управляет ключами для расшифровки контента. В EME есть учебная система Clear Key, но она не предназначена для коммерческого использования.

CDM может работать по-разному: просто расшифровывать данные, расшифровывать и декодировать видео в браузере, передавать декодированные кадры напрямую ОС или работать с GPU, скрывая пиксели даже от системы. EME определяет только интерфейс API, оставляя детали DRM разработчикам.

Так вот, к фишке дня. В Firefox EME не реализованы, скриншоты делаются без проблем. А в Chrome — работают на GPU, иначе ваши процессоры сошли бы с ума.

А это значит, что достаточно (по крайней мере пока) отключить аппаратное ускорение графики. И, вуаля, скриншоты снова можно делать!

Очевидно, с развитием железа и это скоро станет невозможно. Останется только аналоговая брешь (крутое название для экранки, не правда ли?).

#drm #eme #api #бородач

#ссылка дня

CSS Wrapped 2025 от разработчиков Google Chrome!

Это отличный способ наверстать всё, что произошло в CSS за год, даже если ты вообще ничего не читал и не следил. Google собрали самое важное в одну компактную, приятную страницу.

Пластилиновую!

В этом году в CSS сильно прокачали готовые элементы: диалоги стали умнее, поповеры — гибче, а <select> наконец можно нормально стилизовать. Появились и новые мелочи вроде скролл-кнопок и скролл-маркеров, которые позволяют делать аккуратные нативные галереи без лишнего JS.

Но не всё — в Safari :(

Состояние скролла теперь можно ловить прямо в CSS, появились функции для подсчёта соседей в DOM, а анимации и переходы стали куда более контролируемыми и предсказуемыми.

Отдельная тема — сахар. Это всё, что делает код чище: новые функции вроде if() и shape(), более понятные размеры, формы и условия.

Всё очень приятно оформлено, заходите хотя бы просто посмотреть: https://chrome.dev/css-wrapped-2025/

#css #google #chrome

#дайджест недели, а точнее, двух

Понедельник

Разбор оптического выравнивания и причин, почему иконки выглядят смещёнными даже при точном центрировании. Про барицентр фигур, автоматизацию и простой способ быстро проверить баланс иконки.
https://t.iss.one/htmlshit/3922

Среда

Обсуждение адвент-календарей по разработке и статьям.
https://t.iss.one/htmlshit/3923

Четверг

Критическая уязвимость в React Server Components, позволяющая выполнить код на сервере через специально сформированный запрос. Затрагивает все проекты с RSC, патчи уже выпущены.
https://t.iss.one/htmlshit/3925


Воскресенье

Текст о доступности в реальных условиях использования, а не в идеальной среде. Разбор распространённых мифов и причин, почему a11y касается всех.
https://t.iss.one/htmlshit/3927

Понедельник

GameShell — обучающая консольная игра для изучения Unix-команд в формате текстового квеста. Подходит для практики базовой работы с терминалом.
https://t.iss.one/htmlshit/3928

Вторник

Почему серверы специально увеличивают размер страниц ошибок. Коротко о поведении браузеров, стандартных заглушках и решении, которое использует nginx и Cloudflare.
https://t.iss.one/htmlshit/3930

Среда

Как DRM в стриминговых сервисах блокирует скриншоты через EME и GPU. Почему в Chrome кадры чёрные и при чём тут аппаратное ускорение.
https://t.iss.one/htmlshit/3932

Пятница

CSS Wrapped 2025 — обзор ключевых изменений в CSS за год: нативные компоненты, скролл, анимации и новые функции языка.
https://t.iss.one/htmlshit/3933