Дайджест свежих материалов из мира фронтенда за последнюю неделю №478 (18 — 25 июля 2021)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Медиа    |    Веб-разработка    |    CSS    |    JavaScript    |    Браузеры

Медиа

• Подкаст «Веб-стандарты» №292. Safari TP, стримы в Node.js, CDN, дизайн без сеток, Фейсбук на флоатах, доступность интерфейсов
• Подкаст Фронтенд Юность #197 Все cекреты VS Cod’a
• «Новости 512» от CSSSR: V8 9.2, scroll-linked animations, Redis с Node.js, промисы и функциональное программирование в JS
• «Новости 512» от CSSSR: Chrome 92, CRUD на Fastify, drag&drop с RxJS, блокирующие загрузку ресурсы, отключение аккаунтов MDN
• Подкаст proConf #100

Веб-разработка

• Памятка и туториал по HTTP-заголовкам, связанным с безопасностью веб-приложений
• Кажется, мы стали забывать основы фронтенда
• Вебсайты с функциями Handsfree
• Некоторые веб-свойства, которые могут работать не так, как вы ожидали
• Пошаговый процесс превращения дизайна в код
• Веб-аутентификация: cookie или токены
• Ежегодный отчет JetBrains: Состояние экосистемы разработки в 2021 году
• Использование Google Drive в качестве CMS
• Как переход на Core Web Vitals увеличил доходы от рекламы Netzwelt на 18%

• Доступность
  • Как не навредить пользователям с эпилепсией и вестибулярными нарушениями
  • Не чеклист: внедрение соответствий требованиям доступности в бизнес-процессы
  • Тупиковая ситуация с доступностью

CSS

• CSS: системные цвета, шрифты и кое-что ещё
• Приемы, помогающие упростить CSS
• Свойства CSS Box Model — объяснение с примерами
• Пользовательские свойства и @property
• Предотвращение нежелательных сдвигов макета, вызванных полосами прокрутки, с помощью CSS свойства scrollbar-gutter
• Естественная тень с SVG фильтрами
• Практические примеры Scroll-Linked анимации в CSS с временными шкалами прокрутки
• Как улучшить Web Vitals с помощью CSS

JavaScript

• Как использовать IndexDB для управления состоянием в JavaScript
• Бинарный протокол для JavaScript
• URLPattern дает возможность реализовать маршрутизацию для веб-платформы.
• WebSockets и Node.js — тестирование WS и SockJS путем создания веб-приложения

• React
  • Реализация восстановления позиции прокрутки страницы в ecommerce приложениях на React
  • Как использовать конечные автоматы в React? Объяснение фронтенд-разработчика
  • Почему вам следует избегать использования состояния для вычисляемых свойств
  • 5 useEffect Infinite Loop Patterns

• Vue
  • Vue/React Store и JS Request Manager
  • Vue — рекомендации при работе с формами
  • Мой обзор petite-vue
  • 25 советов по Vue, которые вам нужно знать
  • Создание приложения для чата в реальном времени с помощью Vue, Socket.io и NodeJS
  • Тестирование компонентов Vue.js с помощью Vue Test Utils

• Angular
  • Как реализовать drag & drop используя RxJS
  • Основы Angular: управление пользовательскими свойствами CSS со Style Binding
  • Самосохраняющиеся раскрывающиеся списки Angular — еще одна директива

• Libs & Plugins
  • Очень интересная библиотека JS: распознавание символов, введённых с дисплея вашего смартфона на сайте
  • Svgbob — Преобразуйте свои ascii диаграммы в маленький SVG
  • graphlatte — Шаблон Next.js с GraphQL, Urql, Prisma, Nexus и Tailwind

Браузеры

• Анализ влияния на производительность дополнений к Chrome
• Релиз Chrome 92

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.