Front-end Digest № 25: оптимізація продуктивності React та Vue, підсумки року для CSS від Google та вебкомпоненти з Lit

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

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

Веброзробка

• Співбесіда з Front-еnd розробником. 400+ запитань для Junior, Middle i Senior
• Синергія мікрофронтенду: Техніки ефективної комунікації
• Руйнуючи бар’єри: прості вебкомпоненти з Lit
• Медіазапити в HTML-відео
• Випущено HTML5 Boilerplate v9.0.0
• Eleveny vs Next.js для статичної генерації сайтів
• Створення анімованих індикаторів на SVG: Інтерактивний посібник
• Як створити Web API за допомогою Express.js, Bun та MongoDB?
• Анімація нарізки тексту при прокручуванні
• Ексклюзивний акордеон за допомогою елементу details

• Продуктивність
  • Методологія продуктивності «MOME» (Measure, Optimize, Monitor, Educate)
  • Підготовка до Interaction To Next Paint, нової метрики Web Core Vital
  • Відстежуйте продуктивність за допомогою Google Sheets та CrUX History API
  • Спрощення вебпродуктивності за допомогою єдиного показника UX
  • Обґрунтована стратегія попереднього кешування для великих сайтів
  • Тестування продуктивності Social Media Embeds

• Інструменти
  • Як користуватися деревом доступності в Chrome
  • Повна шпаргалка для Puppeteer
  • Автоматизація завдань і налагодження за допомогою AI-інструментів

CSS

• CSS Wrapped: 2023! — підсумки року для CSS від команди Google
• Представляємо StyleX
• StyleX — рішення Meta для масштабованого CSS
• Представляємо чотири нові міжнародні функції в CSS
• Tailwind має проблему з масштабуванням. Як ми можемо її вирішити?
• CSS Preview: визначення області застосування CSS за допомогою @ scope
• Pure CSS Card Pagination

JavaScript

• Як маркетинг змінив ООП в JavaScript
• Глибоке занурення в нові функції JavaScript (від ES7 до ES13)
• Вкладеність вебкомпонентів у звичайному JavaScript
• Бенчмаркінг, профілювання та оптимізація бібліотек JavaScript
• Вивчаємо оператор modulo в JavaScript: Повний посібник
• Вивчаємо квантові обчислення за допомогою JavaScript: посібник для початківців
• Реліз Astro 4.0

• React
  • Оптимізація продуктивності React
  • Кращі практики використання React Server Components з Headless CMS
  • Дайджест останніх оновлень в екосистемі React (Redux v5.0.0, Redux v9.0.0, React Native 0.73)
  • Як я використовував useMemo та useCallback в React

• Vue
  • Веб-розробка за допомогою Vite, Vue та Flask
  • Продуктивність Vue.js 3: Розуміння та вимірювання продуктивності Nuxt

• Angular
  • Як перенести проєкти на Angular 17
  • Використання defer в Angular 17 для реалізації лінивого завантаження
  • Прощавай, NgRx Facades. Здрастуйте, Standalone Functions
  • Покращення швидкості завантаження за допомогою блоку @defer в Angular