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

🧪 HTML и API

Иллюстрированное руководство по Big O и временной сложности

Интерактивное визуальное эссе о том, как работает нотация Big O и зачем она нужна для оценки скорости алгоритмов. Даже если вы уже знакомы с O(log n) или O(n^2), это отличный способ закрепить знания. Автор также сделал классные статьи про балансировку нагрузки, распределение памяти, хеширование и фильтр Блума.

• Обзор возможностей CSS и HTML без JS.

🎨 CSS и дизайн

🎲 CSS random()

Теперь в CSS появится функция random(), которая позволяет генерировать случайные значения без использования JavaScript. Это значит, что можно будет задавать случайные задержки анимаций, случайное расположение элементов или даже случайные цвета. Пока функцию можно попробовать в Safari Technology Preview.

💡 Крис Койер уже попробовал random() в деле и отметил, что работать с ней просто и приятно.

🎨 Гладкие края с помощью radial-gradient()

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

📏 Разбираемся в CSS-единицах длины

Краткий обзор всех доступных единиц длины в CSS: от абсолютных (px, cm) до относительных (em, rem, vh, vw). Автор объясняет, когда лучше использовать каждую из них и рассказывает о редких единицах.

🌈 Что такое OKLCH цвета?

OKLCH — это новый цветовой формат, который лучше отражает восприятие цвета человеком. Он обещает более точные и предсказуемые цвета, чем привычные RGB или HSL.

🌀 История создания сервиса gradient.style

Адам Аргайл рассказывает, как он делал генератор CSS-градиентов, который полностью соответствует спецификации. Отличный взгляд изнутри на процесс проектирования.

➕ Свойство interpolate-size как пример прогрессивного улучшения

Энди Белл показывает, как новое свойство позволяет плавно анимировать изменение размеров элементов, сохраняя совместимость с браузерами, которые его не поддерживают.

🛑 Четыре причины отказаться от CSS-препроцессоров

Ансельм Ханнеманн объясняет, почему современные возможности CSS делают использование препроцессоров вроде Sass или Less всё менее актуальным.

📦 JavaScript

Проблема с товарным знаком «JavaScript»

Доктор Аксель Раушмайер рассказывает, как компания Oracle до сих пор владеет правами на название «JavaScript». В статье описывается история, современные юридические споры и даже попытки оспорить это право. Есть и видеоразбор от Fireship, а также кампания по сбору средств для продолжения борьбы.

• Бенчмарки минификаторов JS, новый участник — cminify.

📦 TypeScript 

• Даниэль Розенвассер предлагает включить --strict по умолчанию в TypeScript 6.0. Подробнее о планах — здесь.

⚛️ React

Plate: создаём свой rich-text редактор

Plate — это фреймворк для построения редакторов форматированного текста на базе React. Он позволяет собирать редактор как конструктор: выбирать только нужные функции и расширения. У проекта есть подробная документация и репозиторий на GitHub.

Можно ли использовать LocalStorage вместо Context/Redux/Zustand?

Иногда встроенного API браузера localStorage вполне хватает для управления состоянием. Автор статьи разбирает, когда это уместно, а когда лучше использовать более сложные инструменты.

Streamdown: замена react-markdown с поддержкой стриминга

Библиотека react-markdown отлично рендерит Markdown, но не подходит для потокового контента (например, генерации текста от ИИ). Новый проект от Vercel решает эту задачу. 👉 Репозиторий GitHub.

▶️ Go to Source в TanStack Devtools

В видео показана новая функция: можно кликнуть на компонент в Devtools и сразу перейти в исходный код. Работает с любым JSX.

Руководство по self-hosting Next.js на продакшене

Автор делится опытом масштабирования Next.js-приложений: балансировка нагрузки, кэширование, настройка прокси и оптимизация изображений.

• useTransition и переупорядочивание обновлений состояния.
• Как сделать блог на React 19 и Strapi 5.
• Remix v3 отказывается от React в пользу собственного форка Preact. Это может заметно повлиять на экосистему.

⚙️ Node.js

Как Calm перевели свой Rush.js монорепозиторий на Node с поддержкой TypeScript

С версии Node 23.6 (и LTS начиная с 22.18.0) появилась возможность запускать TypeScript-код, просто удаляя типы. Команда Calm решила перейти на новый подход, чтобы ускорить работу и улучшить опыт разработчиков. В статье делятся трудностями миграции и итогами.

Ускорение экосистемы JavaScript: Semver

Автор показывает, как библиотеку semver, используемую в npm, yarn и pnpm, можно сделать в 33 раза быстрее. Это часть многолетней серии оптимизаций инструментов в JS-мире.

Устранение cold start JavaScript-функций в AWS Lambda

Новый ahead-of-time компилятор Porffor позволяет запускать процессы менее чем за миллисекунду. Это пока больше эксперимент, чем готовое решение для продакшена, но интересное направление развития.

• Node.js v24.7.0 добавил поддержку Web Cryptography API и постквантовых стандартов шифрования.
• 📄 Разбираем Promise.any() — как вернуть результат, когда выполнится хотя бы один промис.
• 📄 Форматирование единиц измерений с Intl.
• 📄 Промисы с нуля — статья для начинающих и продолжающих разработчиков.

Браузеры и платформы

• 🤨 Google не убивает XSLT — развеян слух о прекращении поддержки.
• 🤖 Vercel предложил встроенные инструкции LLM прямо в HTML.
• 🪟 Firefox добавил экспериментальную поддержку PWA на Windows.
• 🦊 Вышел Firefox 142 с обновлёнными возможностями для разработчиков.
• 🔎 В Chrome DevTools тестируют панель “AI Assistance”, которая помогает анализировать сетевые запросы.

