Управление прокруткой с помощью CSS Scroll Snap Module Level 1

Продолжаю разбирать спецификации, связанные со скролом.

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

👉 https://shabalin.online/blog/css/scroll-snap/

Это уже четвёртая статья в серии про скрол. Впереди ещё две — Scroll Driven и Overflow. Возможно, дополнительно затрону и CSS Conditional Rules Module Level 5 — там можно определять позицию скрола и даже проверять, есть ли он у элемента.

Репостнишь? =)

🦊 Привет, это Фронти!

Я принёс свежий выпуск #38 и собрал главное за неделю ✨

В этом выпуске: наука про JPEG и «тяжёлые» новостные страницы, эмпирика по утечкам памяти, Temporal и итоги TC39, бенчмарки SSR и история про свой RSC-фреймворк, петиция про ИИ в ядре Node, стандарт source maps (ECMA-426), comprehension debt от Адди Османи, новинки Edge и Chrome на ARM64 Linux — плюс куча релизов экосистемы.

🧪 HTML и платформа
- Как устроено сжатие JPEG и «обман зрения».
- Аудит страницы на 49 МБ и сотни запросов — о чём это говорит о вебе.
- Утечки памяти во фронтенде: таймеры и обработчики в данных по 500 приложениям.

🎨 CSS и дизайн
- contrast-color() шире, чем чёрный/белый.
- Эксперименты с кастомными select.
- Аргументы в пользу того, что в CSS «не бывает неправильно».
- Toggletips на anchored container queries.
- Идея CSS, зависящего от времени суток.

📦 JavaScript
- Нативные JSON-модули.
- Temporal: долгий путь и поддержка в браузерах.
- TC39: движение Temporal, Import Text, Error Stack Accessor, Iterator Includes.

⚛️ React и фреймворки
- Бенчмарк SSR: TanStack Start, React Router, Next.js — и что из этого улучшили в React.
- Почему в Aha! написали свой фреймворк на RSC.
- TanStack Start: до ×5 пропускной способности SSR.
- Два спорных, но «неизбежных» решения в дизайне React — от Райана Карниато.
- Именовать эффекты в useEffect — маленькая привычка с пользой.
- Nuxt 4.4, Next.js 16.2 (Turbopack, ИИ), лучшие практики Svelte, разбор Vite 8 для новичков, минификация HTML в Astro.

📘 TypeScript
- Опыт переписывания 12-летней библиотеки конечных автоматов на TypeScript.

⚙️ Node.js
- Петиция об ограничении ИИ-сгенерированного кода в ядре и контекст большого PR.
- Зачем в ядре виртуальная файловая система (VFS).
- worker_threads на практике против «голодания» event loop.
- Предстоящие security-релизы, продвижение предложений с TC39, идея сжатия TLS-сертификатов.

🤖 ИИ
- Comprehension debt: когда важнее не «написать больше», а понять, что вышло в прод.

🌐 Браузеры и DevTools
- Edge 146: «сетевые защитные ограждения» для производительности загрузки.
- Chrome для ARM64 Linux в перспективе года.

🛠 Инструменты и библиотеки
- Source maps как стандарт ECMA-426.
- Edge.js: Node в Wasm-песочнице.
- Bun 1.3.11 с Bun.cron.

🦊 Лисья шутка недели:
Temporal шёл к стандарту дольше, чем некоторые мои «быстрые» рефакторинги пятницы вечером.
А пока мы спорим про ИИ в ядре Node, comprehension debt уже тихо подписался на наш репозиторий.

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-38/

🦊 Привет, это Фронти!

Я принёс свежий выпуск #39 и собрал главное за неделю ✨

В этом выпуске: мощный Safari 26.4 и 30 лет веба в интерактиве, CSS, который всё увереннее забирает задачи у JavaScript, разбор причин JavaScript bloat и неожиданный кейс, где TypeScript оказался быстрее Rust + WASM, стабильный Adapter API в Next.js 16.2, Storybook MCP и React Joyride 3.0, новые строгие дефолты TypeScript 6.0, security-релизы Node.js от 24 марта 2026 года, AI как «страховочная сетка» для рефакторинга и пачка свежих инструментов от Knip v6 до csskit и Bun 1.3.11.

🧪 HTML и платформа
- Safari 26.4 привёз Grid Lanes, улучшения Anchor Positioning, фиксы zoom и другие платформенные новинки.
- Web Rewind аккуратно проводит по 30 годам истории веба.
- Подсветка footnotes после перехода по ссылке.
- Firefox 149 получил split-view.
- Structure Revealer помогает быстро подсветить структурные HTML-элементы на странице.

🎨 CSS и дизайн
- Современный CSS всё чаще закрывает задачи, ради которых раньше по привычке тянули JavaScript.
- light-dark() хотят научить переключать не только цвета, но и изображения.
- Трюк с «блокером» для sticky header.
- Как навести порядок в цветовой системе через примитивы и семантику.
- contrast-color(), dropdown внутри scrollable containers, scroll-driven corner-shape и ещё пара красивых сценариев для Anchor Positioning.

📦 JavaScript
- Три столпа JavaScript-раздутия: совместимость из прошлого, микробиблиотеки и устаревшие ponyfill-подходы.
- Иногда TypeScript быстрее связки Rust + WASM, если дорогой оказывается сама граница между ними.
- Edge.js пробует запускать Node.js внутри WebAssembly-песочницы.
- pnpm 11 beta, bookmarklets, практический опыт с worker_threads и мини-реализация Vue в Chibivue.

⚛️ React и фреймворки
- Next.js 16.2 закрепил Adapter API и стал реалистичнее для разных платформ.
- Storybook MCP for React готовит экосистему компонентов к эпохе AI-агентов.
- data-testid как запах проблем с доступностью.
- React Joyride 3.0, TanStack DB 0.6, бенчмарк SSR-фреймворков, Semiotic 3.0, Storybook 10.3 и Astro 6.1.

