Front-end Digest № 66. Архітектура мікрофронтенду, переосмислення CSS в JS та міграція на React 19

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

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

Веброзробка

• Архітектура мікрофронтенду
• Три вразливості API, які розробники створюють випадково
• Практики фронтенд-розробки, які допоможуть вам уникнути невдач
• Приклади кодування SVG. Корисні рецепти для написання векторних елементів вручну

• Інструменти
  • Можливості WebKit у Safari 18.0
  • Компіляція та запуск C у JavaScript за допомогою Bun
  • Реліз Deno 2 з довгостроковою підтримкою та сумісністю з npm
  • Vercel — Frontend як сервіс для розробників
  

• Продуктивність
  • Відстеження продуктивності Core Web Vitals для локальних і реальних користувачів у DevTools
  • Оптимізація для середовищ з високою затримкою
  

• Ефекти
  • Створення власних анімацій Lottie за допомогою SVGator
  • Експерименти з макетами, що змінюються під час скролу

CSS

• Анімувати до height: auto; (та інші ключові слова, що визначають внутрішній розмір) у CSS
• Покращення продуктивності рендерингу за допомогою CSS content-visibility
• Нові значення та функції в CSS
• Потрібен зворотній зв’язок. Як ми повинні визначати CSS masonry
• Переосмислення CSS в JS
• Градієнтний текст із Drop Shadow
• Вибір попередніх елементів
• Multiple Anchors
• Створення орбітальної анімації за допомогою CSS Custom Properties
• Як використовувати CSS для покращення вебдоступності

JavaScript

• Oracle, час звільнити JavaScript
• Math4Devs — список математичних символів з їх JavaScript-еквівалентами
• Посібник з впровадження Leaflet. Огляд, приклади та альтернативи
• Створіть власний вебкомпонент та реалізуйте його в React, Angular або Vue

• React
  • Розбираємо реліз React 19. Паралельний рендеринг, серверні компоненти та нові хуки
  • Перехід на React 19 за допомогою react-codemod
  • Фронтенд-розкол. Чи зможуть React Server Components знищити React
  • React-мислення. Як мислити новачкам в React
  • Очищення React за допомогою TypeScript
  

• Vue
  • Як створювати масштабовані мікрофронтенди за допомогою Vike та Vite
  • Кращі компоненти Vue з TypeScript