Медиа | Веб-разработка | 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.