Front-end Digest № 8: тестування JS, стандарт розробки React для початківців і майбутнє CSS та HTML

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

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

Веброзробка

• Допис у блозі з кожним елементом HTML
• Використання API Document Picture-in-Picture та Insertable Streams для запису екрана та камери
• Майбутнє нативного HTML Templating та Data Binding

• Інструменти
  • Проблема конфігурацій в Node.js
  • Вступ до esbuild Bundler
  • 12 порад та підказок для роботи з Playwright

• Продуктивність
  • Тест швидкості сторінки: моніторинг проти вимірювання
  • Підвищення продуктивності сайту: використання Webpack для компресії та оптимізації файлів

• Доступність
  • Поступово покращений HTML-акордеон
  • Допоміжні технології не повинні бути таємничою скринькою
  • Поступово вдосконалена валідація форм, частина 1: HTML та CSS
  • Проєктування доступного тексту поверх зображень: найкращі практики, методи та ресурси (частина 2)

CSS

• Нові та майбутні функції CSS 2023
• Анімація, керована прокруткою, та View Transitions (2023.06.09 @ CSS Day)
• Майбутнє тематизації з CSS Container Style Queries
• OKLCH в CSS: Послідовні, доступні кольорові палітри
• Покращення видимості фокуса — focus-within чи has(:focus)?

JavaScript

• Node.js Digest #2: npm та соціальна інженерія, LLM в Node.js розробці, чергові оновлення та критика CommonJS
• Підбірка кращих статей про тестування (в JavaScript)
• Вступ до to htmx, HTML-орієнтованої динамічної UI бібліотеки

• React
  • Стандарт розробки React для початківців
  • Devtools для React Server Components
  • Створення багаторазового спливаючого модального вікна в React з нуля
  • Одночасний запуск React і Express

• Vue
  • Порівняння Vue 3 Options API та Composition API
  • Як використовувати GraphQL у Vue3 з Apollo Client

• Angular
  • Створення настроюваних Angular Guards
  • Angular Super Forms: Підтвердження пароля
  • «Code Smells» в Angular
  • Основи виявлення змін в Angular