Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | JavaScript
Медиа
• 
Подкаст «Веб-стандарты» №251. Chrome 86, Safari и Firefox, начало UI-кита, SSR и Next.js, про Зара и JS-марафоны
• 
Подкаст «Сделайте мне красиво», Выпуск №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
- Libs & Plugins
•
Удобная платформа для подбора библиотек и фреймворков JavaScript — openbase
•
Detect GPU — Определяет графические процессоры на основе их результатов в тестах производительности 3D-рендеринга, что позволяет разработчику предоставлять разумные настройки по умолчанию для приложений с интенсивной графикой.
•
dragmove.js — Крошечная Javascript библиотека для перетаскивания элементов в DOM
•
Начало работы с Malina.js
•
3 причины использовать меньше JavaScript библиотек
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: alexzfort
