Тени для подскролла через Scroll-Driven анимации

Часто в интерфейсах встречается такой приём: если есть скролл на внутреннем элементе страницы, то чтобы пользователь на устройствах с невидимым скроллом осознал его наличие, рисуют тень. Раньше-то всё просто было: показывается здоровенная колбасина скролла на карусельке — значит, тут можно подскроллить. А теперь скролл на мобилках сам прячется, на macOS и разных линуксах — тоже, нужно пользователям как-то намекать, что блок не обрезан, а скроллится.

Такой приём требует понимания, когда показывать тень. Обычно для этого используется простенький JS-скрипт, который проверяет позицию скролла. Кевин Хеймер же предлагает использовать исключительно CSS и относительно новое свойство animation-timeline. Например, можно завести кастомное свойство --left-fade для левой горизонтальной тени, а внутри анимации, привязанной к скроллу, менять его значение на что-то, что показывает или прячет тень. Привязаться к скроллу можно так:

.scrollable {
  overflow-x: scroll;
  animation: scrollfade;
  animation-timeline: --scrollfade;
  scroll-timeline: --scrollfade x;
}

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

https://css-tricks.com/modern-scroll-shadows-using-scroll-driven-animations/

ARIA Notify в Microsoft Edge

Сел я, значит, оформлять пост про интересную апишку, которую Edge у себя за флагом внедряет, отвлёкся на работу, а Лёша Назаренко за это время написал пост у себя, подробный и с примерами.

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

Есть специальный атрибут aria-live, который помечает DOM-узел так, чтобы скринридер за ним подглядывал. Поменялся внутри контент — случилась озвучка. Легальный способ озвучить нотификации. Но не очень удобный с точки зрения DX.

В Edge же за фичефлагом добавили метод ariaNotify("Some text", { "priority":"high" }), который позволит делать то же самое, но удобнее.

А подробнее — в посте у Лёши.

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

Будущее веб-разработки — ИИ

Алекс Ривьер делится своими мыслями, почему важно не упустить тренд сейчас.

https://alex.party/posts/2025-05-05-the-future-of-web-development-is-ai-get-on-or-get-left-behind/

Маленькие помощники

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

Когда добавлял сайт в закладки очень давно, там было меньше сотни инструментов. Сейчас их аж 645. И вы можете добавить новые, там кнопка для этого есть.

https://tiny-helpers.dev/

Цвета для людей и машин

Шикарная статья Полины Гуртовой на MDN про то, что такое цвет с точки-зрения веб-разработки:
- Как цвета работают для глаза и мозга.
- Почему существующие цветовые модели и цветовые пространства такие, какие они есть.
- Что такое YUV.
- Как камеры воспринимают свет и превращают его в файлы.
- Чем отличаются HDR и SDR.
- Белочки.

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

https://developer.mozilla.org/en-US/blog/color-models-humans-devices/

Event Loop крутится, Node.js мутится

Цикл статьей от Анастасии Котовой про то, как устроен Event Loop, с фокусом на Node.js:
- Часть 1. Браузер VS сервер
- Часть 2. Нюансы работы Event Loop
- Часть 3. За пределами Event Loop
- Часть 4. HTTP-сервер
- Часть 5. Настоящая многопоточность
- Часть 6. Профилировать и замерять

Я последний раз погружался в особенности Event Loop довольно давно, для рабочих задач знаний хватало. До качественного профилирования так и не добрался. А тут Настя накинула хороших советов, рекомендую.

Кстати, можно подписаться на её канал, годнота: https://news.1rj.ru/str/startpoint_dev

Оно следит за тобой. На математических функциях CSS

Готовлю на CodeFest доклад про математику в CSS, собираю демки. Очень понравилось верстать глаз, который следит за курсором. Причём получилось сделать довольно быстро, а эффект залипательный.

Механика простая. Есть JavaScript, который на движение курсора устанавливает на DOM-узел переменные с координатами центра глаза и координатами курсора. Дальше в CSS считается угол от оси X к курсору и удалённость курсора от центра. Эти параметры передаются в набор `transform`-функций. Получаем на выходе забавный эффект, когда интерфейс за тобой следит.

