Дайджест свежих материалов из мира фронтенда за последнюю неделю №437 (12 — 18 октября 2020)
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | JavaScript
Медиа
•
•
•
Веб-разработка
•
•
• От HTTP до HTTP 3 - интернета будущего
•
•
•
-
Инструменты
•Не лайтхаусом единым: как проверить свой сайт со всех сторон
• Доступен пакетный менеджер 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
•
•
•
•
•
•
•
•
•
•
•
•
•
JavaScript
•
• Что такое WeakSet в JavaScript и как он работает
•
•
•
•
•
-
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.