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

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

Медиа

• Подкаст «Веб-стандарты» №265: Smashing Conf, Puppeteer и Firefox, состояние всего, video как picture, чек-лист по перфомансу
• «Новости 512» от CSSSR: Chrome 88, Meteor.js 2.0, Deno 1.7, CSS clip-path(), 300+ вопросов по React, JS Rising Stars 2020
• Подкаст «Фронтенд Юность» #170: В #опу стейт менеджеры

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

• Чтобы быть впереди веба, веб-стандартам нужно бежать в два раза быстрее
• Думать в парадигме Jamstack
• HTML и CSS все еще не про рисование кодом
• Что нового в DevTools (Chrome 89)

• Производительность
  • Как измеряются метрики сайта: LCP, FID и CLS
  • Как мы улучшили производительность SmashingMagazine
  • Браузерный JPEG-оптимизатор, соблюдающий конфиденциальность и использующий Web Workers и WebAssembly
  • Как избежать сдвигов макета из-за веб-шрифтов
  • Важность порядка подключения `@font-face` при использовании preload
  • Использование Performance Web API с Chrome DevTools
  

• Доступность
  • Опубликован первый черновик WCAG 3
  • Чего ожидать от первого публичного черновика WCAG 3.0
  

• Эффекты
  • Анимация букв в прокрутке
  • Подборка креативных веб-демок «Awesome Demos Roundup #19»
  • Создание пузырей с текстом для комиксов с помощью SVG и javascript
  

CSS

• Первый публичный черновик CSS-каскада 5 уровня
• Понимание Clip Path в CSS
• Как работает CSS?
• Область видимости CSS с использованием Shadow DOM
• CSS Clamp(): адаптивная комбинация, которую мы все ждали
• Новое в Chrome 88: aspect-ratio
• Используйте CSS Clamp для создания более гибкой обертки
• Как воспроизводить и приостанавливать анимацию CSS с помощью кастомных свойств CSS
• Руководство по единицам размерности в CSS — ч.1: посмотрите на эти абсолютные единицы!

JavaScript

• Введение в JavaScript Temporal API
• Поддержка приложений на JavaScript в долгосрочной перспективе
• Ландшафт JavaScript в 2021 году
• Объяснение управления памятью в JavaScript

• React
  • Server-Side Rendering с нуля до профи
  • Почему React Context не является инструментом «управления состоянием» (и почему он не заменяет Redux)
  • Вам действительно нужен Redux? — Плюсы и минусы этой библиотеки управления состоянием
  • Сравнение 5 лучших библиотек React для анимации
  • Магия многошаговых форм, основанных на React
  • Styled-components vs. Emotion-JS для обработки CSS
  • Использование хуков с React Router
  • Как лучше писать React компоненты
  

• Vue
  • Почему Vue.js — отличный выбор для веб-проектов и как он обошел React
  • Взгляд на GraphQL во Vue
  

• Angular
  • Делаем приложение интерактивным при помощи Angular и RxJs.
  • Angular и принципы SOLID
  • RxJS в Angular: часть III
  • Чистая архитектура Angular
  

• Ember
  • I Love Ember.js — шаблоны
  

• Svelte
  • Философия Svelte
  • Awesome Svelte: Полезные ресурсы для разработки приложений на Svelte
  • Компонентная разработка со Svelte
  

• Libs & Plugins
  • iSSR — библиотека для обработки Side Effects при написании React SSR приложений.
  • JerryScript: легкий JavaScript-движок для Интернета вещей
  • tinyX — Крошечный менеджер состояний для больших приложений
  

Браузеры

• Brave — первый браузер с нативной поддержкой протокола IPFS. Это первый шаг к децентрализованной Сети
• Релиз Chrome 88
• Разбираем V8. Заглядываем под капот Chrome на виртуалке с Hack The Box
• Состоялся релиз Edge 88: «спящие вкладки», менеджер паролей, поиск на боковой панели и др.
• Обновления конфиденциальности и безопасности в Microsoft Edge 88
• В Safari 14 добавлена поддержка WebExtensions. Так где же расширения?
• Сравнение приватности браузеров


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