Раньше делал такое же при помощи JavaScript, но было сложно синхронизировать все мелкие детали между собой: всё равно нужно было записывать прямо в атрибут style переменные или целые CSS-свойства, но не в один DOM-элемент, а в много разных. Причём с псевдоэлементами всегда есть нюансики. А тут довольно просто получилось: в один атрибут всё записал — и красота.

Заодно дотюнил демку, чтобы на смартфонах тоже можно было подвигать пальцем по экрану и позалипать: touch-action: none, который в обычной жизни лучше не использовать из-за проблем с доступностью, а тут можно.

https://codepen.io/dark_mefody/pen/yyyrQgV

Тестирование нотификаций

Нашёл на просторах интернетов интересный сервис, который позволяет супер-просто тестировать push-нотификации.

Чтобы не попасть в паблик Адовый UX (рекомендую, кстати) с тем, как кто-то тестировал на проде нотификации и разослал всем тестовые пуши, можно ужесточить сам процесс тестирования на конкретных тестовых аккаунтах. А ещё можно унести это тестирование в отдельное приложение. Сервис ntfy как раз про это. Устанавливаете приложение на мобилку, придумываете ключ для вашей нотификации (в бесплатной версии лучше придумать что-то очень уникальное, потому что бесплатное — общее), а потом банальным курлом тестируете внешний вид всплывашки.

curl \
    -d "Ого, а кто тут такой красивый?" \
    ntfy.sh/my-super-uniq-topic

Есть платная версия, там можно застолбить за собой от 3 ключей (топиков).

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

https://ntfy.sh/

Популярность браузерных возможностей

У Chrome есть открытая статистика по тому, какими фичами сколько пользуются в вебе. Собирают через анонимный трекинг статистики использования браузера (когда устанавливаете браузер, там галочка по умолчанию стоит).

Интересные наблюдения:
- Индустрия видео для взрослых сильно влияет на статистику использования разных фичей. Используют много чего нового.
- Нашёл корреляцию между тем, как появляются статьи в блоге web.dev и растёт использование фичи в вебе. Деврел работает.
- @property используется уже на 3.4% сайтов. Думал, будет меньше.
- Статистику по HTML/JS читать очень сложно, не осилил сделать выводы.
- Около половины браузерных фичей имеют Adoption Rate меньше 1%. Причём там много далеко не новых фичей. За MathML и сабгриды обидно.
- Статистика Chrome и HTTP Archive по некоторым фичам заметно отличается.

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

https://chromestatus.com/metrics/css/popularity

Веб-трек на Google I/O 2025

Если хотите посмотреть, что Google на своей самой большой конференции рассказал про веб, новинки Chrome и Angular, вот ссылочки:
- День 1. Chrome, Web
- День 2. Web UI, Angular

В целом, если почти каждую неделю готовиться к подкасту «Веб-стандарты» или слушать его, то новинки веба не новинки. Но как выжимка за год самых классных внедрений в Chrome — самое то. А вот про Angular мне было интересно посмотреть, потому что давно не следил, что там происходит.

TypeScript Native Preview

Команда TypeScript подготовила нативную версию компилятора на Go для тестирования.

Чтобы её попробовать, нужно установить отдельную версию через npm install -D @typenoscript/native-preview. И все вызовы tsc заменить на tsgo. Позже, когда выйдет полноценный мажор TypeScript 7, tsc и станет той самой версией на Go, но пока для удобства тестирования файлы разные.

В статье подробно описано, что пока не умеет tsgo, но хочу на выходных всё равно попробовать на каких-то своих проектах потестировать, ускорит ли сборку. Не зря же обещают ускорение больше чем в 10 раз.

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-native-previews/

Arc всё*

Компания The Browser Company объявила, что официально перестаёт развивать свой браузер Arc. Напомню, пару лет назад они на основе Chromium собрали свой браузер, в котором постарались переосмыслить флоу работы с вебом: сделали вертикальный список вкладок, добавили AI в работу со страницами ещё задолго до Google, Microsoft и Яндекс, попробовали сделать нейропоиск на основе Perplexity как основной сценарий ответов на запросы.

