🌸 Еженедельный дайджест #36: Новости фронтенда 🌸

🧪 HTML и Платформа

Вы можете использовать символы новой строки (и табуляции) в URL

Дэниел Лемир понятно объясняет нюансы спецификации WHATWG URL, показывая, что браузеры допускают использование символов новой строки и табуляции внутри URL. Да, технически это не совсем валидно, но это работает. Это позволяет делать длинные строки более читаемыми. Статья Дэниела Лемира

Начало работы с Popover API

Popover API превращает всплывающие подсказки из того, что вы симулируете с помощью JavaScript, в то, что браузер понимает нативно. Это хорошее введение в использование API от Годстайма Абуру.

💡 Зелл Лью недавно задался вопросом, что и когда использовать: Popover API или Dialog API?

Chrome переходит на двухнедельный цикл релизов

Начиная с сентября, в попытке «соответствовать требованиям современного веба», Chrome перейдет с четырехнедельного на двухнедельный цикл выпуска стабильных версий. Об изменениях для каналов Dev и Canary не сообщается. Подробности можно узнать в официальном блоге Chrome для разработчиков.

• 🧭 Вышла Safari Technology Preview 238. Она добавляет поддержку нового настраиваемого элемента <select>. Смотрите заметки о релизе.

• ⚙️ Рэйчел Эндрюс делится последним обновлением веб-платформы. Ознакомиться с ним можно по этой ссылке.

• border-shape: будущее неквадратного веба Автор Уна Кравец рассказывает о новом мощном CSS-свойстве border-shape, которое скоро появится в браузерах. Оно позволит разработчикам задавать элементам не только прямоугольные, но и любые другие произвольные формы границ.

• Исчерпывающее руководство по стилизации списков с помощью CSS Ричард Разер создал подробное руководство, которое поможет вам вывести стилизацию списков на новый уровень. В статье подробно разбираются свойства list-style, псевдоэлемент ::marker, функции counters() и counter(), а также правило @counter-style. Если вы хотите научиться создавать по-настоящему крутые списки, это чтение обязательно для вас.

• Ключевые слова для CSS text-indent? Короткое и полезное видео о том, как использовать ключевые слова each-line и hanging в связке со свойством text-indent. Это простой способ сделать типографику на вашем сайте более профессиональной и аккуратной.

• Потенциально скоро в вашем браузере появится :near() Дэниел Шварц Дэнни размышляет о возможностях нового псевдокласса :near(), который сейчас находится на стадии предложения. Эта функция позволит отслеживать, когда курсор мыши находится рядом с элементом, открывая новые горизонты для интерактивных интерфейсов.

🎨 CSS и дизайн

Эксплойт… в CSS?!

Уязвимость, описанная в статье (первая крупная zero-day эксплойт 2026 года), связана с обработкой Chromium CSS-правила @font-feature-values, но запускается через JavaScript. Ли Мейер исследует эту проблему и настоятельно рекомендует обновить браузеры.

Chip Away (Критика «чипсов»)

Донни Д’Амато критикует часто используемый паттерн дизайна — «чипсы» или небольшие плашки с текстом, — указывая на их недостатки и предлагая альтернативы.

• Липкая сетка с прокруткой: создание анимированной сетки, управляемой прокруткой — Эффекты, управляемые прокруткой, могут быть разными, но этот выглядит действительно круто. (Автор: Тео Плавински)
• Различие между «компонентами» и «утилитами» в Tailwind от Зелла Лью.
• Полное руководство по букмарклетам от Деклана Чидлоу.
• 📄 W3C опубликовал документ «CSS Snapshot 2026». Он определяет текущее состояние спецификации CSS. Важно отметить, что документ предназначен скорее для разработчиков браузеров, а не веб-разработчиков. Ознакомиться с документом.

📦 JavaScript

Внешние карты импорта доступны уже сегодня!

Ли Веру (Lea Verou) предложила решение проблемы с веб-зависимостями, которая обсуждалась несколько недель назад. Техника, позволяющая эмулировать поддержку внешних карт импорта (import maps), проста, но неочевидна, и она уже реализована в JSPM 4.0.

Почему WebAssembly — язык второго сорта в вебе?

WASM прошел долгий путь, но с ним по-прежнему сложно работать из-за огромного количества связующего кода. Райан Хант в статье на Mozilla Hacks доказывает, что модель компонентов WebAssembly (Component Model) может изменить ситуацию, позволяя модулям напрямую взаимодействовать с браузерными API и загружаться прямо из тегов <script>.

Мы заслуживаем лучший Streams API для JavaScript

Джеймс М. Снелл (James M Snell) публикует пост, чтобы начать разговор о проблемах текущего Streams API. Он демонстрирует альтернативный подход к работе с потоками, который обходит “фундаментальные проблемы удобства и производительности” текущего стандарта. Его аргументы и опыт выглядят очень убедительно.

Навигационный API теперь в Baseline

