Front-end Digest № 104: SOLID в JS, стилізація GAP в CSS та стан React-спільноти у 2025

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

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

Веброзробка

• Frontend Evolution #2: як війна браузерів народила динамічний веб, DHTML-революція та Microsoft vs Netscape битва за DOM (1995-2000)
• Створення автоматично зникаючого сповіщення з використанням HTML Popover
• Декодування елемента SVG path: команди ліній
• Вайбове створення UI з Google Stitch — чи це майбутнє фронтенду?
• Elixir: альтернатива веброзробці на JavaScript
• Доповідь Google «Що нового у Web UI»: менше кастомних компонентів JavaScript, більше вебстандартів
• CORS, SameSite та CSRF: 3 виміри автентифікації на основі Cookie
• Зміна специфікації HTML: екранування < і > в атрибутах

• Інструменти
  • Анонс Oxlint 1.0
  • Деплойте як з Vercel, але дешевше
  • Важливе оновлення pnpm 10.12: впроваджено Global Virtual Store та Expanded Version Catalogs
  • Node.js рухається до стабільної підтримки TypeScript з Amaro 1.0
  

• Ефекти
  • Побудова безкінечної паралакс-сітки з GSAP та безперервним тайлінгом
  • Анімована при прокручуванні літерна сітка
  • Створення панелі навігації з «Moving Highlight» ефектом за допомогою JS та CSS
  • Як створювати інтерактивні краплеподібні метакулі за допомогою Three.js та GLSL

CSS

• Зернисті градієнти
• Новий спосіб стилізації gap в CSS
• 1fr 1fr vs auto auto vs 50% 50%
• Долаючи обмеження: створення головоломки танграм на (S)CSS
• 7 поширених помилок CSS-меню і як їх виправити
• Безпечне вирівнювання вмісту
• Організація класів у HTML та їх стилізація: огляд підходів OOCSS, BEM, Atomic CSS і SMACSS

JavaScript

• Як писали JavaScript в минулому
• VanillaCreamJS: суперсили для нативного JavaScript

• Теорія
  • Опанування творчих шаблонів проєктування в JavaScript: посібник експерта
  • Принципи SOLID-проєктування, які повинен знати кожен JavaScript-розробник
  • Як зробити import() string в JavaScript
  • Чого слід уникати в JavaScript
  

• React
  • Стан React та спільноти у 2025 році
  • Порівняння найкращих React-бібліотек toast-повідомлень [оновлення 2025]
  • TanStack Start проти Next.js: вибір правильного фулстек-фреймворку React
  • Підвищення продуктивності за допомогою React Server Components та Next.js
  

• Vue
  • Реалізація кастомної локалізації з Nuxt 3 без i18n
  • Як працюють Vue Composables — пояснення з прикладами коду
  

• Angular
  • Міграція на сигнали в Angular-проєктах
  • Angular v20 може здатися нудним — ось 6 причин, чому це не так
  • Як працюють Angular Signals під капотом. Частина 2

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