Front-end Digest № 16: WCAG 2.2, небезпека регулярних виразів у JavaScript та елементи адаптивної типографіки

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

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

Веброзробка

• Ефективне завантаження реклами без впливу на швидкість сторінки
• Доступні, типобезпечні, прогресивно вдосконалені сучасні веб-форми
• Я ненавиджу Typescript, це соромно? Цікава дискусія на dev.to
• Використання Intl segmenter API

• Інструменти
  • Bun — успішна революція чи невеличке повстання
  • Sprite your SVGs

• Доступність
  • WCAG 2.2 вже тут! Що це означає для вашого бізнесу
  • Помилки можуть вбити імпульс доступності
  • Корисні посилання щодо WCAG 2.2

• Ефекти
  • Запуск анімації, керовану прокруткою, лише один раз
  • Програмування інтерактивного (і до біса приємного) курсору: 7 простих кроків + 2kb коду
  • Анімація багатосторінкової навігації з Browser View Transitions та Astro

CSS

• Елементи адаптивної типографіки
• Обмежте досяжність ваших селекторів за допомогою CSS правила @scope
• Рекомендації по використанню нативного вкладення CSS (CSS nesting)
• Ефект гласморфізму іконок в CSS
• Техніки імплементації контурного тексту
• Відтворення ефекту спливаючого наведення за допомогою сучасного CSS (частина 2)
• Рішення для навігаційної панелі з якорями
• Фігури в CSS

JavaScript

• Чи дійсно Javascript був створений за 10 днів?
• Важка битва за мемоїзацію
• Вичерпний посібник про небезпеку регулярних виразів у JavaScript
• Розвінчання міфу: «Модулі JavaScript — це просто вишуканий спосіб сказати „файли“» .
• Ваш JS-застосунок втрачає пам’ять, і ви не знаєте про це
• Створіть чат-бота зі штучним інтелектом за допомогою FastChat і JavaScript

• React
  • Погляд на гідратацію React та пререндеринг HTML
  • Створіть динамічний конвертер валют для React-додатку для електронної комерції
  • React Re-rendering: Вивчаємо що, чому і як
  • React Testing Library vs Jest
  • Ефективне використання пам’яті React-застосунків | Million.js за межами швидкості

• Vue
  • Спростіть обмін даними за допомогою вбудованих API та поступового вдосконалення
  • Освоєння хуків життєвого циклу Vue.js: Повний посібник з прикладами

• Angular
  • Вичерпний посібник з Angular’s Defer Block

Браузери

• Chrome тепер показує використання пам’яті кожної активної вкладки!
• Примітки до випуску Safari Technology Preview 180
• Що нового в DevTools: Chrome 118
• Chrome 119 бета-версія: Синтаксис відносних кольорів CSS, нові псевдокласи та багато іншого.