Библиотека styled-components всё

Эван Джейкобс объявил, что проект styled-components переводится в режим поддержки. Так как React Context API не работает в RSC, фронтендеры всё реже используют CSS-in-JS, а у него самого нет активных больших проектов с использованием styled-components.

Это не значит, что нужно бежать выпиливать библиотеку из зависимостей. Если вы не планируете постоянно обновлять проект, вас устраивает React 18, при этом всё отлично работает — пусть и дальше работает. Но новые проекты лучше делать уже без использования styled-components.

https://opencollective.com/styled-components/updates/thank-you

box-decoration-break

Как говорится, век живи — век учись. Оказывается, в CSS уже относительно давно за префиксами и не так давно без префиксов в большинстве браузеров есть свойство box-decoration-break: clone, которое позволяет творить магию с многострочными inline-элементами.

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

Если ваш элемент инлайновый, то тогда браузер рисует бордеры ооочень специфично. Но и по спецификации, всё честно. У вас у первой строчки (фрагмента) будет левый бордер, у последней — правый, а на остальных строчках (фрагментах) — рельсы без левых и правых границ. С градиентным фоном тоже своим приколы. И не то чтобы мне часто нужно было стилизовать похожие случаи, но когда всё-таки было нужно, приходилось разбивать строчки явно через HTML, а дальше уже span-ы отдельно стилизовать. Такое себе решение, адаптивность ниже среднего.

Так вот, box-decoration-break: clone — и теперь каждая строчка (фрагмент) становится самостоятельной. Со своим фоном, своими границами.

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

Из особенностей: Safari всё ещё просит префикс -webkit- для работы свойства.

https://css-tricks.com/decorating-lines-of-text-with-box-decoration-break/

Уязвимость Next.js CVE-2025-29927

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

Если коротко, при помощи заголовка x-middleware-subrequest в HTTP-запросе можно уйти в ветку кода, в которую по идее нельзя пускать неавторизованных пользователей.

Что нужно сделать сейчас:
- Обновиться до версий 15.2.3+ или 14.2.25+.
- Если обновиться не получается, то самостоятельно вставить обработчик x-middleware-subrequest, который не даст творить дичь.

Про уязвимость: https://zhero-web-sec.github.io/research-and-things/nextjs-and-the-corrupt-middleware
CVE: https://github.com/advisories/GHSA-f82v-jwr5-mffw

Археологические раскопки: Packer.js

Иван Акулов вспоминает, как в 2018 году, делая аудит для одного из клиентов, наткнулся на библиотеку мниификации JS-кода Packer. Это очень старая библиотека, у которой есть режим Base62 encode. Тут нет опечатки, Base62.

Суть в том, что ключевые слова из кода заменяются на числа. То есть вместо let x = a.toString() у вас получится что-то вроде 0 1=2.3(), а уже дальше эта строка преобразуется на клиенте в нужный код через словарик и выполняется при помощи eval.

Удивительно, что такой подход сжимает большие библиотеки лучше современных Terser и прочих минификаторов. Например, Three.js сжимается через Terser до 358 КБ, а через Packer — до 266 КБ.

Но нет, это не повод тащить такой минификатор в прод. Привычный gzip в итоге справляется гораздо лучше с кодом от Terser, чем с кодом от Packer. То есть нельзя сравнивать инструменты только по тому, как они работают в изолированном примере, нужно смотреть на доставку кода на клиент целиком. Ну и eval в продакшене — такое себе счастье.

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

https://3perf.com/blog/packer/

Не дизейблите кнопки

Сижу ковыряюсь в доступности некоторых компонентов, вспомнил одну полезную статью.

Как часто делают, когда нужно, чтобы пользователь не отправлял форму? Например, когда он только что нажал кнопку «Отправить форму» и интерфейс ждёт ответа от бекенда. Правильно, добавляем атрибут disabled — и всё, браузер всё выключит за нас. Правда же?

Крис Фердинанди подсвечивает, что нет. Во-первых, я всё ещё могу перейти в какой-нибудь input и нажать в нём Enter / Return. Если форма свёрстана как форма, то по умолчанию форма отправится ещё раз. Получается, кнопку выключили, но проблему не решили. UPD. Спасибо подписчикам, обратили внимание на ошибку в статье, есть спека, в которой это поведение продумано, а я поверил и не проверил.

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

В статье предлагается решение с использованием JavaScript. Правильнее будет навесить событие submit на форму, внутри колбека проверить, можно ли отправлять. Если надо визуально «выключить» кнопку, то стилизуем её как неактивную, но не дизейблим.

https://gomakethings.com/dont-disable-buttons/

Lighthouse Treemap

Внезапно для себя обнаружил, что в Lighthouse давно есть возможность посмотреть загружаемые на страницу скрипты в виде Treemap. Это такое отображение прямоугольничками, чтобы понимать, что больше весит по сравнению с другими частями. В Node.js — уже привычный способ смотреть на зависимости, а вот про то, что так же можно посмотреть клиентскую часть прямо в браузере, узнал только сегодня. Случайно кликнул кнопку View Treemap, которую всё время игнорировал.

