Опыт использования CSS Container Queries командой Netflix

На web.dev периодически появляются «истории успеха», когда большие компании делятся тем, как они использовали современные технологии (часто — доступные только в Chrome) и им это сильно помогло. И вот, чем поделилась команда Netflix (очень популярный стриминговый сервис с фильмами и сериалами, если вдруг не знали).

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

2. Проще работать с медиавыражениями. Раньше нужно было опираться одновременно и на размеры вьюпорта, и на какие-то классы или стили, устанавливаемые через JavaScript. Теперь достаточно смотреть только на размеры контейнера.

3. В принципе стало нужно писать меньше кода. JavaScript почти стал не нужен для выставления размеров элементам. А чем меньше кода, тем проще избавиться от багов.

4. Лучший Developer Experience. Судя по цитатам, некоторые разработчики считают, что так и должен был работать CSS изначально.

5. Ко всему этому можно привязать полифил, если надо работать в браузерах, где Container Queries нет.

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

https://web.dev/case-studies/netflix-cq

Как звучит загрузка страницы

Пока многие решают задачки в Advent of Code, Advent of TypeScript или просто открывают классические адвент-календари с подарочками, я дополнительно читаю Web Performance Calendar, который в декабре каждого года тоже раз в день выкладывает по одной интересной статье.

Брайан Луис Рамирес в рамках одной из таких статей поделился забавным инструментом, который озвучивает загрузку страницы по HAR-файлу. Вам нужно открыть DevTools, во вкладке Network поставить тротлинг сети (чтобы звук был подольше), загрузить нужную вам страницу, экспортировать HAR-файл и загрузить его в утилиту Soundtrace.

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

https://calendar.perfplanet.com/2024/how-does-web-performance-sound/

Переходы страниц как в Internet Explorer

Когда я читал доклад про View Transitions API, то шутил, что современные браузеры наконец-то научились делать то, что Internet Explorer умел ещё в версии 4.0. Можно было написать что-то вроде <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=3)" />, и страница появлялась через 3 секунды со спецэффектами жалюзи. Олды помнят.

А Брамус взял и собрал библиотеку, которая реально обрабатывает такие метатеги и при помощи View Transitions API воссоздаёт те самые милые сердцу спецэффекты. Пока игрался с демкой, олдскулы порвало.

https://page-transitions.style/

Про local-first подход, движки синхронизации и архитектуру приложений

Видео выходного дня. Кирилл Мокевнин и Андрей Ситник хорошо обсудили то, как современные возможности браузеров позволяют делать полноценные приложения без нужды в запросах к бекенду на каждое нажатие кнопки. И хоть local-first подход не применить вообще для любого приложения, но знать и уметь работать с «умной» синхронизацией — полезный навык.

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

https://youtu.be/-57r5AARRgY

Собственный инструмент замеров скорости сайта на основе Puppeteer

Генри Прайс показывает, как можно при помощи Puppeteer собирать нужные именно вам метрики с сайта.

В статье есть примеры, как искусственно замедлить сеть, эмулировать устройства, собрать Core Web Vitals и выгрузить это всё в табличку Excel. Но на самом деле, так как вы по сути запускаете почти полноценный браузер в CI, то делать на странице можно почти что угодно и замерять можно почти какие угодно синтетические метрики. Важно только не забывать, что это синтетические замеры, а не RUM.

https://calendar.perfplanet.com/2024/build-your-own-site-speed-testing-tool-with-puppeteer/

А вот и доклады с Субботника https://www.youtube.com/playlist?list=PLKaafC45L_STvTWPrSF_m5hV9LMj0uFi0

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

Going Offline

У Джереми Кейта в 2018 году вышла хорошая книга по тому, как сделать offline first приложение. Он объясняет возможности сервис-воркеров, как работать с запросами, какие стратегии существуют и как это связано с PWA. И хоть прошло уже 6 лет, книга всё ещё хороша, чтобы научиться основам работы с сетью через сервис-воркеры, рекомендую.

А сейчас она ещё и бесплатная. В PDF, ePub и Mobi.

https://goingoffline.adactio.com/

Новогодний выпуск №455. Вадим, Алексей, Юля, Полина, Никита, Андрей кормят белок, играют колмимейби, красят плитку, ждут группу, спрашивают шляпу и атакуют титанов.

— Видео на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

Чиним год в футере

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

