Front-end Digest № 21: оптимізація продуктивності, плюси та мінуси Tailwind CSS та управління станами в React

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

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

Веброзробка

• HTML First — набір принципів, який має на меті зробити створення вебзастосунків простішим, швидшим, інклюзивнішим та зручнішим для підтримки
• Засліплений Light DOM. Розмірковування над альтернативою Shadow DOM в контексті вебкомпонентів

• Продуктивність
  • Як Core Web Vitals позбавив користувачів 10 000 років очікування завантаження вебсторінок
  • web.dev: Ласкаво просимо нового ресурсу для вивчення продуктивності
  • 11 способів оптимізації вашого сайту

• Доступність
  • Створення доступних UI-анімацій
  • Вирішення проблем доступності при використанні адаптивної типографіки
  • Розуміння розмітки HTML landmarks та її застосування

• Ефекти
  • Динамічні анімації для тултіпів
  • WebGL Blobby Button

CSS

• Оновлення спрощеного синтаксису вкладеності CSS
• Вкладеність CSS вже тут
• Tailwind CSS: плюси та мінуси
• Чому слід використовувати одиниці px для полів, відступів та інших інтервалів
• Використання CSS content-visibility для підвищення продуктивності рендерингу
• Дивовижні факти про нові селектори CSS
• Вивчаємо псевдоклас :dir в CSS: Глибоке занурення

JavaScript

Запрошуємо на DOU Meetup:• Як створити JavaScript застосунок для звіту про роздрібний дохід
• Божевілля юзабіліті сучасного Javascript UI
• Наука, що стоїть за движком JavaScript: як машини читають ваш код
• melt — бібліотека Svelte для створення високоякісних, доступних систем проєктування та вебзастосунків
• JetBrains JavaScript Day 2023 — вісім відео

• React
  • React Router v6: посібник для початківців
  • Найкращі альтернативи Redux: рішення для управління станом
  • re-re-reselect — Спрощення управління станами в React
  • Headless компонент: патерн для створення React UI
  • Впевнений, ви не знали, що можна так легко тестувати React-компоненти
  • Why You Want Need React Query
  • Освоєння SVG-анімації в React за допомогою Framer Motion
• Angular
  • Представляємо Angular v17
  • Анонс Angular.dev
  • Глибоке занурення в Angular Signals: частина 1
• Vue
  • Поширені помилки: практики коду, які вимикають Tree Shaking у Vue.js
  • Завантаження файлів у Vue.js стало простим: Frontend Guide