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

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

Медиа

• «Новости 512» от CSSSR: Firefox 89, Safari 15 Beta, Jest 27, цикл статей о работе браузера, разработка базовых компонентов, обзорная статья о тестировании фронтенда и анонс WebExtensions Community Group.
• Подкаст «Веб-стандарты» #285: Бета Chrome 92, Firefox 89, якоря и расширения, TeamCity, JS внутри WASM, TypeScript 4.3
• Подкаст «Фронтенд Юность» #190: Как подступиться к старому проекту и не сесть на кулак
• «Новости 512» от CSSSR: React 18, Vue 3.1, анонс ESLint 8, курсы от CSSSR, :is(), where() и :has(), как прилёг Интернет
• Подкаст «Callback Hell»: Сервисы Google с плохими Web Vitals, шеринг логики между фронтом и бэком, документация на проектах

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

• Будущее веба: станет ли рендеринг в <canvas> заменой DOM?
• Правильный тег для работы: почему следует использовать семантический HTML
• 5 проблем фронтенда, которые нельзя игнорировать

• Инструменты
  • Три инструмента для аудита фронтенда, которые я обнаружил недавно
  • Подборка полезных бойлерплейтов и стартовых наборов для веб-разработки, от аудита CSS и a11y до js фреймворков и плагинов для VS
  • Знакомство с Memory Inspector в Chrome DevTools
  • Представляем Astro: новый тип статического генератора сайтов, не использующий JS
  • 7 инструментов для более быстрой разработки фронтенда в 2022 году
  

• Производительность
  • CSS, JavaScript и блокировка парсинга веб-страниц
  • Оптимизация производительности фронтенда для новичков. Часть 1/n. Как браузеры рендерят страницу
  • Часть 2/n. Что мы можем сделать для улучшения FMP и TTI?
  • Часть 3. Event loop, layout, paint, composite, call stack
  • Обеспечиваем четкое изображения на экранах с высокой плотностью изображения
  

• Доступность
  • Используйте ссылки и кнопки правильно. Пожалуйста
  • Да, веб-анимация правда может быть доступной
  • whocanuse — инструмент, позволяющий понять доступность сочетания цветов для людей с различными проблемами зрения
  • Устранение проблем с контрастностью на вашем сайте и в других местах
  

• Эффекты
  • Добавление теней к значкам SVG с помощью фильтров CSS и SVG
  • Эффект наведения на превью изображений с SVG фильтрами
  

CSS

• Выкладка нетрадиционной ориентации
• Полное руководство по CSS Grid с шпаргалкой
• Системные цвета CSS
• CSS определяет значения цвета, соответствующие системным настройкам.
• Media Queries во времена @container
• Давайте узнаем об Aspect Ratio в CSS
• CSS size-adjust для @font-face
• Равные столбцы с Flexbox: это сложнее, чем вы думаете
• Эксперимент с сортируемыми мультиколоночными таблицами
• Знакомьтесь с :has: нативный CSS селектор
• Рог изобилия Container Queries
• Создание правил для font-size CSS и создание Fluid Type Scale

JavaScript

• Как я ускорил движок на 13%
• Прогнозирование временных рядов на JS: анализ данных для самых маленьких фронтендеров
• Sparkplug — неоптимизирующий компилятор JavaScript в подробностях
• Как создать фулстек-приложение с помощью Supabase и Next.js
• Реализация приватных полей в JavaScript
• Forever Functional: Мемоизация промисов
• Как реализовать принципы SOLID в JavaScript
• Автоматизируйте форматирование и исправление JavaScript кода с помощью Prettier и ESLint
• Современный JavaScript
• Выходя за рамки ESLint: обзор статического анализа в JavaScript
• Доверенные типы API для безопасности JavaScript DOM
• Как создать NFT с помощью JavaScript
• Rust с точки зрения JavaScript

• React
  • План для React 18
  • Обзор техник управления состоянием React в 2021 году
  • Альтернативы Redux в 2021
  • Cloudflare Pages tutorial: развертывание React приложения через GitHub
  • React Icons: подробное руководство с примерами
  • Тестирование альфа-версии React 18
  

• Vue
  • Из Vue 2 на Vue 3 – Migration Helper
  • Домашний магазин с Vue.js Composition API
  • Что такое State Management? Практическое руководство по Vuex для Nuxt.js приложений
  • Vue.js vs. React — нестандартное сравнение
  

• Angular
  • Загадка трубы, или AsyncPipe в Angular
  • Пример Angular NgClass — Как добавить условные классы CSS
  • Развертывание одностраничных Angular приложений на GitHub Pages
  • Создавайте более доступные приложения на Angular
  • Более быстровоспринимаемое время отклика с Angular Material для решения проблемы скорости
  

• Libs & Plugins
  • Представляем libSquoosh. Это Squoosh, но в виде node библиотеки
  • nanostores — Крошечный менеджер состояний для React/Preact/Vue/Svelte с множеством атомарных хранилищ
  • flexsearch — Самая быстрая и наиболее гибкая для памяти библиотека полнотекстового поиска, без зависимостей
  

Браузеры

• Vivaldi 4.0 — Первое приближение
• Google признал неудачным эксперимент с показом только домена в адресной строке Chrome
• Возможности WebKit в Safari, продемонстрированные на WWDC21


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