Дайджест свежих материалов из мира фронтенда за последнюю неделю №494 (14 — 21 ноября 2021)

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

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

Медиа

• «Новости 512» от CSSSR: Chrome 96, TypeScript 4.5, дженерики в TS, сравнение систем типов, ReactRouter 6, Slack + Deno
• Подкаст proConf #113: Strange Loop Conference 2021
• Frontend Weekend №111: в гостях Зар Захаров из компании Grid Dynamics: что изменилось за 4 года или о тимлидстве и возвращении к программированию, марафонах по разработке и в жизни
• Подкаст «Веб-стандарты» №308. HTML-элемент search и парсеры, кастомные свойства, contain и перфоманс, TypeScript и Angular 13
• Софт скиллы джуниор веб-разработчика: интервью с Андреем Смирновым

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

• GitHub опубликовал ежегодный статистический отчет за 2021 год
• Просмотр HTML-кода — не преступление
• Введение в GraphQL
• Как ускорить процесс разработки на Bootstrap

• Инструменты
  • Мощные инструменты терминала и командной строки (CLI) для современной веб-разработки
  • 8 клевых советов для VS Code, которые сделают ваше рабочее место более индивидуальным
  • Понимание того, почему наша сборка стала в 15 раз медленнее с Webpack 5
  • Миграция с Puppeteer на Playwright
  • SVGcode: PWA для преобразования растровых изображений в векторную графику

• Производительность
  • Google обновил Lighthouse до версии 9.0
  • Что нового в Lighthouse 9.0

• Доступность
  • Доступный компонент «из коробки»
  • Давайте не будем посылать разработчиков к accessibility tree tool
  • Глубокое погружение в доступность страницы блога
  • Мифы доступности

• Эффекты
  • Слайд-шоу с необычным фильтр-эффектом
  • Параллакс на основе пользовательских свойств CSS (и gsap)
  • 5 лучших JS библиотек для анимации SVG

CSS

• Основные варианты использования CSS-переменных (Custom Properties)
• Руководство по современным цветам CSS с помощью RGB, HSL, HWB, LAB и LCH
• Использование Position Sticky с CSS Grid
• Адаптивные макеты без медиа-запросов!
• Представляем «Генератор палитры теней»
• unocss — новый CSS-движок, использующий атомарную методологию использования стилей
• Умная техника реализации Sticky Footer 
• 5 CSS-in-JS фреймворков для использования в 2021 году
• Определение и применение тем пользовательского интерфейса с использованием библиотеки Mimcss CSS-in-JS
• Расширение цепочек when/else в CSS: первый взгляд

JavaScript

• 5 возможностей JavaScript ES12, которыми стоит воспользоваться уже сегодня
• JavaScript: заметка о WebAssembly
• Как начать property-based тестирование в JavaScript с помощью быстрой проверки
• Простое объяснение перегрузки функций в TypeScript
• Конечные автоматы в JavaScript с XState
• 5 распространенных ошибок при использовании промисов
• Как создать систему плагинов с помощью Node.js
• Пишем простой Mobx в 50 строчек для понимания паттерна Observer

• React
  • Next.js: подробное руководство. Итерация вторая
  • Хуки — это лучшее, что случилось с React
  • Контролируем scroll полностью или реализация события React: onRenderChildrenComplete
  • [Redux] Мой любимый устаревший вопрос на собеседовании
  • Как убрать побочные эффекты в React
  • 300+ вопросов по React на собеседовании
  • Enterprise Client-Side Routing for React
  • Почему мы перешли на Next.js?

• Vue
  • Улучшаем производительность vue с помощью selective-object-reuse
  • Vue.js против React: сравнение двух самых популярных JS-фреймворков
  • Что нового в Nuxt 3

• Angular
  • О некоторых аспектах сложных Angular проектов
  • Div на div’е не сидит и div’ом не погоняет: пишем семантически верные индикаторы загрузки на Angular
  • [Новое] состояние CSS в Angular
  • Полное руководство о том, как добавить автосохранение с помощью RxJS
  • Представляем NgRx версии 13: билды Ivy, Feature Creators, улучшенные селекторы и многое другое!
  • Самый быстрый способ создать легкий Angular Content Service

• Ember
  • Как работает Автотрекинг
  • The Ember Times — Issue No. 191
  • Ember.js Template Imports: Part 6

• Svelte
  • SvelteKit CSS stylelint: Lint Vanilla Styles
  • Тестирование приложения на Svelte с помощью Jest

• Libs & Plugins
  • Что такое Slate.js и заменит ли он Quill и Draft.js?
  • Создавайте прогрессивные микро-фронтенды с помощью Fronts

Браузеры

• Вышел Google Chrome 96
• В Chrome 97 из настроек будет убрана возможность выборочного удаления Cookie
• В Firefox добавлены режимы тёмного и светлого отображения сайтов. Обновление Firefox 94.0.2
• Многоликость VS Code в браузере
• Новое в Chrome 96
• Chrome 97: WebTransport, новые статические методы для массивов и многое другое

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