Переезд с Chalk на нативный styleText

Есть такая утилита Chalk, которую даже если вы осознанно в проект на Node.js не подключали, есть высокая вероятность, что подключали неосознанно. У неё какое-то неприличное девятизначное число скачиваний в неделю. И нужна она, чтобы в терминале красиво выводить текст: с фоновым цветом, разноцветно, жирненько или курсивом и так далее.

В Node.js v22.13.0 стабильной стала нативная утилита node:util.styleText, которая может почти всё то же самое, но с некоторыми ограничениями. Для нас, разработчиков, это приятное удаление лишней зависимости и более быстрое логирование.

А самое приятное, что можно запустить официальный кодмод от команды Node.js, который мигрирует ваш проект сам:

npx codemod @nodejs/chalk-to-util-styletext

https://nodejs.org/en/blog/migrations/chalk-to-styletext

CTF Frontend // 2026

Каждый год мы небольшой командой перед конференцией «Я 💛 Фронтенд» собираем фронтендерский CTF (Capture the Flag). Он уже оброс собственным лором, узнаваемой стилистикой, локальными мемами и небольшим, но уютным комьюнити. Игры больше похоже на головоломки, где знания фронтенда помогают найти спрятанные сообщения, чтобы перейти на следующий уровень.

В этом году тоже готовим новую игру с новыми заданиями. Сижу как раз оформляю сюжетные диалоги, чтобы вам интереснее играть было.

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

В эту субботу. Ждём всех. Never Gonna Give You Up.

https://ctf.ilovefrontend.ru/

Долой появление по скроллу!

Дэвид Бушелл довольно аргументированно доказывает, почему делать scroll-fade на сайте не нужно. Это такой эффект, когда вы скроллите — и только после этого текст и картинки как-то появляются на странице.

Если кто-то попросит вас сверстать такой эффект, поделитесь с ними этой статьёй, там наглядно.

https://dbushell.com/2026/01/09/death-to-scroll-fade/

Эффект эластичного текста на чистом CSS

Для начала, это эффектно и красиво.

Темани Афиф собирает демку, в которой за текст можно потянуть курсором мышки — и он потянется в правильном направлении, а потом пружинкой отскочит обратно. Выглядит «вау», если знать, что там нет JavaScript. В статье есть пошаговый разбор, как достигнуть такого эффекта.

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

https://frontendmasters.com/blog/how-to-create-a-css-only-elastic-text-effect/

Я 💛 Фронтенд 2026

Чуть не забыл в суматохе подготовки. Мы с Сашей Шинкевич сегодня ведём конференцию про фронтенд. С отличной программой (по мнению составителей этой программы, то есть нас).

Трансляция стартует в 11:00 по минскому времени: https://www.youtube.com/live/Da3cJi7RDPg

Программа и подробности тут: https://events.yandex.ru/events/ya-love-frontend-2026/

Собственная тема для VS Code

Зелл Лью делится опытом написания и публикации собственной темы для VS Code. Пошагово и с подробностями.

В начале статьи Зелл пишет, что ему понадобилось всего 6 часов на создание рабочей темы и пара дней на «полировку».

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

https://css-tricks.com/no-hassle-visual-studio-code-theming-building-an-extension/

Гайд по Anchor Positioning

Anchor Positioning — это декларативный способ описать визуальную привязку одного элемента к другому на странице. Тулптипы, подсказки, сноски, выносные элементы — всё это можно реализовать относительно легко при помощи Anchor Positioning API.

Рома Ахмадуллин в Доке написал подробную статью, как работать с этим однозначно полезным API. Много интерактивных демок.

https://doka.guide/css/anchor-positioning-guide/

Красивый Select

Адам Аргайл выкручивает современные возможности CSS на максимум вокруг appearance: base-select. Напомню, в Chrome уже можно стилизовать выпадушки при помощи CSS, не создавая полную копию на дивах и спанах. А другие браузеры в целом смотрят позитивно на эти эксперименты и готовы в будущем подтянуть себе реализацию по более устаканившимся спецификациям.

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

