Front-end Digest № 50: ESLint, Prettier і Biome, нові CSS-трюки та ECMAScript 2024

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

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

Веброзробка

• Ось що ми дізналися з першого опитування HTML Survey
• Термін «Web components» можна вважати шкідливим
• Hover Motion Intro Animation

• Інструменти
  • Від ESLint та Prettier до Biome
  • WinterJS та Bun: детальне порівняння двох потужних JavaScript-середовищ виконання
  • Представляємо ESLint Configuration Migrator
  • Посібник з Biome: огляд, приклади та альтернативи
  • Припиніть змінювати розмір браузера: покращуйте тестування на адаптивність
  

• Продуктивність
  • Витискаємо максимум перформансу з NestJS
  • Ще швидший Microsoft Edge: UI тепер працює на 42% швидше після переходу з React на WebUI 2.0
  • Від React до HTML-First: Microsoft Edge дебютує з WebUI 2.0
  

• Доступність
  • Міф про темний режим та доступність
  • Чи можуть LLM виявляти проблеми з доступністю?
  • Погляд розробника програмного забезпечення на Європейський закон про доступність
  • Нарощування уваги до вебдоступності в Азійсько-Тихоокеанському регіоні

CSS

• The Gap: Дослідження больових точок, які вирішує CSS gap.
• Старі методи, нові CSS трюки
• Нова магія для анімації в CSS
• CSS Anchor Positioning на практиці
• Як зробити CSS-таймер
• Що таке signals в Tailwind, як вони працюють та кейси використання
• Інтерактивні підказки з додатковою інформацією (Popover Toggletips)
• RFC: категоризація рівнів/версій CSS

JavaScript

• Шаблони отримання даних в Single-Page Applications
• Чому нам потрібна стандартна ORM-бібліотека JavaScript для SQL-баз даних
• Чому HTML Actions раптом стали трендом у JavaScript
• Глибоке занурення в генератори парсерів JavaScript
• Нова функція в ECMAScript 2024: Promise.withResolvers()
• Ще одна особливість ECMAScript 2023: symbols як WeakMap keys

• React
  • Автоматизація Query після мутацій
  • React 19 — нові хуки з прикладами та поясненнями
  • Підступні витіки пам’яті React II: Closures Vs. React Query
  • Todo app без клієнтського JavaScript з використанням @lazarv/react-server
  • Next.js 15 RC
  

• Vue
  • Vue.js 101: Освоєння Computed Properties та Watchers для реактивних даних
  • Повний посібник з Vue 3 Composition API: Поради та найкращі практики
  
• Angular
  • Що нового в Angular 18
  • Управління станами в React та Angular
  • Вивчаємо новий синтаксис @let в Angular: Покращення Template Variable Declarations