📘 TypeScript
- TypeScript 6.0 делает строгие настройки новой нормой: strict, esnext, пустой types, уход от старого moduleResolution: node и новые сюрпризы в rootDir.

⚙️ Node.js
- 24 марта 2026 года Node.js выпустил security-релизы и закрыл 9 уязвимостей.
- Технический разбор новой защиты V8 от HashDoS.
- История про «потерянные» 400 МБ памяти в Node/WebSocket-поде.
- Петиция против AI-кода в ядре Node и напоминание, что Deno никуда не исчезает.

🤖 ИИ
- CSS-рефакторинг с AI safety net вместо бесконтрольного vibe coding.
- Designing with Claude Code глазами дизайнера.
- React Native Executorch и on-device AI.
- Dan Abramov использовал Claude для фикса бага в React.
- WordPress.com пускает AI-агентов к управлению сайтом, а open source-проекты продолжают формулировать свои AI-политики.

🛠 Инструменты и библиотеки
- Knip v6 стал быстрее в 2-4 раза.
- Knex.js 3.2 и возвращение активной разработки.
- csskit как быстрый универсальный toolchain вокруг CSS.
- ArrowJS 1.0, Secretlint, Bun 1.3.11, OpenAI Node 6.33.0, Jotai 2.19.0, React Stripe.js 6.0 и другие обновления экосистемы.

🦊 Лисья шутка недели:
CSS всё активнее забирает работу у JavaScript, а TypeScript 6.0 уже смотрит на старый tsconfig тем самым взглядом: «нам надо серьёзно поговорить».
И пока Storybook учится объясняться с агентами, мои старые data-testid всё ещё делают вид, что с доступностью у них «просто дружеские отношения».

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-39/

Сегодня в Т-Технологиях программируем совместно с ИИ :)

🦊 Привет, это Фронти!

Я принёс свежий выпуск #40 и собрал главное за неделю ✨

В этом выпуске: Pretext с новым взглядом на измерение текста и живые layout’ы, мартовский срез веб-платформы и свежие CSS-эксперименты с contain и даже DOOM на CSS, напоминание о реальной цене supply chain через компрометацию axios, разбор signals и причин JavaScript bloat, React Joyride 3.0, Storybook MCP и Next.js 16.2 с Adapter API, новые строгие дефолты TypeScript 6.0, Node.js 25.9 с контролем памяти и новым streams API.

🧪 HTML и платформа
- Pretext предлагает по-новому измерять многострочный текст и собирать по-настоящему живые layout’ы.
- Мартовский обзор веб-платформы помогает быстро сверить, что уже дозрело в браузерах.
- Появился удобный обозреватель возможностей платформы с фильтрами по поддержке и стадиям.
- popover=hint напомнил, что наличие поддержки ещё не гарантирует предсказуемое поведение.
- История про сохранение веба снова поднимает важный вопрос: интернет не только строят, но и постепенно теряют.

🎨 CSS и дизайн
- CSS Containment всё ещё недооценён, хотя может заметно помочь с производительностью и изоляцией перерисовок.
- В draft для CSS Image Animation предлагают более явный контроль над анимированными изображениями.
- DOOM в 3D на CSS выглядит как шутка, но отлично показывает, насколько далеко зашли современные возможности платформы.
- Дизайн в коде снова звучит не как компромисс, а как способ стать сильнее в самой профессии.

♿ Доступность и UX
- Accessibility полезнее встраивать маленькими шагами в обычную работу, а не держать отдельной задачей «на потом».
- data-testid часто оказывается симптомом того, что интерфейс плохо выражен через доступные роли и элементы.
- Разобрали предзагрузку изображений, cookie consent в 2026 году, подводные камни magic links и аккуратную автоматизацию форм.

🔐 Безопасность
- Компрометация axios стала главным напоминанием недели о том, что supply chain-риск никуда не делся.
- Даже если axios не стоит у вас напрямую, стоит проверить дерево зависимостей и радиус поражения.
- В фокусе также безопасная публикация npm-пакетов, Secretlint и обход permission model в Node.js через Brotli.

📦 JavaScript
- Подробно разобрали, как внутри работают signals и почему современная реактивность устроена именно так.
- JavaScript bloat по-прежнему растёт из старой совместимости, микробиблиотек и инерции с ponyfills.
- Есть понятный вводный материал по npm Workspaces и живой кейс, где переход с Node.js на Bun дал резкий прирост пропускной способности.

⚛️ React и фреймворки
- Next.js 16.2 делает Adapter API всё более важной частью своей платформенной стратегии.
- Storybook MCP для React показывает, как UI-инструменты начинают готовиться к эпохе AI-агентов.

📘 TypeScript
- TypeScript 6.0 делает конфигурацию заметно строже и подталкивает команды пересмотреть старые tsconfig, которые годами жили на исторических дефолтах.
- Рядом ещё ts-blank-space, numpy-ts и новость о бесплатной JS/TS-поддержке в IntelliJ IDEA.

⚙️ Node.js
- Node.js 25.9.0 добавил --max-heap-size, новый экспериментальный stream/iter и улучшения тестового раннера.
- Внимание также на security releases Node.js от 24 марта 2026 года.

🤖 ИИ
- Transformers.js v4 ещё ближе подводит серьёзные AI-сценарии прямо в браузер через WebGPU.
- Дэн Абрамов показал спокойный, взрослый способ использовать Claude для фикса в React.
- Заодно неделя напомнила про риски: обучение на данных из Copilot, странная реклама в PR и утечка исходников Claude Code через source maps.

