Новогодний выпуск №455. Вадим, Алексей, Юля, Полина, Никита, Андрей кормят белок, играют колмимейби, красят плитку, ждут группу, спрашивают шляпу и атакуют титанов.

— Видео на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

Чиним год в футере

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

А тут вот поделились готовым решением всех проблем. Есть как npm-пакет, так и API, которое позволит вам больше не думать о проблеме.

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

https://getfullyear.com/

Запуск TypeScript на Node.js

Начиная с Node.js v23.6.0 можно запускать TypeScript-файлы в Node.js без всяких флагов. Это всё ещё экспериментальная фича, но вот, как она работает:
- Нода выпиливает TS-фичи из кода и просто выполняет, что получилось. Убирает типы, то есть.
- Если в коде есть enum, namespace и прочие улучшалки из мира TS, которых на самом деле нет в JS, то магия не случится, код сломается.
- Расширение файла .mts — это модульный JS, .cts — CommonJS, .tsx — не поддерживается.
- Просто .ts файлы обрабатываются как .js, то есть модульность берётся из package.json.

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

Больше подробностей про фичу — у доктора Акселя Раушмайера.

https://2ality.com/2025/01/nodejs-strip-type.html

CPU-хак для CSS

Рубрика «Ненормальное программирование».

Задача: сделать так, чтобы значение CSS-переменной самостоятельно увеличивалось от собственного значения по какому-то сигналу. Что-то вроде --my-var: calc(var(--my-var) + 1);. В императивных языках же есть i++, подавайте-ка его сюда и в декларативные языки, будьте любезны.

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

Но... Джейн Ори делится интересным хаком, который позволяет всё-таки обойти это ограничение. Для хака нужно знать три вещи:
1. Анимация имеет высокий приоритет в каскаде. Свойство, которое меняется анимацией, никакой специфичностью не перебить.
2. У анимаций есть кэш. Чтобы не считать значения свойств внутри анимаций по кругу, они жёстко кэшируются, даже если внутри идёт обращение к var(--my-var), которая где-то снаружи меняется.
3. Кэш анимации сбрасывается, если изменить сами свойства, касающиеся настроек анимации, вроде animation-play-state или animation-duration.

А дальше нужно хитрым образом переключать «кадры» так, чтобы кэш то сбрасывался, то включался. Коротко объяснить не смогу, смотрите демки в статье, с ними становится понятнее. Работает вся магия по ховеру, потому что для запуска заклинания без JavaScript всё-таки нужно из мира HTML прокинуть каким-то образом сигнал для старта в CSS.

Почему это называется CPU-хаком? Потому что по сути у вас появляется простой вычислительный юнит в CSS, настоящий счётчик, который можно менять под свои нужды. Так Джейн Ори делится демками, где она на чистом CSS подбирает позицию курсора во вьюпорте (причём бинарным поиском, чтобы быстрее было), запускает игру «Жизнь» Конвея, а потом всё это комбинирует в полноценный Арканоид.

Зачем это уметь? Ведь на JS объективно понятнее, производительнее и правильнее такое делать.
- Во-первых, я пока разбирался в демках, сломал мозг, но немного прозрел. Мне просто нравится разбираться в таких нюансах. Знание — сила.
- Во-вторых, знание про особенности кэширования значений в CSS может спасти вам часы дебага хитроумных ошибок в проде. У меня буквально такой кейс был в одном из проектов, где надо было сбросить кэш, а до этого в принципе понять, что ошибка в кэше.
- В-третьих, скажите потом ещё, что CSS — не язык программирования.

https://dev.to/janeori/expert-css-the-cpu-hack-4ddj

Рефакторинг на максималках

В 2022 году Саша Беспоясов так сильно не поместился в 40-минутный слот доклада на конференции со всем материалом, который ему хотелось рассказать, что собрал сборник материалов в виде книги.

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

https://refactor-like-a-superhero.vercel.app/ru

You don't know HTML: fetchpriority

