Дайджест свежих материалов из мира фронтенда за последнюю неделю №409 (30 марта — 5 апреля 2020)

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

Веб-разработка    |    CSS    |    JavaScript    |    Браузеры    |    Занимательное    |    

Медиа

• Подкаст «Веб-стандарты» №224. Safari и Chrome, ES2020, дизайнеры и код, палитры, анимации, устаревший Git Flow и видеоплееры
• Подкаст «CSSSR». Что будет в Safari 13.1, web IDE, разбираемся в ECMAScript дальше, UX и backend, TypeScript 3.9 Beta
• Подкаст Фронтенд Юность (18+) №131: Первый трёхмерный
• Подкаст PODLODKA #154: «UI-фреймворки», в гостях Ден Абрамов
• FrontSpot Скарантино. Выпуск 01
• ALL YOUR HTML #s3e19: Particles, trails, mouse

Веб-разработка

• Концепции, лежащие в основе Web Audio API
• Intersection Observer API: примеры использования
• Туториал. Интерактивная SVG-диаграмма
• Простой способ имплементации адаптивных изображений
• BEM Cheat Sheet
• Почему некоторые элементы HTML становятся устаревшими?
• 30 чеклистов для веб-разработчиков, которые должны быть под рукой у каждой команды
• Стратегии тестирования для фронтенд разработчиков

• Инструменты
  • Введение в Chrome DevTools. Панель Elements
  • Как настроить MacBook для веб-разработки в 2020 году
  • Инструменты для работы — Как я пишу веб-приложения в 2020 году
  • Аннотированный Docker конфиг для разработки фронтенда
  

• Производительность
  • Использование современных графических форматов в веб-проектах
  • О позитивном влиянии вариативных шрифтов на производительность веб-проектов
  • Производительность во время пандемии
  • Как улучшить скорость страницы от начала до конца (Продвинутое руководство)
  

• Доступность
  • Расширяемая производительная анимация: создание кадров на лету
  • Подборка вдохновляющих сайтов «Inspirational Websites Roundup #14»
  

CSS

• Всё о ключевом слове auto в CSS
• CSS Houdini: практическое руководство
• Комбинации в CSS: filter и clip-path
• Плавность анимации CSS: миф или реальность
• Overflow в CSS
• Заставляем JavaScript общаться с CSS и Sass
• 4 свойства CSS Grid (и одно значение) для большинства потребностей вашего макета
• Цвета LCH в CSS: что, почему и как?
• CSS-Only Marquee Effect
• Добытая информация о CSS из нового дизайна Facebook
• Обратный инжиниринг CSS в WhatsApp

JavaScript

• Почему пора перестать использовать JavaScript IIFE
• Введение в 3D: основы Three.js
• 10 новых функций JavaScript в ES2020, которые вы должны знать
• Как работает анти-блокировщик рекламы: обратный инжиниринг BlockAdBlock
• Что не даёт мне спать по ночам, как JS разработчику. Обсуждение некоторых из самый сложных аспектов Javascript и их возможное решение
• Layout-isolated components

• Теория
  • Понимание параметров по умолчанию в JavaScript
  • Введение в лямбда-исчисление, объясненное через JavaScript
  • Основные ошибки JavaScript разработчиков
  

• React
  • Разработка формы на React. Принципы KISS, YAGNI, DRY на практике
  • 5 практических рекомендаций по использованию React-хуков в продакшне
  • 9 способов манипуляции и работы с компонентами в React
  • Преобразование CSS в React в Styled Components
  • Как перейти от использования компонентов высшего порядка к React Hooks
  • Сессия отладки в React — Почему эта функция вызывается сотни раз?
  • Создание веб-приложения с Headless CMS и React
  • Как создать приложение Dashboard & Map для Coronavirus (COVID-19) с помощью Gatsby и Leaflet
  • Темизация React компонентов с помощью CSS переменных
  

• Vue
  • Чистые, масштабируемые формы с Vue Composition API
  • Обзор того, что будет в Vue 3
  

• Angular
  • Пробуем Test-Driven разработку с помощью Jest и Angular
  • Ускорьте ваше Angular приложение — 14 советов по оптимизации Angular
  • Контейнеризяция Angular приложений для продакшена с использованием Docker
  • JSX для Angular разработчиков
  

• Ember
  • The Ember Times — Issue No. 142
  • Ember Octane: извлечение данных
  • Портирование сайта на Ember с помощью Percy
  • Скажи привет Theemo — Yordle Powered Theme Automator
  

• Svelte
  • Справочник по компилятору Svelte
  • Роутинг в Svelte с page.js часть 1, часть 2
  • JavaScript фреймворк, который посадил веб-страницы на диету
  

• Libs & Plugins
  • Выпущен simdjson 0.3: самый быстрый JSON-анализатор в мире стал еще лучше!
  • Notyf — Минималистичная JS библиотека для toast-уведомлений. Отзывчивость, A11Y, без зависимостей.
  • Aeon — инструмент выбора даты и времени, созданный с помощью веб-компонентов, которые можно использовать где угодно
  

Браузеры

• Mozilla запустила процесс замены браузера Firefox Beta на Fenix
• Google отменяет предложенное в Chrome 80 ужесточение обработки сторонних Cookie
• Microsoft Edge обогнал Mozilla Firefox по популярности

Занимательное

• Подборка первоапрельских шуток 2020 года
• Fedora и CentOS запускают Git Forge. GitLab открывает 18 проприетарных возможностей
• Google предстaвил систему поиска и навигации по коду своих открытых проектов
• Крутое пике: как пандемия коронавируса изменила IT-отрасль
• Вышел WordPress 5.4 «Adderley» с улучшенным редактором, новыми блоками и API для разработчиков
• В Font Awesome появились новые иконки, связанные с COVID-19

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.