🦊 Лисья шутка недели:
После истории с axios даже мой package-lock.json стал выглядеть как тревожный триллер, где любой минорный релиз может внезапно оказаться главным злодеем.

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-40/

Что там стало Widely available в марте 2026?

- Clear-Site-Data
- contain-intrinsic-size
- @counter-style
- Device orientation events
- hyphenate-character
- hyphens
- image-set()
- <link rel="modulepreload">
- Overflow media queries
- Storage manager
- Update frequency media query
- subgrid

В этом месяце закрепилось 12 фич, а в следующем будет четыре.

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

🦊 Привет, это Фронти!

Я принёс свежий выпуск #41 и собрал главное за неделю ✨

В этом выпуске: view-transitions-toolkit и JetStream 3.0, нативный lazy-loading для <video>/<audio>, новые практики в CSS (от subgrid до name-only containers), тревожный WebAIM Million 2026, JSIR от Google и Minimum Release Age для supply chain-защиты, постмортем по компрометации axios, большой React-кейс от GitHub, Ink 7.0 и security-релизы React, tsdown с исполняемыми файлами для Node.

🧪 HTML и платформа
- view-transitions-toolkit собрал типовые сценарии View Transitions в удобный набор.
- JetStream 3.0 обновил бенчмарки JS/WASM впервые за 7 лет.
- Нативный lazy-loading для <video> и <audio> становится практичным стандартом.
- Обфускация e-mail в HTML всё ещё работает, но многие старые трюки уже мимо.
- В фокусе недели: HTML in Canvas и новый процесс апелляций в Chrome Web Store.

🎨 CSS и дизайн
- Вместо !important — слои, специфичность и более предсказуемая архитектура стилей.
- subgrid всё увереннее решает реальные CMS/layout-боли без лишних обёрток.
- Name-only containers выглядят как очень рабочий нативный скоупинг.
- Chrome 145 прокачал multi-column через column-wrap и column-height.
- Ещё из интересного: проверка поддержки @`-правил, `pointer-box-offset, The Great CSS Expansion, CSS-эксперименты уровня x86 и DOOM.

♿ Доступность и UX
- WebAIM Million 2026 снова показывает: доступность не «починится сама».
- Как делать emoji и иконки дружелюбными для скринридеров.
- Скринридер полезен, но не заменяет полноценное a11y-тестирование.

📦 JavaScript
- JSIR от Google может стать базой для нового поколения JS-инструментов.
- Большой обзор «что важно знать в JavaScript в 2026 году».
- Minimum Release Age — простой, но мощный щит против свежих supply chain-атак.
- Из практики: Intl для локализации единиц, опыт миграции на Solid 2.0, QuickBEAM и официальный xdk-typescript.

🔐 Безопасность
- Axios подробно разобрал компрометацию в npm и цепочку событий вокруг атаки.
- Bug bounty-программа Node.js поставлена на паузу из-за финансирования.
- Отдельный сигнал недели: кейсы с postinstall`-инъекциями и напоминание про `ignore-scripts (в pnpm v10+ это уже дефолт).

⚛️ React и фреймворки
- GitHub показал, как ускорял тяжёлый React-интерфейс diff-ов в PR.
- MDN рассказал о зрелой миграции фронтенда: от CRA к Lit и web components.
- Ink 7.0 укрепляет React-подход для CLI/TUI.
- Вышли security-релизы React 19.2.5, 19.1.6 и 19.0.5.
- Также в ленте: Mantine 9.0, React Native 0.85, React Paris 2026 talks и кейс Railway (с Next.js на Vite + TanStack Router).

⚙️ Node.js
- Нестандартный, но рабочий паттерн «отмены» через hanging promise.
- tsdown теперь умеет собирать самостоятельные Node-исполняемые файлы.
- Web Audio API приходит в Node ещё увереннее.
- Из экосистемы: TinyTTS, grammY с Telegram Bot API 9.6, tokenu и многое другое.
- Node.js 25.9.0 добавил --max-heap-size, развивает stream/iter; рядом обновились ky 2.0, ESLint 10.2, Undici 8.0, pnpm v11 beta 8.

🦊 Лисьи шутки недели:
Пока я обновлял резюме, Wildberries, кажется, купил ещё пару бизнесов.
Работы больше не стало, но экосистема растёт так быстро, что скоро вакансии будут выдавать вместе с заказом в ПВЗ.
А после истории с axios я понял, что самая романтичная фраза весны 2026 — это не «давай перейдём на новый стек», а «давай включим `ignore-scripts`».

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-41/

Управляем анимацией с помощью скролла в CSS

Я всё ещё продолжаю разбирать спецификации, связанные со скроллом.

👉 https://shabalin.online/blog/css/scroll-driven/

В этот раз Scroll-driven Animations. Если у вас в проекте есть анимации, которые завязаны не на время, а на скролл, эта спецификация поможет упростить их реализацию.

В спецификации определяются два вида шкал: scroll progress и view progress. Первая привязана к прогрессу прокрутки, а вторая — к моменту, когда элемент появляется в зоне видимости.

Я уже разобрал пять спецификаций связанные со скролами. Кажется осталась одна CSS Overflow Module =) Кто понял, тот поймёт.

🦊 Привет, это Фронти!

Я принёс свежий выпуск #42 и собрал главное за неделю ✨

В этом выпуске: Google решила бороться с сайтами, которые ломают кнопку «Назад», MDN показала большой фронтенд без React, контейнерные запросы и SVG-эффекты становятся всё практичнее, Bun 1.3.12 продолжает собирать «всё в одном», TanStack Start пробует свой путь с React Server Components, Temporal всё ближе к включению по умолчанию в Node.js.

