Front-end Digest № 71: стан фронтенду в 2024, реліз Svelte 5 та опитування State of React

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

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

Веброзробка

• Стан фронтенду 2024
• Як Vercel впроваджув мікрофронтенди
• 11 найкращих HTML-практик для форм login та sign-up
• З’ясування взаємозв’язку між Popovers та Dialogs
• Framer: як ми прискорили інтерактивність сайтів на 50%
• Case Study: Monolith Studio

• Інструменти
  • 5 крутих речей, які можна зробити з допомогою DevTools AI Assistance
  • Новий значок прокрутки в DevTools: швидше знаходьте прокручувані елементи
  • Чат-бот Anthropic Claude тепер вміє писати та запускати JavaScript-код
  • Керування кількома версіями node без NVM або додаткових інструментів
  • ViteConf 2024 був вибуховим

CSS

• Сучасний CSS Reset
• Як створити CSS-лоадери за допомогою одного елемента
• Можливе майбутнє CSS: функції підрахунку дерев і випадкові значення
• Допоможіть нам вибрати остаточний синтаксис для Masonry в CSS
• Інтерактивний пост про колірний простір OKLCH
• Ви можете використовувати text-wrap: balance; на іконках
• Переходьте на light-dark() сторону
• Розваги з кастомними курсорами
• Розкрийте можливості анімації на основі прокрутки
• Анімація черги елементів за допомогою View Transitions
• Спрощення CSS-анімації за допомогою властивостей display та size

JavaScript

• Як писати чистіший JavaScript-код за допомогою тернарного оператора
• Використання буферів протоколу в JavaScript: ефективний бінарний формат
• Реалізація та використання точок відстеження моніторингу в JavaScript
• Розуміння infer в TypeScript
• Реліз Svelte 5
• Початок роботи з Piecesjs: створення нативних вебкомпонентів за допомогою легкого фреймворку
• Next.js 15 офіційно стабільний і готовий до використання
• Новий стабільний компілятор Next.js працює швидше, підтримує більші збірки

• React
  • Опитування State of React 2024
  • React Compiler Beta Release
  • Як створити власне колесо назв за допомогою React та TypeScript
  • Ідеальне розміщення тексту в контейнері на React
  • Найкращі бібліотеки React для компонентів select
  • Глибоке занурення в React Fiber

• Vue
  • Як пришвидшити роботу Vue за допомогою серверного рендерингу
  • Як оновити CSS-змінну :root за допомогою Javascript
  • Витік пам’яті та проблеми з піковим навантаженням процесора в SSR: подорож до вирішення

• Angular
  • Підхід Angular до часткової гідратації
  • Масштабуйте свій Angular-застосунок на новий рівень за допомогою Nx
  • Все, що потрібно знати про resource API в Angular

Фронтенд-меми