Express@5.1.0: теперь LTS и дефолт при установке

Сразу две новости в одной.

Во-первых, теперь при установке npm install express без фиксации версии будет приходить версия 5.1.0+. До 1 апреля всё ещё приходила версия 4, потому что 10 лет без мажорного релиза — это достаточно долго, чтобы осторожничать. За что команде Express спасибо.

Во-вторых, версия 5 получает статус LTS, а 4-я версия уходит в поддержку до 1 октября 2026 года. Повод обновиться.

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

https://expressjs.com/2025/03/31/v5-1-latest-release.html

Никогда не проигрывай битву с z-index

Мануэль Матузович делится вредным, но рабочим советом. Если вам надо сделать так, чтобы элемент был по z-index выше остальных, а с контекстами наложения разбираться лень — z-index: calc(infinity) в помощь. Всё лучше, чем выбирать между 9999 и 99999.

Тут же Мануэль подсвечивает, что z-index: 2147483647 всё-таки может оказаться выше, чем z-index: calc(infinity), если в DOM идёт позже в том же родителе. Потому что это 2^32-1, верхний предел значения свойства по его типу данных

Почему совет вредный: потому что если вам приходится задумываться о таких решениях, то явно пора разобраться с тем Z-Index Hell, который у вас в проекте развёлся. Для меня сигналом разобраться часто является уже z-index: 2.

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

https://matuzo.at/blog/2025/never-lose-a-z-index-battle-again

fetchLater API

В Chrome 135 вышла из Origin Trial интересная апишка. Появился метод fetchLater, который принимает почти все те же аргументы, что и обычный fetch, но браузер отправит запрос попозже, а точнее в самое раннее из наступивших событий:
- документ уничтожен;
- прошло заданное пользователем время;
- браузер решил, что пора отправлять.

Третий пункт, конечно, самый интересный, но в эксплейнере буквально так и написано, конкретных подробностей найти не смог.

Для чего это может быть полезно? Маячки, замена sendBeacon. Иногда нужно отправить запрос, не обрабатывая его результат. Например, для продуктовой аналитики или сбора метрик перфоманса. Частый кейс: нужно отправить на сервер событие, когда пользователь закрыл вкладку. И тут мы научились картинки быстро вставлять в DOM на beforeunload, и fetch дёргать на веру, и специальным методом sendBeacon пользоваться. Но все эти методы не дают вообще никакой гарантии, что запрос будет отправлен. А хочется иметь специальное место в жизненном цикле страницы, где запрос всё-таки будет отправлен в любом случае.

Вот для этого и придумали fetchLater. Причём это не самоуправство Chrome мимо спецификаций, а вполне себе коллективная работа всех мажорных браузеров, Firefox и WebKit эксплейнер одобрили.

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

https://chromestatus.com/feature/4654499737632768

Сбалансированные строки для японского и корейского языков

Мы в подкасте периодически обсуждаем, какой text-wrap: balance хороший для заголовков. Я к себе в блог это свойство затащил почти сразу, как про него узнал.

А вот Келли Чойс-Дван подсвечивает интересную проблему. Для языков, где есть пробелы как разделители слов, text-wrap: balance и правда хорош. Но есть языки, где пробелы либо не используются вовсе, либо есть разные подходы, в том числе и без пробелов. Например, в японском и корейском языках тексты без пробелов — вполне себе норма.

Допустим, у вас есть текст на японском, что-то вроде «Замечательный текст». И наведение красоты приводит к двум строчкам «Замечател / ьный текст». Что делать?

В Chromium-браузерах есть word-break: auto-phrase. Такая конструкция просит браузер проанализировать текст и не вставлять разрывы посреди слов. Под капотом у этого свойства machine learning, поддерживает далеко не все языки.

Как фолбек можно применить word-break: keep-all. Это специальное значение как раз для CJK-текстов (Chinese/Japanese/Korean), которое выключает разрывы слов для них в принципе.

Ну а вообще интересно было бы поизучать опыт японских или корейских пользователей. Ведь мы же как-то читаем сайты с дефисами-переносами для длинных слов, hyphens: auto, все дела. Возможно, если для удобства чтения сайта важно сохранять фразы на одной строке, то надо расставить переносы строк руками, а не доверять это дело автоматике, заточенной под англоязычный мир.

