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

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

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

Медиа

• Подкат CSSSR: Argumentarium — React & Virtual DOM vs. Angular & Incremental DOM
• Подкаст «Веб-стандарты» №214: Подкасты, Safari, браузер Flow, эра IE, CSSWG, Yarn или npm, Playwright, JetBrains Mono

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

• Веб-компоненты и открытые стандарты
• Веб тренды 2020, которые стоит попробовать
• Пять советов по улучшению вашей среды разработки UI
• Веб в 2020 году: расширяемость и совместимость
• ResizeObserver — новый мощный инструмент для отзывчивого веба
• Голосовые помощники и JAMstack
• Accessible Accordion. Инструкции по созданию доступного, инклюзивного компонента аккордиона

• Инструменты
  • Yarn 2 — с Prolog'ом и плагнплеями
  • Как мигрировать с mocha на jest в 14 простых шагов — и зачем
  • Что нового в DevTools (Chrome 81)
  • Выберите лучший генератор статических сайтов для своих проектов 2020 года
  

• Производительность
  • WordPress реализует lazy-loading по умолчанию для всех изображений
  • Использование AMP и Турбо-страниц на коммерческих сайтах
  • Как накручивают 100 баллов на Google PageSpeed
  • Почему результаты теста скорости отличаются от времени загрузки
  

• Практика
  • Разработка WebGPU-приложений
  • Новая техника для создания адаптивных диаграмм без JavaScript
  • Как создать конвертер речи в эмоции с помощью Web Speech API и Node.js
  • Анонимный веб-скрапинг с помощью Node.js, Tor, Puppeteer и Cheerio
  • Как Smashing Magazine управляет контентом: переход с WordPress на JAMstack
  

• SVG
  • Оптимизация SVG для веба
  • Используйте и переиспользуйте все в SVG… Даже анимации!
  • Выход за пределы автоматического сжатия SVG с элементом «use»
  

• Эффектный веб
  • Знакомимся с Web Animations API
  • Подборка креативных сайтов «Inspirational Websites Roundup» #12
  • Реализация 2D физики в JavaScript
  

CSS

• Создаем анимированное слайдшоу на чистом CSS
• Методы скрытия элементов веб-страниц
• Новые математические функции в модуле единиц и значений CSS 4 уровня – еще один шаг к полноценному программированию на CSS
• Как создать движок для темизации, используя CSS переменные и React Context
• Анимация ширины и высоты в CSS без эффекта расплющивания
• 2 общие проблемы с позиционированием в CSS
• Анимация переходов для скрытых элементов
• Список из 300+ CSS-свойств с примерами
• Прикрепленное оглавление с прокруткой активных состояний
• Как вы делаете максимальный размер шрифта в CSS?
• Можете ли вы сделать таймер обратного отсчета в чистом CSS?
• Пишем по кругу с offset-path

JavaScript

• Основные советы по JavaScript SEO
• Как автоматически обновлять ваши JavaScript-зависимости
• Визуализация управления памятью в V8 Engine (JavaScript, NodeJS, Deno, WebAssembly)
• 5 рекомендаций по написанию качественных стрелочных функций

• Теория
  • Насколько важен порядок свойств в объектах JavaScript?
  • Понимание иммутабельности в JavaScript
  • Разница между типом и интерфейсом в TypeScript
  

• React
  • Лучшие модалки в React
  • Что нового в Next.js 9.2?
  • Как использовать SVG в React
  • Настройка Typescript React Redux проекта
  • Error Boundary для неправильных пропсов или как я хакнул prop-types package
  

• Vue
  • G&P Boilerplate — профессиональный фронтент-шаблон для создания быстрых, надежных и адаптируемых веб-приложений или сайтов с помощью vuejs.
  • Загрузка файлов с помощью VueJS и Axios
  • Создание нового сайта с VuePress
  • Отображение изображений в стиле Google и Flickr с помощью Vue.js
  • Функциональные базовые компоненты Vue.js на основе модулей CSS
  

• Angular
  • Бесконечный скролл с Ionic, Angular и Firestore
  • Практическое руководство по Angular: обработка HTTP операций
  • Предзагрузка модулей Angular по требованию
  • Основные причины, почему ваше Angular приложение медленное
  

• Ember
  • The Ember Times — Выпуск 132
  • Мышление с помощью Autotracking: что такое реактивность?
  • Проливаем немного света на timing out тесты
  

• Svelte
  • Чему я научился, написав библиотеку компонентов на Svelte
  • Дайджест материалов сообщества Svelte (16.01 — 01.02)
  • Переезд от jQuery к Svelte, без боли
  

• Libs & Plugins
  • popper 2.0 — обновленная версия движка для работы с тултипами
  • Библиотеки JavaScript практически никогда не обновляются после установки
  

Браузеры

• Независимые браузеры более не конкурентоспособны
• Конец эпохи Trident
• Smashing Podcast, эпизод 7 со Stephanie Stimac и Aaron Gustafson: Что нового в Microsoft Edge?

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

• Почему методология не спасет ваш проект
• Тренды и тенденции 2020 года: метаанализ Материал редакции
• Google позволит на полгода скрывать ссылки из поиска
• Более 200 000 сайтов на WordPress оказались под угрозой из-за уязвимости в плагине Code Snippets
• Успеть за 90 дней: Visa, JavaScript, Amazon Prime и другие проекты, созданные в рекордные сроки

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

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