А тут вот поделились готовым решением всех проблем. Есть как npm-пакет, так и API, которое позволит вам больше не думать о проблеме.

Надеюсь, вы понимаете, что это шутка. Но сайт прекрасен.

https://getfullyear.com/

Запуск TypeScript на Node.js

Начиная с Node.js v23.6.0 можно запускать TypeScript-файлы в Node.js без всяких флагов. Это всё ещё экспериментальная фича, но вот, как она работает:
- Нода выпиливает TS-фичи из кода и просто выполняет, что получилось. Убирает типы, то есть.
- Если в коде есть enum, namespace и прочие улучшалки из мира TS, которых на самом деле нет в JS, то магия не случится, код сломается.
- Расширение файла .mts — это модульный JS, .cts — CommonJS, .tsx — не поддерживается.
- Просто .ts файлы обрабатываются как .js, то есть модульность берётся из package.json.

Таким образом, рано или поздно для серверных штук мы вполне можем прийти к сценарию, когда для разработки активно используется TypeScript со всеми проверками, строгими и нестрогими, чтобы писать более-менее качественный код, а запускаются на выполнение в проде те же самые файлы, без транспиляции. Для всяких CI/CD — обалденная экономия. А то сейчас надо сначала установить TypeScript или достать его из кэша, запустить на транспиляцию, и только потом можно что-то запускать. Для мелких скриптов — расточительнейшая трата времени и железа.

Больше подробностей про фичу — у доктора Акселя Раушмайера.

https://2ality.com/2025/01/nodejs-strip-type.html

CPU-хак для CSS

Рубрика «Ненормальное программирование».

Задача: сделать так, чтобы значение CSS-переменной самостоятельно увеличивалось от собственного значения по какому-то сигналу. Что-то вроде --my-var: calc(var(--my-var) + 1);. В императивных языках же есть i++, подавайте-ка его сюда и в декларативные языки, будьте любезны.

Разумеется, прямо так сделать нельзя, иначе бы получались циклические зависимости, из-за которых невозможно отрисовать кадр. CSS-движок в том числе проверит, чтобы у вас не было обращения переменной к самой себе через другие переменные. Так в спеке написано.

Но... Джейн Ори делится интересным хаком, который позволяет всё-таки обойти это ограничение. Для хака нужно знать три вещи:
1. Анимация имеет высокий приоритет в каскаде. Свойство, которое меняется анимацией, никакой специфичностью не перебить.
2. У анимаций есть кэш. Чтобы не считать значения свойств внутри анимаций по кругу, они жёстко кэшируются, даже если внутри идёт обращение к var(--my-var), которая где-то снаружи меняется.
3. Кэш анимации сбрасывается, если изменить сами свойства, касающиеся настроек анимации, вроде animation-play-state или animation-duration.

А дальше нужно хитрым образом переключать «кадры» так, чтобы кэш то сбрасывался, то включался. Коротко объяснить не смогу, смотрите демки в статье, с ними становится понятнее. Работает вся магия по ховеру, потому что для запуска заклинания без JavaScript всё-таки нужно из мира HTML прокинуть каким-то образом сигнал для старта в CSS.

Почему это называется CPU-хаком? Потому что по сути у вас появляется простой вычислительный юнит в CSS, настоящий счётчик, который можно менять под свои нужды. Так Джейн Ори делится демками, где она на чистом CSS подбирает позицию курсора во вьюпорте (причём бинарным поиском, чтобы быстрее было), запускает игру «Жизнь» Конвея, а потом всё это комбинирует в полноценный Арканоид.

Зачем это уметь? Ведь на JS объективно понятнее, производительнее и правильнее такое делать.
- Во-первых, я пока разбирался в демках, сломал мозг, но немного прозрел. Мне просто нравится разбираться в таких нюансах. Знание — сила.
- Во-вторых, знание про особенности кэширования значений в CSS может спасти вам часы дебага хитроумных ошибок в проде. У меня буквально такой кейс был в одном из проектов, где надо было сбросить кэш, а до этого в принципе понять, что ошибка в кэше.
- В-третьих, скажите потом ещё, что CSS — не язык программирования.

https://dev.to/janeori/expert-css-the-cpu-hack-4ddj

Рефакторинг на максималках

В 2022 году Саша Беспоясов так сильно не поместился в 40-минутный слот доклада на конференции со всем материалом, который ему хотелось рассказать, что собрал сборник материалов в виде книги.

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