https://nerdy.dev/nice-select

Спрайты в вебе

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

Но интересно в демках показано, как можно ту же технику применять для анимаций внутри интерфейсов. Прямо поверх тега <img>. Сохранил в закладки.

https://t.me/webstandards_ru/7656

Смотрим и комментируем

Это не призыв, это название нового подкаста. Олег Мохов, широко известный в узких кругах, решил стартовать свой подкаст, где вместе со спикерами разбирает их же доклады по полочкам.

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

Хм. Получается, всё-таки призыв. Хорошее название.

https://t.me/teamleading/486

Dictionary Compression. Здесь и невероятно хорош

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

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

А что, если доставлять на клиент только diff, как при коммитах? Пусть старая версия бандла — это основа, клиент делится с сервером: «Смотри, у меня есть вот такая версия основы», а сервер отправляет на клиент только то, что нужно для построения новой версии бандла.

Больше всего удивился из статьи тому факту, что сама идея к нам могла прийти в пользование в вебе ещё в начале 2000-х, но в Internet Explorer и IIS был не совсем верно реализован алгоритм deflate, а потом в 2012 случился казус с уязвимостью CRIME… В общем, не так-то просто внедрять то, чем могут пользоваться все. Зато в 2026 вы можете начать экономить до 95% трафика, если правки у вас небольшие, а кэширование настроение верно.

https://httptoolkit.com/blog/dictionary-compression-performance-zstd-brotli/

Navigation API — теперь во всех браузерах

Как же я жду, когда эту апишку можно будет смело тащить в продакшен!

Как мы до сих пор работали со SPA:
• подписываемся на клики по ссылкам;
• или пытаемся вклиниться в History API;
• по клику делаем preventDefault;
• имитируем работу браузера, но через JS (ходим за данными, собираем компоненты, рендерим);
• обязательно руками обновляем window.history.

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

Navigation API переворачивает процесс в правильную сторону:
• пользователь как-то изменяет URL страницы (ссылка, JS, серверный заголовок);
• мы подписываемся на событие изменения урла;
• вклиниваемся в ивент, если нужно, через event.intercept;
• имитируем работу браузера (ну а как без этого).

Кода меньше, урл становится единым источником правды, не толкаемся в History API с самим браузером. Хорошечно же!

Осталось дождаться 2.5 года, когда фича станет Widely Available. И когда фреймворки это внутрь себя затащат, чтобы нам меньше думать нужно было.

https://web.dev/blog/baseline-navigation-api

Холивар про Tailwind

Опытные слушатели подкаста «Веб-стандарты» знают, что его ведущие, включая меня, слегка предвзяты по отношению к Tailwind. Нам за это и в письма прилетает, и в комменты на ютубе, и при личных встречах. Просили позвать кого-нибудь действительно разбирающегося.

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

https://t.me/webstandards_ru/7667

Будущее карьеры разработчика

Внезапно не про веб, а про профессию в целом.

Маттео Коллина (легенда) поделился своим видением, что изменится в нашей работе и в карьерных возможностях будущих новичков.

• Фундаментальные знания стали ещё важнее. Так как LLM может взять на себя написание кода, кто-то должен ревьюить то, что оно напишет. И заранее можно эффективнее задачи ставить, если чётко формулировать, со знанием дела.

• Стажировки — самый правильный способ вкатиться в IT. Джуны с рынка не интересны, компаниям интереснее брать мотивированных новичков, которых можно обучить тому самому фундаменту. Чтобы с LLM работать эффективнее. Рынок сейчас принадлежит компаниям, правила устанавливают они.

• Индивидуальное решение сделать всё проще, универсальное не всегда нужно. Я уже сейчас иногда для себя вайбкодю то, что мне поможет решить текущую задачу разово, а не пытаюсь адаптировать универсальные инструменты. И такого будет всё больше.

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

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

