Медиа | Веб-разработка | CSS | JavaScript
Медиа
• 
Подкаст «proConf» #94: GraphQL Galaxy
• «Новости 512» от CSSSR: Chrome 91 Beta, postcss-easy-z, tree-shakeable библиотеки, гайды по кастомным CSS-свойствам и CLS
• Подкаст «Callback Hell»: Падение последнего оплота Dart, визуальные ЯП на примере Enso, Lucy — DSL для стейт-машин
• Подкаст «Фронтенд Юность»#184: Матрица для мешка с картошкой
Веб-разработка
• История фронтенда: 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 по-настоящему модульным
• Клиентские шаблоны 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)
- Libs & Plugins
• Полезные JavaScript-библиотеки
• js-tokens — Крошечный гибкий JavaScript-токенизатор, работающий на регулярных выражениях
• Fower — утилитарная CSS in JS библиотека для быстрой разработки интерфейсов.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.