Front-end Digest № 30: CSS — це знову весело, сучасні метафреймворки та AVIF для зображень у вебі

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

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

Веброзробка

• Як Google удосконалив Інтернет — інтерактивна стаття від The Verge
• Дихотомії між вебсайтом та вебзастосунком не існує
• Найкращі фронтенд-інструменти 2023 року
• Web Storage API — як зберігати дані в браузері
• Офлайн-вебзастосунки, або Чому варто використовувати Service Workers
• Шаблони покращення доступності вбудованих слайдів, відео з YouTube та інших сторонніх ресурсів
• Найменший у світі PNG
• Чому ви повинні використовувати AVIF замість JPEG, WebP, PNG і GIF у 2024 році

CSS

• Сучасний CSS для 2024 року: Варіанти використання :has()
• Як я пишу CSS у 2024 році
• CSS — це знову весело
• 5 CSS-сніппетів, які повинен знати кожен фронтенд-розробник у 2024 році
• Designing better target sizes: Інтерактивний посібник про те, як покращити область цільового розміру за допомогою CSS.
• Як використовувати нові можливості CSS для створення індикатора прогресу
• Більш детальний погляд на @property в CSS
• Використання CSS Houdini для розширення можливостей стилізації та верстки
• «Успадкування» сусідніх розмірів сітки від за допомогою subgrid
• Враховування інтернаціоналізації за допомогою CSS та HTML
• Вкладений темний режим через CSS proximity
• Посібник з оверлеїв зображень у CSS

JavaScript

• Представляємо fsx: Сучасний API файлової системи для JavaScript
• Відповіді на питання «Як» і «Навіщо» щодо промісів в JavaScript
• 30 запитань та відповідей на співбесіді з JavaScript у 2024 році
• Лінтери JavaScript на основі Rust: швидко, але без типізованого лінтінгу прямо зараз

• Фреймворки
  • Node.js: найшвидший вебфреймворк у 2024 році
  • Analog.js vs. Next.js vs. SolidStart: порівняння сучасних метафреймворків
  • Чи є htmx ще одним JavaScript-фреймворком?
  

• React
  • Представляємо Superglue: React ❤️ Rails
  • Як створювати React-компоненти, які працюють на кожному фреймворку React?
  • Пʼять найкращих способів стилізації ваших React-застосунків у 2024 році
  • Як налаштувати Soft Navigation Reporting в React App
  

• Angular
  • Angular signals vs. observables: як і коли використовувати кожен з них
  • Angular Signal Inputs тут, щоб змінити гру

Анімація

• Як використовувати Custom Easing Function за допомогою Web Animations API (WAAPI)
• Експериментальні анімації тексту з SVG Clip-Path
• Радіокнопки з ефектом повзучого фокуса
• Glowy Text Button
• Web Gears ⚙️ (анімація, керована прокруткою)