Front-end Digest № 62: оптимізація LCP, нюанси CSS contain, SOLID в React та нове в ECMAScript 2024

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

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

Веброзробка

• 5 варіантів використання Wasm для фронтенд-розробки
• Зворотні виклики у вебкомпонентах
• Серверні вебкомпоненти з DSD, HTMX та островами
• Анімації SVG-фільтрів на основі прокрутки для тексту

• Інструменти
  • 10 основних команд для термінала, які повинен знати кожен розробник
  • Нове в Chrome 128
  • Посібник з впровадження Turbopack: огляд, приклади та альтернативи
  • Прискорення компіляції Sass у Vite та Webpack
  

• Продуктивність
  • Історія кохання до фронтенд-продуктивності
  • Поширені помилкові уявлення про те, як оптимізувати LCP
  • Моніторинг Core Web Vitals за допомогою бібліотеки web-vitals.js

CSS

• Опитування State of CSS 2024 відкрито
• Детально про CSS contain
• Elastic Overflow Scrolling
• Кастомний повзунок діапазону з використанням Anchor Positioning та Scroll-Driven Animations
• Як створити таймер зворотного відліку за допомогою CSS

JavaScript

• Regex стали кращими: історія та майбутнє регулярних виразів у JavaScript
• Все про цикли JavaScript
• Як зменшити кількість невикористаного JavaScript
• Запис до буфера обміну в JavaScript
• Чому я не люблю Enums
• Що нового в ECMAScript 2024
• Посібник з впровадження MobX: огляд, приклади та альтернативи

• React
  • React — це (трансформується в) повностековий фреймворк
  • Освоєння принципів SOLID в React: підвищення якості вашого коду
  • Як виконувати CRUD-операції в ReactJS без API
  • Пагінація в React з Next.js та Drizzle ORM
  • Як створити хук React, який обробляє послідовні запити
  

• Vue
  • Розуміння Vue’s Suspense
  • Vue Email: створюйте та надсилайте електронні листи за допомогою Vue та TypeScript.
  

• Angular
  • Використання isolatedModules в Angular 18.2
  • Візуалізація гідратації в Angular 18 за допомогою інструментів налагодження
  • Angular прагне бути простішим та дружнім до розробників
  • Object inputs все ще небезпечні, навіть з Angular signals