Дайджест свежих материалов из мира фронтенда за последнюю неделю №503 (17 — 23 января 2022)

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

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

Медиа

• Подкаст «Веб-стандарты» #318: Safari, сабгриды, Vue 3, оверрайды в npm, border-image, спеки, старые браузеры, TS и Девшахта
• «Новости 512» от CSSSR: Конспект о микрофронтендах, Remix vs. Next.js, Parcel CSS, Node.js 17.4.0, Deno 1.18, курс по Linux
• Подкаст «Сделайте мне красиво» №68 — Даже по меркам HTML это адок
• Frontend Weekend №117, в гостях Ольга Кобец, недавно покинувшая компанию Яндекс: об организации moscowjs, сообществе BeerJS и выгорании после Яндекса

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

• Как читать W3C-спецификации
• 5 важных SEO-трендов в 2022 году: от нейронного поиска до фиджитала
• Контекстно-зависимые веб-компоненты проще, чем вы думаете
• Фронтенд-прогнозы на 2022
• Реализация 3D сцен в вебе
• Ускоренное руководство по Fullstack Web3 с ASS (Anchor, Solana и Svelte)

• Инструменты
  • Пришло время попрощаться с Webpack?
  • Представляем fuite: инструмент для поиска утечек памяти в веб-приложениях
  • Полное руководство для начинающих по npm
  

• Производительность
  • Быстрый, резкий, как пуля, дерзкий. Как работать над перфомансом сайта, чтобы нравиться пользователям и Гуглу
  • Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза
  • Повысьте производительность с помощью Web Workers: подробное руководство
  

• Доступность
  • Доступные таблицы корзины продуктов
  • Руководство по доступности изображений
  

• Эффекты
  • 7 + 1 способ анимировать спиннер
  • Анимируйте что угодно вдоль SVG Path
  • Подборка креативных сайтов «Inspirational Websites Roundup» #33
  • Эффект спокойных пятен света на CSS
  

CSS

• Адаптивное свойство одной строкой
• «Родительскому селектору» :has(), скорее всего, запретят быть вложенным
• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами
• Первый публичный черновик CSS-каскада 5 уровня
• Современная гибкая типографика с использованием CSS Clamp
• Создание UI компонентов с помощью SVG и CSS
• Что появилось в CSS после «CSS3»?
• NoJS — Создание калькулятора с использованием только чистого HTML и CSS. No Javascript!
• Будущее CSS: определяйте поддержку at-rule с помощью @supports at-rule(@keyword)
• Сравнение значений специфичности CSS
• Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов
• Создание адаптивного мобильного меню с помощью CSS без JavaScript
• Расширенное руководство по настройке цветов в CSS

JavaScript

• JavaScript: захват медиапотока из DOM элементов
• Тренды JavaScript в 2022 году
• Как работает метод bind? 30 вопросов собеседования JavaScript
• Remix vs Next.js
• Использование особенностей JavaScript для развлечения и получения прибыли
• SaasFrontends — шаблоны Vue2, Vue3, React и Svelte
• StructuredClone(): глубокое копирование объектов в JavaScript
• Я создал блог на RemixJS, так что можно это не делать (пожалуйста)

• React
  • Улучшаем дизайн React приложения с помощью Compound components
  • «Запашки» кода React-компонентов
  • Шесть лучших библиотек управления состоянием React на 2022 год
  • Enterprise React в 2022
  • Все о нашей миграции с ReactJS на NextJS
  • Хороший совет по условным выражениям JSX
  • Rockpack — современный инструмент который позволит быстро создать React приложение с поддержкой Server Side Rendering, настроенным Webpack 5, Jest, Eslint, Typescript.
  • Чистка типов в React компонентах
  • Изучение трех новых API React 18
  

• Vue
  • Vue 3 как новый стандарт
  • Модуль ленивой загрузки для Nuxt 3
  • Программный дизайн компонентов Vue 3
  

• Angular
  • Итоги 2021 года для Angular и предварительный обзор 2022
  • Поддержка типизации Angular Form, которая нужна каждому разработчику
  • Component-First State Management для автономных компонентов Angular
  • Как создать прогрессивное веб-приложение с помощью Angular
  

• Svelte
  • Svelte: все прелести фреймворка — без фреймворка
  • Создание микроинтерфейсов Svelte с помощью Podium
  

• Libs & Plugins
  • Замена jQuery (110 КБ) на Umbrella JS (8 КБ)
  • Как заставить сайт работать в автономном режиме с помощью плагина VitePWA
  

Браузеры

• Firefox остался один
• Opera выпустила открытую бета-версию браузера со встроенным криптокошельком
• История интернет-браузеров — война за пользователя

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