Front-end Digest № 46: індексована геометрія Three.js, спадкування в CSS та Throttling в JavaScript

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

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

Веброзробка

• Створюємо та публікуємо розширення для Chrome
• Popover API вже тут
• Я переглянув 1000 думок про HTMX
• Вивчаємо стек AHA: посібник, демонстрація та порівняння
• Доповіді з Epic Web Conf 2024
• Ідеального сайту не існує

• Інструменти
  • Що таке Vite (і чому він такий популярний)?
  • Райан Даль: Від Node.js та Deno до «сучасного» JSR Registry
  • Node.js 22 Release покращує досвід розробників

• Продуктивність
  • Числа затримок, які повинен знати кожен фронтенд-розробник
  • Оптимізація тривимірної вебграфіки: Глибоке занурення в індексовану геометрію в Three.js

• Ефекти
  • Обчислювальний шейдер реакційно-дифузійного розсіювання у WebGPU
  • Divide ClipPath Motion with GSAP + CSS

CSS

• Покращуємо Tailwind CSS за допомогою Tailwind Variants
• Адаптивність для Tailwind CSS: Плавніші адаптивні стилі з меншим обсягом коду.
• Відтінки сірого за допомогою color-mix()
• Поєднання CSS :has() та HTML <select> для кращого умовного стилю
• Помилкові уявлення про специфічність в CSS
• Спадкування в CSS
• Альтернативна пропозиція щодо CSS masonry
• Обробка відступів в Treeview-компоненті
• CSS Custom Properties в Highlight Pseudos
• Найскладніша проблема в Computer Science: Центрування речей
• Друк музики за допомогою CSS Grid
• Microsoft Edge Team: Відкликання підтримки параметрів -ms-high-contrast та -ms-high-contrast-adjust
• Якби у View Transitions та Scroll-Driven анімацій була дитина... (2024.04.25 @ CSS Café)

JavaScript

• Обробка дат у JavaScript за допомогою Tempo
• Що таке Throttling в JavaScript? Пояснення на простому прикладі використання в React

• React
  • Про React 19: найцікавіше з оновлення
  • Мігруйте на React 19 за допомогою ast-grep
  • Бета-версія React 19: Короткий посібник
  • Використання React Shepherd для створення туру по сайту
  • Керівництво по роботі з cookie в Next.js
  • API Layer & Fetch Functions

• Vue
  • Екосистема Vue у 2024 році
  • Що таке Vue.js Composable?

• Angular
  • Покращення повторного використання коду в Angular-проєктах
  • Взаєморозуміння між Angular та React. Частина 3: Сервіси та Context API
  • Видалення manual change detection calls з мого Angular-застосунку