Посмотреть свои скрипты можно как минимум тремя способами:
1. Запустить аудит Lighthouse прямо в Chromium-браузере, после аудита нажать ту самую кнопку View Treemap.
2. Выгрузить результаты аудита в формате JSON и загрузить на https://googlechrome.github.io/lighthouse/treemap/
3. Запустить Lighthouse через CLI, сгенерировать отчёт.

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

https://umaar.com/dev-tips/247-lighthouse-treemap/

Не забывайте про метатег theme-color

Джим Нильсен напоминает, что если пользователь переключил на сайте тему, то недостаточно просто поменять класс на теге html.

Тут можно было бы вставить мем со светящимся разумом, доходящим до мегаразума.

Когда пользователь переключает тему:
Шаг 1. Поменять класс на корневом узле, чтобы применить кастомные стили, заменить переменные, перекрасить интерфейс.
Шаг 2. Поменять color-scheme в CSS, чтобы нативные контролы тоже адаптировались. Это свойство помогает инпутам, скроллбарам и прочим нативным элементам подстроиться под тему.
Шаг 3. Установить <meta name='theme-color'>. Это подскажет браузеру, как адаптировать оформление браузера и операционной системы под тему. Так у вас не получится тёмная тема с большой белой браузерной плямбой наверху экрана.

https://blog.jim-nielsen.com/2025/dont-forget-meta-theme-color/

Удаление бесполезных файлов из проекта

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

https://github.com/anandundavia/thanos-js

Декларативный веб-пуш

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

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

Необходимость сервис-воркера для работы нотификаций, к сожалению, иногда ломает бизнес-логику. В том же Safari есть механизм полной очистки всего, связанного с веб-приложением, через какое-то длительное время. Чистят куки, localStorage, в том числе прибивают сервис-воркеры. При этом ломаются и нотификации.

Apple в iOS 18.4 выкатили Declarative Web Push, который не нуждается в сервис-воркерах. Механизм получения нотификаций остался тем же, но регистрация происходит по-новому, через window.

const subnoscription = await window.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: arrayForPublicKey
});

Ну и если раньше для показа нотификации нужно было обработать полученное извне сообщение и вызвать showNotification, то теперь Push Manager если получает сообщение в нужном JSON-формате, сразу же его и показывает, без JavaScript.

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

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

Новинку можно потестировать на iOS и iPadOS 18.4.

https://webkit.org/blog/16535/meet-declarative-web-push/

Про цвет и контраст

Нашёл золото в архивах. Когда-то давно Юля Миоцен скидывала ссылку, отложил на «почитать попозже», через три года добрался.

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

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

https://colorandcontrast.com/

Записи докладов MinskJS #12

Видео выходного дня. Опубликовали записи докладов с недавнего митапа одним плейлистом.

Напомню, о чём говорили:
- Лёша Назаренко рассказал, что такое веб-компоненты в современном фронтенде.
- Глеб Казачинский показал, как писать веб-компоненты на популярных фреймворках.
- Настя Котова научила разбираться, откуда берутся ошибки node-gyp при установке npm-зависимостей.

https://www.youtube.com/playlist?list=PL-whh3wS8xsKuQdPIESXp0xR1A7tinzkT

User Agent Plus

Мануэль Матузович собрал «другой» reset.css, цель которого — улучшить существующие стили юзер-агентов (браузеров). Каждый селектор подробно объясняется. Есть как привычное выставление box-sizing: border-box; всему на странице, так и хитрый тюнинг привычных вещей. Например, осознанное усиление атрибута hidden.

Мне здесь понравилось умелое использование селектора :where(), который никак не увеличивает специфичность. Это такой умный дефолт, который очень легко переопределить при необходимости.

https://fokus.dev/tools/uaplus/

Упрощаем шаринг прогрессивным улучшением и встроенными API

Энди Белл по шагам собирает блок шаринга для страницы. В нём две кнопки: Share и Copy URL. Всё это обёрнуто в веб-компонент, который можно легко под себя адаптировать. Посмотреть за ходом мысли автора, как он идёт от выключенного JavaScript к готовому компоненту, точно будет полезно.

От себя добавлю, что компонент скорее удобен для мобильных ОС, потому что на них нативный шаринг более-менее удобный и привычный. А вот на macOS нативное меню шаринга — какое-то недоразумение. На Windows тоже смотрится странно. Для десктопа я бы переделал как тут: https://mefody.dev/chunks/social-sharing-html-only/.

https://piccalil.li/blog/simplify-sharing-with-built-in-apis-and-progressive-enhancement/

Стилизация счётчиков и списков в CSS

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

Современные счётчики и списки умеют много всего. Это уже давно не просто список предустановленных маркеров с арабскими и римскими числами, буквами и геометрическими фигурами. Директиву @counter-style, например, крайне рекомендую к ознакомлению.

https://css-tricks.com/styling-counters-in-css/

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>

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

Для атрибутов noscript и 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/