Front-end Digest № 27: веброзробка та JavaScript у 2023 році, оптимізація TTFB та сучасні методи анімації

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

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

Веброзробка

• Веброзробка у 2023 році: JavaScript все ще рулить, з’являється штучний інтелект
• FileReader API
• DeviceScript — TypeScript для крихітних IoT-пристроїв
• Підтримка аудіоописів у HTML-відео

• Інструменти
  • Чи варто використовувати Bun, Node.js або Deno у 2024 році?
  • Дослідження трасувань Chrome: вступ з прикладами
  • Експериментальні можливості вебплатформи Chromium
  • Погляд на абсолютно новий інтерфейс Edge DevTools

• Продуктивність
  • Вимірювання, моніторинг та оптимізація TTFB за допомогою Server timing
  • Аналіз продуктивності INP з використанням реальних даних RUMvision
  • За межами софт-навігації: відстеження TTFB вашого SPA

• Анімація
  • View Transitions API та чудові UI-анімації (частина 1)
  • Приклади та інструменти для демонстрації анімації на основі скролу, створеної за допомогою Web Animations API (WAAPI) та CSS Animations API.
  • Анімація на основі прокрутки
  • Як найкраще перезавантажити ланцюгову WAAPI-анімацію?
  • View Transitions
  • Створення аудіореактивних візуальних ефектів з динамічними частинками в Three.js

CSS

• Нові CSS Viewport Units не вирішують проблему класичної смуги прокрутки
• Border images в CSS: Ключовий напрямок для Interop в 2023
• Що :has() змінив в CSS?
• Використання властивості CSS contain: глибоке занурення
• CSS Nesting
• Як відцентрувати елемент у CSS вертикально? Легко!
• Чиста архітектура: темізація за допомогою Tailwind та CSS-змінних
• Загадковий випадок використання CSS animation-composition: accumulate при трансформації scale

JavaScript

• JavaScript у 2023 році: Signals, RSC в React та Full-Stack JS
• Пʼять систем збірки JavaScript на 2024 рік
• Глибоке клонування об’єктів у JavaScript, сучасний спосіб
• Освоєння принципів SOLID в JavaScript: вичерпний посібник
• Prototypes Unleashed: розганяй JavaScript і залишай повільний код у дзеркалі заднього виду!
• 20 сучасних сніппетів Javascript для розв’язання поширених проблем в JS

• React
  • Порівняння інструментів та стратегій тестування Next.js
  • Занурення в Server Actions в Next.js 14
  • Розуміння хуків React-а useFormState та useFormStatus
  • Як тестувати хуки React

• Vue
  • Перетворіть свій сайт на Vue на готовий до роботи в автономному режимі прогресивний вебзастосунок
  • Vue 2 наближається до EOL
  • Vue Query проти Pinia: порівняння

• Angular
  • Persistent Data Grids в Angular: вичерпний посібник
  • Angular Change Detection — сьогодні та завтра
  • Local Change Detection в Angular 17
  • Оптимізація архітектури великих вебзастосунків за допомогою Angular
  • Виявлення змін, zone.js, zoneless, local change detection та історія про signals 📚
  • NG hint [Angular Signals з RxJS]