https://ryelle.codes/2025/04/typography-troubles-balancing-in-japanese-korean/

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

Только что прочитал на Dump 2025 в Екатеринбурге доклад про то, на что можно обратить внимание, если хочется или нужно оптимизировать загрузку сайта. Постарался собрать большой список интересностей, про которые можно почитать подробнее по ссылкам из слайдов. Делал упор не на стандартные «включите gzip, ужмите картинки, разделите бандл», а на то, про что говорят реже.

Собственно, сами слайды прикреплены к посту. А видео доклада выложу сразу же, как со мной им поделятся организаторы.

Перевод строки как часть атрибута

Как-то я никогда особо не задумывался, а вот Теренс Иден взял и задумался, как ведёт себя перевод строки в HTML-атрибутах.

Кажется, что символ новой строки должен вести себя как пробельный символ. Потому что я видел похожие записи, которые работали:

<a href="/" class="
   link
   link--active
   space-between
">Some text</a>

И да, для классов это работает. Как и для многих других атрибутов. Селектор по классу сработает, стилизация применится.

Для атрибутов title и placeholder перевод строки сохраняется, ни на что не заменяется. Что тоже логично, потому что это «визуальные» атрибуты, их контент каким-то образом показывается пользователю, поэтому менять в них что-то автоматически было бы неправильно.

А вот для id уже есть нюанс.

<p id="test
">Hello</p>

Здесь селектор не test, а test\n. То есть банальная опечатка сломает стили. Ну или не опечатка, а странное форматирование кода в проекте. Надо быть внимательнее.

https://shkspr.mobi/blog/2025/04/html-oddities-is-a-newline-just-another-whitespace-in-attribute-values/

Что делает "use client"

Дэн Абрамов на примерах объясняет, чем отличаются директивы 'use client' и 'use server' в React. Я думал, что понимал, как оно приблизительно работает под капотом, а оказалось, что не до конца понимал.

Напомню, в React 19+ добавили такую сущность, как React Server Components. И если вы хотите явно разделить логику на серверную-клиентскую, то можно добавить «магические» директивы 'use client' и 'use server', компилятор их особым образом обработает, расставит правильные импорты-экспорты по коду, обмажет абстракциями, а потом оно у вас всё вместе в теории возьмёт и заработает.

Понравилось сравнение Дэна этих директив с дверьми: они соединяют один мир с другим. И примеры кода понятные и простые.

https://overreacted.io/what-does-use-client-do/

GSAP теперь бесплатный*

Есть такой крайне мощный инструмент для работы со сложными анимациями, называется GSAP. Расшифровывается как GreenSock Animation Platform. И с ним всегда были нюансики по коммерческому использованию, нужно было покупать лицензию за $99 в год или дороже, чтобы всё было честно. В целом, за то обилие функций, которые GSAP позволяет применять, цена вполне нормальная.

В октябре прошлого года их купил Webflow. И вот на днях они объявили, что теперь GSAP на 100% бесплатный, в том числе для коммерческого использования. Очень крутая новость для всей индустрии, имхо. Заодно бесплатными стали плагины, которых у GSAP много.

Но не просто так в заголовке поставил звёздочку. Лицензия у GSAP никуда не делась, соблюдать её правила всё ещё нужно. И там есть пара пунктов, которые всё равно стоит учесть, прежде чем радостно тащить в коммерческий проект:
- Ваш продукт не должен выдавать что-то похожее на визуальный редактор как у Webflow.
- В любой момент Webflow оставляет за собой право изменить лицензию. Правда, обещают что любое обновление не должно ухудшить ваш опыт использования GSAP, что бы это ни значило.

В общем, хороший повод попробовать поиграться с библиотекой, если до этого вас сдерживала только цена на лицензию.

https://webflow.com/blog/gsap-becomes-free

Тени для подскролла через 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://www.tgoop.com/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://www.tgoop.com/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 @typescript/native-preview. И все вызовы tsc заменить на tsgo. Позже, когда выйдет полноценный мажор TypeScript 7, tsc и станет той самой версией на Go, но пока для удобства тестирования файлы разные.

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

https://devblogs.microsoft.com/typescript/announcing-typescript-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