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

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

•

•

Инструменты
• Не лайтхаусом единым: как проверить свой сайт со всех сторон
• Доступен пакетный менеджер 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

•

•

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

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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №437 (12 — 18 октября 2020)