Front-end Digest № 36: HTMX vs React, CSS :has() та нові мікрофреймворки

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

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

Веброзробка

• Стан Jamstack: розробники хочуть повернутися до простоти
• Практичний посібник з використання shadow DOM
• HTML Streaming та DOM Diffing Algorithm
• Підхід Netlify до фронтенду за словами нового CTO
• Як GTmetrix використовував GTmetrix для прискорення... GTmetrix!

• Інструменти
  • Підсумки ESLint за 2023 рік
  • Посібник з Storybook Test для тестування взаємодії
  

• Фреймворки
  • WXT — фреймворк нового покоління для розробки веброзширень.
  • htmz — мінімалістичний HTML-мікрофреймворк, який дає вам можливість створювати модульні вебінтерфейси зі знайомою простотою звичайного HTML.
  • h3 — Мінімалістичний H(TTP)-фреймворк, створений для високої продуктивності та портативності

CSS

• Інтерактивний посібник з CSS :has()
• Історія маркетингу та дезінформації Tailwind
• View transitions: анімація зміни співвідношення сторін
• Створення анімації класичного DVD-скринсейвера на CSS
• Okay, Color Spaces. Детальна стаття про простори кольорів oklab та oklch
• Пропозиція: CSS Variable Groups
• HTML: Як змінити розмір розмітки та зображення за допомогою CSS Container Queries

JavaScript

• Як JavaScript стає все більш громіздким у 2024 році
• Огляд Node.js за 2023 рік
• Функції в JavaScript: чи все ви про них знаєте
• Vanilla JavaScript, бібліотеки та прагнення до Stateful DOM Rendering
• Створення Research Assistant Tool за допомогою ШІ та JavaScript
• Вивчення Promise Collection Methods в JavaScript

• React
  • Тренди React у 2024
  • HTMX vs React: Повне порівняння
  • Розширений шаблон React для старту нового фронтенд-проєкту
  • Покращуйте свої React-застосунки за допомогою утиліт та компонентів ShadCn
  • Керування лінивим завантаженням, нескінченною прокруткою та анімаціями в React
  • JavaScript на вимогу: Чим Qwik відрізняється від React Hydration
  • Використання SignalDB з React: повний посібник
  • Посібник з layouts та nested layouts в Next.js
  

• Vue
  • Творче кодування у Vue за допомогою VueXYZ
  • Три види пропсів у Vue
  

• Angular
  • Ознайомлення з найновішими функціями в Angular
  • Signal Input тепер доступний у developer preview для Angular-розробників
  • Вивчення функції model в Angular: усебічний огляд
  • Як інтегрувати React та AngularJS через Webpack Module Federation