Алексей Назаренко у себя в канале понятным языком объясняет, как работает атрибут fetchpriority на уровне браузера. И вообще, имхо, у Лёши полезный канал про веб, рекомендую.

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

Перевод aria-denoscription

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

Увы, оказалось, что только Firefox переводит, и то не везде. Chrome и Safari не переводят совсем. Google Translate, к слову, тоже не справляется.

Поэтому более правильный способ перевода доступных описаний — через aria-describedby, который связывается с реальным элементом в DOM, а там перевод вполне себе работает.

https://adrianroselli.com/2025/01/aria-denoscription-does-not-translate.html

Псевдокласс :empty

Крис Фердинанди напоминает о том, что в CSS довольно давно работает псевдокласс :empty. Всё, что он делает, это ищет элементы, внутри которых буквально ничего нет. Акцентирую на этом внимание: нет ничего, совсем ничего, даже пробела — это важно.

Применять такой селектор удобно для тех случаев, когда с сервера могут прийти любые данные, в том числе пустые. Обычно принято в JavaScript писать логику, проверять данные, в зависимости от этого перестраивать компонент. Со списками — делать фильтрацию. Но если по какой-то причине в код компонента залезть нельзя, а в стили можно, то вот вам и решение: .card:empty { display: none; }

https://gomakethings.com/the-empty-pseudo-class-in-css/

6 CSS-сниппетов, которые должен знать каждый фронтендер в 2025 году

Ох, как же я люблю такие заголовки в статьях. Год ещё только начался, а я уже кому-то что-то должен. Но, тем не менее, Адам Аргайл делится полезными «карапульками», знание которых вам может помочь:
- Анимация через linear().
- Типизированные кастомные свойства.
- View Transitions для переходов между страницами.
- Анимации появления и скрытия диалогов и поповеров.
- Анимация скрытия и раскрытия details.
- Анимированный градиентный текст.

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

https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025

Браузер Lightpanda

Происходит интересное. Думаю, не секрет, что запустить безголовый Chrome — дорого. То есть если вам нужно просто распарсить страничку, то проще дёрнуть её через cURL, если это статика. Но если это SPA, которых сейчас в интернетах много, то тогда уже надо брать какой-нибудь Playwright или Puppeteer.

И вот команда Lightpanda решила для задач скраппинга страниц (для тех же LLM, например) сделать свой быстрый браузер, который в принципе ничего не рендерит. Естественно, по их бенчмаркам вверху описания проекта браузер работает в 10 раз быстрее и эффективнее по памяти. И внизу страницы написано, что скорее всего большинство сайтов у вас сломается, потому что браузер пока в глубокой бете. Но судя по активности коммитов в репозитории и тому, что этот браузер нужен самой команде для их бизнеса, есть все шансы, что в каком-то удобоваривом виде браузер скоро выйдет из беты. Жду.

https://github.com/lightpanda-io/browser

Шаблонные литералы в TypeScript

У доктора Акселя Раушмайера вышел очень хороший гайд по тому, как можно полезно применять шаблонные литералы в TS. Это когда вы пишете что-то вроде type TailwindColor = `${BaseColor}-${Variant}`;, а внутри уточняете допустимые типы-значения.

Видел, как при помощи таких «умных» типов делали супер-мощные проверки контрактов с бекендом, прокачивали типы внешних библиотек и в целом сильно улучшали DX (автокомплит — одно удовольствие).

https://2ality.com/2025/01/template-literal-types.html

create-react-app всё

Я уже пару лет прошу фронтендеров не пользоваться CRA, потому что он устарел, не поддерживается командой разработки и не планировался быть совместимым с React 19. А теперь и сама команда CRA добавила в ридми проекта плашку «Ухадити! Тут никого нет! Используйте фреймворки, не используйте create-react-app!»

https://github.com/facebook/create-react-app/pull/17003

Опция --erasableSyntaxOnly в TypeScript

Вышли релизноуты беты TypeScript 5.8. Там есть разное полезное, но меня зацепила одна конкретная опция. В новом релизе хотят добавить аргумент --erasableSyntaxOnly, который попросит TS ругаться на конструкции языка, несовместимые с Node.js.

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

