Front-end Digest № 158: Експерименти з random() у CSS, перехід зі styled-components на StyleX та DevTools для агентів

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

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

Веб-розробка

• Як ми будували систему нотифікацій у web
• Чого бракує в SVG
• Реліз Astro 7.0
• Вступ до Cloudflare Workers для вебзастосунків
• WebMCP: Оптимізуйте свій вебсайт для AI агентів
• Core Web Vitals 2026: Виправлення показника «Interaction to Next Paint»
• Chrome DevTools для агентів

• Ефекти
  • Створення візуалізацій для Shopify Spring ’26 Edition
  • Подіум: Як ми створили сайт, що перетворює біг на історії
  • Анімування Dialog за допомогою View Transitions

CSS

• Сучасне CSS-темування за допомогою light-dark(), contrast-color() та style queries
• Давайте пограємося з Gap Decorations!
• Експерименти з функцією random() у CSS
• Покращення карткових патернів за допомогою якірного позиціонування
• Використання анімацій, керованих прокруткою, для протилежних напрямків прокрутки
• Ваші Grid Lanes, ймовірно, не відповідатимуть WCAG 2.4.3
• Хвилястий повзунок для введення діапазону
• CSS Container Queries + Subgrid: трилогія лейаутів, яка тепер доступна в усіх браузерах
• Анімована радіальна градієнтна маска на тексті в CSS

JavaScript

• Обирай свого бійця: бенчмаркінг 5 WebSocket серверів для Node.js
• Реліз Babel 8: тільки ESM, відмова від ES5 за замовчуванням і легка міграція
• Обробка мутацій за допомогою TanStack Query для Vue

• React
  • Чому Bulletproof React стала найпопулярнішою архітектурою React на GitHub
  • Перехід Linear зі styled-components на StyleX
  • TanStack Table: Як недооцінений рефакторинг зменшив використання пам’яті на 90%
  • React Compiler: Усунення ручної роботи з оптимізації продуктивності
  • Next.js 16: Turbopack, React Compiler та кешування
  • React за лаштунками: віртуальний DOM, узгодження, фаза рендерингу, фаза коміту та Fiber..
  • Написання кастомних рендерерів для React
  • React 19: useOptimistic та useActionState — як позбутися 80% зайвого коду стану

Меми