Front-end Digest № 167: Реліз htmx 4, рефракція в CSS та як ваші модулі вас обманюють

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

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

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

• Вийшла версія htmx 4.0.0!
• Готове до релізу: JPEG XL
• Астероїд, що нині атакує фронтенд веб-розробку
• Блог Cloudflare — переїзд на EmDash
• Створення веб-віджетів за допомогою Document Picture-in-Picture API
• Як перетворити фронтенд-код на редагований Figma-макет: розробка плагіна Source → Design
• 4 «H» в HTML
• Створення ефекту квадратної лінзи, що слідує за курсором миші, за допомогою Three.js та GLSL
• Від Blender до Three.js і назад: 10 порад для покращення робочого процесу
• Усі основні рушії браузерів переходять на JPEG XL. Все одно зберігайте резервні варіанти
• Створення Vite плагіна для виявлення пошкоджених SVG-ресурсів перед продакшеном
• WebSockets — це найпростіша частина

CSS

• Рефракція фонового зображення в CSS
• Стилізуємо Linear для майбутнього зі StyleX після styled-components
• Управління моментом обчислення значень CSS-змінних
• Наближення при наведенні за допомогою сучасного CSS
• Вирівнювання елементів flex за допомогою flex-wrap: balance
• Детектування «недетектовних» CSS-фіч за допомогою @supports named-feature()
• Багатоколонковий макет, рядки, правила та обтікання

JavaScript

• Ваші модулі вас обманюють
• Frontend Dependency Injection: від Context API до Composition Root
• Angular Signals проти RxJS: чи варто замінювати RxJS у реальних застосунках?
• Досить зазубрювати JavaScript API: вивчайте їх за допомогою крихітних експериментів
• Побудова офлайн-орієнтованого рушія інтервального повторення на JavaScript та IndexedDB

• React
  • Ваш React-застосунок не потребує стільки JavaScript
  • cnfast проти cn(): чи справді в React швидкість зростає у 7 разів?
  • Чому ми відмовилися від Redux / RTK Query на користь TanStack Query + Zustand: досвід реального проєкту
  • Reads Are Subscriptions: міграція зі Zustand на Coaction
  • From C# Frankenstein to React Hero: як ми мігрували legacy-моноліт на React без зупинки розробки

Меми