Navigation API стал новым стандартом (Baseline Newly Available) и теперь поддерживается во всех основных браузерах. Этот API упрощает управление навигацией в одностраничных приложениях (SPA).

Иллюзия JavaScript-защиты от копирования

Ахмед Арат (Ahmed Arat) на примере взлома защиты одного (не совсем безопасного для работы) сайта объясняет, почему создание системы DRM/защиты от копирования только на JavaScript (в отличие от подходов на базе EME) — это не более чем “сложное создание препятствий”.

От instanceof к Error.isError для безопасной проверки ошибок

Мэтт Смит (Matt Smith) рассказывает, как перейти от instanceof к Error.isError для более надёжной проверки ошибок в JavaScript.

Проксирование fetch-запросов на серверном JavaScript

Николас Закас (Nicholas C. Zakas) делится опытом о том, как проксировать fetch-запросы на стороне сервера.

Вышел Bun v1.3.10: неожиданно большое обновление

Вышла новая версия Bun — быстрого инструмента для JavaScript и TypeScript. В этом релизе полностью переписали REPL (интерактивную среду), сделав её удобнее и красивее. Появилась опция --compile --target=browser, которая позволяет собирать самодостаточные HTML-файлы, включающие в себя весь JavaScript, CSS и другие ресурсы — идеально для простых одностраничных приложений. Также добавлена полная поддержка ES-декораторов (этап 3 TC39), ускорен цикл событий и улучшена оптимизация импортов.

Deno 2.7

Вышел Deno 2.7 — альтернативный рантайм для JavaScript. В новой версии стабилизирована поддержка Temporal API (современная работа с датами и временем), добавлена поддержка Windows на ARM и возможность использовать overrides в package.json.

⚛️ React и фреймворки

Как использовать компонент Activity в React 19.2 для сохранения состояния видео

Джошуа Алфонс из Mux на примере видео показывает, как использовать новый компонент Activity из React 19.2, чтобы сохранять позицию воспроизведения видео даже тогда, когда компонент скрыт из вида. Этот прием пригодится в любых ситуациях, где нужно, чтобы состояние компонента не сбрасывалось при смене видимости. Подробнее в блоге Mux.

• Кент С. Доддс рассказал о своем опыте миграции с Remix v2 на React Router v7, используя ИИ-инструмент Cursor. Он подробно описал, как автоматизировал этот процесс.

📘 TypeScript

Заметки по миграции с TypeScript 5.x на 6.0

Опубликованы подробные заметки для перехода с TypeScript 5 на TypeScript 6.0. Автор предполагает, что их можно скормить ИИ-агенту для помощи в миграции.

⚙️ Node.js

Эволюция графика релизов Node.js: работа в процессе

Команда Node.js давно обсуждает возможность перехода на новый график — один крупный релиз в год вместо двух. Предлагается убрать разделение на четные и нечетные версии, сделав каждый релиз LTS-версией (с предварительными 11 месяцами статуса alpha/current). Это предварительный анонс, окончательная публикация ожидается в апреле, поэтому всё может измениться (вот ссылка на резервную версию). Забавный побочный эффект: последняя LTS-версия Node будет совпадать с годом. Например, Node 28 станет LTS в 2028 году, и так далее.

Вышел Node.js 25.8.0 (Current)

Обычный промежуточный релиз, но с интересным дополнением — флагом --permission-audit. Если вы хотите использовать модель разрешений или отлаживать ошибки, связанные с ней, этот флаг включает модель в режиме «только предупреждение». Это отличный способ провести аудит вашего приложения перед полноценным включением функции.

OpenJS запускает программу модернизации Node.js

The OpenJS Foundation запустила программу по обновлению и модернизации Node.js, направленную на помощь предприятиям в безопасном переходе с устаревших и неподдерживаемых версий Node.js.

Почему я выбрал Electron вместо нативных технологий (и сделал бы это снова)

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

npmx.dev: новый быстрый поиск по npm-реестру

npmx.dev — это новый способ быстрого поиска и просмотра официального npm-реестра, который на этой неделе перешел в стадию альфа. Пост с подробностями.

⚒️ Инструменты и библиотеки

Вышел AdonisJS v7: “всё включено” для Node.js

AdonisJS — популярный Node.js-фреймворк, который предоставляет всё необходимое “из коробки”: аутентификацию, ORM, очереди, тестирование и многое другое. С выходом седьмой версии появился совершенно новый сайт, интеграция с OpenTelemetry и новые стартовые наборы для быстрого создания приложений.

React PDF 10.4

Вышла версия React PDF 10.4 библиотеки для отображения PDF-документов в React-приложениях. Обновление добавляет возможность переопределять цвета, используемые при рендеринге.

Yoopta Editor 6.0: головной редактор текста для React

