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

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

Медиа

• Подкаст 'Callback Hell': Убийцы вебпака, Microsoft + Bytecode Alliance, удалёнка
• «Новости 512» от CSSSR: Bootstrap 5, V8 9.1, дженерики в TypeScript, RxJS в Angular, e2e-тесты с Cypress, баг в Safari 14.1
• «Новости 512» от CSSSR: «История фронтенда» ч.2, Safari 14.1, CORS, Cookie Store API, Next.js 10.2, RxJS 7, Google I/O 2021
• Подкаст «Веб-стандарты» №280. Safari 14.1, гэпы во флексах, история JS, мозаичный JS, кому нужны алгоритмы
• Видеокаст «Front-end. Вопросы на собеседовании» #1
• Подкаст «Pro Conf» #95: HollyJS Moscow 2020

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

• Вышел Bootstrap 5: оцениваем 7 главных нововведений
• Почему стоит использовать тег <picture> вместо <img>
• Базовая структура HTML-документа с объяснением каждой строчки
• HTML трюки
• Эволюция Jamstack
• Как мы используем веб-компоненты на GitHub
• Аудит дизайн-систем на предмет доступности
• Ускорение процесса разработки с помощью Bootstrap 5
• Как мы ускорили трассировку стека Chrome DevTools в 10 раз

• Инструменты
  • Почему мы перешли с Webpack на Vite
  • Менеджеры зависимостей не управляют вашими зависимостями
  

• Производительность
  • Используем GPU для повышения производительности JavaScript
  • Вам не нужны ни PWA, ни AMP, чтобы ваш сайт загружался быстро
  • Измерение веб-производительности в 2021 году: полное руководство
  • Как использовать History Graphs в GTmetrix
  • Что означает свежий Google Page Experience Update для изображений на вашем веб-сайте
  

• Эффекты
  • Динамические CSS маски с кастомными свойствами и GSAP
  • Пример создания портфолио в 2021 — визуализация всего HTML-сайта в WebGL
  

CSS

• Состояние кроссбраузерной разработки CSS
• Container Queries: разъяснения и предложения
• Два варианта использования кастомных свойств
• Полное руководство по веб-шрифтам в шаблонах писем
• Является ли CSS языком программирования?
• CSS Hell — Сборник распространенных ошибок в CSS и способы их исправления
• Текст размером 16 пикселей или больше предотвращает масштабирование формы в iOS
• Fluid typography — Создавайте текст, масштабируемый в соответствии с размером окна, чтобы заголовки отлично смотрелись на любом экране.
• Вендорные префиксы мертвы?
• Компиляция CSS по запросу с помощью последней версии компилятора Tailwind

JavaScript

• Как я написал браузерный 3D FPS шутер на Three.js, Vue и Blender
• Кастомные типы данных в TypeScript: валидация на этапе компиляции
• Возможны ли 0kb JavaScript в вашем будущем?
• Vue Composition API против React Hooks — основная разница
• Создайте трекер спутников с нуля 30-ю строками JavaScript кода

• React
  • React Spectrum: Как мы интернационализировали числовое поле
  • Подробно о том, как работают хуки React
  • useStateMachine — Хук конечного автомата для React
  • Использование конечных автоматов с XState и React
  

• Vue
  • Экосистема Vue
  • Создание компонента Vue 3 с анимацией при появлении в области видимости
  

• Angular
  • Подключение Ngrx в Angular. Создание RootStore.
  • Что нового в RxJS 7
  • Путешествие в NgRx Selectors
  

• Ember
  • The Ember Times — Issue No. 179
  • Ember Apollo Client + @use
  

• Libs & Plugins
  • Fastify.js — не только самый быстрый веб-фреймворк для node.js
  • WinBox — современный оконный менеджер для веба. Легкий, быстрый, без зависимостей и с множеством настроек
  

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