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

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

Медиа

• Подкаст «Веб-стандарты» №281. SpiderMonkey 25 лет, Safari TP, Bootstrap 5, Гитхаб, префиксы, монорепы и свой git в Яндексе
• Подкаст «Фронтенд Юность» #186. Утюжить веб. В гостях создатель и главный редактор Smashing Magazine Виталий Фридман.
• Видеокаст «Front-end. Вопросы на собеседовании» #2
• Нужен ли джуну идеальный код: интервью с Вадимом Макеевым
• Подкаст «Да как так-то?». Выпуск № 4: из филолога-япониста во фронтенд на фрилансе

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

• Солидные фронтенды: мониторинг
• Регистрация обработчика протокола URL для PWA
• Различия между WebSockets и Socket.IO
• Переход к «Meta GSAP»: поиски «идеальной» бесконечной прокрутки

• Производительность
  • Оптимизируем Core веб Vitals: основные стратегии
  • Как оценить скорость сайта с помощью Performance API
  • Оптимизация Web Vitals с помощью Lighthouse
  

• Доступность
  • Доступный toggle
  • Версия для слабовидящих? А можно не надо? [расшифровка доклада]
  • Делаем отключенные кнопки более инклюзивными
  • 7 часто задаваемых вопросов о доступности по апелляционному решению Winn-Dixie ADA (2021 г.)
  • Logical Content Flow — Онлайн-инструмент для обнаружения проблем с Logical Content Flow для элементов заголовков
  

CSS

• Выявление устройств с сенсорными экранами на чистом CSS
• Венец эволюции CSS-in-JS уже здесь: полностью типизированные стили без рантайма в vanilla-extract
• Сравнение производительности CSS и CSS-in-JS в реальном мире
• Инструменты для аудита CSS
• «Родительский селектор» :has() — в реальность!

• Container Queries
  • Next Gen CSS: @container
  • Введение в CSS Container Queries
  • Художественное оформление на уровне компонентов с помощью CSS Container Queries
  • Support (Not) Unknown. Добавление проверки Container Query в CSS с помощью @support
  

• Дизайн для чтения: советы по оптимизации контента для режимов чтения и «приложений-читалок»
• Продвинутая CSS-анимация с использованием cubic-bezier()
• aspect-ratio и grid
• Создание Stylesheet Feature Flags с помощью Sass !default
• Плавная прокрутка Sticky ScrollSpy Navigation с фиксированным фоном на CSS
• Взгляд на CSS Tailwind

JavaScript

• Отслеживание и визуализация положения МКС с помощью 30 строк JavaScript-кода
• Шпаргалка по JS-методам для работы с DOM
• Паттерны отложенной инициализации свойств объектов в JavaScript
• Я выпустил Grafar — JS-библиотеку для визуализации
• 7 шагов для безопасного JavaScript в 2021 году
• Современный Javascript: все, что вы пропустили за последние 10 лет (ECMAScript 2020)
• Создайте тетрис с помощью современного JavaScript

• Typescript
  • Рассказ о том, почему в 2021 году лучше выбирать TypeScript, а не JavaScript
  • Соблюдаем принцип DRY для TypeScript кода с помощью дженериков
  • Работа с TypeScript: практическое руководство для разработчиков
  

• React
  • React, TypeScript и TDD
  • Что такое React Hooks и какие проблемы они решают
  • Всеобъемлющее руководство по React Virtual DOM
  • Как правильно реализовать коллбеки Debounce и Throttle в React
  • Использование форм в React
  • Создание системы дизайна React для применения и масштабирования
  • Создание VR с помощью React 360
  • Мои основные React-библиотеки на 2021 год
  

• Vue
  • Vue.js и слоистая архитектура: вынесение бизнес-логики в сервисы
  • Vuex, the Official Vue.js Store
  • Как использовать Vue Router: полное руководство
  

• Angular
  • Упрощаем работу с Angular с помощью @taiga-ui/cdk: 5 наших лучших практик
  • Дополнительные улучшения сборки, Angular 12, распределенное выполнение задач и многое другое в Nx 12.3
  • RxJS и Angular: декларативный If/Else
  • Angular Forms: каталог шаблонов реактивного проектирования
  • Как работает внедрение зависимостей в Angular
  

• Ember
  • Emberjs 3.2x с Storybook.js 2021
  • Tailwind css 2.0 + EmberJs 3.2+ 2021
  

• Svelte
  • Практическое введение в Svelte
  

Браузеры

• Использование обработчиков пользовательских протоколов для кросс-браузерного отслеживания в Tor, Safari, Chrome и Firefox
• Идентификация через анализ внешних обработчиков протоколов в браузере

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