Front-end Digest № 168: що треба знати про HTML в 2026, AI для рефакторингу CSS та заміна Next.js вайбкодом

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

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

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

• Нові штуки в HTML, які варто знати в середині 2026 року
• Ну добре, я створю свій текстовий редактор!
• Локально-орієнтований PWA з IndexedDB та SSE
• Найкращий перемикач темної теми — це, мабуть, його відсутність
• Як ми створили новий вебсайт Interfere
• Мінікарта на SVG мапі

• Інструменти
  • Вийшла версія Vitest 5.0
  • Технічні деталі Chrome 150
  • Void(0): підсумки серпня 2026
  • Що відбувається, коли Bun запускає файл TypeScript
  • Як Turbopack фрагментує ваш JavaScript

• Еффекти
  • Створення 3D-маски обличчя в реальному часі за допомогою MediaPipe, Threlte та Three.js
  • За межами градієнта яскравості: ASCII-рендер, що враховує форму, на Three.js
  • Від променів до сіток: створення призми з Vercel за допомогою vgpu
  • Про анімацію того, чого не видно
  • Створення нескінченного ткацького верстата: розплутування зображень на нитки з Three.js
  • Представляємо <hic-pageflip>: Кастомний елемент гортання сторінок/фліпбука на базі HTML-in-Canvas
  • Зігни, Прицілься, Кинь: Перетворення Ейфелевої вежі на катапульту за допомогою Three.js

CSS

• CSS — це все ще круто
• Давайте використаємо нову функцію CSS random() у всіх браузерах
• Я протестував 5 AI-інструментів для рефакторингу CSS: ось що я дізнався
• CSS Centering: Grid vs. Flexbox vs. Anchor Positioning
• CSS Custom Highlight Api: примітки щодо реалізації з JavaScript

JavaScript

• Виправлення Top-Level Await у Safari
• Глибини JavaScript: Сапер у 247 байтах
• Temporal: JavaScript нарешті виправив помилки з датами

• React
  • Як працює React: повний посібник
  • React тепер повністю «растерізований»
  • Створення сервісу для узагальнення тексту на базі Next.js із використанням Trigger.dev та Gemini AI
  • thank u, next: Заміна Next.js на «фреймворк», написаний вайбкодом
  • Тестування Google-скіла «modern-web-guidance» на реальному React-застосунку

Меми