Front-end Digest № 3: сучасний CSS, нюанси доступності та майбутнє стандартів JavaScript

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

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

Маю для вас черговий дайджест з цікавими матеріалами зі світу фронтенда за останній тиждень 👇

Веброзробка

• 🎧 DOU VoiceChat: про тренди Front-end розробки 🇺🇦
• Розуміння SVG Paths — інтерактивний туторіал
• Проблематика самозакривних тегів в HTML ( /> )
• Поєднання GSAP’s Scroll Trigger та Flip з SVG Filter для цікавого скрол-ефекту

• Продуктивність

  • На захист DOMContentLoaded
  • Посібник дизайнера з оптимізації зображень

• Доступність

  • Елемент article та екранні зчитувачі
  • У штаті Нью-Йорк вимагають від державних установ дотримуватися WCAG
  • Вимкнення вставки в текстових полях не є елементом безпеки
  • WWDC 2023: корисні поради для розробників щодо доступності

CSS

• Сяйво, перспектива та обертання: Цікаві 3D-ефекти CSS для зображень
• Контекст зміщення батьківського елемента та стекування: позиціювання елементів у всіх трьох вимірах
• Повторне використання коду: опануйте SCSS Mixins
• Функціональний CSS — це чудово, окрім випадків, коли це не так (або чому не варто використовувати функціональний CSS у вашому великому додатку)

• Сучасний CSS

  • Новий синтаксис @font-face
  • Анімація прокрутки лише за допомогою CSS
  • Вступ до нативної вкладеності в CSS
  • Плаваючі лейбли на чистому CSS
  • Нові в’юпорт одиниці в CSS

JavaScript

• CommonJS шкодить JavaScript: проблеми та обмеження. 🇺🇦
• Демістифікація операторів JavaScript: що означає цей Symbol? 🇺🇦
• Коли мілісекунда не є мілісекундою
• Кодування рандомізованих патернів з Zelda
• Forever Functional: покер і TypeScript
• За межами браузерів: Довгострокове майбутнє стандартів JavaScript
• Створення гри в блекджек з Alpine.js та Deck of Cards API
  
• Генерація JSON-схеми з TypeScript типів

• React

  • Використання CORS в Next.js для обробки cross-origin запитів 🇺🇦
  • The React Graph Gallery: Створюйте інтерактивні діаграми для вебу
  • Інкрементна статична регенерація (ISR) в Next.js
  • Як запобігти зайвому ре-рендерингу React-компонентів
  • За межами Axios Interceptors: Створення власного Refresh Token Handler
  • Розділення інтерфейсу та логіки в React: Підхід чистого коду з Headless компонентами
  • Як ми реалізували медіатеку за допомогою XState та React
  • Як реалізувати Feature Gates в React?

• Vue

  • Створення Vue.js Monorepo у 2023 році
  • Інтеграція Jest-тестування в існуючий проект Vue 3 за допомогою ViteJs
  • Умовний рендеринг Vue.js: v-if vs v-show

• Angular

  • Цикл рендерингу застосунків, створених за допомогою Angular. Взаємодія браузера, Angular і zone.js 🇺🇦
  • Кілька хитрощів для налаштування збірки Angular
  • Найгірші практики в Angular