Front-end Digest № 26: що робити з LCP та CLS, макети з CSS Subgrid та довідник з фундаментальної теорії JavaScript

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

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

Веброзробка

• Сюрпризи і пастки JSON API, GraphQL і gRPC: як зробити правильний вибір
• Розширення адаптивного відео за допомогою HTML Web Components
• Посібник з Strapi: огляд, приклади та альтернативи
• Створення ефекту інтерактивного курсора миші за допомогою Instancing в Three.js

• Продуктивність
  • Хто вкрав мій Largest Contentful Paint?
  • Десять порад щодо оптимізації для початкового аудиту продуктивності вебсайту
  • Як Trendyol знизив INP на 50%, що призвело до збільшення кліків на 1%
  • Правильне налаштування (Pre) Connections
  • Один YouTube Embed елемент важить майже 1,2 МБ. Як з цим боротися
  • Початок роботи з Web Performance
  • Front-End: стратегії кешування, які варто знати
  • Чеклісти для сценаріїв CLS

CSS

• Quantity Queries дуже прості за допомогою CSS :has()
• Створення просунутих макетів за допомогою CSS Subgrid
• Використання CSS prefers-reduced-transparency та light-dark()
• Прокрутка сторінки на CSS, вирівняна з глобальним макетом сторінки: приклад слайдера на всю ширину сторінки
• Виділення та зняття виділення посилань у навігації
• Реалізація scroll-aware UI state за допомогою CSS
• Інтерактивне пояснення псевдоселектору :nth-child()
• CSS Advanced — логін з ефектом гласморфізму
• 15 прихованих властивостей CSS, про які варто знати

JavaScript

• Довідник з фундаментальної теорії JavaScript. Вивчаємо програмування українською
• Oxlint — лінтер JavaScript, призначений для перехоплення помилкового або непотрібного коду, який не вимагає жодних налаштувань за замовчуванням.
• Горизонт подій очікування в JavaScript (await event horizon)

• Typescript
  • Що нового в TypeScript 5.3: занурмося!
  • Функції Typescript, які значно покращать ваші навички

• React
  • Шість технік умовного рендерингу в React з прикладами
  • React Tricks: швидко, влучно та весело
  • «Ланцюгова реакція». Нова стаття Дена Абрамова
  • Доступна бета-версія Expo Router v3
  • Анонсуємо React Hydration Overlay — легко виправляємо помилки гідратації

• Vue
  • Що творець Vue дізнався на власному досвіді з Vue 3
  • Vue.js та прогресивні вебзастосунки (PWA): створення offline-first застосунків
  • Vue 3 Velocity: план дій з очищення кешу

• Angular
  • Ознайомтеся з підтримкою API View Transitions в Angular
  • Додавання анімаційних переходів між сторінками для навігації в Angular 17
  • Велике порівняння UI-бібліотек в Angular
  • Детально про виявлення локальних змін і Angular Signal в шаблонах
  • Технічні борги в дизайні компонентів з використанням Angular
  • Коли вам варто використовувати мікрофронтенди.

• Libs & Plugins
  • RE:DOM — крихітна (2 КБ) бібліотека JavaScript для створення UI.
  • Додавання інтерактивності за допомогою бібліотеки Hotkey library з GitHub