Front-end Digest № 56: магія Clip Path, проблеми web.dev та витоки пам’яті в React

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

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

Веброзробка

• Оновлення Interop 2024 у середині року
• Headless ecommerce: найкращі рішення для фронтенд-розробників
• Supply chain security в NPM — ми можемо з оптимізмом дивитися в майбутнє
• 15 оптимізацій швидкості сторінки, які сайти ігнорують (на свій страх і ризик)
• Не використовуйте Web.dev для інформації про доступність
• Розробка кросплатформних застосунків за допомогою Bun v1.1
• Створення анімованої сфери зі зміщенням за допомогою Custom Three.js Material

CSS

• Магія Clip Path
• Style Queries майже як міксини (але міксини були б кращими)
• Функція виявлення підтримки @starting-style в CSS
• CSS «If» отримує вбудовані умови
• Як працює клавіатурна навігація в CSS-грі
• @property: CSS-змінні нового покоління тепер з універсальною підтримкою браузерів
• Помилкові уявлення про view transitions
• Zoom, zoom, and zoom: три типи збільшення в браузері (і CSS!)
• Ефект зображення, нарізаного на шматочки (чистий CSS та один графічний файл)
• Batman-Comic.CSS

JavaScript

• Завантаження великих відеофайлів за допомогою Node.js: повний посібник
• Створення npm-пакету з підтримкою CommonJS та ESM на TypeScript
• Блискавично швидкий алгоритм для перетворення одного DOM-дерева в інше
• es-toolkit — сучасна бібліотека утиліт JavaScript, яка в 2-3 рази швидша і на 97% менша альтернативних рішень
• Вивчаємо магію рун у Svelte 5

• React
  • Вчимо React: 5 важливих принципів про хуки, які ви повинні знати
  • Що таке бібліотека tRPC? Пояснюємо на прикладі демонстраційного проекту
  • Підступні витоки пам’яті React: як React compiler не врятує вас
  • Вивчайте Suspense, створюючи Suspense-Enabled бібліотеку
  • Від вебу до Native з React
  

• Vue
  • Як створити файли міграції бази даних Supabase у Vue.js
  • Як написати Vue Composable крок за кроком
  • Як створити Vue E-commerce App з використанням MSW
  

• Angular
  • Представляємо @let в Angular
  • Робота з деревами в Angular: Flat vs. nested дерева і не тільки