В общем, Node.js и TypeScript идут навстречу друг другу, это здорово.

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-5-8-beta/

Время избавляться от BlinkMacSystemFont и -apple-system

Короткий рецепт. Если у вас в стилях подключаются шрифты BlinkMacSystemFont и -apple-system, то удалите их и замените на system-ui. Поищите в фолбеках.

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

https://highperformancewebfonts.com/read/ditch-BlinkMacSystemFont-and-apple-system

Кнопка «Вверх» с индикатором прогресса

Мануэль Матузович собирает популярную на различных сайтах кнопку «Scroll to top» на HTML и CSS. Кнопка из коробки доступная (потому что ссылка), заодно показывает, сколько процентов страницы уже прочитано пользователем. «2-в-1, только сейчас в нашем онлайн-магазине, ещё и бесплатно!»

Заранее предупрежу, что использует она под капотом современные возможности браузеров вроде Scroll Timeline API и @property, но это не мешает прогрессбар прикручивать как прогрессивное улучшение.

https://matuzo.at/blog/2025/scroll-to-top-button

Сохранение интерактивности страницы во время View Transition

Я несколько раз в подкасте жаловался на то, что у прекрасного View Transition API есть один существенный недостаток: пока идёт анимация перехода, страница перестаёт быть интерактивной. То есть кнопки не нажимаются, ховеры не срабатывают и так далее.

В целом, оно и логично. Во время перехода по сути у вас одна картинка превращается в другую. Не очень понятно, куда клик должен проваливаться.

И вот Брамус поделился простым, но интересным решением.

::view-transition {
    pointer-events: none;
}

Во время перехода на странице создаётся псевдоэлемент ::view-transition, который накладывается поверх вьюпорта. И ведь в CSS уже давно есть способ убирать с элементов обработку событий указателя. Классно! Классно же, да?

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

У меня в проекте переключение темы сделано через VTA, и там этот сниппет, к сожалению, не применить, потому что тема переключается на всём документе единомоментно. Но я уже поигрался с тем, чтобы анимировать внутри страниц таким образом — нравится.

https://www.bram.us/2025/01/29/view-transitions-page-interactivity/

CTF для конференции «Я люблю фронтенд»

Уже сбился со счёта, сколько лет помогаю делать конференцию «Я люблю фронтенд» в составе програмного комитета. Не буду говорить, что программа там классная. Не буду намекать, что можно будет 15 февраля подключиться посмотреть в онлайне или прийти офлайн (если успели ухватить билет).

Но для меня одна из самых любимых частей этого события — ежегодный CTF для фронтендеров, который мы готовим к конфе с 2021 года. Многие же говорят, что пришли в айтишечку, чтобы делать игры (а потом что-то пошло не так). А мы вот прямо сейчас доделываем ещё одну игру, которая стартует сегодня в MTk6MDMgKEdNVCszKQ==.

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

P.S. Авторы игры не несут ответственности за тильт и батхёрт во время решения задач

hyphenate-limit-chars

Одно из недавних моих открытий в мире CSS-спецификаций. Думаю, про свойство hyphens: auto, которое включает перенос на новую строку для длинных слов, вы знаете. Точнее, просит браузер, если у него есть правильные словари, включить эти самые переносы. Использую редко, потому что мне в целом не нравится, когда в веб бездумно переносят то же самое, что есть на бумаге.

Но, оказывается, есть ещё одно полезное свойство, которое не даёт браузеру переносить слишком короткие слова. Если записать hyphenate-limit-chars: 10 4 3, то вы говорите браузеру:
- не переноси слова, которые короче 10 символов;
- при переносе оставляй на первой строке не меньше 4 символов;
- при переносе оставляй на второй строке не меньше 3 символов.

Можно написать короче, hyphenate-limit-chars: 10, если вам важен контроль только над длиной слов.

