Фронтенд-дайджест №437 (12 - 18 октября 2020)
Медиа
- Подкаст "Веб-стандарты" №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-материалы
Веб-разработка
-
11 фронтенд трюков, о которых не знают многие фронтенд-разработчиков
-
Мы делаем веб приложения ради экономии — но этот путь ведет нас во тьму
-
Как создается коммуникация в реальном времени с помощью Socket.io & Node.js
-
Инструменты
-
Производительность
-
Доступность
-
Эффекты
- Воссоздания эффекта частиц, следующих за курсором с сайта Mark Appleby
- Как воссоздать эффект пульсации при клике на кнопоки в стиле Material Design
- Коллекция интересных параллакс эффектов
- Как создать реалистичный Motion Blur эффект с CSS Transitions
- Скролл-анимации для сеток с изображениями
- Реалистичный портрет на чистом CSS:
CSS
- --var: ; хак для переключения множественных значений одним пользовательским свойством
- «Отзывчивый» размер шрифта с использованием ванильного CSS
- Улучшения логических свойств с помощью сокращений
- Трюк с :focus-visible
- Подборка из 20 анимированных лоадеров на чистом CSS
- min(), max() и clamp(): три логические функции CSS для использования уже сегодня
- Layoutit Grid: визуальное изучение CSS Grid с помощью генератора
- Новая CSS функция image ()
- CSS-переменные
- 10 современных раскладок в одну строку CSS-кода
- Переменные CSS — курс молодого бойца
- Отслеживание пользователей с помощью CSS
- Продвинутый CSS-in-TS
- Выбор CSS макета — Grid или Flexbox?
JavaScript
-
Почему вам следует использовать Top-level Await в JavaScript?
-
React
- Эффективное тестирование приложений на React с Wallaby.js
- Визуализация сложных данных с использованием D3 и React
- Кастомные хуки. Part 1
- Framer Motion - красивые анимации и взаимодействия для React.
- Управление long-running задачами в приложении на React с помощью веб-воркеров
- Wouter: Минималистичная альтернатива React Router
-
Vue
-
Angular
-
Ember
-
Svelte
-
Libs & Plugins
- Detect GPU - Классифицирует графические процессоры на основе их результатов в тестах производительности 3D-рендеринга, что позволяет разработчику предоставлять разумные настройки по умолчанию для приложений с интенсивной графикой.
- Удобная платформа для подбора библиотек и фреймворков JavaScript — openbase
- dragmove.js - Крошечная Javascript библиотека для перетаскивания элементов в DOM
- Начало работы с Malina.js
- 3 причины использовать меньше JavaScript библиотек