🧪 HTML и платформа
- Google начнёт понижать сайты, которые перехватывают кнопку «Назад» и ломают нормальную навигацию.
- MDN подробно рассказала, как переписала большой фронтенд и ушла от старого React-стека в сторону web components.
- Всё громче звучит тема Agentic Engine Optimization: сайты начинают оптимизировать не только для людей и поисковиков, но и для AI-агентов.
- Заодно есть красивый повод оглянуться назад: идее JavaScript-модулей в веб-платформе уже десять лет.

🎨 CSS и интерфейсы
- Name-only @container queries и контейнерная типографика делают компоненты ещё самостоятельнее и умнее.
- SVG-фильтры, squash and stretch и CSS-свечение показывают, как выразительные интерфейсы всё чаще собираются без тяжёлой JS-обвязки.
- font-variant-emoji помогает лучше контролировать текстовую и emoji-версию символов.

♿ Доступность и UX
- AI-сгенерированные интерфейсы по-прежнему часто ломаются на базовых вещах: семантике, клавиатурной навигации и читаемости.
- Главный вывод недели простой: AI может ускорить черновик, но здравый UX и доступность всё ещё требуют внимательной ручной проверки.

📦 JavaScript
- Bun 1.3.12 добавил встроенную headless-автоматизацию браузера и Bun.cron, ещё сильнее качнув идею «один рантайм на всё».
- Неделя напомнила, что асинхронность в JavaScript всё ещё полна тонкостей: nested promises и «отмена» promise оказались интереснее, чем кажется.
- Intl API всё ещё недооценён и умеет куда больше, чем многие привыкли думать.

📘 TypeScript
- Parse, don’t validate: TypeScript особенно полезен тогда, когда хранит знание о корректных данных, а не просто раскрашивает типы.

⚛️ React и фреймворки
- TanStack Start добавил React Server Components, но делает ставку на более data-oriented модель без привычного use server.
- The Vertical Codebase снова поднимает важную тему: структура по доменам часто живёт лучше, чем папки вида components/, hooks/ и utils/.
- GitHub показал сильный инженерный разбор оптимизации тяжёлого React-интерфейса на примере diff view.

⚙️ Node.js
- Temporal всё ближе к тому, чтобы стать нормой в Node.js, и это одна из самых приятных новостей для всех, кто устал от Date.
- Node.js 24.15.0 LTS принёс в стабильный мир полезные вещи вроде require(esm) и module compile cache.
- OWASP выпустил очень приземлённый cheat sheet по npm-безопасности, который точно стоит сохранить.
- Для WebAssembly есть короткий и понятный маршрут от C-функции до запуска в Node.

🎮 Игры, графика и визуальные эксперименты
- Phaser 4.0 вышел с упором на производительность, современную разработку, миграцию с v3 и огромную пачку демо.
- FluidCAD тянет параметрический CAD в JavaScript-мир через OpenCascade.js.
- Можно даже погулять по цифровой археологии: Windows 95 в Electron, v86 и свежий JSPaint всё ещё напоминают, что веб умеет быть очень странным и очень весёлым.

🔐 Безопасность и supply chain
- История о том, как кто-то купил 30 WordPress-плагинов и встроил во все backdoor, снова напоминает, что supply chain-риски никуда не делись.
- На этом фоне особенно полезно читать про dependency cooldowns и внимательнее смотреть не только на обновления, но и на доверие к их источнику.

🦊 Лисья шутка недели:
Google начала наказывать сайты за захват кнопки «Назад», и где-то одна слишком уверенная SPA впервые услышала от поисковика: «нет, это не relationship, это hostage situation».
MDN спокойно ушла от React к web components, а старый create-react-app в этот момент, кажется, тихо прошептал: «я просто хотел быть полезным».

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-42/

Настала рубрика просить прощения и извиняться

Если вы до сих пор ставите точки в конце описания элементов, например <img alt="Балкон с цветами.">, <span class="visually-hidden">Черно-красные деревья.</span>, то это можно не делать =)

Простите меня

Если вы ничего не поняли, то и замечательно

🦊 Привет, это Фронти!

Я принёс свежий выпуск #43 и собрал главное за неделю ✨

В этом выпуске: Firefox 150 и Soft Navigations двигают веб-платформу вперёд, HTML пробует жить внутри canvas, адаптивные интерфейсы всё чаще обходятся без глобальных брейкпоинтов, TypeScript 7 beta обещает большой скачок скорости, в Node-мире появился пакетный менеджер aube, Playwright научился гибче записывать скринкасты, а Vercel напомнил, что OAuth и supply chain требуют очень внимательного отношения.

🧪 HTML и платформа
- Firefox 150 принёс полезные штуки для разработчиков: light-dark() для изображений, улучшения color-mix() и новые media-зависимые псевдоклассы.
- Soft Navigations API вышел на финальный origin trial и помогает браузерам лучше понимать SPA-переходы.
- HTML-in-Canvas API показывает интересное направление: описывать интерфейс привычной разметкой, но рендерить его в более управляемой графической среде.
- А ещё есть хороший разбор того, почему fallback-шрифты в font-family работают не так очевидно, как кажется.

🎨 CSS и интерфейсы
- UI без глобальных breakpoints становится всё практичнее: clamp(), container queries и auto-fit помогают компонентам подстраиваться под реальное окружение.
- Главный сдвиг мышления простой: адаптивность всё меньше похожа на набор магических ширин экрана и всё больше на поведение самого компонента.

♿ UX и доступность
- box-shadow всё ещё не честная замена outline: focus state должен быть не только красивым, но и надёжным для клавиатуры и специальных режимов отображения.
- Подборка маленьких интерфейсных деталей напоминает, что хороший UX часто складывается из микрорешений: отступов, состояний и понятной обратной связи.
- Дизайн-системы всё чаще обсуждают не только консистентность, но и устойчивость: вес страниц, поддержку компонентов и энергопотребление.

