Полный курс по 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/Typenoscript-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/

Interop Feature Ranking

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

Джейк Арчибальд, который теперь работает в команде Firefox, собрал дашборд, который поможет команде Firefox более взвешенно обработать пожелания разработчиков для Interop 2026. Обычно все предложения — это просто ишьи на гитхабе, и для меня, например, всё ещё тайна, как браузеры выбирают из списка то, что точно будут делать. Потому что самые залайканные ишьи часто в Interop не попадают.

Интересный дашборд, оставил в нём свои хотелки, делал по инструкции. И вы не стесняйтесь влиять.

https://interop-rank.jakearchibald.com/

Next.js 16 (beta)

Если у вас проект написан на Next.js, то сейчас можно поиграться с бетой 16-го мажорного обновления.

- Переключили дефолтный бандлер на Turbopack. По замерам команды сборка проектов ускоряется в 2–5 раз.
- Поддержка React Compiler. По умолчанию не включён. Но добавляет оптимизаций, мемоизаций и автоматизаций при включении.
- Опять изменения в роутинге. На этот раз систему навигации переписали, чтобы эффективнее работать с запрашиваемыми ресурсами и префетчингом. В коде ничего менять не нужно.
- Переделали работу с Caching API. Добавили больше методов. Мне почему-то каждый раз страшно, когда вижу обновления в этой части Next.js. Надеюсь, в этот раз новых секьюрити-багов не насыпали.
- Вместе с React 19.2 приехала работа с View Transitions в реактовом стиле. Можно будет делать красивые переходы между страницами.

Больше подробностей — по ссылке.

https://nextjs.org/blog/next-16-beta

Yandex Cup 2025

Надо же иногда рассказывать, чем я вообще на работе занимаюсь.

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

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

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

https://yandex.ru/cup/frontend

Давай поиграем со шрифтами

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

Как всегда, видео опубликую здесь, как только оно появится в общем доступе.

Слайды: https://mefody.dev/talks/fonts-loading/

Дополнительные материалы: https://gist.github.com/MeFoDy/f44aa1d3f027500d1663abe60532f44b

Настоящее и будущее прогрессивного рендеринга изображений

Не смогу в короткой заметке рассказать всё то, что рассказал Джейк Арчибальд в своей статье. Обязательно почитайте её. Или послушайте 497-й выпуск подкаста «Веб-стандарты», где мы подробно обсудили статью голосом. Но постараюсь дать основные выводы.

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

JPEG всё ещё лучший по метрикам размера картинки и времени на декодирование в браузере. WebP тоже хорош, но Safari грузит картинку только целиком.

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

Есть надежды на JPEG XL, но он пока не реализован в браузерах полноценно. Точнее, сейчас он включён только в Safari без прогрессивного рендеринга, а в других браузерах — спрятан за флагами.

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

Тем не менее это не повод бежать выключать прогрессивный рендеринг ради экономии 3 kB на картинку. Где-то оно всё же поможет.

https://jakearchibald.com/2025/present-and-future-of-progressive-image-rendering/

Когда «идеальный» код падает

Марек Маркевка пишет простую функцию внутри Next.js-приложения.

const isOwner = (userMail: string, ownerMail: string) => {
  return userMail === ownerMail;
};

Казалось бы, что может пойти не так? Функция же примитивная, для неё тестов много не нужно.

Беда в том, что в месте вызова isOwner(email1, email2) всегда возвращается true. Почему так? Читайте в статье.

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

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

https://marma.dev/articles/2025/when-perfect-code-fails

View Transitions Feature Explorer

Спецификация View Transition API постепенно разрастается, всё чаще нужно понимать, какие её части в каких браузерах работают.

Брамус собрал демку-подсказчик, которая поможет разобраться. Со ссылками на документацию и релиз-ноуты.

Интересно, что внутри демки тоже используются View Transitions.

https://codepen.io/web-dot-dev/full/EaPbbgx

Harmonizer

Ещё один полезный инструмент от Злых Марсиан.

В интернетах много генераторов палитр можно найти, но здесь — современный, доступный, в виде плагина для Figma и в виде веб-приложения. Цвета — «оклыч» (OKLCH), проверка контрастности — APCA. Есть удобный предпросмотр для тёмной и светлой темы, причём палитра математически подстраивается сама. И сразу же можно выгрузить палитру в виде CSS-переменных и не только.

Я, конечно, не дизайнер, но приложил сгенерированную тему на пару своих пет-проектов — нравится. Может, даже, в своём полузаброшенном бложике обновлю темизацию основательно.

И спасибо большое Марсианам за то, что они не просто делают что-то для себя, а делятся крутыми наработками со всеми. Вот уж где последовательная популяризация OKLCH с реальным влияением на веб, так у них.

https://evilmartians.com/opensource/harmonizer