Теперь компания сфокусировалась на новом проекте под названием Dia. Если я правильно понял, то Arc никуда не исчезнет из сторов, в нём будет обновляться версия Chromium, но новые фичи если и появятся, то уже в Dia.

Немного жаль, конечно, но свой вклад Arc в UI разных браузеров уже сделал. Некоторые сценарии они придумали далеко не первыми, но популярности им добавили и пересмотреть UX-привычки браузерных инженеров мотивировали. Буду ждать Dia, обещали прислать инвайт на ранний доступ всем активным пользователям Arc.

https://browsercompany.substack.com/p/letter-to-arc-members-2025

Стилизация alt-текста как любого другого

Иногда так случается, что картинка на странице не загрузилась. Но разработчик молодец, добавил alt-текст картинке.

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

https://piccalil.li/blog/you-can-style-alt-text-like-any-other-text/

Математика в CSS: что и зачем считать для стилей

Прочитал только что на CodeFest доклад про то, зачем и как можно применять математику в CSS. С демками, мемасиками, полезными ссылками — всё как обычно.

Делюсь с вами слайдами. А когда появится видео доклада, поделюсь и им.

https://mefody.dev/talks/math-css/

Построй свой <подставить_нужное>

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

https://github.com/codecrafters-io/build-your-own-x

Storybook 9

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

- Много возможностей для тестирования. Интерактивное тестирование (буквально можно накликать и проверить поведение компонента), тестирование доступности (под капотом axe-core), скриншотное тестирование.
- Анализ покрытия кода компонентов тестами. Требует подключения Vitest, смотрит только на сами истории, но всё равно полезное улучшение.
- Уменьшение размера бандла в 2 раза. Почистили зависимости, в анонсе есть впечатляющий граф. Для всяких CI/CD — ускорение работы, соответственно.
- Поддержка Svelte 5 и React Native.
- Генератор Story. Можно прямо из интерфейса накликать состояние компонента и сохранить это состояние как отдельный тест.

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

https://storybook.js.org/blog/storybook-9/

«Идёт загрузка…», или Как доставлять нужное вовремя

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

https://youtu.be/mWR07BSGAVc

CSS-фигуры при помощи функции shape()

Темани Афиф написал аж три статьи с множеством демок, в которых он объясняет возможности функции shape() в CSS. Это такая функция, при помощи которой можно рисовать полноценные векторные формы, но не в сложночитаемом для новичков синтаксисе SVG-путей, а чуть ли не человеческим языком. Отличное решение для всяких динамических фигур, которые зависят от CSS-переменных на странице.

- Часть 1. Про линии и дуги
- Часть 2. Ещё про дуги
- Часть 3. Про кривые

Обсуждали с Полиной Гуртовой во вчерашнем 478 эпизоде подкаста «Веб-стандарты» третью статью. После записи подкаста прочитал её внимательнее — стал чуть-чуть лучше понимать кривые Безье.

State of CSS 2025

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

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

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

https://survey.devographics.com/ru-RU/survey/state-of-css/2025

Новый способ стилизовать гэпы

В Chrome 139 за Origin Trial и за флагом выехала возможность стилизовать отступы между ячейками в гридах и флексах. Теперь можно ещё удобнее стилизовать гриды под таблицы, если вам вдруг такое нужно.

Синтаксис не самый простой, нужно освоить новую группу свойств column-rule-* и row-rule-*, но демки выглядят интересно.

https://developer.chrome.com/blog/gap-decorations

Свет: оживляем 3D-объекты

Видео выходного дня. Юлия Миоцен объясняет и показывает, как для 3D-графики на CSS создать реалистичное освещение и тени. На примере кубической курицы.

Если любите творить магию при помощи CSS, видео Юли помогут прокачаться.

Видео:
https://youtu.be/2FEgcYfiTEM?si=w-kgixEhBlwC_0eB

Статья и демо:
https://miocene.io/post/light-and-shadow-in-css/