Front-end Digest № 117: 100 нових функцій CSS, інструменти фронтенду та поширені помилки React

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

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

Веброзробка

• Як тримати package.json під контролем
• Скомпрометовано npm-пакети debug і chalk
• Відмовтесь від кастомних модалок: міць нативного елемента <dialog>
• Чи здатні нативні веб API витіснити кастомні компоненти у 2025 році?
• Опанування веброзробки: фронтенд-фреймворки, впровадження вебсерверів

• Інструменти
  • Вибір правильної моделі в Cursor
  • Deno 2.5: дозволи у файлі конфігурації
  • Fresh + Vite: фулстек-фреймворк нового покоління
  • Процес встановлення Bun: зазирнемо всередину
  • Надмір інструментів: Як дати раду перевантаженню інструментами у фронтенд-розробці.
  • Порівняльне оцінювання та рейтинг AI-інструментів для розробки [Вересень 2025]
  

• Ефекти
  • Коли клітини стикаються: створення експерименту з органічними частинками за допомогою Rapier і Three.js
  • Ефект рідкого скла у браузері: рефракція з використанням CSS і SVG

CSS

• Поки ви лагодите щось по фану, полагодьте й важливі моменти
• Понад 100 нових функцій CSS за останні 5 років: один список, який об’єднує їх усі
• Зміна кольорів у CSS: дослідження технік анімації кольорів
• Патерн «йти за лідером» з CSS anchor positioning
• Додавання CSS Cascade Layers до поточного проєкту
• Не наслідуйте блокову модель
• Breakpoint Columns: п’ять підходів. Який оберете ви?
• Які можливості відкриває `corner-shape`?
• Композиція в CSS
• CSS layers для перевизначення стилів в Astro-компонентах без !important.
• Subgrid: безмежні можливості вирівнювання елементів

JavaScript

• Нарешті, безпечні методи масивів у JavaScript

• React
  • next/dynamic в Next.js — коли лінь корисна, а коли критична
  • Створення бібліотеки керування станом
  • Поширені помилки React та способи їх виправлення
  • Файлова маршрутизація в React Router v7 — чому варто залишити її опціональною
  • Основи React: як ефективно використовувати React useCallback
  • Застосування правил проєкту Cursor для покращення розробки застосунків Next.js.
  

• Бібліотеки
  • Анонсуємо Reciprocate: JS-бібліотека для надання реактивності вашим HTML вебкомпонентам
  • Mediabunny: JavaScript-бібліотека для читання, записування й конвертування відео- та аудіофайлів — прямо у браузері, швидше за будь-кого іншого
  • Я спробував Solid.js, тепер мене починає бісити React

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