Front-end Digest № 24: CSS Hooks, важливий момент для вебкомпонентів та як працюють сучасні JavaScript-фреймворки

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

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

Веброзробка

• Адвент-календарі для веброзробників на 2023 рік
• Як GenAI змінює ландшафт фронтенд-розробки
• Вебкомпоненти HTML переживають важливий момент
• Вебкомпоненти усувають залежність від JavaScript-фреймворків
• Дивні хаки HTML (історична ретроспектива)
• SVG Tutorial — навчіться кодувати SVG-зображення крок за кроком
• Для цього вам не потрібен JavaScript
• Мудрість систем дизайну 2023

• Інструменти
  • Анонсуємо Deno Cron
  • Посібник з адаптації Vite: огляд, приклади та альтернативи
  • CLI від Prettier: глибоке занурення в продуктивність
  • Простий WebSocket бенчмарк на JavaScript: Node.js проти Bun

• Продуктивність
  • Чи повинен AVIF бути домінантний форматом зображень у вебі?
  • Поступання головному потоку: як розбиття завдань може виправити INP
  • Sluggish CATs: Сторінки категорій мають найгірший показник відгуку (INP) на e-Commerce сайтах

• Ефекти
  • Ефект картикового скляного 3D порталу з React Three Fiber та Gaussian Splatting
  • Як створювати анімовані GIF-файли з GSAP-анімацій
  • Створюйте динамічні вебінтерфейси за допомогою інтерактивних SVG-анімацій

CSS

• Трюк з CSS: перехід від height 0 до auto!
• Створення оверлея та прозорої смуги прокрутки, видимої під час наведення, за допомогою CSS
• Властивість `hanging-punctuation` в CSS
• Pure CSS infinite autoplay carousel — без дублювання тексту
• CSS Hooks — інлайнові стилі роблять те, що, на нашу думку, вони не можуть.
• Креативне використання градієнтів CSS
• oklch() зберігає perceived lightness для різних кутів відтінку
• Oh No, Overflow!
• Масштабування вбудованих стилів CSS за допомогою css-scope-inline

JavaScript

• Прототипне спадкування. __proto__ & prototype для чайників
• JavaScript у 2023 році: рік сюрпризів і трансформацій!
• Як працюють проміси в JavaScript — підручник для початківців
• Давайте дізнаємося, як працюють сучасні JavaScript фреймворки, створивши один з них
• Найшвидший спосіб передачі стану в JavaScript
• Реалізація розширених можливостей за допомогою API navigator.share
• 8 порад, як зменшити кількість невикористаного JavaScript
• 5 найкращих JavaScript-бібліотек для багатовимірних масивів

• React
  • Зручний спосіб роботи з sessionStorage/localStorage в React
  • Як розділити стани між мікрофронтендами React за допомогою Module-Federation?
  • Що ми знаємо про React Forget
  • Додайте керування користувачами до сайту на Next.js за допомогою серверних компонентів React, server actions та AuthKit

• Angular
  • Angular ReactiveForms: Дещо про enable() та disable(), що може вас здивувати
  • Angular State Management: вивчаємо Subject, BehaviorSubject, ReplaySubject та AsyncSubject
  • Створення Custom Pipes в Angular: від форматування до фільтрації (2023)
  • Виявлення локальних змін в Angular