Yoopta Editor — это библиотека с открытым исходным кодом (лицензия MIT) для создания блочных редакторов текста в стиле Notion. Он является “головным” (headless), что даёт полную свободу в дизайне, но уже включает множество UI-компонентов для быстрого старта. Посмотрите живой пример на площадке.

ng2-charts: графики для Angular на Chart.js

Библиотека ng2-charts для создания графиков в Angular, основанная на Chart.js, теперь поддерживает Angular 20.

vue-superselect: головной селект для Vue 3

vue-superselect — это “головная” (headless) библиотека для создания выпадающих списков и комбобоксов во Vue 3.

Milkdown 7.19

Вышел Milkdown 7.19 — фреймворк для создания WYSIWYG-редакторов markdown с плагинной архитектурой.

▶  Пробуем новый CodePen 2.0

Мы большие фанаты CodePen, и здорово видеть, как платформа развивается с новыми функциями и полным переписыванием кода. Кэсси Уильямс рассказывает об изменениях в новом видео: новая файловая система, вкладки, процессоры кода и многое другое. Сейчас идет закрытое бета-тестирование, но можно запросить приглашение.

ASCII Drawing Board: веб-инструмент для рисования ASCII-диаграмм

У этого инструмента от Дениса есть несколько интересных функций, включая «кисть» трех размеров, настраиваемый размер холста и возможность сохранять текстовые «кисти» для последующего использования.

Swatchify: извлечение доминирующих цветов из изображений

Доступен как CLI на Go, JS-библиотека и REST API. Инструмент Джеймса Кэмпбелла работает полностью в браузере и не имеет зависимостей. Принимает 6 различных форматов изображений и выводит результат в виде текста, JSON или PNG-палитры. Репозиторий здесь.

8bitcn/ui: набор из более чем 50 доступных компонентов в ретро-стиле

Для тех, кто любит пиксельную графику 80-х! Платформа от OrcDev также является реестром shadcn/ui, поэтому вы можете легко добавлять свои компоненты. Код здесь.

Heatmap: просмотрщик изменений для ревью кода

Просто замените «github․com» в любом URL пул-реквеста на «0github․com» и увидите цветную разметку каждой строки/токена, показывающую, сколько внимания требует данный PR от человека.

VMPrint: движок верстки на чистом JS для идеального вывода PDF

Обычно для печати в PDF используют headless-браузеры, но VMPrint гарантирует идентичный макет при идентичных входных данных, вплоть до позиции каждого символа. Вот пример PDF.

Dinero.js 2.0: безопасная работа с денежными значениями

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

TinyBase 8.0: Реактивное хранилище данных для локально-первых приложений

TinyBase — это реактивное хранилище данных, которое может выступать в роли полноценного бэкенда для многих типов приложений. Оно отлично работает само по себе или интегрируется с облачными хранилищами, клиентскими БД и SQL. В версии 8.0 появилась поддержка middleware и возможность хранить объекты и массивы в «ячейках». Узнать больше о новом релизе.

React Native Grab: мгновенный поиск исходного кода по UI

Команда Callstack представила раннюю версию полезного инструмента для разработчиков React Native. React Native Grab — это middleware для Metro, которое позволяет встряхнуть устройство, войти в режим «захвата», нажать на любой элемент интерфейса и сразу же получить в буфер обмена путь к файлу с его исходным кодом и контекст компонента. Проект вдохновлен React Grab и доступен на GitHub.

txiki.js: маленький и мощный JavaScript-рантайм

txiki.js — это новый JavaScript-рантайм, построенный на базе QuickJS-ng и libuv. Он небольшой, но мощный, поддерживает последние возможности ECMAScript и соответствует стандартам WinterTC. Исходный код доступен на GitHub.

Обновления

• Fastify 5.8 — быстрый веб-фреймворк получил тайм-ауты на уровне обработчиков и совместимость с Pino v9/v10.
• GramIO 0.7 — фреймворк для Telegram Bot API с поддержкой Telegram Bot API 9.5.
• mp3tag.js 3.16 — чтение и запись ID3-метаданных в MP3, MP4/M4A, AIFF и AAC файлы.
• sax-js 1.5 — SAX-стиль парсер XML и HTML от Исаака Шлютера.
• jose 6.2 — библиотека для JSON Object Signing and Encryption.
• NodeBB 4.9 — форумное ПО на Node.js.
• AVA 7.0 — популярный тест-раннер для Node.js.
• React Native Skia 2.5 — высокопроизводительная 2D-графика на базе Skia для React Native. Документация.
• React-Custom-Scroll 7.1 — библиотека для кастомизации полос прокрутки с сохранением нативного поведения. Теперь с поддержкой React 19. Демо.
• Cron Generator 2.2 — компонент для визуального создания cron-выражений. Демо.
• next-translate 3.0 — инструмент для легкой интернационализации (i18n) в Next.js.
• React Icons 5.6 — популярная библиотека для подключения иконок в React-приложения.
• ilamy Calendar 1.4 — полнофункциональный компонент календаря в стиле Google Календаря.