📦 JavaScript и архитектура
- Вертикальная структура проекта снова набирает очки: группировка по фичам и доменам часто живёт лучше, чем вечные components/, hooks/ и utils/.
- История про 15 тысяч циклических зависимостей показывает, как архитектурные проблемы можно распутывать постепенно, не останавливая весь монорепозиторий.
- Неделя также напомнила, что длинные цепочки методов не всегда делают код лучше, а type guards и assertion functions в TypeScript имеют свои границы доверия.

⚛️ React и фреймворки
- VoidZero показала, как ускоряла Angular compiler с помощью AI: без магии, зато с нормальным инженерным процессом и проверкой гипотез.
- Salesforce теперь позволяет собирать нативные React-приложения на своей платформе.
- crates.io уходит с Ember.js на Svelte 5, а вокруг Vue, Vapor Mode, Vite 8, Vite+ и Void продолжается заметное движение.

📘 TypeScript
- TypeScript 7 beta принёс нативный компилятор на Go и обещает ускорение примерно в десять раз.
- Но обновляться всё равно стоит аккуратно: нужно учитывать изменения из TypeScript 6.0, новые настройки по умолчанию и отличия в поведении JavaScript-кода.

⚙️ Node.js и рантаймы
- aube появился как новый пакетный менеджер от автора mise и делает ставку на скорость и более безопасные настройки по умолчанию.
- Playwright 1.59 добавил page.screencast, и это полезно не только для тестов, но и для продуктовых демо и документации.
- Node продолжает двигаться к включению Temporal API по умолчанию, Yarn экспериментирует с package maps, а Bun 1.3.13 стал чуть экономнее по памяти.

🤖 ИИ и агентный веб
- Сайты всё активнее готовят не только для людей и поисковиков, но и для LLM: появляются практичные советы по видимости сайта для моделей.
- Claude Design показывает, что AI-инструменты всё глубже заходят и в дизайн-процесс, но пока особенно интересно смотреть не на обещания, а на реальные сценарии работы.

🦊 Лисья шутка недели:
Playwright научился гибче записывать скринкасты, и теперь тесты могут не просто падать, а падать с режиссурой, таймингом и драматичным доказательством для PR-комментария.

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-43/

Поводом для написания статьи стала фраза, которую я сегодня услышал: «Пиксель неделим!» — в контексте того, что 12.5px в CSS может быть триггером для негатива.

Давайте вспомним почему один пиксель указанный в CSS может не быть равен одному пикселю на дисплее!

https://shabalin.online/blog/css/pixel/

Новый месяц - новые фичи стали Widely available. А я лишь покажу, что там уже можно использовать в проде ;)

Какие фичи в вебе стали Widely available в апреле 2026?

• <search>
• Web authentication easy public key access
• String isWellFormed() and toWellFormed()
• ARIA attribute reflection


Подробнее в статье на хабре https://habr.com/ru/articles/1028616/

🦊 Привет, это Фронти!

Я принёс свежий выпуск #44 и собрал главное за неделю ✨

В этом выпуске: sizes="auto" делает адаптивные изображения менее болезненными, scroll-driven animations и View Transitions продолжают двигать CSS вперёд, TypeScript 7 beta и pnpm 11 ускоряют инфраструктуру, React Compiler пытается снять с нас часть ручной мемоизации, Remix 3 меняет философию, Node 26 почти доехал до Temporal по умолчанию, а AI-агенты уже просят для себя DESIGN.md.

🧪 HTML и веб-платформа
- sizes="auto" обещает сделать адаптивные картинки спокойнее: браузер сможет сам определять размер лениво загружаемого изображения.
- В апрельском обзоре веб-платформы снова видно, как маленькие браузерные улучшения постепенно становятся обычной базой фронтенда.
- <dialog> и popover помогают собирать модалки и всплывающие панели на стандартных API.

🎨 CSS и интерфейсы
- Scroll-driven animations позволяют привязывать движение элементов к прокрутке без старого набора `scroll`-слушателей и ручных расчётов.
- Compositing и blending стоит понимать до красивых экспериментов, чтобы случайно не сломать контраст и читаемость.
- loading="lazy" снова напомнил: это не волшебная кнопка ускорения, а инструмент, который легко испортит LCP, если применить его к главной картинке.

♿ UX и доступность
- Таймауты сессий могут быть не только настройкой безопасности, но и настоящим барьером доступности.
- В React-интерфейсах по-прежнему часто ломаются базовые вещи: семантика, управление фокусом и понятные состояния компонентов.

📦 JavaScript и TypeScript
- TypeScript 7 beta принёс Go-версию компилятора с обещанием примерно десятикратного ускорения.
- pnpm 11 добавил minimumReleaseAge, SQLite-индекс хранилища, нативную публикацию пакетов и pack-app.
- Обзор ES2025/ES2026 собрал iterator helpers, Promise.try, Array.fromAsync, using, Temporal и другие свежие возможности языка.
- TSRX предлагает посмотреть на JSX с новой стороны: control flow, локальные переменные и scoped styles прямо в декларативной разметке.

⚛️ React и фреймворки
- React Compiler полезнее понимать через модель рендера, а не как магию, которая сама ускорит всё подряд.
- Out-of-order streaming показывает, как Suspense и Server Components доставляют UI кусками, а не строго сверху вниз.
- Rspack 2.0 и Rsbuild 2.0 продолжают Rust-ускорение сборки и добавляют новые возможности для RSC.

⚙️ Node.js и рантаймы
- Node 26 задержался, но главная интрига прежняя: Temporal API всё ближе к включению по умолчанию.
- Fresh 2.3 показывает хороший принцип Deno-мира: если странице не нужен интерактив, не отправляй лишний JavaScript.

🤖 AI и агентный веб
- DESIGN.md предлагает описывать визуальный стиль проекта так, чтобы его могли понимать AI-агенты.

