Оптимизируем PWA под различные режимы отображения

PWA (прогрессивные веб-приложения) можно запускать в разных режимах. Например, в режиме fullscreen приложение занимает весь экран, а браузерный UI прячется. А в режиме minimal-ui браузерная обвязка компактная, без излишков.

Деклан Чидлоу показывает, как внутри CSS или JS определять, в каком режиме отображения работает веб-приложение, и объясняет, для чего это может быть полезно.

https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/

Почему браузеры троттлят JS-таймеры?

Нолан Лоусон делится задачей: нужно после того, как выполнены все микротаски, но ещё не начали выполняться таски в event loop, запустить какие-то полезные фоновые задачи. Думаю, на собеседованиях часто такие вопросы можно услышать.

Есть древний способ вызвать setTimeout(0), но на самом деле это задержка в 4ms, сделанная против абьюза от нехороших разработчиков, ломавших страницы в вебе.

Нолан в статье сравнивает разные способы выполнить изначальную задачу (setImmediate, MessageChannel.postMessage, window.postMessage и scheduler.postTask) по их кроссбраузерности и особенностям. Спойлер: одного идеального способа нет.

https://nolanlawson.com/2025/08/31/why-do-browsers-throttle-javascript-timers/

Основы выравнивания в CSS

В CSS есть десятки способов выровнять один элемент внутри другого. Не просто так же до сих пор на собеседованиях просят выровнять элемент по центру.

Темани Афиф делится подробнейшим гайдом с демками, как же оно работает:
- Выравнивание в гридах и флексах.
- Как выравнивание влияет на размеры элементов.
- Отличие логических значений от физических.
- Как работает автоматическое выравнивание.
- Блочные и инлайновые элементы.

Обычно на этом сайте Темани собирает короткие полезные советы, но, видимо, в какой-то момент материалов про выравнивание стало так много, что появился новый раздел Explore.

https://css-tip.com/explore/alignment/

Браузеру Google Chrome — 17 лет

Мы в свежем выпуске «Веб-стандартов» поразгоняли немножко на тему этой статьи, но всё равно хочется поделиться ссылкой, после открытия которой сводит олдскулы.

Эдди Османи вспоминает, что нового привнёс Chrome в веб за 17 лет своего существования. Только вдумайтесь, браузеру уже 17 лет. А я помню, как он только появился и начинал отвоёвывать потихоньку рынок у Opera и Firefox.

А ещё вкладки вместо окон, пожирание оперативки, уязвимость Spectre, девтулзы, принуждение к HTTPS, Core Web Vitals, динозаврик при падении странички, PWA и многое другое.

P.S. Читайте осторожно, очень много восхваления Chrome в статье, не забывайте о других браузерах.

https://addyosmani.com/blog/chrome-17th/

Эффект жидкого стекла в браузере: рефракция на CSS и SVG. Крис Фейхо экспериментирует с SVG-фильтрами, чтобы добиться противоречивого, но очень привлекательного эффекта из будущих версий iOS и macOS. #css #svg

https://kube.io/blog/liquid-glass-css-svg/

Основы Anchor Positioning в CSS

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

Я искренне верю, что Anchor Positioning изменит стандарты работы с тултипами, подсказками и выносными элементами. И позволит делать без JS то, что сейчас без JS делать почти невозможно. Но спека не самая простая, а вот такие гайды как раз помогают разобраться на примерах.

https://ishadeed.com/article/anchor-positioning/

Вспоминаем Image Map

Сейчас олды содрогнутся. Забытая техника древних.

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

<img src="map.png"
     alt="My awesome map"
     usemap="#map">
<map id="map" name="map">
  <area shape="rect"
        coords="176,14,323,58"
        href="belarus.html"
        alt="Belarus">
  <area shape="poly"
        coords="260,96,209,249,130,138"
        href="belgium.html"
        alt="Belgium">
</map>

Ссылки-картинки с правильным альтернативным текстом, разбитые на области.

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

Энди Кларк собрал альтернативу на SVG и JS, которая лишена минусов оригинальных Image Map. Есть и адаптив, и кликабельность, и стилизация по ховеру.

https://css-tricks.com/revisiting-image-maps/

Полный курс по Svelte 5

Как-то я проморгал, что после Svelte 3 успело выйти уже два мажора со значимыми изменениями. Если вдруг вы тоже пропустили, то Svelte — это фреймворк со своим компилятором, который целится в супер-легковесный клиентский код. Довольно популярный фреймворк, к слову.

