Front-end Digest № 49: Підсумки React Conf 2024, реліз Angular v18 та нюанси сучасного CSS

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

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

Веброзробка

• Як Spotify використовував Picture-in-Picture API для створення мініплеєра Spotify
• Коли варто використовувати компоненти, а коли просто HTML?
• Краще розуміння помилок та попереджень в консолі за допомогою Gemini
• Покращення за допомогою нових switch-контролів в HTML
• Анімація діалогового елемента

• Продуктивність
  • Візуалізація скриптів, що блокують рендеринг вашого сайту
  • Як розширення Chrome впливають на продуктивність вебсайтів у 2024 році?
  • Вичерпний посібник з аналізу продуктивності JavaScript за допомогою Chrome DevTools
  • Кількісна оцінка впливу Styled Components на час відгуку сервера

CSS

• Сучасні CSS макети: для цього вам може не знадобитися фреймворк
• Про відповідність та читабельність: Створення кольорів тексту за допомогою CSS
• У нас тепер є Container Queries, але чи використовуємо ми їх насправді?
• Представляємо Pigment CSS: нове покоління CSS-in-JS
• contrast-color() - хороша штука, але вирішує проблему не на тому рівні
• Чи варто використовувати властивість CSS text-emphasis для заголовків?
• Посібник з впровадження Bulma CSS: Огляд, приклади та альтернативи
• Покращуйте CSS view transitions за допомогою Velvette

JavaScript

• Що нового в JavaScript Frameworks (травень 2024)
• П’ять найсучасніших JavaScript-технік
• Альтернатива для Websocket: як використовувати Firestore для прослуховування подій у реальному часі

• React
  • Підсумки React Conf 2024
  • Основні моменти React Conf 2024
  • React Compiler з React 18
  • Як стилізувати React-компоненти
  • Об’єднання Remix і React Router
  • Restyle — Zero Config CSS для React
  • Автоматична генерація зображень Open Graph у NextJS
  • Використання Mountaineer для розробки React-застосунків на Python
  

• Vue
  • Створення Real-Time застосунків за допомогою Vue.js та WebSockets
  • Створення CatGPT: Посібник з Vue 3 та Vuetify для любителів зображень котів
  

• Angular
  • Angular v18 вже доступний!
  • Прощаємося з Zone.js: Що нового в Angular 18?
  • Оновлення до Angular Material 18: збереження підтримки для Material 2 та додавання підтримки для Material 3
  • Методи налагодження — Angular DevTools
  • Методи налагодження — Chrome DevTools
  • Angular Tutorial: Використання @HostBinding з Signals