Front-end Digest № 131: анатомія LCP, оптимізація CLS та WebAssembly для JS-розробників

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

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

Веброзробка

• Vercel: наш React2Shell-челендж для хакерів на мільйон доларів
• React2Shell — це Log4j-момент для розробки фронтенду
• State of HTML 2025
• Dynamic Datalist: автозаповнення з API (вебкомпонент)
• Вимірювання результативності функцій
• Елемент <time> має нарешті щось робити
• Посібник з доступності в WCAG 3.3.9: на шляху до золота

• Інструменти
  • Великі перегони JavaScript-бандлерів
  • Посібник з впровадження Vitest 4: огляд та міграція з Jest
  

• Продуктивність
  • Lazy Loading зображень залежно від розміру екрана
  • Оптимізація CLS для нескінченної прокрутки та Load More
  • Анатомія LCP — детальний аналіз складових частин
  • Оптимізація для 75% — це нормально. Оптимізація для 90% — ось де стає цікаво
  

• Ефекти
  • Реалізація адаптивних анімацій по кривих, які активуються скролінгом, на GSAP
  • Різні переходи між сторінками для різних обставин
  • Toon Text від Енді Кларка — класичні титри з мультфільмів, перенесені в веб за допомогою css, js та svg

CSS

• Напрямний CSS з урахуванням стану прокрутки (scrolled)
• З’єднання кіл за допомогою Anchor Positioning
• Адаптивний список аватарів із використанням сучасного CSS (частина 2)
• Masonry-розкладка стала grid-lanes
• View Transitions для Dialog
• VoxCSS — CSS-воксельний рушій
• Bad CSS-Dad Jokes (V)

JavaScript

• Дослідження мультибрендових систем за допомогою токенів і компонування у Vue
• Виживання в умовах нестачі RAM: поради з ефективності для JavaScript-розробників
• Коли розробники JavaScript повинні використовувати можливості WebAssembly?
• Angular, React та Vue.js: посібник з продуктивності на 2026 рік
• Практичний посібник з управління станом в Angular Services та Signals

• React
  • Представляємо RSC Explorer
  • Експлойт React2Shell: що сталося і які уроки були винесені
  • Повний посібник з інтернаціоналізації в Next.js
  • Vite чи Webpack для React-застосунків у 2025

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

Подобається дайджест? Підписуйтесь на автора, щоб отримувати сповіщення про нові публікації на пошту.