Frontend Weekly Поддержи
На главную

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

Узнать об инициативе
Как читать этот дайджест
  • Начните с заголовков статей, чтобы получить общее представление о содержании
  • Быстро пробегитесь по первым абзацам, чтобы понять актуальность материалов именно для вас
  • Выберите наиболее интересные или полезные темы под текущие задачи
  • Планируйте чтение: выделите, например, 15 минут утром и 15 минут вечером
  • Не пытайтесь прочитать всё сразу — возвращайтесь к дайджесту в удобное время
  • При повторном просмотре читайте выбранные статьи более вдумчиво, делая заметки
  • Не сожалейте, если прочитали лишь часть: ценность в качестве, а не в количестве
  • Используйте закладки для сохранения интересных материалов
  • Делитесь инсайтами и ссылками с коллегами — так информация лучше усвоится
HTML теперь сам смещает заголовки! 🏷️
CSS: цвета текут, как радуга 🌈
Liquid Glass — эффект, как у Apple! 💧
Тестирую на бюджетниках — как у людей 📱
Andromeda: новый движок на Rust? 🚀
Storybook теперь только ESM! 📦
Reciprocate — реактивность для Web Components ⚡
Безопасные методы массивов — не мутирую! 🛡️
Цвета в CSS теперь ещё плавнее 🎨
Google обновил Learn CSS — учусь новому! 📚
Фронти - маскот дайджеста

🧪 HTML и API

  • Атрибут headingoffset добавлен в HTML — WHATWG HTML добавил поддержку атрибута для автоматического смещения уровней заголовков внутри контейнера. Это решает проблему, когда встраиваемый контент нарушает иерархию заголовков страницы. Спецификация: heading levels & offsets. Обсуждение: issue #5033.

    🙏 Спасибо Сергею Артёмову за предоставленную новость!

  • Reciprocate для Web Components — сигнальная реактивность и отражение атрибутов/свойств в кастомных элементах. Анонс: статья · демо — пример · код — репозиторий.

🎨 CSS и дизайн

«Жидкое стекло» в браузере: преломление с CSS и SVG

В статье показано, как воссоздать эффект «Liquid Glass», похожий на анимации у Apple, комбинируя CSS, SVG displacement maps и простые физические расчёты преломления. Есть хорошие визуализации и песочница (пока лучше всего работает в Chrome). Почитать: «Liquid Glass in the Browser: Refraction with CSS and SVG». Кратко для новичков: вы узнаете, как добиться «стеклянного» искажения картинки, не прибегая к WebGL, а только на базовом стеке фронтенда.

Плавные смены цвета в CSS

Автор объясняет, как «переливать» цвета в интерфейсе: когда хватит простых переходов, где встретите подвохи разных цветовых пространств и как ускорить рендер с помощью CSS-фильтров. Читайте: «Color Shifting in CSS». Полезно новичкам: вы поймёте, почему transition: background 300ms иногда «ломает» оттенок, и что с этим делать.

Interop 2026: принимают предложения

Открыта форма, куда можно предложить фичи для совместной реализации браузерами в рамках Interop 2026. В статье — критерии «хорошего» предложения и апдейт по прогрессу Interop 2025. Подробнее: «Make Your Proposals for Interop 2026» и заметки от WebKit — комментарии Джен Симмонс. Если вы новичок: Interop — это инициатива, где браузеры договариваются «допилить» конкретные фичи согласованно, чтобы мы меньше писали хаки.

Выравнивание в CSS: фундамент

Как работают свойства выравнивания в разных раскладках (flex, grid и боксовая модель): не только align-*, а вся «семья». Хорошо, чтобы перестать «подбирать на глаз». Разобраться: Фундамент выравнивания.

Бюджетные и средние смартфоны 2025 и как под них тестировать

Не у всех топовый флагман. Автор сопоставляет реальные low/mid‑tier устройства с пресетами Chrome DevTools, чтобы тестировать «как у пользователей». В детали: Low/Mid‑tier для реального мира.

  • Email Verification Protocol — идея заменить «магические ссылки» криптографией. Почитать: описание протокола и прототип/дискуссия.
  • Интерполяция цветов в CSS — что такое интерполяция «между двумя цветами» и как она влияет на градиенты, переходы и миксы: «What You Need to Know About CSS Color Interpolation».
  • Курс Google Learn CSS обновлён — появились модули про nesting, anchor positioning, container queries и др.: обзор на web.dev.
  • CSS-спецэффект «голографической» карточки Покемонов — набор демо с 3D-трансформами, градиентами и blend-режимами: «Pokémon Cards CSS Holographic Effect».
  • CSS Handbook 2025 — бесплатный обновлённый справочник (по подписке на рассылку): «CSS Handbook (2025)».

Присоединяйтесь Telegram-каналу

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

Подписаться

📦 JavaScript

Andromeda — новый JS/TS‑рантайм

