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

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

Медиа

•

Подкаст CSSSR: Новые тарифы Github, Three.js, SVG, frontendbookmarks, Vue 3 Beta.2, security-релизы git и Oracle
• podcast

UnderJS Podcast#19 — Cypress, Material UI и просто про OpenSource
• video

AvitoTech x FrontendConf 2019: видеозаписи с шести конференций Олега Бунина за 2019 год и одной — за 2020
• video

Видео с Odessa Frontend MeetUps #14 и 15

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

•

Браузер на страже API-запросов: строим безопасное общение фронтенда с бэкендом
• habr

Работа с изображениями в веб
•

Front-End Challenges: подборка сервисов, где можно испытать свои знания
•

Создание сайта с документацией с помощью JAMstack
•

Экосистема JAMstack [Инфографика]
•

Уроки, извлеченные при создании PWA на тему COVID-19

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

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

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

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

CSS

•

Интересные CSS-находки в новом дизайне Facebook
• habr

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.

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