Front-end Digest № 32: вебкомпоненти, покращення типографіки з CSS, React та Vue у 2024 році

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

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

Веброзробка

• Вебкомпоненти всерйоз
• Як вимкнути менеджери паролів для полів
• Як автоматично споживати RESTful API у вашому фронтенді
• Сім найпоширеніших атак на фронтенд

• Інструменти
  • Дослідження та тестування поведінки API за допомогою OpenAPI DevTools
  • Нове в Chrome 121
  • П’ять способів опублікувати кілька NPM-пакетів у 2024 році
  

• Доступність
  • Ключові оновлення в WCAG 2.2: Огляд експерта
  • Підвищення модальної доступності за допомогою атрибутів aria та пастки для фокусу. Реалізації на звичайному JavaScript та React.
  

• Ефекти
  • Навігація в стилі друкованих ЗМІ
  • Малювання при сколі
  • М’яч, що вискакує зі стіни
  • Закруглена смуга прокрутки

CSS

• Як вирівняти текст останнього рядка абзацу
• Виділення тексту, коли користувач прокручує його вниз
• Експериментальні CSS-каруселі з анімацією, керованою прокруткою
• 3D в CSS
• CSS-ефект розмитого мерехтіння
• CSS-only backdrop images
• Покращення збалансованності тексту за допомогою CSS text-wrap

JavaScript

• Реалізація підтримки MongoDB для NestJS Boilerplate з використанням гексагональної архітектури
• WebGPU-kit — набір бібліотек, які полегшують створення високопродуктивних, кросплатформних, веб-графічних застосунків.

• React
  • Як розпочати React-проєкт у 2024 році
  • У React 19 з’являться нові хуки на стороні клієнта
  • Next.js App Router. Досвід використання. Шлях у майбутнє або неправильний поворот
  • З мого досвіду: useEffect vs useLayoutEffect в React
  • Уроки, що я виніс після оновлення до React 18
  • Розробка адаптивного мега-меню в React
  • Створення ШІ-генератора фотографій та застосунку для редагування за допомогою React
  • Обробники подій React onClick: Повний посібник
  

• Vue
  • Багаторівнева архітектура Front-end застосунків у Vue.js
  • Інсайти та тренди у Vue.js на 2024 від Evan You
  • Лінива гідратація та серверні компоненти в Nuxt — продуктивність Vue.js 3
  • Найкращі UI-бібліотеки для створення цікавих інтерфейсів у Vue 3 та Nuxt 3
  

• Angular
  • Побудова ComputedAsync для Signals в Angular
  • Занурення в новий Control Flow Internals в Angular
  • Фулстек-застосунки з Angular та NestJS в Nx Monorepo