Front-end Digest № 22: вебкомпоненти, нюанси градієнтів у CSS, ООП у JS та еволюція Angular

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

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

Веброзробка

• Анімація морфінгу фігури під час прокручування
• Нові веб-API — спливаюче вікно над діалоговим елементом не є інтерактивним?

• Продуктивність
  • Нова техніка для оптимізації зображень: SVG Short Circuiting
  • Оптимізація продуктивності: пояснення критичного шляху рендерингу
• Інструменти
  • Вийшов Vite 5.0!
  • Посібник з впровадження Bun: огляд, приклади та альтернативи

• Вебкомпоненти
  • HTML Web Components
  • Вебкомпоненти HTML: приклад
  • Спроба таксономії вебкомпонентів

CSS

• Вкладеність CSS (CSS Nesting)
• Обхідні шляхи для уникнення помилок в градієнтах
• Радіальні градієнти та тригонометричні функції CSS
• Абсолютний ремдом, або як браузери масштабують текст
• Адаптивний багаторядковий текст у формі стрічки на CSS
• Створення інтерактивної галереї зображень за допомогою HTML та CSS
• ~~Новий~~ Старий спосіб написання CSS (про інкапсуляцію стилів)
• Як використовувати позиціювання анкорів CSS
• 10 порівнянь на тему Bootstrap vs. Tailwind CSS — розбір фронтенд-дилеми

JavaScript

• Чи завжди елегантний JavaScript ефективний? Пояснення щодо стислого та швидкого коду
• Явне керування ресурсами (Explicit Resource Management): вивчаємо нову функцію JavaScript та TypeScript
• Посібник із впровадження Astro: огляд, приклади та альтернативи
• JavaScript ООП — більше не таємниця

• React
  • Чому React Server Components — майбутнє веброзробки
  • React Server Components без фреймворку?
  • Повернення до React (після Preact)
  • Асинхронний рендеринг в React: Suspense, Hooks та інші методи
  • Чому MobX більше не в моді
  • Паралелізм у React 18 для зайнятих бджілок
  • Як використовувати TypeScript з React

• Vue
  • Використання блок-схем для управління станом у складних застосунках
  • Краще керування станом у Vue за допомогою модулів Vuex

• Angular
  • Досліджуємо еволюцію Angular: чому на нього варто поглянути ще раз
  • Ви неправильно створювали Angular-застосунки!
  • Як Angular Dependency Injection працює під капотом
  • Зберігання компонентів в Angular: управління станом на рівні компонентів із практичним підходом