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

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

Медиа

• Подкаст «proConf» #94: GraphQL Galaxy
• «Новости 512» от CSSSR: Chrome 91 Beta, postcss-easy-z, tree-shakeable библиотеки, гайды по кастомным CSS-свойствам и CLS
• Подкаст «Callback Hell»: Падение последнего оплота Dart, визуальные ЯП на примере Enso, Lucy — DSL для стейт-машин
• Подкаст «Фронтенд Юность» #185: Stand up driven development

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

• История фронтенда: JavaScript как отражение новой эпохи
• HTMHell — адовая разметка
• HTML-теги и атрибуты, о которых вы, возможно, не знали
• Адаптивный дизайн как антипаттерн
• Скромный элемент img и Core Web Vitals
• Как реализовать выбор действий для выделенного текста с помощью Selection API

• Инструменты
  • Yarn 2 — Устанавливаем и разбираемся
  • Почему мы перешли с Webpack на Vite
  • Новый Flex редактор в Chrome 90
  • Веб-сервер на Ubuntu 20 с нуля: nginx, HTTPS, Brotli и HTTP/2
  

• Производительность
  • Полное руководство по показателям производительности Google Core Web Vitals
  • Основные показатели, которые необходимо учитывать при измерении производительности фронтенда
  • Рекомендации Google Web Vitals для одностраничных приложений
  

• Эффекты
  • Трехмерный поворот букв и интересный эффект наведения для изображений
  • Воссоздание анимации Apple Keynote Event с использованием SVG, Canvas и GreenSock
  • Подборка креативных сайтов «Inspirational Websites Roundup» #25
  • Эффект ряби текстуры и эффект масштабирования видео с помощью Three.js и GLSL
  

CSS

• Примеры применения переменных CSS на практике
• Контейнерные запросы в CSS
• Как обеспечить глассморфизм с помощью HTML и CSS
• VDS (value definition syntax)
• fit-content и fit-content()
• Полное руководство по Custom Properties
• Первый взгляд на CQFill, полифилл для CSS Container Queries
• Изучение color-contrast() в первый раз
• GPT-3 и CSS-фреймворки
• Понимание easing-функций для анимации и переходов в CSS
• Новые возможности WebKit в Safari 14.1 (Flexbox Gap, Date & Time Inputs, CSS Individual Transform Properties)

JavaScript

• Целительная сила JavaScript
• Человеко-читаемый JavaScript: история о двух экспертах
• Принцип мозаики, или Как мы сделали JavaScript по-настоящему модульным
• Пошаговое руководство: от Intermediate к Senior Engineer в JavaScript
• Клиентские шаблоны API, о которых должен знать каждый разработчик фронтенда

• Теория
  • Вы можете использовать метки с оператором `if`
  • Шпаргалка по импорту и экспорту в ES6
  • Итераторы и генераторы в JavaScript: полное руководство
  

• React
  • 5 React-хуков, которые пригодятся в любом проекте
  • 5 методов оптимизации производительности в React приложениях
  • React Table: библиотека headless таблиц для React
  • Руководство по React Table и лучшие примеры таблиц в React
  • Основные преимущества, которые вы можете получить от Icons-Components в React.js
  

• Angular
  • Angular docs. Введение в формы Angular
  • Banx. Работа с HTTP в Angular. Создание вспомогательных утилит для API.
  • Banx. Config service и Environment service в Angular для Nx
  • Основы Angular: привязка стилей в Angular с ngStyle
  • Функциональное реактивное программирование в Angular с помощью RxJS
  • Ленивая загрузка в Angular — руководство для начинающих
  • Что нового в экосистеме Angular (Ng-Conf 21 Update)
  

• Ember
  • Маунтим легкие приложения в Ember
  

• Svelte
  • Обзор библиотек и компонентов в Svelte UI
  • Чем отличается Svelte — и потрясающе!
  

• Libs & Plugins
  • Полезные JavaScript-библиотеки
  • js-tokens — Крошечный гибкий JavaScript-токенизатор, работающий на регулярных выражениях
  • Fower — утилитарная CSS in JS библиотека для быстрой разработки интерфейсов.
  

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