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

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

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

Медиа

• Видеоблог Вадима Макеева, выпуск №25. Свежий взгляд на Gulp: функции и ES-модули
• Подкаст «Pro Conf» #66: Я Фронтенд — Все про картиночки | Фронтенд как у сына маминой подруги | ApolloClient 3
• Подкаст CSSSR: Microfrontends, Vue 3 development, any и unknown в TypeScript, почему CSS такой, Vue и тесты

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

• Что должен уметь верстальщик, чтобы его все хотели
• Создание прототипа SPA интернет магазина на htmlix.js
• Анонсирован новый раздел в MDN Web Docs — путь обучения для фронтенд разработчиков
• Новые возможности Node.js 14 — AI, IoT, Assembly и многое другое
• Достижение баланса между нативными и кастомными селектами
• Поддержка темного режима на вашем сайте
• 5 мифов о  Jamstack
• Создание прогрессивного веб-приложения и его развертывание

• Инструменты
  • (Очень простое) Руководство для начинающих по WEBPACK
  • µcdn: a live, bundlerless, alternative
  • starred_search — поиск по ключевым словам в отмеченных GitHub-репозиториях
  

• Доступность
  • Оптимизация навигации с помощью клавиатуры с помощью tabindex и ARIA
  • Устаревшие приложения и Accessibility
  

• Эффекты
  • Airplanes. Клевая демонстрация скролл-анимации с помощью ScrollTrigger, нового плагина от GreenSock
  • Как создать эффект движения фоновой сетки изображений при наведении
  • Визуализация списка женщин-лауреатов Нобелевской премии в виде кристаллов в 3d с использованием Vue, WebGL, three.js
  • TitleRun — игра, которая существует только в строке заголовка вкладки браузера
  

CSS

• Цвета в CSS
• Как использовать grid-template-area CSS Grid для изменения порядка элементов html в зависимости от размера вьюпорта
• Изучение Z-Index, используя инструмент визуализации
• CSS: is () и: where () приходят в браузеры
• Клевые маленькие хитрости CSS Grid для вашего блога
• Как обратить порядок пользовательские счетчиков в CSS
• Grid для разметки, Flexbox для компонентов
• Эффект складывания журнала на CSS
• Удивительные вещи, которые CSS может анимировать
• CSS Houdini
• CSS Viewport Units: Быстрый старт

JavaScript

• Очень странные дела: JavaScript
• Минифицируем приватные поля в TypeScript. Доклад Яндекса
• 10 полезных приёмов для JavaScript-программистов
• JS/ES2020: Optional Chaining and Nullish Coalescing
• Event listeners and garbage collection
• Как получить все пользовательские свойства на странице в JavaScript
• Список из 156 (продвинутых) вопросов о JavaScript, а также ответы на них
• Понимание ES-модулей в JavaScript
• Как сравнивать объекты в JavaScript

• React
  • useSWR – моя новая любимая библиотека React
  • Уязвимости безопасности в React, которые вы никогда не должны игнорировать
  • Компоненты высшего порядка в React
  • Recoil.js — новая, лучшая библиотека управления состоянием для React
  • Создания генератор случайных цитат на React
  • Оптимизация производительности React: часть I , часть II
  • Как настроить Redux с React (2020)
  • Что такое Storybook и как его использовать для создания библиотеки компонентов в React?
  • Практическое руководство по интеграции Google Maps в React
  • Как создать ecommerce сайт с помощью React
  • 5 альтернатив React Redux в 2020 году
  

• Vue
  • Работа с данными на границе Vue.js-приложения
  • EVAN YOU: Создание Vue 3
  • Почему я бросил Vue ради React?
  • Создание Instagram с использованием TypeScript, Node, Express и Vue — Часть 1
  • Awesome Vue 3 — курируемая подборка ресурсов, посвященных Vue 3
  • Изучение Vue-Multiselect
  

• Angular
  • Автоматические адаптивные изображения в приложениях Angular
  • 10+ лучших статей для изучения Angular в 2020 году
  • Пре-рендеринг в Angular 9
  

• Ember
  • The Ember Times — Issue No. 152
  • Как улучшить доступность вашего существующего приложения на Ember
  

• Svelte
  • Валидация форм Svelte с Yup
  • Роутинг в Svelte с Page.js
  

• Libs & Plugins
  • jsgrids — подборка JavaScript библиотек для работы с таблицами данных
  • Josh.js — JS библиотека для анимации содержимого при прокрутке страницы.
  • johnny-five — JavaScript фреймворк для робототехники и IoT
  

Браузеры

• Microsoft Edge Canary и Dev теперь позволяют использовать кастомное фоновое изображение для страницы новой вкладки
• В браузере Brave выявлена подстановка реферального кода при открытии некоторых сайтов
• В сборках Google Chrome Canary уже можно активировать функцию Live Caption для преобразования речи в текст

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

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