📊 Видео и статьи

🖋️ Вы неправильно загружаете шрифты (и это замедляет сайт)

Джоно Алдерсон объясняет, как работают веб-шрифты и делится практиками, которые помогают ускорить загрузку сайта и избежать «прыгающего» текста.

🤖 Проектирование AI API в Chrome

Доменик Дениола из команды Chrome рассказывает, как проектировались новые встроенные AI API в браузере и какие решения принимались.

📱 Оптимизация PWA для разных режимов отображения

Прогрессивные веб-приложения должны хорошо работать не только в браузере, но и в «нативном» режиме. Автор рассказывает, какие проблемы могут возникнуть и как их решать.

• История о том, как обернуть JS-игру в десктопное приложение.
• Экспорт симуляции ткани из Blender в Three.js.
• Что нового в Angular 21 — теперь HttpClient встроен по умолчанию.
• Pyodide — Python в браузере через WebAssembly.
• GitHub теперь поддерживает WebP.
• Музыка для программирования.

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

Cronicle: распределённый cron с веб-интерфейсом

«Красивый заменитель cron» — это таск-менеджер и планировщик задач с UI и поддержкой распределённых систем. GitHub.

ImageJS 1.0: библиотека для обработки изображений

Поддерживает изменение размера, обрезку, фильтры, цветовые корректировки и многое другое. Работает как в Node.js, так и в браузере. Поддержка TypeScript и новая API. GitHub.

google-spreadsheet 5.0

Обёртка над Google Sheets API для Node. Позволяет работать с ячейками, строками и таблицами, поддерживает разные способы авторизации. GitHub.

Headless Tree: мощный компонент для деревьев

Компонент для отображения и работы с иерархическими структурами. В новой версии появилась поддержка множественного выбора. 👉 Репозиторий GitHub.

React-PDF 10.1

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

• Bun v1.2.1 — добавлен Bun.SQL с поддержкой MySQL, SQLite и Postgres, а также 500x ускоренный postMessage(string) (подробности).
• ESLint 9.34.0 — теперь поддерживает многопоточный линтинг, что ускоряет большие проекты.
• Vercel Functions теперь умеют обрабатывать fetch-запросы.
• Next.js 15.5 — стабильная поддержка Node.js middleware runtime.

Новые версии

• Repomix 1.4 — упаковка репозитория в один файл, теперь с историей коммитов.
• pg-promise 12.0 — Postgres-клиент для Node, теперь только ES6 Promises.
• yoctocolors 2.1.2 — минималистичная альтернатива Chalk для раскраски текста в терминале.
• Faker 10.0 — генерация тестовых данных, теперь только ESM.
• Sidequest.js 1.6 — планировщик фоновых задач для Node.
• Secretlint 11.2 — предотвращает коммиты с паролями и токенами.
• OpenAI Node 5.15 — официальный клиент OpenAI для Node.js.
• InversifyJS 7.9 — IoC-контейнер для Node.
• Node-SSH 1.17 — SSH2-клиент и сервер на JS.
• pnpm 10.15 — быстрый менеджер пакетов.
• Undici 7.15 — мощный HTTP-клиент для Node.
• 🟡 LiftKit — UI-фреймворк, построенный на золотом сечении. Использует относительные единицы для гармоничной сетки и отступов. Документация.
• Uppy 5.0 — модульный загрузчик файлов на JavaScript. Поддерживает загрузку из Dropbox, Instagram, возобновляемые загрузки и интеграции с фреймворками. GitHub.
• JSON Editor — редактор форм, основанный на JSON Schema. Можно попробовать в интерактивной демо-версии.
• Maple Mono — новый моноширинный шрифт с поддержкой Nerd Fonts. Документация.
• Konsta UI 5.0 — мобильные UI-компоненты на Tailwind с обновлённым дизайном iOS 26 и Material 2025.
• React Lite YouTube Embed 2.5.5 — быстрый и приватный способ встраивания YouTube.
• react-fontawesome 3.0 — официальный компонент для Font Awesome.
• React Aria (релиз от 25 августа).
• Rspack 1.5 — ускорили работу с barrel-файлами, файловой системой и браузерную поддержку.

Новые релизы

• Repomix 1.4 — упаковка репозитория в один файл, теперь с историей коммитов.
• pg-promise 12.0 — Postgres-клиент для Node, теперь только ES6 Promises.
• yoctocolors 2.1.2 — минималистичная альтернатива Chalk для раскраски текста в терминале.
• Sidequest.js 1.6 — планировщик фоновых задач для Node.
• Secretlint 11.2 — предотвращает коммиты с паролями и токенами.
• OpenAI Node 5.15 — официальный клиент OpenAI для Node.js.
• InversifyJS 7.9 — IoC-контейнер для Node.
• Node-SSH 1.17 — SSH2-клиент и сервер на JS.
• pnpm 10.15 — быстрый менеджер пакетов.
• Undici 7.15 — мощный HTTP-клиент для Node.
• Electron 37.4, Prisma 6.15.0, Ink 6.2.3
• Repomix 1.4 — упаковка репозитория в один файл.
• MikroORM 6.5 — ORM для Node.js с поддержкой TypeScript.
• jsPDF 3.0.2 — генерация PDF на клиенте.
• Faker 10.0 — генерация тестовых данных.
• Tiptap 3.3 — headless-редактор.
• RxDB 16.18 — offline-first база для JS.
• Denops.vim 8.0 — плагины для Vim/Neovim на Deno.