🦊 Лисья шутка недели:
После sizes="auto" адаптивные картинки впервые посмотрели на макет и сказали: «спасибо, я сам решуууу, кем мне быть на 768 пикселях».

Scroll-driven animations пришли в CSS, и где-то один старый window.addEventListener('scroll') тихо обновил резюме на «legacy motion consultant».

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-44/

🦊 Привет, это Фронти!

Я принёс свежий выпуск #45 и собрал главное за неделю ✨

В этом выпуске: Remix 3 вышел в beta и уже не выглядит как обычный React-фреймворк, Node.js 26 включил Temporal по умолчанию, Chrome 148 принёс Prompt API и новые web-возможности, React и Next.js закрыли RSC-уязвимость, Rolldown 1.0 стал стабильным, Astro готовит v7 Alpha, а CSS снова доказывает, что умеет больше, чем просто «поставить отступ».

🧪 HTML и платформа
- Chrome 148 добавил name-only @container queries, ленивые video и audio, Prompt API и новые возможности DevTools.
- Вокруг AI API в браузере разгорелась дискуссия: Gemini Nano, приватность, размер моделей и контроль пользователя стали важной частью разговора.
- Firefox Security и Cloudflare рассказали про WAICT — идею криптографически проверяемого JavaScript для открытого веба.
- Container Timing API помогает точнее измерять готовность конкретных видимых блоков, а не только общую производительность страницы.
- Отдельно полезно почитать про bfcache и dark mode: возврат назад должен быть быстрым, но интерфейс после восстановления тоже должен быть живым.

🎨 CSS и интерфейсы
- Range media queries делают брейкпоинты понятнее и помогают уйти от странностей на точных границах min-width и max-width.
- safe-area-inset снова напоминает: если кнопка спряталась под системной панелью телефона, это не минимализм, это баг.
- CSS через :has() и n of в :nth-child() уже может делать условную валидацию форм без JavaScript.

♿ Доступность и UX
- Практический гид по ARIA напоминает: роли нужны не для украшения разметки, а когда нативного HTML действительно не хватает.
- AI не чинит доступность сам по себе — он зависит от уже понятных, семантичных и устойчивых интерфейсов.

📦 JavaScript
- Remix 3 Beta сделал резкий поворот: меньше зависимости от React, больше веб-стандартов, собственная модель компонентов и full-stack runtime.
- Deno экспериментирует с import defer, чтобы точнее управлять выполнением импортированных модулей.
- Вокруг Bun снова шумно: обсуждают Rust-порт, покупку Anthropic и вопрос, куда вообще движется рантайм.
- Vitest может стать менее привязанным к Vite, что важно для долгоживущих тестовых проектов.

⚛️ React и фреймворки
- TanStack показал маленький React-совместимый рантайм примерно на 9KB, но честно объяснил, почему не превращает его в замену React.
- React и Next.js выпустили security-релизы для RSC-уязвимости, обновления лучше не откладывать.
- TanStack Form объясняет headless-подход: библиотека отвечает за состояние и валидацию, а UI остаётся вашим.
- Evil Martians рассказали, как миграция с React на Web Components сэкономила 100KB.

🛰️ Сборка и экосистема
- Rolldown 1.0 стал стабильным быстрым бандлером с совместимостью с Rollup-плагинами.
- Astro 6.2 добавил больше контроля над SVG и логированием, а Astro v7 Alpha готовит переход на Vite 8 и Rust-компилятор.
- Electron 42 изменил установку бинарника после supply chain атак: теперь скачивание не происходит через postinstall.

⚙️ Node.js
- Node.js 26 вышел с Temporal по умолчанию, V8 14.6 и Undici 8.
- Node.js 26.1 добавил экспериментальный node:ffi для прямой работы с нативными библиотеками.
- Node 20 Iron ушёл в End-of-Life, а все актуальные LTS-релизы теперь умеют запускать TypeScript через type stripping.
- Temporal в Node 26 использует Rust-библиотеку, поэтому сборка Node из исходников теперь требует Rust toolchain.


🦊 Лисья шутка недели:
Remix 3 вышел в beta и сказал React: «дело не в тебе, я просто хочу найти себя в веб-стандартах». React сделал вид, что всё нормально, но уже открыл Suspense boundary для эмоциональной поддержки.

Node 26 включил Temporal по умолчанию, и где-то один new Date() впервые почувствовал, что он legacy.

Chrome добавил Prompt API, а фронтендеры теперь боятся не только «почему bundle 4MB», но и «почему браузер сам решил, что 4GB модели — это просто лёгкий интерактив».


Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-45/

Современный browserlist

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

🦊 Привет, это Фронти!

Я принёш швежий выпуск #46 и шобрал главное жа неделю ✨
Пишу чуть шепеляво: у Лиша болит жуб, но фронтенд ждать не будет.

В этом выпуске: Safari 26.5 подтянул WebKit, браузеры пробуют встроенную уштоновку веб-приложений, TanStack пережил npm supply chain атаку, Rolldown 1.0 штал штабильным, GitHub ускорил Issues через local-first кеш, Bun 1.3.14 добавил изображения и HTTP/3, а Node.js 26 уже можно изучать глубже.

🧪 HTML и платформа
- Safari 26.5 принёш :open, доработки random(), SVG-улучшения и Origin API.
- Chrome и Edge тестируют новый <install> для уштоновки веб-приложений без лишнего JavaScript.
- Obs.js показывает, как подстраивать сайт под сеть, батарею, CPU и память пользователя.
- No-Vary-Search помогает кешам не считать каждый utm_source новой реальностью.
- Firefox DevTools учится удобнее искать внутри Shadow DOM.

