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

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

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

Медиа

• Девшахта-подкаст #112: Артём Кобзарь про собственную альтернативу TS и многое другое
• Подкаст «Веб-стандарты» №217: Firefox 73, Angular 9, Container Queries, Web We Want, CSS4, JS поедает HTML, DOM Reflow
• Подкаст «Фронтенд Юность» (18+) #126: Лавка для фронтендера
• 9 видео с WebAssembly Summit 2020
• 4 видео с MoscowJS 47
• Материалы с казанского митапа по фронтенду: Phoenix LiveView, фронтопс, JSON:API

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

• Отключенные контролы в формах и как с ними работать
• Полное руководство по дата-атрибутам
• Сделайте это, чтобы улучшить загрузку изображений на вашем сайте

• Инструменты
  • Современная сборка 2020 для frontend. Gulp4
  • Мои любимые инструменты разработчика Chrome
  • jest vs jasmine: основные отличия
  • Большое руководство по командам консоли
  • destiny — Prettier для файловой структуры
  

• Веб-компоненты
  • Опыт интеграции веб-компонентов на сайт Леруа Мерлен
  • Все способы создания веб-компонентов
  • Веб-компонент для блока кода
  

• Производительность
  • Что такое производительность веб-приложений?
  • Устранение утечек памяти в веб-приложениях
  
• JAMstack
  • JAMstack — это в основном брендинг?
  • J в JAMstack не означает React (или Angular, Vue, Svelte и т.д.)

• Доступность
  • Понимание правил и соотношений цветового контраста в вебе
  • Основные ошибки доступности в веб-разработке
  

CSS

• Разбираемся с переменными в CSS на реальном примере
• Фиксированные заголовки с якорными ссылками перехода? Решение — scroll-margin-top
• Анимация изменений SVG Path в CSS
• Стилизация старого доброго элемента Button
• Добавление цветов фона в SVG с помощью элемента «rect»
• Let’s Define CSS 4. Обсуждение в csswg-drafts на github, где народ пытается определить, что же такое CSS 4
• Создаем диагональные раскладки по версии 2020 года
• Эффект частиц пыли на CSS

JavaScript

• Молчание вентиляторов. Google Colab, Javascript и TensorflowJS
• Создайте полнофункциональную карусель в стиле Tinder на ванильном JavaScript
• Python и JavaScript: радости утиной типизации

• Теория
  • 7 трюков с Rest и Spread операторами при работе c JS объектами
  • Новые функции в ES2020
  • 5 cекретных функций JSON.stringify ()
  • 4 способа обмениваться переменными в JavaScript
  • Полное руководство по советам, хитростям и функциям JavaScript, которые вы должны знать
  

• Svelte
  • Пришло ли время забыть о React и перейти на Svelte?
  • Svelte-grid — draggable and resizable grid layout с отзывчивыми брейкпоинтами для Svelte.
  • Медленный код ненавидит его! Оптимизация веб-приложения от 1 до 60 кадров в секунду
  • Разблокировка реактивности с Svelte и RxJS
  • Если бы у Svelte и RxJS был ребенок
  • Не пора ли нам забыть о React и запрыгнуть в вагон со Svelte?
  

• React
  • 10 React-компонентов на все случаи жизни
  • Используем localStorage в React
  • Максимизация переиспользования кода в React
  • Как использовать HTML Drag-and-Drop API в React
  • Отладка проблем с производительностью в React
  • Полное руководство для начинающих по React Router (включая Router Hooks)
  

• Vue
  • Vue.js Templates — модификаторы и сокращения
  • The Mindset of Component Composition в Vue
  • Как создавать компоненты Vue в WordPress теме
  • Переход от Vanilla JavaScript к переиспользуемым компонентам Vue
  • Когда использовать новый Vue Composition API (а когда нет)
  • Визуализация данных с Vue и D3
  • Реактивность: Vue 2 vs Vue 3
  

• Angular
  • Практическое руководство по Angular: маршрутизация и обработка событий
  • Angular a11y: 11 советов, как сделать ваши приложения более доступными
  • Производительность селекторов NgRx
  • Angular 9: Lazy Loading Components
  

• Ember
  • Что делает реактивную систему хорошей?
  • Переход от React к Ember в 2020
  • The Ember Times — Issue No. 136
  • Использование WebAssembly в Ember.js (Rust + wasm-pack)
  • Эволюция Ember в Intercom
  • 2020 Ember.js Community Survey, ежегодный опрос
  

• Libs & Plugins
  • Удаление людей из сложных фонов в режиме реального времени с помощью TensorFlow.js в браузере
  • Удобное TensorFlow.js API для работы с ML на клиенте
  

Браузеры

• Mozilla проиграла в войне браузеров, но всё ещё считает, что может спасти интернет
• 2019-й по версии Chrome
• Дорожная карта по разработке Edge обещает синхронизацию истории и добавление поддержки Linux
• Chrome 81 принесёт глобальную поддержку платформ WebXR и Web NFC

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

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