Появился рантайм вокруг движка Nova на Rust с обещаниями нативной компиляции в один файл, ускоренного 2D Canvas на GPU и межоп с Rust. Проект молодой, но амбициозный. Посмотреть анонс: знакомство с Andromeda. А про движок: Nova engine.

  • «Безопасные» методы массивов — почему toSorted, toSpliced и др. предпочтительнее мутирующих аналогов; с примерами: обзор методов.
  • Микрофронтенды с Module Federation и Vue — практическая статья с фокусом на сборку и интеграцию: подход и пример. — Intl Playground. Быстрый способ посмотреть, как опции Intl.DateTimeFormat выглядят «вживую»: зайдите на песочницу.

⚛️ React

Storybook 10 (бета): только ESM

Что изменилось: Storybook переходит на чистый ESM — меньше сложностей с форматами модулей и чуть компактнее установка. Почему важно: если ваш проект ещё зависит от CommonJS‑конфигов, потребуется миграция (есть инструменты‑помощники). Для новичков: ESM — это современный стандарт модулей в браузерах и Node, он упрощает сборку и улучшает DX.

— Ещё по теме: статья о том, как использовать встроенный тест‑раннер Node.js с TypeScript и React — если только знакомитесь с тестами без Jest/Vitest, это хороший старт. — 3D по‑человечески: React Three Timeline — пишем поведение в 3D как историю с async‑генераторами. Есть живое демо и исходники.

⚙️ Node.js

Крупная атака на цепочку поставок npm

Большое фишинговое радио попало к мейнтейнерам и привело к компрометации ряда популярных пакетов — от Chalk до debug. Если вы публикуете пакеты, включите 2FA и проверьте последние релизы на странные изменения. Подробности и сводка инцидента — в заметке от Socket: читайте разбор атаки. Дополнительно: упоминания затронутых пакетов — Chalk, DuckDB для Node.js, debug и другие.

Node‑серверы приезжают в Cloudflare Workers

Cloudflare добавила поддержку клиентских и серверных API из node:http прямо в Workers при включённой «совместимости с Node.js». Это значит, что привычные Express‑подобные приложения можно запускать ближе к пользователю на edge‑инфраструктуре без переписывания под Web API. Детали — в анонсе «Node HTTP‑серверы в Workers».

Как держать package.json под контролем

Том МакРайт делится практиками «гигиены зависимостей»: чем опасны распухшие node_modules, как выявлять неиспользуемое, фиксировать версии и держать скор на CI. Много практических советов и утилит. Начните с этого разбора: как укротить package.json.

Как работает bun install изнутри

Лидия Халли из команды Bun разобрала, почему установка пакетов — это сложно в любом менеджере, и как Bun ускоряет процесс: дедупликация, кэширование, разрешение зависимостей и оптимизация файловой системы. Хорошее «погружение под капот» для инженеров. Читайте пост: за кулисами bun install.

  • Express 5 в продакшене (2025) — чеклист настройки и лучшие практики: пошаговый гайд. — Vercel теперь «из коробки» поддерживает бэкенды на Express и добавил для Node‑функций graceful shutdown (500 мс на очистку) — см. объявление. — Вышел Node.js v20.19.5 (LTS) — в основном исправления и обновления зависимостей. — Чуть раньше вышел v22.19.0 (LTS): снят флаг с --experimental-wasm-modules, добавлен server.keepAliveTimeoutBuffer в http, а также возможность использовать системный центр сертификации через переменную окружения NODE_USE_SYSTEM_CA.

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

  • Почему стоит тестировать страницу без JavaScript — где ломается JS и какие «перила» ставить. Начать: тест без JS.
  • Оптимизация сторонних скриптов через Web Workers и Partytown — разгружаем главный поток. Гайд: оптимизация скриптов.

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

— Mediabunny — «комбайн» для работы с медиа без FFmpeg: можно делать превью, доставать метаданные и даже собирать видео кодом. Начните со страницы проекта Mediabunny и загляните в репозиторий.

— sqs-consumer 13.0 — упрощает написание приложений на базе Amazon SQS: просто пишете async‑обработчик сообщений. Подробнее: анонс. — github-script 8.0 — удобный способ вызывать GitHub API прямо из GitHub Actions на JavaScript, теперь с поддержкой Node.js 24. Подробнее: github-script 8.0 — Точные длины строк с Intl.Segmenter. Когда str.length путает из‑за эмодзи/комбинированных символов — поможет сегментация по графемам. Пример и объяснения: небольшая заметка. — «Полмиллиарда кликов на VPS за $4». Практический кейс оптимизации простого сайта на Node.js, который внезапно стал вирусным. Смотрим разбор. — Почему я ушёл с Docker на Podman. Автор объясняет плюсы Podman: совместимость CLI, rootless, изоляция и безопасность. Читать статью. — UDP в Node.js. Аккуратный технический гид по dgram и практикам работы с UDP‑сокетами. Полезно, если пишете системные сервисы. Подробнее: гайд. — NodeBook (в разработке). Глубокое погружение во внутренности Node: уже есть главы про движок V8 и циклы событий; стартовать можно со страницы NodeBook.

Обновления