https://adventures.nodeland.dev/archive/the-future-of-the-software-engineering-career/

NES.css

Нашёл визуальное наслаждение. CSS-библиотеку, которая превращает интерфейс в 8-битную игру. Олдскулы радуются.

Проект, к сожалению, не обновлялся с 2021 года. Но это не мешает вдохновиться и форкнуть, если очень нужно.

https://nostalgic-css.github.io/NES.css/

Книга ‘Accessibility for Everyone’

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

Несмотря на то, что книге уже 9 лет, знания из книги во многом всё ещё актуальные. Да, появились WCAG 3, новые законы и акты о доступности. И в момент написания книги не было LLM-агентов, которым можно скормить гайдлайны, чтобы они помогали писать хороший код. Но для погружения в тему — самое то.

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

https://accessibilityforeveryone.site/

Browser Score

Страничка от Лии Веру, которая проверяет, какие фичи CSS ваш браузер поддерживает. Раньше это называлось CSS3 Test, но CSS3 — устаревший термин, даже в вакансиях вижу его всё реже.

Практическое применение у него есть полезное как минимум для процессов поддержки. Можно просить пользователя, у которого что-то визуально сломалось, открыть страницу и через девтулзы сделать её скриншот полностью (если пользователь знает, что такое девтулзы). Это всё равно проще, чем пытаться на машине разработчика имитировать все браузеры мира.

https://browserscore.dev/

Flexbox Masonry Layout

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

На самом деле получился не совсем masonry, а только очень частный его случай. И на узких экранах подход ломается. Но для реализации фотогалереи с превьюшками, честно говоря, идея очень интересная, к тому же не нуждающаяся в JavaScript — всё на CSS-переменных и небольших `atan2`-хаках.

Советую вчитаться в демки всем любителям математики в интерфейсах.

https://frontendmasters.com/blog/flexbox-masonry-layout-explained-with-math/

Два круга, одна стрелка и Anchor Positioning

Темани Афиф продолжает экспериментировать с различными свежими API, чтобы исследовать их пользу на практике.

Задача: соединить два круга стрелкой. Круги можно двигать при помощи JS. Для усложения над стрелкой нужно выводить расстояние между кругами, без JS. И двигать круги можно вообще как угодно. Темани по шагам, демка за демкой приходит к реализации.

А потом ради интереса реализует на CSS алгоритм нахождения кратчайшего пути в графе. Потому что может.

Когда-то давно у меня был доклад с названием «CSS — язык программирования». Кажется, пора с него сдуть пыль и переделать под современные реалии.

https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/

Шрифт-график Datatype

Крайне интересная находка. Вариативный шрифт Datatype, который превращает инструкции текстом в графики. Например, {l:15,45,90,30,75,20,85,95} — линейный график, {b:30,70,50,90} — диаграмма столбиками, {p:65} — круговая диаграмма. Собсна, пока всё. Вся магия в лигатурах.

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

https://franktisellano.github.io/datatype/

Axios скомпрометирован

В блоге Socket подробно разбирается свежий взлом супер-популярного пакета Axios. Рассказывают, как он затронул экосистему и что делать, чтобы подобные атаки вас не задевали.

Для начала, обязательно проверьте, есть ли у вас где-то версия 1.41.1 в зависимостях и в зависимостях зависимостей. Важно не просто найти подстроку, но и проверить разрешённые диапазоны типа ^1.13.5.

Затем убедитесь, что нигде в пайплайне не используете npx — в нём у вас контроль минимальный. К слову, npx часто используют для работы с MCP, привет современной разработке. Если npx ну очень нужен, перейдите на --no --offline.

А потом внимательно прочитайте статью и прислушайтесь к советам из неё. Кстати, ещё можно перейти на pnpm, он по умолчанию более требовательный к любым зависимостям.

https://socket.dev/blog/hidden-blast-radius-of-the-axios-compromise