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

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

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

Медиа

• UnderJS Podcast#19 — Cypress, Material UI и просто про OpenSource
• AvitoTech x FrontendConf 2019: видеозаписи с шести конференций Олега Бунина за 2019 год и одной — за 2020
• Видео с Odessa Frontend MeetUps #14 и 15

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

• Браузер на страже API-запросов: строим безопасное общение фронтенда с бэкендом
• Работа с изображениями в веб
• Front-End Challenges: подборка сервисов, где можно испытать свои знания
• Создание сайта с документацией с помощью JAMstack
• Экосистема JAMstack [Инфографика]
• Уроки, извлеченные при создании PWA на тему COVID-19

• Инструменты
  • Релиз Puppeteer v3.0.0, теперь с поддержкой Firefox
  • Инструменты рабочего процесса веб-разработчика: руководство для начинающих
  • Visual Studio Code: продвинутое руководство пользователя

• Производительность
  • Сравнение производительности HTTP/3 и HTTP/2
  • Пользовательские метрики WebPageTest с помощью Request Data
  • Уменьшение размера бандла с помощью хеш-стратегии однобуквенных классов

• Доступность
  • Комбинации в ARIA: role=progressbar и aria-live=polite
  • Веб-сайты в качестве «публичных мест пребывания» в условиях пандемии. О нюансах американского законодательства касательно вопросов веб-доступности

• Эффекты
  • Интерактивные эффекты наведения на WebGL
  • Как создать анимацию остающегося следа из частиц в JavaScript
  • Подборка креативных веб-демок «Awesome Demos Roundup #15»
  • Свежий скринкаст Юрия Артюха «ALL YOUR HTML» #s3e21, Particles animation by Étienne Jacob

CSS

• Интересные CSS-находки в новом дизайне Facebook
• LCH-цвета в CSS
• Вставка псевдо-рендомных иллюстраций с помощью CSS
• Использование CSS для размещения текста внутри круга
• Создать отзывчивый CSS Motion Path? Конечно мы сможем!
• Хронология анимации CSS: создание машины Голдберга
• Ограниченные CSS гриды без max-width.
• Создание морфинг-анимации с помощью CSS clip-path
• CSS скроллбар с индикатором прогресса
• Создание адаптивных макетов без использования медиа-запросов

JavaScript

• Поддержка Touch в JavaScript
• Релиз jQuery 3.5.0
• html5-boilerplate: github-обсуждение, обновлять ли jQuery до 3.5.1 или… удалять?
• Лучшие практики производительности в JavaScript
• Стратегии перехода на TypeScript
• 23+ расширенных вопросов для собеседования по JavaScript (с ответами)
• Frontend Shorts: как создать инструмент просмотра содержимого ссылок с помощью React, Vue и Vanilla JavaScript

• Теория
  • 8 наиболее распространенных структур данных на примере JavaScript
  • Теоретические структуры данных и их применение в JavaScript. Ч1. Пары
  • 7 основных концепций JavaScript, объясненных просто

• React
  • Создание шкалы на React — интерактивное руководство
  • Быть ленивым не стыдно. Эффективная загрузка изображений с помощью React Hooks
  • Переменные CSS для разработчиков React
  • Что выбрать в 2020 году: NextJS vs Gatsby
  • Как максимизировать возможность повторного использования для ваших компонентов React
  • react-tater — Компонент React для добавления аннотаций к любому элементу на странице

• Vue
  • Реактивные роуты Vue с помощью Composition API
  • Как Vue Composition API заменяет Vue Mixins
  • Vue 3 теперь официально Beta
  • Как работает реактивность во Vue.js?
  • Нетрадиционный Vue — Vue как бекенд фреймворк

• Angular
  • Чистим код в Angular. Готовим ESLint, codelyzer, stylelint, husky, lint-staged и Prettier
  • Моя конфигурация Nginx для Angular
  • Scully Tutorial: Генератор статических сайтов для Angular
  • Введение в Angular анимации
  • Angular с Ivy — обзор производительности

• Ember
  • The Ember Times — Issue No. 144
  • Учебное пособие по созданию Todo приложения в Ember Octane для тех, кто знает React

• Svelte
  • Создаем возможность просмотра содержимого ссылок с Svelte & Sapper

• Libs & Plugins
  • Redaxios — легкая (800 байт) обёртка над fetch с API, аналогичным axios
  • Builderz — Zero Configuration JavaScript Bundler
  • Начало работы с Alpine.js
  • Представляем mdjs — интерактивные демонстрации везде

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

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