Цена ошибок гидрации

В React есть много ухищрений, чтобы серверный кусок страницы обновился на клиенте почти незаметно. В большинстве случаев этого хватает, но я почти уверен, что если вы работали с React, то в консоли видели Hydration failed because the initial UI does not match what was rendered on the server.

Иван Акулов разбирает случаи, когда такие ошибки влияют ещё и на метрику Largest Contentful Paint из Core Web Vitals. И для некоторых заказчиков это прям важная метрика.

И в конце статьи делится лайфхаком, как этот самый LCP немного читерски улучшить.

https://3perf.com/blog/hydration-mismatch/

Эффект одометра

Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я бы сначала всё же попробовал подключить JavaScript.

Прити Сэм применяет современные CSS-функции attr(), sibling-index() и тригонометрические функции, чтобы собрать эффект перелистывания символов как у одометра или счётчика воды в квартире.

https://blog.master.dev/the-odometer-effect-in-css/

View Transitions Toolkit

Брамус делится своей коллекцией утилит, чтобы можно было более удобно работать с View Transition API. Напомню, это такая апишка в браузере, которая позволяет делать анимации для элементов между двумя «страницами». В кавычках, потому что не обязательно буквально переходить между страницами, чтобы запустить анимацию.

Как и многие проекты деврелов Chrome, репозиторий покрылся пылью примерно на следующую неделю после Google I/O. Но справедливости ради, там и апишка не то чтобы невероятно активно развивается, чтобы что-то сильно менять.

https://chrome.dev/view-transitions-toolkit/

llms.txt: выдаём желаемое за действительное

Я уже много где видел эти советы: добавь на сайт llms.txt, будут агенты туда ходить, токены экономить, а ещё в выдаче поисковой попадёшь в AI-сниппет — все туда сейчас хотят.

Стоян Стефанов взял и проверил, открывает кто-нибудь вообще этот файл или нет. Спойлер: там меньше процента визитов.

Честно говоря, я не понимаю, почему LLM вдруг должна сходить в какой-то отдельный файл, а не на сам сайт, если только явно её не попросить. Это ж как отдельные версии для слабовидящих — гарантировать полное соответствие контенту обычной версии сайта никто не может.

https://www.phpied.com/llms-txt-agent-optimization-wishful-thinking/

Слабые и средние смартфоны из реального мира

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

Гарри Робертс составил свой список. Интересно, что оба варианта в рекомендациях — Samsung. Заняли они прочно эту нишу.

У меня, кстати, когда-то был старенький девайс с Opera Mini, чтобы тестировать специальную версию сайта для слабых девайсов. Прикольный опыт. Подключить его к DevTools там было банально нечем, был только кабель для зарядки.

https://csswizardry.com/2026/07/low-and-mid-tier-mobile-for-the-real-world-2026/

Стилизация тултипов

Начал писать заметку про инициативу от Microsoft Edge дать разработчикам возможность стилизовать нативные тултипы (это которые показываются по ховеру на элемент с атрибутом title). Отвлёкся на работу — а Лёша уже написал подробнейший разбор.

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

https://t.me/alexnozer_dev/413

replacements.fyi

Есть такое сообщество — e18e (Ecosystem Performance). Они уже довольно долго помогают вебу становиться производительнее, заменяя не самые эффективные решения в популярных библиотеках на более эффективные.

Нашёл у себя в сохранённых ссылках сайт, который помогает найти альтернативы разным npm-пакетам. Например, вместо библиотеки dotenv предложит воспользоваться нативным process.loadEnvFile. А для semver предложит более производительный пакет verkit.

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

https://replacements.fyi/

А есть уже проект с таким же именем?

Брамус хотел опубликовать npm-пакет, но внезапно обнаружил, что пакет с таким именем уже есть. Поэтому собрал cli-утилиту, которая проверяет доступность имени в NPM и Netlify. При желании можно добавить свой чекер для любого другого сервиса.

https://www.bram.us/2026/10/08/caniname-cli-tool-to-check-project-name-availability/

Полифил для CSS Typed OM

Стоит, наверное, начать с того, а что же такое этот ваш Typed OM. Когда вы задаёте какое-то значение CSS-свойства через JS, то по сути пишете строку, которую браузер парсит и натягивает на элемент. Причём можно задать кривую строку — и ничего не упадёт.

el.style.opacity = "wtf"; — валидная инструкция, к сожалению, хоть сам CSS получится не валидный.

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

Так вот, CSS Typed OM — это возможность работать со свойствами элементов через attributeStyleMap, где каждое поле типизировано. А ещё при попытке запихнуть в неверный тип кривое значение вы буквально получаете ошибку, которую можно перехватить. На сдачу получаем ускорение на 30% для кода, который вертит-крутит CSS-стили в вашем приложении.

В общем, я фанат этой штуки уже лет 8 в теории (на практике не применял пока что осознанно). И она даже скоро станет кроссбраузерной (Firefox вот-вот, уже-уже). А пока можно воспользоваться полифилом. Хорошим полифилом, который учитывает тесты веб-платформы.

https://www.bram.us/2026/10/13/introducing-css-typed-om-a-complete-and-wpt-tested-polyfill-for-css-typed-om/

Определяем перекрытие элементов при помощи CSS

До чего техника дошла. Ахмад Шадид делится способом понять, два элемента в CSS налазят друг на друга или нет. Ну и подстроить под это визуальную часть.

Работает на сочетании Anchor Positioning API, Scroll Timeline API и Container Style Queries.

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

https://ishadeed.com/article/css-detect-overlap/

Редизайн example.com

Во-первых, я впервые за много лет зашёл на example.com. Он часто в статьях и гайдах фигурирует, а в старых CHM-учебниках для веб-мастеров чуть ли не в каждой статье был.

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

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

https://www.debugbear.com/blog/example-dot-com-redesign-history

Явная вложенность

Если вы уже начали пользовать нативным CSS Nesting, то Рома Комаров рекомендует всегда явно писать & во вложенном селекторе. Потому что когда-нибудь вы напишете вот такие стили.

button {
  background: #111;

  :hover,
  :focus-visible {
    background: #444;
  }
}

А они почему-то не применяются.

Узнал, что есть целое правило в stylelint — selector-nested-pattern. Чтобы машина не давала ошибиться в таких случаях ну совсем.

https://blog.kizu.dev/explicit-nesting/