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

05 июня 2025 г.

🧩 HTML и доступность

Accessibility Report 2025

Обзор текущего состояния доступности в email-клиентах. Полезно, если вы работаете с рассылками.

HTML5 элементы, которые вы могли не знать

Краткий обзор полезных, но редко используемых HTML-элементов — dialog, meter, summary и другие.

Вы можете стилизовать alt-текст как обычный текст

Оказывается, alt-текст можно сделать видимым и стилизовать его через CSS. Неожиданно и интересно.

🎨 CSS

Использование `reading-flow` для логичной навигации по фокусу

Новая фича reading-flow и reading-order позволяет управлять порядком, в котором элементы получают фокус при навигации с клавиатуры. Это особенно полезно для доступности и нестандартных макетов.

Создание “капельных” форм с помощью `clip-path: shape()`

Функция shape() в clip-path позволяет вырезать произвольные формы. В статье показано, как сделать “пузырчатые” формы без SVG.

Гибкая обёртка с CSS Grid

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

Альтернатива селектору Owl с `margin-trim`

Видео показывает, как можно заменить селектор * + * с помощью новой экспериментальной фичи margin-trim, чтобы избавиться от лишних внешних отступов между элементами.

Стилизация иконки у input[type=“date”] и time

Можно кастомизировать иконку календаря и часов с помощью псевдокласса ::-webkit-calendar-picker-indicator.

Знакомство с View Transitions

Переходы между страницами теперь можно сделать плавными без JS-фреймворков — CSS умеет красиво анимировать переходы.

CSS Logical Properties

Краткое введение в логические свойства, такие как margin-inline-start, которые упрощают стилизацию для разных языков (LTR и RTL).

Layout-паттерн masonry и новое предложение Flow

Обсуждение подходов к созданию “кирпичной” раскладки и предложений по улучшению поддержки таких паттернов в CSS.

CSS-анимация модального окна по `shape()` траектории

Пример, как можно анимировать модальное окно, двигая его по произвольной траектории.

Создание анимированной product-сетки с GSAP и clip-path

Пример динамичного UI с использованием библиотеки GSAP и современных CSS-фич.

Анимации с прокруткой в CSS-карусели

Урок по созданию “scroll-driven” анимаций внутри каруселей — выглядит круто и работает нативно.

⚛️ React

KendoReact — 50+ готовых React-компонентов

Библиотека UI-компонентов с бесплатным использованием и без ограничений. Можно пробовать сразу.

React, визуализированный

Наглядный курс по ключевым концепциям React, включая новинки из React 19: Server Components, actions, transitions.

Сборка React-приложения с помощью GitHub Copilot

Гайд по тому, как использовать Copilot для автоматизации написания современного фронтенда на React.

🎥 Видео с Google I/O

Что нового в DevTools: Debugging Performance — обзор нового интерфейса панели Performance.
Что нового в Web UI — наглядный обзор новых визуальных фич.
Будущее анимаций в вебе — View Transitions, scroll-animations и многое другое.
AI-агенты в браузере — как AI будет помогать пользователям выполнять действия.
AI в DevTools — как встроенный AI-ассистент помогает меньше переключаться между вкладками.

📄 Полезные статьи

Remix

Wake Up, Remix! Everything’s Changing.. Remix больше не фреймворк на React. Теперь это легковесный fullstack-фреймворк, построенный на Preact и Web API. Он ориентирован на модели данных и почти не имеет зависимостей.

Angular

Angular v20 Новая стабильная версия с доработанными “signals”, инкрементальной гидратацией и новыми API вроде httpResource.
Собери блог за 30 минут на Angular с Analog Analog — это мета-фреймворк для Angular, аналогичный Next.js.

⚙️ JavaScript: API и стандарты

Новая Temporal API Спустя годы разработки Temporal API, наконец, включена по умолчанию в Firefox. Это современная замена Date, решающая многие старые проблемы с работой с датами.
Почему даты 2025/05/28 и 2025-05-28 в JavaScript — это разные дни? Неожиданная тонкость при работе с датами, которую стоит знать, чтобы избежать багов.
Обзор TC39 №108 В работе новые фичи, например Error.isError() достиг стадии 4, а генерация случайных чисел с зерном (Seeded PRNG) — стадии 2.

📢 Новости из мира JavaScript

Обзор 108-й встречи TC39 — новые фичи JS
Stack Overflow Developer Survey 2025
Что даст Temporal API в JS
Идеальный монорепозиторий

⚛️ React

React, Visualized Визуальное объяснение ключевых концепций React, включая новинки из React 19: actions, transitions и серверные компоненты.
ReactJust Использование серверных компонентов React (RSC) без фреймворков вроде Next.js.
Redwood SDK: рефакторим meta-фреймворк Команда Redwood переписала всё с нуля — теперь их SDK построен на принципах простоты и гибкости.

📚 Статьи и видео

Как Chrome DevTools помогает отладить производительность — видео от Пола Айриша.
3 способа, как фреймворки рендерят DOM — краткий техразбор подходов от автора SolidJS.
Сборка LMS SaaS с нуля на Next.js + AI
Multithreading в JS через Web Workers — базовое введение.
Умные Related Posts в Astro — без сервера и БД.
JavaScript CAPTCHA-защита через ‘Proof of Work’
Запуск GPT-2 в WebGL — хакерский эксперимент в мире шейдеров.
Насколько сложно по-настоящему обезопасить HTML-форму — короткое эссе о реальных проблемах безопасности.

🔍 SEO и поиск

Как сделать ваш контент более заметным в AI-результатах поиска Google

Google активно внедряет AI в поиск. В этой статье — советы, как адаптировать контент под новые форматы выдачи.

Как работает AI-режим и что с этим делать SEO-специалистам

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

📰 Разное

bit.dev — AI-powered workspace для компонентов

Инструмент для создания переиспользуемых компонентов и архитектурной изоляции.

Красивая кастомная контекстная менюшка в стиле “неонового стекла”, использующая продвинутые фильтры и наложения.

Безопасность AI-приложений на Node + Llama Stack

Рассказ о фреймворке от Meta для разработки AI-приложений на Node, Python и других языках.

🧠 Кратко

📦 Обновления и релизы

ESLint v9.28.0 — больше поддержки TypeScript в core-правилах
Express Zod API 24.0 — поддержка Zod 4
Bun v1.2.15 — новая команда bun audit для аудита зависимостей
pdf2html 4.0 — конвертация PDF в HTML
Ink 6.0 — React для CLI, поддержка React 19
Ts.ED 8.11 — Node + TypeScript фреймворк
Tinypool 1.1 — минималистичная реализация worker thread пула
Bun 1.2.15 — появилась команда bun audit для анализа уязвимостей.
Ink 6.0 — React для CLI теперь с поддержкой React 19.
Docusaurus 3.8 — генератор статических сайтов для документации.
NeutralinoJS 6.1 — фреймворк для десктопных приложений.
Faker 9.8 — генерация фейковых данных.

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

🧩 HTML и доступность

🎨 CSS

⚛️ React

🎥 Видео с Google I/O

📄 Полезные статьи

Remix

Angular

⚙️ JavaScript: API и стандарты

📢 Новости из мира JavaScript

⚛️ React

📚 Статьи и видео

🔍 SEO и поиск

📰 Разное

🧠 Кратко

📦 Обновления и релизы

🛠 Инструменты