Front-end Digest № 127: анонс Angular v21, кінематографічні 3D-ефекти та random() в CSS

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Привіт, колеги. Мене звати Олександр, я займаюся фронтендом в компанії Zfort Group. Маю для вас свіжий дайджест з цікавими матеріалами зі світу фронтенду за останній тиждень.

Веброзробка

• WebAssembly продовжує розширювати можливості фронтенду через 10 років після появи.
• Frontend-застосунки з пріоритетом офлайн-режиму у 2025: IndexedDB та SQLite у браузері та за його межами.
• Чи може штучний інтелект писати специфікації доступності.
• Тестування HTML-вебкомпонентів з Light DOM: це простіше, ніж здається!

• Інструменти
  • Альтернативи GTmetrix.
  • Шість неочевидних речей, які можна робити в Devtools Chrome, частина 1.
  • Як використовувати ChatGPT Atlas для налагодження, тестування та інших завдань у фронтенді.

• Ефекти
  • Як створити кінематографічні 3D-ефекти прокрутки за допомогою GSAP.
  • Імітація двофазних переходів між відображеннями за допомогою precommitHandler Navigation API.
  • Найкращий спосіб створити ефект паралаксного прокручування в 2026 році.

CSS

• Адаптивний міжлітерний інтервал.
• Створення 3D-зображень у CSS за допомогою шарування.
• Токени Keyframes: Стандартизуємо анімацію між проєктами.
• Grid: використання grid-template-areas для візуалізації розмітки коду.
• Як створити модульну та підтримувану CSS-архітектуру з @layer.
• Побудова багатоступеневого графіку за допомогою сучасного CSS: grid, subgrid, round() і mod().
• CSS random(): глибше розуміння через експерименти.
• «Найбільш ненависна» функція CSS: asin(), acos(), atan() та atan2().

JavaScript

• Вільні від збірки: перехід на нативні JavaScript-модулі.
• Боротьба з витоками пам’яті в JavaScript PDF-візуалізаторах: рекомендовані практики та інструкції з налагодження.
• Brimstone — новий JavaScript рушій, написаний на Rust.
• Реалізація Wordle в LibreOffice за допомогою макросів JavaScript.

• React
  • React 19.2: Асинхронний перехід нарешті став реальністю.
  • Чи є React(tanstack) Query занадто упередженим? Глибоке занурення: практичні методи отримання даних у реальному житті — Розділ 1.
  • Піраміда React-компонентів: криза надмірної розробки.
  • Штучний інтелект у реальному часі в Next.js: як передавати відповіді за допомогою Vercel AI SDK.

• Angular
  • Анонс Angular v21.
  • Що нового в Angular 21.0.

Фронтенд-меми