Матия из Хорватии (автор сам так подписывается, я не подшучиваю) собрал очень подробный курс, который позволяет изучить Svelte 5 с нуля. 28 глав, 3 часа видео, очень много демок. Бесплатно, но если вам будет полезно, можно задонатить на Patreon.

https://joyofcode.xyz/learn-svelte

Брендирование типов в TypeScript

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

Федерико Жерарди показывает, как можно для таких задач использовать брендирование типов.

type BrandedType<T> = T & { readonly __brand: unique symbol };

В статье есть хороший пример, как таким образом пометить строку, что она прошла через обработку важной функцией.

Я сам с брендированием знаком давно, но обычно добавляю строковых поля для разделения типов. Про то, что можно использовать unique symbol, как-то не задумывался, интересный подход.

https://azraelsec.sh/2025/09/06/Typescript-Branding/

Электрическая рамка

Принёс вам демку, в которой интересно поразбираться.

Балинт Ференци собрал на CodePen классный пример рамки, по которой как будто идёт электрический ток. Как это работает:

- При помощи фильтра feTurbulence создаётся три слоя с шумом. Это буквально статические картинки, которые выглядят как цветной дым.
- Каждому слою задана бесконечная анимация, которая двигает слой либо влево, либо вверх. Интересно, что слоёв, которые движутся вверх, сразу два.
- При помощи feComposite и feBlend эти слои смешивают в режиме color-dodge. Получается общий источник пикселей в виде анимированного шума.
- И затем применяется feDisplacementMap, который склеивает картинку, поверх которой будет применяться фильтр, и сгенерированный шум в тонкие электрические линии.
- В CSS это подключается просто, filter: url(#turbulent-displace).

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

Сохранил себе в закладки на случай, если захочется что-нибудь эдакое технологическое поделать в интерфейсах.

https://codepen.io/BalintFerenczy/pen/KwdoyEN

Что мы можем делать при помощи corner-shape

Помню, как сильно радовался массовому внедрению в браузеры свойства border-radius. Не нужно больше рисовать скруглённые уголки при помощи таблиц, кайф!

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

Дэниэл Шварц показывает, как мы сможем визуально создавать всевозможные формы блоков с помощью нового свойства corner-shape, которое пока что работает только в Chrome:
- впуклые уголки (инвертированный круг);
- скошенные уголки;
- вырезанные уголки;
- сквирклы (красивые более естественные скругления).

С демками.

https://css-tricks.com/what-can-we-actually-do-with-corner-shape/

Секретное свойство для нативного «жидкого стекла» у Apple

Скандалы, интриги, расследования.

Аластер Кут периодически изучает ченжлог репозитория WebKit на GitHub, потому что ему важно знать, что умеют веб-вью в мобильных приложениях. И недавно он обнаружил, что у Apple есть кастомное свойство -apple-visual-effect: -apple-system-glass-material, которое по идее включает эффект жидкого стекла на элементе прямо в вебе.

Но есть нюанс. Оказывается, чтобы включить его, нужно внутри WKWebView переключить настройку useSystemAppearance, которая... приватная. Беда в том, что использовать приватные настройки нельзя, если не хочешь вылететь из App Store. А в обычном браузере просто не работает.

Аластер, тем не менее, поигрался со свойством локально, выглядит неплохо.

В общем, свойство, которое после выхода iOS 26 помогло бы не отнекиваться от хотелок заказчиков, формально существует, но по сути — выключено.

Кто знает, может, в ближайших релизах Safari его всё-таки включат для разработчиков.

https://alastair.is/apple-has-a-private-css-property-to-add-liquid-glass-effects-to-web-content/

Эволюция браузеров

Видео выходного дня. Вадим Макеев и Кирилл Мокевнин много и интересно разговаривают о том, как развиваются современные браузеры, как появляются новые фичи для разработчиков, почему приватности почти не существует, что нас ждёт в будущем и ещё много о чём.

Можно включить на фоне как подкаст.

Кстати, после просмотра этого интервью ещё раз осознал, что мы в «Веб-стандартах» важную вещь делаем помимо помощи новичкам в профессии. Важно ещё и обновлять знания опытных разработчиков, у которых часто нет времени копаться в каждой новости и следить за всеми обновлениями. Мы это делаем за читателей и слушателей, подсвечивая самое важное.

https://youtu.be/uPIUl8Bdq5A

Chrome DevTools MCP

Если вы ещё не работали с Model Context Protocol в связке с AI-агентами, то вот хороший повод попробовать.

Команда Chrome выпустила npm-пакет, который позволяет работать с DevTools через MCP. Подключается к IDE через конфиг MCP-клиента:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Дальше на всякий случай обучаете инструмент системными или другими промптами, чтобы когда вы просите проверить что-то в браузере, он работал с chrome-devtools. И можно спрашивать про сеть, перфоманс, навигацию, ресайзить страницы и многое другое. Подробности в документации.

Анонс: https://developer.chrome.com/blog/chrome-devtools-mcp
Документация: https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Проблемы @starting-style

Директива @starting-style — это такой способ указать браузеру, какие стили у элемента должны быть в тот момент, когда он только появился на странице. И если у него ещё есть указанный transition, то можно сотворить красивую анимацию появления.

Джош Комо подсвечивает нюансы такого подхода:
- Стили внутри @starting-style имеют ту же специфичность, что и селектор, для которого они объявлены. Что, в целом, логично. Но ломает работу с инлайн-стилями, например.
- Когда в стилях появляется !important, то поддержка становится ещё веселее.

В общем, классические проблемы со специфичностью и каскадом. Джош в статье предлагает решения этих проблем. Правда, в конце приходит в выводу, что ему пока проще использовать обычные анимации через @keyframes.

Имхо, оба подхода создают какие-то трудности. Анимации так-то тоже могут перебить стили, которые ты не ожидаешь нечаянно затереть, потому что у них очень высокий приоритет над почти любыми другими стилями. Но, справедливости ради, я пока ни разу в своих проектах @starting-style не применял, как-то не было нужды.

https://www.joshwcomeau.com/css/starting-style/

Определение версии Safari и iOS

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

При этом недавно версия iOS резко скакнула с 18 на 26. Уверен, где-то в мире несколько парсеров сломались, потому что «ну не может же быть апдейт мажора сразу на 8 версий, не бывает такого». А ещё iPadOS (узнал из статьи) притворяется macOS, хотя по сути работает как iOS по фичам.

Злые Марсиане делятся рецептами, как всё-таки можно определять нужную вам версию. Здесь, внезапно, длинный релизный цикл Safari помогает, а не мешает. Каждый минор содержит достаточное количество новых фичей, чтобы по ним определять версию, @supports в помощь.

Респект авторам статьи, что идентификация по User-Agent где-то в конце списка рецептов. Потому что в современном мире это исключительно дополнительная информация для аналитики, но никак не источник правды. И парсить сложно, и устройства «притворяются» не собой, и тот же iPadOS мимикрирует под десктоп, и нужно зачем-то держать под рукой копию CanIUse. Фичадетектинг — более правильное решение проблемы.

https://evilmartians.com/chronicles/how-to-detect-safari-and-ios-versions-with-ease

State of JavaScript 2025

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

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

https://survey.devographics.com/en-US/survey/state-of-js/2025

Динамический тултип

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

То, для чего мы сейчас используем JS-библиотеки на 200 килобайт, можно будет заменить на пару десятков строк CSS благодаря Anchor Positioning.

(Не забывайте проверять CanIUse)

https://css-tip.com/tooltip-anchor/

Агенты в Playwright

В Playwright теперь есть три агента: планировщик, генератор и хилер.

Планировщик — исследует приложение, пишет план для тестирования в Markdown.

Генератор — превращает план тестирования непосредственно в Playwright-тесты.

Хилер — прогоняет тесты и чинит упавшие. Не код приложения, к сожалению, а код тестов.

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

https://playwright.dev/docs/test-agents

ESLint v10.0.0

В грядущем мажорном обновлении линтера есть много изменений, но хочется обратить внимание на самые важные (на мой субъективный взгляд).

1. Прекращение поддержки версий ниже Node.js v20.19.0.

2. Файлы .eslintrc.* и .eslintignore перестанут работать. Пора переезжать на eslint.config.js, если ещё не переехали.

3. Конфиг eslint:recommended тоже обновится, добавят пару новых правил по умолчанию.

https://eslint.org/blog/2025/10/whats-coming-in-eslint-10.0.0/