Front-end Digest № 5: Vue 3 для React-розробників, екосистема Svelte та CSS clamp() для адаптивної типографіки

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

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

Веброзробка

• WebGPU: кросплатформенний графічний API завтрашнього дня
• Ефективні код-ревью
• Анімація макета на основі прокрутки за допомогою GSAP’s ScrollTrigger та Flip

• Доступність
  • О, фокус діалогу, де ти?
  • Як ми створили доступну, масштабовану палітру кольорів
  • Доступні альтернативи анімованих GIF-файлів

CSS

• Fluid vs. responsive типографіка за допомогою CSS clamp()
• Tailwind Connect 2023: Підсумки першого офлайн-заходу
• Створення радіального меню без JS з CSS-тригонометрією, спливаючим вікном і позиціонуванням якоря
• Анімації та переходи за допомогою Tailwind CSS
• Rem vs Px vs Em: Вибір правильної одиниці виміру для веброзробки

JavaScript

• Особлива природа JavaScript
• Опановуємо найкращі практики Unit Testing в JavaScript
• Ітератори та генератори в Javascript

• React
  • Як докеризувати React-застосунок — покроковий посібник
  • Як React 18 покращує продуктивність застосунків
  • Як створити Routing Layer в React і навіщо він потрібен
  • Реалізація React Portals
  • React Content Font — React компонент для створення шрифтів, що містять лише ті символи, які ви використовуєте на сторінці
  • Додайте ефекти феєрверків та анімованих частинок до вашого React-застосунку

• Vue
  • Vue 3 для React-розробників: порівняння з демками
  • Як робити обгортки, розширення або проксі у Vue-компонентах

• Angular
  • Виявлення зміни і дерева компонентів у застосунках, створених в Angular
  • Як створити елемент форми для поля введення номера телефону за допомогою Angular
  • Signals роблять Angular НАБАГАТО простішим
  • Максимізація продуктивності за допомогою Angular HTTP Requests:: що можна і чого не можна
  • Модульне тестування Angular з Jest

• Svelte
  • SvelteJS: Моя екосистема більша за вашу
  • Використання Sveltris для створення сумісних React- та Svelte-застосунків

• TypeScript
  • TypeScript і поява послідовних типів
  • 5 незручних істин про TypeScript