Хоть и пользуюсь автопереносами в вебе я редко, там, где всё-таки пользуюсь, мне этот маленький файнтюнинг прям будет полезен. Да, только для Chromium-браузеров, но прогрессивное улучшение никто не отменял.

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-limit-chars

Любопытное применение CSS-импортов в вебе

Эрвин Хофман подсвечивает большую проблему в современном вебе. По статистике Веб-Альманаха за 2024 год на 18.86% сайтов есть @import в CSS. Причём на 15.16% это подключение чего-то стороннего. Чаще всего — веб-шрифтов, fonts.googleapis.com в статистике лидирует.

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

А вот был бы старый надёжный <link rel="stylesheet" href="another.css">, таких проблем бы не было. У браузера есть так называемый preload scanner, который умеет для оптимизации скачивать ресурсы заранее. Ещё и приоритет ресурсу можно выставить повыше, если стили очень важные.

В общем, если у вас есть в команде внутренние KPI на ускорение сайта, при этом в коде есть CSS-импорты — уберите их, с высокой вероятностью полезные метрики вырастут.

https://calendar.perfplanet.com/2024/the-curious-performance-case-of-css-import/

Шрифт Martian Mono v1.1.0

Приятный релиз для любителей шрифтов с лигатурами. У «Злых Марсиан» есть свой моноширинный шрифт, Martian Mono. Мне он нравится не только за приятные и читаемые формы символов, но и за уважение к многообразию языков в мире. У меня есть свой тест для шрифтов: смотрю на букву Ў. Если что, это не просто «У» с шляпкой, а 22-я буква беларусского алфавита, а я иногда в личных проектах пишу комментарии на беларусском языке (і што вы мне зробіце? гэта мая родная мова, дзе хачу, там і выкарыстоўваю). Очень многие хорошие кириллические шрифты на этом тесте ломаются.

В версии 1.1.0 появилось ещё больше символов из разных языков мира. И новые программистские лигатуры.

https://github.com/evilmartians/mono/releases/tag/v1.1.0

Как поиск Google использует Speculation Rules API

Интересные новости. Оказывается, Google Search для двух первых результатов в выдаче в браузерах, которые умеют в Speculation Rules API (а это Chromium-браузеры на данный момент), заранее делает prefetch. Причём, если я правильно помню, когда не задана явно настройка eagerness, то это по сути равно «как только, так сразу». А так как страница поиска довольно хорошо оптимизированная, то в большинстве случаев запросы на первые два сайта идут.

В статье показано, как Google использует API для анонимизации IP пользователей, прятания referer (иначе можно было бы выдачу поиска исследовать) и работы с куками (точнее, их отсутствием).

С одной стороны, вроде бы становится хорошо: LCP у сайтов в топе уменьшается на 67 миллисекунд на мобилках и на 58.6 миллисекунд на десктопах. А это для современного веба много. С другой — не нашёл нигде статистики, как эти сайты с нагрузкой справляются лишней. Ведь по сути сайт в топе выдачи — это популярный сайт. И обращаются к нему часто, то есть владельцы сайтов как-то прогнозируют трафик, чтобы держать какую-то нагрузку. Для большинства сайтов вряд ли один дополнительный запрос от пользователя что-то радикально сломает, но ведь кому-то и сломает.

Для остальных 8 ссылок в поиске работает чуть менее агрессивный prefetch с настройкой "eagerness": "moderate", то есть скачивание начинается по 200мс-ховеру или по опусканию указателя.

Предвосхищая вопросы про рекламу, вроде «Интересно, на рекламу тоже работает такой prefetch?», подозреваю, что нет. Потому что реклама не попадает в число 10 ссылок выдачи, она всегда в дополнение. А ещё за клик по рекламе списывается денежка рекламодателя, хотя, наверное, тут могли бы как-то отделить честный клик от предварительного префетча. В статье про это ничего нет, но я попробовал поиграться с запросом «окна», глядя в девтулзы — не заметил префетча рекламы, а вот органическую выдачу вполне себе браузер скачивает заранее.

https://developer.chrome.com/blog/search-speculation-rules