Фронтенд-дайджест №599 (11 - 17 грудня 2023)
Веброзробка
-
Розширення адаптивного відео за допомогою HTML Web Components
-
Сюрпризи і пастки JSON API, GraphQL і gRPC: як зробити правильний вибір
-
Створення ефекту інтерактивної миші за допомогою Instancing в Three.js
-
Додавання інтерактивності за допомогою бібліотеки Hotkey library з GitHub
-
Продуктивність
- Хто вкрав мій Largest Contentful Paint?
- Десять порад щодо оптимізації для початкового аудиту продуктивності веб-сайту
- Як Trendyol знизив INP на 50%, що призвело до збільшення кліків на 1%
- Правильне налаштування (Pre) Connections
- Одне YouTube Embed елемент важить майже 1,2 МБ. Як з цим боротися
- Початок роботи з Web Performance
- Front-End: Стратегії кешування, які варто знати
CSS
- Quantity Queries дуже прості за допомогою CSS :has()
- Прокрутка сторінки на CSS, вирівняна з глобальним макетом сторінки: Приклад слайдера на всю ширину сторінки
- CSS Advanced - логін з ефектом гласморфізму
- Виділення та зняття виділення посилань у навігації
- Створення просунутих макетів за допомогою CSS Subgrid
- Реалізація scroll-aware UI state за допомогою CSS
- Використання CSS prefers-reduced-transparency та light-dark()
- Інтерактивне пояснення псевдоселектору :nth-child()
- 15 прихованих властивостей CSS, про які варто знати