https://refactor-like-a-superhero.vercel.app/ru

You don't know HTML: fetchpriority

Алексей Назаренко у себя в канале понятным языком объясняет, как работает атрибут fetchpriority на уровне браузера. И вообще, имхо, у Лёши полезный канал про веб, рекомендую.

https://news.1rj.ru/str/alexnozer_dev/183

Перевод aria-denoscription

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

Увы, оказалось, что только Firefox переводит, и то не везде. Chrome и Safari не переводят совсем. Google Translate, к слову, тоже не справляется.

Поэтому более правильный способ перевода доступных описаний — через aria-describedby, который связывается с реальным элементом в DOM, а там перевод вполне себе работает.

https://adrianroselli.com/2025/01/aria-denoscription-does-not-translate.html

Псевдокласс :empty

Крис Фердинанди напоминает о том, что в CSS довольно давно работает псевдокласс :empty. Всё, что он делает, это ищет элементы, внутри которых буквально ничего нет. Акцентирую на этом внимание: нет ничего, совсем ничего, даже пробела — это важно.

Применять такой селектор удобно для тех случаев, когда с сервера могут прийти любые данные, в том числе пустые. Обычно принято в JavaScript писать логику, проверять данные, в зависимости от этого перестраивать компонент. Со списками — делать фильтрацию. Но если по какой-то причине в код компонента залезть нельзя, а в стили можно, то вот вам и решение: .card:empty { display: none; }

https://gomakethings.com/the-empty-pseudo-class-in-css/

6 CSS-сниппетов, которые должен знать каждый фронтендер в 2025 году

Ох, как же я люблю такие заголовки в статьях. Год ещё только начался, а я уже кому-то что-то должен. Но, тем не менее, Адам Аргайл делится полезными «карапульками», знание которых вам может помочь:
- Анимация через linear().
- Типизированные кастомные свойства.
- View Transitions для переходов между страницами.
- Анимации появления и скрытия диалогов и поповеров.
- Анимация скрытия и раскрытия details.
- Анимированный градиентный текст.

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

https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025

Браузер Lightpanda

Происходит интересное. Думаю, не секрет, что запустить безголовый Chrome — дорого. То есть если вам нужно просто распарсить страничку, то проще дёрнуть её через cURL, если это статика. Но если это SPA, которых сейчас в интернетах много, то тогда уже надо брать какой-нибудь Playwright или Puppeteer.

И вот команда Lightpanda решила для задач скраппинга страниц (для тех же LLM, например) сделать свой быстрый браузер, который в принципе ничего не рендерит. Естественно, по их бенчмаркам вверху описания проекта браузер работает в 10 раз быстрее и эффективнее по памяти. И внизу страницы написано, что скорее всего большинство сайтов у вас сломается, потому что браузер пока в глубокой бете. Но судя по активности коммитов в репозитории и тому, что этот браузер нужен самой команде для их бизнеса, есть все шансы, что в каком-то удобоваривом виде браузер скоро выйдет из беты. Жду.

https://github.com/lightpanda-io/browser

Шаблонные литералы в TypeScript

У доктора Акселя Раушмайера вышел очень хороший гайд по тому, как можно полезно применять шаблонные литералы в TS. Это когда вы пишете что-то вроде type TailwindColor = `${BaseColor}-${Variant}`;, а внутри уточняете допустимые типы-значения.

Видел, как при помощи таких «умных» типов делали супер-мощные проверки контрактов с бекендом, прокачивали типы внешних библиотек и в целом сильно улучшали DX (автокомплит — одно удовольствие).

https://2ality.com/2025/01/template-literal-types.html

create-react-app всё

Я уже пару лет прошу фронтендеров не пользоваться CRA, потому что он устарел, не поддерживается командой разработки и не планировался быть совместимым с React 19. А теперь и сама команда CRA добавила в ридми проекта плашку «Ухадити! Тут никого нет! Используйте фреймворки, не используйте create-react-app!»

https://github.com/facebook/create-react-app/pull/17003

Опция --erasableSyntaxOnly в TypeScript

Вышли релизноуты беты TypeScript 5.8. Там есть разное полезное, но меня зацепила одна конкретная опция. В новом релизе хотят добавить аргумент --erasableSyntaxOnly, который попросит TS ругаться на конструкции языка, несовместимые с Node.js.

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

В общем, Node.js и TypeScript идут навстречу друг другу, это здорово.

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-5-8-beta/