Front-end Digest № 1: законопроєкт про доступність сайтів, тригонометрія в CSS, релізи Ember 5.0 та Svelte 4

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

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

Веброзробка

• Як створити імерсивний вебдосвід за допомогою AR та 3D.
• За лаштунками редизайну Вікіпедії
• Створення PWA за допомогою шести провідних фронтенд-фреймворків

• Інструменти
  • Розмита межа між форматуванням і стилем
  • Трохи деталей про особливості роботи Safari на visionOS: ще одна причина відмовитися від px, чому не буде працювати :hover і що там з доступністю
  • Panda — CSS-in-JS фреймворк, який генерує атомарний CSS під час збірки (через CLI або PostCSS)

• Продуктивність
  • cloudflare впроваджує пріоритезацію HTTP/3, це зможе покращити LCP на 37%
  • Як Service Workers прискорили роботу нашого сайту на 97,5%?

• Доступність
  • 4 швидкі способи перевірити вебанімацію на доступність
  • Низькоконтрастний текст залишається найпоширенішою проблемою доступності у 2023 році
  • Використання WAI-ARIA зросло в чотири рази з 2019 року
  • Новий законопроєкт Асамблеї Каліфорнії про доступність сайтів може призвести до правового цунамі. Законопроєкт AB 1757 затверджує WCAG 2.1 AA як фактичний стандарт для сайтів і мобільних застосунків, доступних з Каліфорнії, і накладає відповідальність за передбачену законом шкоду на бізнес-структури та розробників сайтів.

• Ефекти
  • Детальна стаття про розробку сайту з креативним скрол-ефектом за допомогою Threejs (3D webgl), GSAP (Scroll Trigger) та Locomotive scroll від корейської дизайн-агенції
  • Синхронізація відео, 3D-моделей і тому подібного зі Scroll-Driven анімацією
  • Відтворення ефекту наведення на нарізане зображення з сайту Quai Network
  • Кастомний дизайн для курсора текстового поля у вигляді жирафи
  • Ефект матового скла з ефектом глибини на CSS

CSS

• Тригонометрії функції в CSS: Практичне застосування
• Майбутнє CSS: State Container Queries
• Підгонка тексту за шириною (Fit-to-Width)
• Беріть участь в щорічному опитуванні «State of CSS 2023»
• Побудова лінійного графіка за допомогою CSS clip-mask
• margin-trim як найкраща практика?
• Не відмовляйтеся від Sass заради CSS (поки що)
• Сучасний CSS
• 5 способів реалізувати смугастий фон лише за допомогою CSS

JavaScript

• Прогресивне вдосконалення та фреймворки JavaScript — складні відносини
• Деякі нотатки з JSNation conference 2023
• Як використовувати BigInt в JavaScript
• IntelliNode — уніфікований доступ до різних моделей AI, таких як ChatGPT, Diffusion, Cohere та інших, за допомогою декількох рядків Javascript.

• React
  • Прискорте розробку в React з Refine
  • Як зробити автентифікацію в React-застосунках за допомогою Supabase Auth
  • Ripple — бібліотека управління станів для React, яка позиціонується як легка, але потужна альтернатива Redux / Recoil / MobX...
  • Телепортація в React: Позиціонування, Stacking Context і Portals

• Релізи
  • Випущено Ember 5.0
  • Анонс стабільного релізу Svelte 4
  • Вийшов Nuxt 3.6, який приніс покращення продуктивності, повністю статичні серверні компоненти, кращу вставку стилів, статичні пресети, підвищену безпеку типів, і багато іншого.

• Angular
  • Освоєння Signals в Angular 16: вичерпний посібник

• TypeScript
  • Підвищуйте рівень свого TypeScript з Record types
  • Розуміння генераторів TypeScript
  • Фільтрація типів значень в TypeScript

Подобається дайджест? Підписуйтесь на автора, щоб отримувати сповіщення про нові публікації на пошту.