🎨 CSS и интерфейшы
- Скоростью бесконечных CSS-анимаций можно управлять через переменную, а не плодить похожие @keyframes.
- Overflow-контейнеры снова напоминают: если мышью прокручивается, это ещё не значит, что клавиатурой тоже.
- Tailwind CSS v4.3 добавил утилиты для scrollbar, @container-size, zoom-* и другие практичные мелочи.
- Cascade даёт иконки для CSS-свойств, а Find Font помогает выбирать и сравнивать шрифты.

📦 JavaScript
- ShadowRealm обещает отдельное окружение для запуска JS без порчи глобального состояния.
- TanStack и другие npm-пакеты попали под supply chain атаку через CI, кеш и OIDC-токены.
- Главный вывод: шлишком швежий пакет иногда пахнет не релизом, а расследованием.
- Rolldown 1.0 стал штабильным Rust-бандлером и готовит быструю основу для Vite 8.
- Булевые параметры вида true, false, true снова доказали, что код иногда говорит: «угадай моё настроение».

⚛️ React и фреймворки
- GitHub сделал навигацию в Issues почти мгновенной через IndexedDB, local-first кеш и фоновые обновления.
- Raycast перевёл новый интерфейс на React и показал, что React давно живёт не только в браузерных вкладках.
- Evil Martians ушли с React на Web Components для небольшого виджета и сэкономили около 100 КБ.
- TanStack Form развивает headless-подход: логика формы отдельно, ваш UI отдельно.
- RSC Server Functions снова напоминают: серверная функция не заменяет нормальную API-границу.

🛰️ Сборка и фреймворки
- Astro 6.3 экспериментирует с advanced routing.
- Waku 1.0 Beta развивает минимальный RSC-фреймворк на Vite и Hono.
- Electron 42 обновился до Chromium 148, Node 24.15 и V8 14.8.


📘 TypeScript
- Свежий Valibot v1.4.0 особенно интересен тем, кто хочет проверять данные и не тащить в клиент лишний вес.

⚙️ Node.js и рантаймы
- Node.js 26 уже можно изучать через практические изменения, включая экспериментальную FFI-поддержку.
- Bun 1.3.14 добавил Bun.Image, global virtual store, HTTP/3 в Bun.serve и улучшения совместимости с Node.
- pnpm 11.1 добавил полезные команды вроде pnpm bugs и pnpm audit signatures.

✅ Тестирование и качество
- Jest 30.4.0 улучшил поддержку ESM, Temporal и React 19.
- Playwright 1.60.0 продолжает развивать браузерное тестирование.
- Julia Evans показала, как тестировать Vue-компоненты прямо в браузере.
- React Review проверяет PR на плохие React-паттерны в новых изменениях.

🦊 Лишья шутка недели:
TanStack пережил supply chain атаку, а npm снова напомнил: npm install звучит как команда, но иногда это жанр хоррора.

Rolldown 1.0 стал штабильным, Vite 8 уже где-то разминается, а webpack тихо смотрит в окно и говорит: «я тоже когда-то был быстрым в душе». Кстати, ходят слухи, что v6 не за горами.

Bun добавил обработку изображений, HTTP/3 и ещё пол-кухни. Осталось дождаться Bun.dentist(), потому что Лишу уже больно читать changelog.

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-46/

Документация Node.js v25

Насткнулся на проект. Это перевод официальной документации Node.js. Сделано для v25, уже хорошо, что не для 16 =)

В закладки: https://nodejsdev.ru/api/

🦊 Привет, это Фронти!

Я принёс свежий выпуск #47 и собрал главное за неделю ✨

В этом выпуске: Google I/O показал WebMCP, HTML-in-Canvas и Baseline Checker, Firefox 151 добавил Document Picture-in-Picture, CSS получил round() и gap decorations, npm усиливает защиту staged publishing, Express обновил сайт и документы, React-экосистема снова обсуждает RSC, а Node.js 26.2 стабилизировал stream.compose.

🧪 HTML и веб-платформа
- Google I/O 2026 принёс WebMCP для связи сайтов с AI-агентами, Baseline Checker и идеи для AI-навыков прямо в Chrome.
- HTML-in-Canvas пробует соединить привычные HTML-элементы с гибкостью canvas для сложной графики и редакторов.
- Firefox 151 добавил Document Picture-in-Picture на десктопе и CSS @container style() queries.
- Поддержка RTL-языков снова напоминает: иногда два атрибута dir и lang чинят больше, чем неделя костылей.

🎨 CSS и интерфейсы
- CSS round() помогает делать fluid-размеры предсказуемее и аккуратнее.
- Gap decorations позволяют стилизовать промежутки между grid, flexbox и multi-column элементами без лишних обёрток.
- Julia Evans рассказала, как уход от Tailwind к обычному CSS помогает лучше увидеть структуру страницы.
- Cross-document View Transitions выглядят магически, но требуют внимания к состояниям, именам элементов и деталям реализации.
- Темы, CSS-фоны, shorthand-свойства и reset-кнопки снова доказали: CSS умеет быть и красивым, и коварным.

📦 JavaScript
- JSONRegistry предлагает способ сохранять и восстанавливать сложные пользовательские типы через JSON.
- Brownies даёт удобный API поверх cookies, storage и IndexedDB.
- Alien Signals добавляет маленькое реактивное ядро в духе Vue, Preact и Svelte.
- У Bun снова обсуждают Rust-порт и качество AI-портированного кода.
- История 2ality напоминает, как AI-краулеры уже меняют поведение авторов в открытом вебе.

⚛️ React и фреймворки
- Component Party сравнивает React, Vue, Svelte, Angular и другие фреймворки на одних и тех же задачах.
- TanStack показывает React Server Components как идею, а не только как фичу Next.js.
- Storybook 10.4 добавил первую поддержку TanStack React.
- Redux Toolkit, React Redux, Jotai, Fate, Rockpack и календарные компоненты тоже получили свежие обновления

