Front-end Digest № 13: маніпуляції з JPEG та EXIF в Javascript, анімації за допомогою CSS Mask та посібник з View Transitions API

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

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

Веброзробка

• Ілля Клімов: CORS: Що ти в біса таке?
• Порівняння API Popover та елемента dialog
• HTML5 Template: Базовий шаблон для будь-якого проекту
• Не існує такого поняття, як desktop screen
• Що потрібно враховувати при виборі шрифтів для вашого наступного проєкту
• AI для веброзробників: ознайомлення з проєктом і налаштування

• Продуктивність
  • Уникайте лінивого завантаження зображень продуктів і Hero Images
  • View Transitions ламають інкрементний рендеринг

• Вебкомпоненти
  • Web Components Accessibility FAQ
  • Створення вебкомпонента для зчитування QR-кодів

• Анімація
  • View Transitions API та мета-фреймворки: практичний посібник
  • Ефект наведення для грід-елемента
  • Дебаггер для анімації, керованої прокруткою (DevTools Extension)

CSS

• Як обчислюються значення CSS Custom Properties
• Короткий вступ до нативної вкладеності CSS
• Порівняння безкласових CSS фреймворків
• PostCSS Bundler — сумісний зі стандартами референсний бандлер CSS
• Обмеження Scoped CSS
• Анімація зображень за допомогою CSS Mask
• Найкращі функції CSS та UI 2023 року
• Градієнти, режими накладання та крутий ефект наведення
• Повноекранна панель навігації з анімацією на чистому CSS
• Вирішено за допомогою CSS Scroll-Driven Animations: Визначаємо, чи може елемент прокручуватися, чи ні

JavaScript

• Маніпуляції з даними JPEG та EXIF в Javascript
• Напишіть власний індикатор прогресу за допомогою ванільного JavaScript
• JavaScript отримає метод групування масивів
• Як я структурую фронтенд у ентерпрайз застосунках після 4 років використання Next.js

• React
  • Ключова різниця між ReactJS та React Native, яку потрібно розуміти — просте пояснення
  • Робота з CSV-файлами за допомогою react-papaparse
  • Вам може не знадобитися хук useEffectAsync
  • React: API Response Validation
  • Створення компоненту toast
  • Посібник з React Portals

• Vue
  • Мікрофронтенди: Розбиття великих застосунків на маленькі частини за допомогою Vue та Vite

• Angular
  • Нове в Angular — afterNextRender та afterRender
  • Інкрементна статична регенерація для Angular
  • Angular Signals: через що весь цей галас?

• Svelte
  • Огляд Svelte: майстер-клас із розширення можливостей

Браузери

• Критична помилка WebP: Chrome, Firefox та Edge вже випустили оновлення. Telegram та Signal теж під загрозою