Фронтенд-дайджест №414 (4 - 10 мая 2020)
Медиа
- Подкаст "Веб-стандарты" №228: DevTools, сайт Веб-стандартов, выделение текста, px vs rem, Atomic CSS-in-JS, рефакторинг
- Подкаст "Фронтенд Юность (18+)" #136: Про онлайн-конференции с Алексеем Федоровым
- Live coding c Вадимом Макеевым: Шапка на гридах и флексах с гэпами и БЭМ
Веб-разработка
-
Инструменты
- Google представляет Web Vitals: мониторинг важных показателей для здорового сайта
- 5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика
- Релиз ESLint v7.0.0
- Инструменты разработчика для дизайнеров
- actions-cli - мониторинг GitHub Actions в реальном времени с помощью командной строки
-
Производительность
- Как ускорить мобильный сайт за 5 шагов + инструменты для запуска тестов скорости мобильного сайта
- Оптимизация значения First Input Delay
- Оптимизация значения Largest Contentful Paint
- Оптимизация значения CLS (Cumulative Layout Shift)
- Подробное руководство по оптимизации производительности с помощью webpack
-
Доступность
- Прогрессивное улучшение радиокнопок с помощью SVG, сохраняя доступность
- Для многих доступность - это неизвестность неизвестного
- Создание доступного Range Slider с помощью CSS
- Полное руководство по доступности для сайтов на WordPress
- generic-components - коллекция популярных веб-компонентов с акцентом на доступность и простоту использования
CSS
- Способы стилизации списков
- Единицы
lh
иrlh
- Играемся с (фейковыми) Container Queries с watched-box и resizeasaurus
- Понимание CSS Grid (2 часть): Grid-линии
- Понимание CSS Grid (3 часть): Grid-области
- Выделение и CSS
- Приключения Masonry-раскладки в CSS
- Все, что я узнал о min(), max() и clamp() в CSS
- Давайте углубимся в свойства CSS Container
- Как легко создать адаптивный вертикальный ритм с помощью CSS
- В Chromium появляется поддержка Flexbox gap
- Глубокое погружение в CSS Grid
- Полное руководство по функциям в CSS
- CSS-находки в дизайне Twitter
- Добавление CSS на страницу с помощью HTTP Headers
- Как создавать игры на чистом CSS
JavaScript
-
Последние функции, добавленные в JavaScript в ECMAScript 2020
-
Понимание (всех) «модульных» форматов и инструментов JavaScript
-
React
- Анатомия компонента Tablist в Vanilla JavaScript в сравнении с React
- react-virtual - Хуки для виртуализации скролящихся элементов в React
- Как сделать повторно используемые компоненты с помощью псевдо-селекторов
- Когда React выполняет перерендеринг компонентов?
- React Flow - библиотека для рендеринга интерактивных графов
- Вопросы и ответы для собеседования по React
- react-select-search - Легкий select-компонент для React
- React-Tiny-Link - компонент для демонстрации мета-информации в виде карточек-ссылок
-
Vue
-
Angular
-
Ember
-
Svelte
-
Libs & Plugins