Front-end Digest № 18: стан WebAssembly, Next.js на вершині та нові функції CSS

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

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

Веброзробка

• Legacy-код і його покращення за допомогою статичних перевірок
• Стан WebAssembly 2023
• REST, GraphQL або RPC — параліч прийняття рішень
• Вступ до Web Preferences API
• Створіть кращий мобільний інтерфейс форм за допомогою використання правильних інпутів
• Три «К»: 🤝 Конкатенація, 🗜️ Компресія, 🗳️ Кешування
• Вебкомпоненти на TPAC 2023

• Інструменти
  • Node.js 21 тепер доступний!
  • Синхронізація змінних Figma з токенами дизайну
  • Припиніть використовувати npm install у вашому CI/CD pipeline

• Доступність
  • Чому унікальні ID-атрибути важливі
  • Забезпечення доступності від’ємних чисел для всіх

• Ефекти
  • Ідеї для анімацій Image Motion Trail
  • Використання API View Transitions з Astro
  • Inspirational Websites Roundup #51

CSS

• Як створити анімацію вздовж шляху в CSS
• Божевілля TailwindCSS і що використовувати замість нього.
• CSS знахідки в вебверсії Photoshop
• Scroll-Driven State Transfer
• Пара нових функцій CSS, про які я ніколи не чув
• Реалістичний ефект відблиску при наведенні миші на CSS
• Сучасна CSS техніка для створення прозорих блоків з градієнтним бордером

JavaScript

• Нюанси base64 encoding strings в JavaScript
• Творець Solid.js розповідає про можливості скорочення коду JavaScript

• React
  • Next.js на вершині: Як він став універсальним рішенням для сучасного веброзробки
  • Як ми оптимізували імпорт пакетів у Next.js
  • Як уникнути поломки вашого React-застосунку на продакшені
  • Використання React-порталів для чистих компонентів
  • React memo насправді хороша річ
  • Робота з формами у SvelteKit, які приходять з React

• Angular
  • Декларативний Loop Control Flow в Angular 17
  • Доступ до директив, розташованих у дочірніх компонентах в Angular
  • Освоєння Angular Custom Directives: Вичерпний посібник з 15 реальними прикладами (2023)
  • Нова функція Angular 17: deferred loading

Браузери

• Примітки до випуску для Safari Technology Preview 181
• Microsoft Edge та Bing: Дивовижна історія повороту