Front-end Digest № 68: дебати про вебкомпоненти, екосистема Vite та продуктивність CSS

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

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

Веброзробка

• World Wide Web Foundation (WWWF) засновника інтернету Тіма Бернерса-Лі припинила роботу.
• Практичні поради щодо доступності, які можна застосувати вже сьогодні.
• У чому різниця між HTML Dialog Element і Popovers.
• Case Study: Federico Pian Portfolio — 2024.
• Як покращити робочий процес фронтенд-розробки за допомогою бібліотеки ZenUI.

• Вебкомпоненти
  • Вебкомпоненти не є компонентами фреймворку. І це нормально.
  • За вебкомпонентами не має майбутнього.
  • Плюси та мінуси вебкомпонентів: від Lit and Shoelace.

• Інструменти
  • Що ж крутого у Deno 2.
  • ESLint тепер не залежить від мови: лінтинг JSON, Markdown та інших форматів.
  • 6 ШІ-інструментів для тестування та розробки API.
  • Творець Vite запускає компанію для створення JavaScript-інструментарію.
  • ViteConf 2024 | 43 доповіді про екосистему Vite.

CSS

• Створюємо семантичну кнопку, щоб зробити весь елемент клікабельним.
• CSS Masonry & CSS Grid.
• Посібник з розміщення CSS Anchor.
• Як використовувати властивість CSS backdrop-filter.
• Функція виявлення Style Queries у CSS.
• Я витратив день на продуктивність селекторів в CSS, щоб пришвидшити завантаження сайту на 2 мс.
• Бенчмаркінг продуктивності CSS @property.

JavaScript

• Розкрийте потенціал JavaScript за допомогою функціонального програмування.
• Керування пам’яттю в JavaScript за допомогою WeakRef та FinalizationRegistry.
• Шаблони для ефективного маніпулювання DOM за допомогою ванільного JavaScript.
• Реалізація поля для підпису за допомогою JavaScript.
• 5 концепцій JavaScript, які повинен знати кожен початківець.

• React
  • Типи компонентів React [2024].
  • Вступ до CSS-анімації для React-розробників.
  • Нові можливості React 19, про які варто знати — пояснення з прикладами коду.

• Vue
  • Інтеграція функцій штучного інтелекту у Vue за допомогою API `window.ai` у Chrome.
  • Text to Speech з Vue.

• Angular
  • Використання класів CSS всередині `innerHTML` в Angular-компоненті без втрати емуляції інкапсуляції.
  • Angular’s effect(): варіанти використання та примусова асинхронність.
  • Як я покращив свої навички Angular 17+ за 100 днів кодування.

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