Front-end Digest № 140: готуємо веб до ШІ з WebMCP, майбутнє непрямокутного вебу та доктор для React

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

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

Веброзробка

• Кінець «ванільних» фронтенд-розробників
• Віртуальне прокручування мільярдів рядків — методи від HighTable
• HTMX + Signals: архітектура фронтенду, яка позбавляє від складнощів JavaScript
• Socket Security Analysis: тепер на npm лише в один клік

• AI
  • ШІ-орієнтована архітектура фронтенду: від промпту до продакшну
  • WebMCP — розширення можливостей агентів як повноправних учасників вебу
  • WebMCP — дуже потрібний спосіб змусити агентів грати разом з вебом, а не проти нього
  • designarena.ai — оцінювання моделей ШІ в контексті створення вебінтерфейсів
  • Найшвидші інструменти фронтенду для людей та ШІ
  

• Ефекти
  • Реактивна глибина: створення 3D-трубки для зображень на основі прокрутки за допомогою React Three Fiber
  • Портфоліо Жоффрі Спітцера: мінімалістична збірка на Astro + GSAP з ефектами появи, Flip-переходами та ледь помітним рухом
  • Створення плавної горизонтальної галереї з ефектом паралакса: від DOM до WebGL

CSS

• Злам CSS: як працює перший zero-day Chrome 2026 року (CVE-2026—2441)
• modern.css — припиняйте писати CSS, як у 2015 році
• border-shape: майбутнє непрямокутного вебу
• Чому може не працювати Anchor Positioning?
• Можлива поява в браузері: :near()
• Детальний посібник з налаштування списків за допомогою CSS
• Створення типографічних шкал у CSS за допомогою :heading(), sibling-index() та pow()
• Особливі випадки реалізації CSS corner-shape в Blink
• Спіральне прокручування в CSS за допомогою sibling-index()
• Anchored-меню та урок про Scoping
• CSS @container scroll-state: тепер замість JS scroll listeners
• Tailwind CSS v4: Container Queries та кінець Media Queries

JavaScript

• Wasm проти JavaScript: хто переможе на мільйоні рядків?
• Як полагодити циклічні залежності в реальному фронтенд-коді
• React Doctor: надайте агентам кодування можливість діагностувати та виправляти ваш React-код
• Надмірне використання JS суперечить довгостроковим цілям продуктивності
• Відмова від бібліотек: 10 веб API на заміну сучасним JavaScript-бібліотекам
• Оптимальне налаштування Angular Firebase за допомогою AnalogJS
• vue-ecosystem-skills — AI agent skills для найсучаснішої екосистеми Vue. Створено на основі реальних документів, проблем та релізів
• fetch-network-simulator — симулятор поведінки request/response API під час розробки фронтенду

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

Подобається дайджест? Підписуйтесь на автора, щоб отримувати сповіщення про нові публікації на пошту.