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

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

Медиа

• Подкаст «Веб-стандарты» №252. Опрос MDN, Igalia, npm 7, React vs WordPress, уже Webpack 5, Rome — инструмент будущего
• Подкаст «Сделайте мне красиво», Выпуск №45: 18+ прохладных историй о фронтенде
• Подкаст CSSSR: Webpack 5 и Module Federation, Chrome 86, npm 7, Event Loop & Call Stack, Python 3.9, a11y-материалы

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

• Мы делаем веб приложения ради экономии — но этот путь ведет нас во тьму
• Темный режим: Hello darkness, my old friend
• От HTTP до HTTP 3 - интернета будущего
• 11 фронтенд трюков, о которых не знают многие фронтенд-разработчики
• Веб-компоненты: полное руководство
• Как создается коммуникация в реальном времени с помощью Socket.io & Node.js

• Инструменты
  • Не лайтхаусом единым: как проверить свой сайт со всех сторон
  • Доступен пакетный менеджер NPM 7.0
  • Учебное пособие по webpack: Как настроить webpack 5 с нуля
  • Головная боль Webpack 5
  • Полезные методы отладки кода с помощью Chrome DevTools
  

• Производительность
  • Core Web Vitals: руководство по показателям веб-производительности от Google
  • Сможет ли генератор статических сайтов сделать мой сайт быстрее?
  • Более быстрая доставка веб-приложений с помощью PRPL
  • Largest Contentful Paint: измерьте и оптимизируйте
  

• Доступность
  • Написание CSS с еще большим учетом доступности, часть 2: Уважение пользовательских предпочтений
  • Checka11y.css — CSS для быстрого выявления проблем доступности.
  • Альтернативный текст для содержимого, созданного с помощью псевдоэлементов CSS
  

• Эффекты
  • Воссоздания эффекта частиц, следующих за курсором с сайта Mark Appleby
  • Как воссоздать эффект пульсации при клике на кнопоки в стиле Material Design
  • Коллекция интересных параллакс эффектов
  • Как создать реалистичный Motion Blur эффект с CSS Transitions
  • Скролл-анимации для сеток с изображениями
  • Реалистичный портрет на чистом CSS
  

CSS

• Переменные CSS — курс молодого бойца
• 10 современных раскладок в одну строку CSS-кода
• Продвинутый CSS-in-TS
• Выбор CSS макета — Grid или Flexbox?
• -?-var:; хак для переключения множественных значений одним пользовательским свойством
• «Отзывчивый» размер шрифта с использованием ванильного CSS
• Улучшения логических свойств с помощью сокращений
• Трюк с :focus-visible
• Подборка из 20 анимированных лоадеров на чистом CSS
• min(), max() и clamp(): три логические функции CSS для использования уже сегодня
• Layoutit Grid: визуальное изучение CSS Grid с помощью генератора
• Новая CSS функция image ()
• Отслеживание пользователей с помощью CSS

JavaScript

• WorkBox: ваш toolkit в мире сервис-воркеров
• Что такое WeakSet в JavaScript и как он работает
• Почему вам следует использовать Top-level Await в JavaScript?
• Начало работы с современным JavaScript — Proxy
• Путешествие к Isomorphic Rendering Performance
• Объектно-ориентированный JavaScript: немного практики
• Документирование ваших TypeScript проектов: варианты

• React
  • Визуализация сложных данных с использованием D3 и React
  • Кастомные хуки. Part 1
  • Эффективное тестирование приложений на React с Wallaby.js
  • Framer Motion — красивые анимации и взаимодействия для React.
  • Управление long-running задачами в приложении на React с помощью веб-воркеров
  • Wouter: Минималистичная альтернатива React Router
  

• Vue
  • Создание блога с помощью Nuxt Content (часть вторая)
  • Самый простой способ использовать простые всплывающие сообщения во Vue
  • Уклонение от атак с помощью VueJS script gadgets
  

• Angular
  • Возможности Angular DI, о которых почти ничего не сказано в документации
  • Как имплементировать Lazy Load для компонента в Angular
  • Добавьте реактивности своим шаблонам Angular с помощью LetDirective — Часть 1
  • Миграция с .CSS на .SCSS для существующего проекта на Angular
  

• Ember
  • Создание модального диалога с использованием yieldable named blocks
  

• Svelte
  • Svelte для сайтов, React для приложений
  • Создайте карусель изображений с помощью Svelte
  

• Libs & Plugins
  • Удобная платформа для подбора библиотек и фреймворков JavaScript — openbase
  • Detect GPU — Определяет графические процессоры на основе их результатов в тестах производительности 3D-рендеринга, что позволяет разработчику предоставлять разумные настройки по умолчанию для приложений с интенсивной графикой.
  • dragmove.js — Крошечная Javascript библиотека для перетаскивания элементов в DOM
  • Начало работы с Malina.js
  • 3 причины использовать меньше JavaScript библиотек
  

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