Front-end Digest № 86: GIF в 2025, вкладеність CSS та State of React 2024

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

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

Веброзробка

• Як робити фавікон у 2025 році: три файли, які відповідають більшості потреб.
• Який WYSIWYG редактор обрати для свого проєкту у 2025 році?
• Створення GIF-анімацій: посібник на 2025 рік.
• API для спливаючих вікон (Popover) тепер доступний у Baseline.
• HTML та CSS для одноразового введення пароля.
• Як створити список контенту з підтримкою групових дій, поєднуючи традиційний HTML та сучасний CSS.
• Оптимізація Critical Rendering Path.

• Ефекти
  • Як створити анімований курсор-олівець у техніці stop-motion з використанням p5.js.
  • Ефект динамічного збільшення фокусу за допомогою CSS @property.
  • Як зробити найпухнастішу траву за допомогою three.js.

CSS

• Три підходи до селектора «&» (амперсанд) в CSS.
• Як створювати хвилясті блоки за допомогою CSS.
• Вкладеність CSS: використовуйте з обережністю.
• Доведення RWD до екстриму.
• View Transitions в дії: Покращена продуктивність анімацій для ::view-transition-group(*).
• Зміна font-weight на основі DPI екрана користувача.
• Компіляція CSS за допомогою Vite та Lightning CSS.
• CSS Custom Functions наближаються... і вони змінять правила гри!

JavaScript

• Oracle обґрунтувала свій товарний знак JavaScript за допомогою Node.js — тепер вона хоче, щоб її проігнорували.
• Повний перехід на модулі ESM.
• Tutorial: публікація ESM npm-пакетів за допомогою TypeScript.
• Як розробити маршрутизацію для SPA на ванільному JavaScript.

• Теорія JS
  • Декоратори та анотації JavaScript: Практичний посібник з метапрограмування.
  • Путівник по Object.groupBy: Альтернатива Array.reduce.
  • API Temporal: Як можливо нарешті вирішать проблеми з датами в JavaScript.
  • Існує багато способів розбити довгі завдання на частини в JavaScript.
  • Монорепозиторії в JavaScript та TypeScript.

• React
  • State of React 2024: результати.
  • Освоєння React Refs: Просунуті техніки з використанням хука CombinedRef.
  • Освоєння інтеграції React та OpenLayers: Вичерпний посібник.
  • Розгортання додатків Next.js за допомогою Deno Deploy.

• Angular
  • Angular: The Documentary | Історія походження.

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