Front-end Digest № 10: розробка плагінів для Figma, шаблони реактивності та результати State of CSS 2023

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

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

Веброзробка

• Web Adoption Curve — серпень 2023
• Як реалізувати просту пагінацію за допомогою HTML, CSS та JavaScript
• Будь ласка, контролюйте розмір ваших вбудованих SVG-файлів
• Як створювати плагіни наступного рівня для Figma: авторизація, маршрутизація, зберігання та багато іншого
• Використовуйте вебкомпоненти для того, для чого вони найкраще підходять

• Доступність
  • Як створити доступний компонент кнопки
  • Поступово вдосконалена валідація форм, частина 3: Перевірка групи чекбоксів
  

• Інструменти
  • Посібник з міграції з Webpack на Vite
  • Порада: Отримання всіх посилань з будь-якого сайту в електронну таблицю за допомогою DevTools браузера

• UX
  • Покращені контекстні меню з безпечними трикутниками
  • Ідеального в’юпорту не існує
  • Web UX: Навчальний посібник

CSS

• Результати щорічного опитування State of CSS 2023
• Кілька цікавих способів використання тіней в CSS
• Короткий вступ до CSS @scope
• Вивчення анімації на основі прокрутки в CSS
• Lightning CSS — надзвичайно швидкий парсер, бандлер та мініфікатор CSS
• Викладання точок на гральному кубику за допомогою display:flex та псевдокласів
• Створення type-safe стилів за допомогою Panda CSS
• Створення кастомного випадаючого списку <select> за допомогою CSS
• Як уникнути зсувів розмітки через ch в CSS

JavaScript

• Шаблони реактивності з сучасним Vanilla JavaScript
• Розуміння асинхронного контексту та майбутнє серверного JavaScript
• Плюси та мінуси використання Shadow DOM та інкапсуляції стилів

• React
  • Механізми, що лежать в основі паралельного режиму React
  • Посібник з чистого коду React Js
  • Розширені патерни React: Покращення роботи з помилками; Обробка та сприйняття продуктивності
  • Як оновити кількарічний застарілий проєкт на Node та React?
  • Поточний стан управління станом

• Фреймворки
  • Як створити блог за допомогою Analog та Angular️
  • Як створити калькулятор за допомогою Svelte
  • Реліз Nuxt 3.7