Дайджест свежих материалов из мира фронтенда за последнюю неделю №446 (14 — 20 декабря 2020)

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

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

Медиа

• «Новости 512» от CSSSR: Firefox 84, «Фронтенд-2021» от Тинькофф, security-релизы Node.js, Deno 1.6, MDN Web DNA 2020
• Подкаст «Сделайте мне красиво» №52 — Раскати опечатку на 200 тысяч сайтов
• Подкаст Фронтенд Юность (18+) #166: Вся история JavaScript за 100 минут
• Подкаст «Веб-стандарты» №260: Веб-альманах 2020, Safari TP, PWA, EStimate, загрузка по заявке, Houdini, Squoosh 2 и CLI
• Front-end 2021 Roadmap & Trends | Что учить в 2021?
• Больше, больше фронтенда — доклады c ЮMoneyDay
• Chrome Developer Summit 2020
• Chrome Dev Summit Russia 2020 Extended
• Основные моменты Chrome Dev Summit 2020

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

• Фронтенд-2021: тенденции, как мы их видим
• Что фронтендер должен знать про UX и зачем прокачиваться в этом направлении
• SEO чеклист (PDF)
• Основы кеширования веб-приложений

• Производительность
  • До свидания, Google Fonts. Последний аргумент
  • Как вывести свой сайт в зелёную зону PageSpeed Insights — советуют эксперты
  • Observer vs Scroll Lazy Loading: сравнение методов
  • Внедрение критического CSS, от CMS до CLS
  • 5 распространенных ошибок разработчиков, влияющих на время загрузки страницы
  

• Доступность
  • Доступны ли ваши якорные ссылки?
  • Как мы сделали GOV.UK более доступным
  • Что нового в WCAG 2.1: Label in Name
  

• Эффекты
  • Создаем glitch-эффект как в Cyberpunk 2077 для изображения с помощью CSS
  • Введение в Web Animations API — создание Pie Timer
  • Подборка креативных сайтов «Inspirational Websites Roundup #21»
  • Подборка креативных концептов UI «UI Interactions & Animations Roundup #13»
  

CSS

• Убираем сдвиги в верстке наложением в CSS Grid
• CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript
• CSS value processing
• AnimXYZ — компонентная библиотека для CSS анимаций, которая легко встраивается в любой фреймворк
• CSS свойства для точечных трансформаций
• Обработка короткого и длинного содержимого в CSS
• Шрифты в HTML письмах
• Content-visibility и Accessible Semantics
• Стилизация форматирования console.log() с помощью CSS
• Центрирование в CSS
• Как создавать адаптивные страницы и цветные темы с минимальным CSS
• Прилипающие элементы в комбинации с CSS Grid

JavaScript

• Новые возможности ES2021 / ES12
• Модули в JavaScript
• Итерируемые объекты и итераторы: углублённое руководство по JavaScript
• Превращаем рекурсию в цикл
• Понимание синтаксиса деструктуризации в JavaScript
• Как один разработчик воссоздал AirDrop, используя только JavaScript
• Учебник по Rust: Введение в Rust для разработчиков JavaScript
• JavaScript: условный JS, загружаемый только тогда, когда это необходимо

• React
  • Импорт react с древнейших времен до наших дней
  • Настройка PWA с помощью сервис воркеров и create-react-app
  • Как React обновляет состояние
  • Проверенные и достоверные советы 25 экспертов по React, которые сделают вас более продуктивным
  • Создайте динамический Sitemap с помощью Next.js
  • Как работают редьюсеры в Redux
  • Iframes с React: лучшие практики
  

• Vue
  • Глобальное состояние в SSR с Vue и Node.js
  • Создание отзывчивых писем с использованием Vue.js и MJML
  • Представляем Qui — дизайн-систему на Vue.js
  • Ваш гид по реактивности в Vue.js
  

• Angular
  • Понимание утечек памяти в Angular
  • Повышение доступности вашего приложения на Angular
  • context help component в Angular или как global event listener может повлиять на производительность
  • Как управлять состоянием компонента в Angular с помощью @ngrx/component-store
  

• Ember
  • Релиз Ember 3.23
  • The Ember Times — Issue No. 170
  • Создание прототипов с Ember.js
  

• Libs & Plugins
  • Tiny-Swiper — современная JavaScript карусель на базе swiper
  • Как использовать Locomotive Scroll для всех видов эффектов прокрутки
  • Moiva — Измеряйте и сравнивайте JS-библиотеки
  • EStimator покажет, насколько быстрее станет ваш сайт при переходе на современный синтаксис JavaScript
  

Браузеры

• Релиз Firefox 84
• В Firefox 85 появится дополнительная защита от отслеживания, основанная на сегментировании сети
• В Firefox, Chrome, Edge и Safari заблокирован сертификат, используемый для перехвата трафика в Казахстане
• Новый менеджер паролей Microsoft синхронизирует данные между Edge, Chrome, iOS и Android
• Avast нашла 28 вредоносных расширений для Chrome и Edge, которые крадут личные данные пользователей
• Microsoft выпустила браузер Edge для компьютеров Apple на базе чипа M1

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