Состояние HTML 2025

Результаты ежегодного опроса о возможностях веб-платформы. Результаты охватывают формы, графику, производительность, API и доступность.

https://2025.stateofhtml.com/en-US/

Стилизация с учетом направления прокрутки с помощью scroll-state

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

https://una.im/scroll-state-scrolled

Аутентификация с React Router v7: полное руководство

React Router v7 предлагает унифицированный подход к роутингу, позволяя создавать защищенные маршруты и реализовывать двухфакторную аутентификацию. Он также поддерживает новый "data mode" для эффективной загрузки данных вне компонентов.

https://blog.logrocket.com/authentication-react-router-v7/

Набор инструментов для тестирования, отладки и анализа вебхуков.

Он позволяет захватывать, проверять и повторять запросы в реальном времени, не требуя использования локальных туннелей. Инструмент поддерживает мокинг API, валидацию JSON-схем и идеально подходит для отладки рабочих процессов со Stripe, GitHub и Shopify.

https://github.com/ar27111994/webhook-debugger-logger

Отладка с помощью сил древнего зла.

Этот устаревший HTML-элемент <plaintext> полностью останавливает парсинг страницы, отображая весь последующий контент как простой текст. Хотя его не стоит использовать в продакшене, он может помочь в быстрой отладке серверного вывода, но стоит быть внимательным к его взаимодействию с различными HTML-санитайзерами.

https://habr.com/ru/companies/ruvds/articles/981920/

Детектируем тряску мобильного устройства

Реализуем обнаружение встряхивания смартфона без использования сторонних библиотек, опираясь на нативный API devicemotion

https://slicker.me/javascript/shake/shake.htm

Веб-стандарты: выпуск 509

Антивебные API для веба, LLM помогает и убивает Tailwind, нездоровая зависимость от бандлеров

https://web-standards.ru/podcast/509/

JavaScript: прощай, Date, здравствуй, Temporal.

Встроенный объект Date давно доставлял неудобства разработчикам из-за своей нелогичности и изменяемости, что приводило к ошибкам и сложностям в работе со временем. Новый API Temporal призван решить эти проблемы, предлагая современный, более последовательный и функциональный подход к манипуляциям с датами и временем.

https://habr.com/ru/articles/984884/

Анимация переходов адаптивного макета сетки с помощью GSAP Flip

Туториал, показывающий, как плавно анимировать изменения размера и перестановку элементов сетки при динамических изменениях макета. Этот подход с использованием плагина GSAP Flip идеально подходит для создания интерактивных галерей и портфолио с бесшовными переходами.

https://tympanus.net/codrops/2026/01/20/animating-responsive-grid-layout-transitions-with-gsap-flip/

CSS в 2026 году: новые возможности, меняющие фронтенд-разработку

Современный CSS становится достаточно мощным для обработки сложных анимаций и пользовательских взаимодействий, которые ранее требовали JavaScript. Использование таких функций, как appearance: base-select, sibling-index() и улучшенного attr(), позволяет создавать интерактивные элементы с меньшим количеством кода, сохраняя при этом нативную доступность.

https://blog.logrocket.com/css-in-2026/

Как легко определить версии Safari и iOS

Почему стоит отдавать предпочтение проверке фич вместо ненадежного User-Agent

https://evilmartians.com/chronicles/how-to-detect-safari-and-ios-versions-with-ease

Тихая революция в CSS в создании вырезов в блоках

Пока мы делаем вид, что не прошляпили посты за ВСЮ прошлую неделю, предлагаем вам почитать как делать вырезы с использованием CSS-масок одной строчкой.

https://habr.com/ru/articles/993310

Claude Code Agent teams

Claude Code теперь поддерживает команды агентов, позволяя нескольким ИИ-помощникам работать над сложными задачами параллельно. Такая многоагентная координация ускоряет отладку и разработку, делегируя задачи специализированным агентам.

https://addyosmani.com/blog/claude-code-agent-teams/

Отладка перфоманса с использованием Chrome DevTools MCP

Пошаговый туториал автоматизированного анализа производительности веб приложений с помощью AI и Chrome DevTools MCP.

https://www.debugbear.com/blog/chrome-devtools-mcp-performance-debugging

Компилируем TypeScript в натив: хардкор и мясо

TSNative — это AOT-компилятор, который позволяет преобразовывать TypeScript-код в нативные бинарные файлы, используя LLVM IR. Это решение подходит для создания десктопных приложений, обеспечивая прямое взаимодействие с C++ без браузера или JavaScript-движка.

https://habr.com/ru/companies/ncloudtech/articles/990666

Браузер ненавидит сюрпризы

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

https://frontendmasters.com/blog/the-browser-hates-surprises/

CSS @scope: Альтернатива соглашениям об именовании и тяжелым абстракциям

Упрощаем поддержку стилей с новым правилом @scope, которое позволяет точно ограничивать область действия стилей в DOM.

https://www.smashingmagazine.com/2026/02/css-scope-alternative-naming-conventions/

Полифилл для switch

В Safari 17.4 появился новый нативный HTML элемент switch, который превращает обычный checkbox с атрибутом switch в переключатель. Для остальных браузеров есть полифилл. Подробее о нем — в статье

https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/

Я 💛 Фронтенд 2026

Прямая трансляция конференции которая начнется сегодня в 11:00 МСК

Программу можно глянуть тут.

https://www.youtube.com/live/Da3cJi7RDPg

Друзья!

Один из наших подписчиков вместе с командой запустил open source CSS-фреймворк mlut [млат].

mlut помогает верстать проекты с нешаблонным дизайном, где не подходят фреймворки старой школы и плохо справляются LLM. mlut похож на Tailwind, поскольку основан на подходе Atomic CSS, но по некоторым параметрам превосходит аналоги.

Ключевые особенности mlut
1. Краткий и строгий нейминг — cокращения основаны на популярности свойств CSS и составлены по единому алгоритму.
2. Богатый и нативный синтаксис
3. Написан на Sass. Позволяет использовать всю мощь препроцессора для связи рукописного CSS и утилит

На сегодня уже реализованы генератор утилит, CLI с минификацией и автопрефиксером, плагины для сборщиков и онлайн-песочница. А также есть обширная документация, плюс готовится серия уроков совместно с HTML Academy (тут первый).

Проект активно развивается в сторону добавления фич для сложной верстки и интеграции с IDE.

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