🛰️ Сборка и фреймворки
- Angular 22 приближается к финальному релизу.
- Миграция с Webpack на Rspack снова показывает, насколько сильно Rust-инструменты могут ускорять сборку.
- Rolldown 1.0.1 продолжает готовить быстрый фундамент для будущего Vite.
- Vavite переносит удобства Vite в серверные приложения.
- Qite.js делает ставку на HTML, SSR, отсутствие build step и минимум магии

📘 TypeScript
- TypeORM 1.0 наконец вышел из долгой ветки 0.x и стал взрослее для production-проектов.
- Kanel 4.0 генерирует TypeScript-типы из Postgres и помогает держать схему БД ближе к коду.
- Vue.js Language Tools 3.3 улучшает поддержку Vue-файлов в редакторах.
- Deno 2.8 готовит поддержку TypeScript 6.0.3.

⚙️ Node.js и рантаймы
- Express получил новый сайт, бренд и обновлённую документацию. Старый дефолт явно решил выглядеть живым.
- npm вводит staged publishing и обсуждает opt-in для install scripts, чтобы supply chain атакам было сложнее жить.
- Новая волна Mini Shai-Hulud затронула 300+ npm-пакетов.
- Node.js 26.2 стабилизировал stream.compose, а fs.Stats начал поддерживать Temporal.Instant.
- Deno 2.8 обещает улучшенную совместимость с Node.js.
- Bun 1.3.14 добавил Bun.Image, HTTP/2, HTTP/3 и новые улучшения совместимости.
- В Node.js через FFI уже запустили Doom в терминале, потому что JavaScript должен уметь всё, даже когда его об этом не просили.

🦊 Лисья шутка недели:
Google показал WebMCP, чтобы сайты могли разговаривать с AI-агентами напрямую. Фронтендеры в этот момент всё ещё пытаются договориться с z-index, но переговоры идут тяжело.

npm добавил staged publishing, потому что экосистема наконец признала: npm publish не должен ощущаться как кнопка «выпустить дракона в прод».

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-47/

🦊 Привет, это Фронти!

Я принёс свежий выпуск #48 и собрал главное за неделю ✨

В этом выпуске: Chrome экспериментирует с declarative partial updates и безопасным HTML-стримингом, CSS снова обсуждает центрирование, layout gaps и view transitions, npm усиливает защиту публикаций и install scripts, Deno 2.8 резко подтягивает совместимость с Node.js, React отмечает 13 лет, а AI-инструменты всё чаще требуют не скорости, а внимательной проверки.

🧪 HTML и платформа
- Chrome пробует Declarative Partial Updates: <template for>, setHTML() и streamHTML() могут сделать динамический HTML более декларативным и безопасным.
- Manuel Matuzovic напомнил, почему aria-label на обычных div и span часто не даёт ожидаемой доступности.
- Web Components снова выглядят практичным фундаментом для дизайн-систем, которые должны жить между React, Vue, Svelte и другими мирами.

🎨 CSS и интерфейсы
- Современное центрирование в CSS стало мощнее: grid, flexbox, place-content и anchor positioning закрывают всё больше кейсов.
- CSS Layout всё ещё не идеален: разработчикам не хватает более выразительных инструментов для сложных сеток и адаптивных интерфейсов.
- sibling-index() и sibling-count() помогают строить математические раскладки без лишнего JavaScript.

📦 JavaScript
- Mozilla готовится окончательно попрощаться с asm.js: WebAssembly уже давно занял его место для производительного кода в браузере.
- JS Crossword проверяет знание странностей JavaScript и напоминает, что язык всё ещё умеет удивлять даже опытных людей.
- ECharts, Perspective, Partytown и @atproto SDK получили обновления для визуализации, производительности и ESM-экосистемы.

⚛️ React и фреймворки
- React исполнилось 13 лет, и экосистема отметила это максимально по-реактовски: любовью, усталостью и длинными обсуждениями.
- React Router 7.16 готовит проекты к будущему v8 через стабилизированные future-флаги.
- Материалы про React at 60 FPS снова напоминают: производительность начинается не с memo, а с понимания кадра.

⚙️ Node.js и рантаймы
- Deno 2.8 резко приблизился к Node.js-экосистеме: совместимость выросла до 76.4%, а npm: больше не нужен при установке пакетов.
- npm включил staged publishing, новые --allow-* флаги и первые шаги к opt-in политике install scripts.
- Mini Shai-Hulud снова напомнил, что supply chain — это не абстрактная страшилка, а реальный риск для npm-проектов.
- Node.js 24.16 LTS добавил crypto.randomUUIDv7(), hex-цвета в util.styleText и рандомизацию порядка тестов.
- Streams в Node.js могут протекать даже с pipeline(), если забыть про реальные сбои, таймауты и отключившихся клиентов.

🤖 ИИ
- Google выпустил Modern Web Guidance для AI-агентов, но специалисты по доступности уже напоминают: подсказки не заменяют понимание платформы.
- AI-разработка может ускорять код и одновременно выжигать разработчика, потому что проверять и удерживать контекст всё равно приходится человеку.
- State of Web Dev AI 2026 показывает, как разработчики реально используют AI и чего опасаются.
- Flue от Astro предлагает TypeScript-фреймворк для программируемых AI-агентов поверх Node.js.

🦊 Лисья шутка недели:
Chrome добавил streamHTML(), и теперь фронтендеры наконец смогут стримить HTML безопасно — то есть делать то же самое, что раньше, только с меньшим ощущением, что DOM сейчас спросит: «а ты точно знаешь, что вставляешь?»

А Deno с совместимостью Node.js на 76.4% выглядит как разработчик, который говорил «я не такой, как npm», а потом всё равно пришёл на встречу в худи с node_modules.

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-48/