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

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

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

• Обзор технологий скроллинга
• Хватит это верстать, ударим автоматизацией по макетам
• Google запустили бета-версию плагина для публикации AMP-сториз в WordPress
• Полное руководство по темному режиму в вебе
• Темные времена веб-разработки
• Выделение фрагмента текста: как сделать ссылку на конкретный фрагмент текста на веб-странице и подсветить его
• Прогрессивные веб-приложения: руководство по практическому использованию

• Инструменты
  • Зачем в npm 7 оставили поддержку package-lock.json?
  • Программируем лучше с ESLint, Prettier и TypeScript
  • tooling.report — онлайн-ресурс для быстрого способа определения наиболее оптимального сборщика для вашего проекта, с подробными таблицами сравнения функциональности инструментов
  • Что нового в DevTools (Chrome 85)

• Производительность
  • 5 основных ошибок при мониторинге производительности
  • Browserstack SpeedLab: Проверьте скорость вашего сайта в разных браузерах и устройствах
  • Ваши медленные JavaScript-таски расстраивают пользователей?
  • Оптимизация для Core Web Vitals, презентация от Addy Osmani

• Доступность
  • 6 самых распространенных проблем доступности (и как их исправить)
  • Сага о цветовой доступности

• Эффекты
  • Создание анимации изображения при наведении в меню
  • 3D баннеры с помощью ScrollTrigger
  • Подборка креативных концептов «UI Interactions & Animations Roundup #8»

CSS

• TailwindCSS – очередной фреймворк или новый шаг эволюции?
• Упрощаем фоновые рисунки c помощью конических градиентов
• Стилизация контейнеров для содержимого веб-страниц
• Создание простой страницы лендинга за 5 минут используя готовые CSS блоки tailwind.
• Accordion Rows в CSS Grid
• Производительность — CSS Painting vs. CSS Houdini Paint API
• Ссылки нестандартной формы с помощью Subgrid
• Получение значений CSS Translate с помощью JavaScript
• Выравнивание изображений логотипа в CSS
• Динамический импорт CSS
• Необычные свойства CSS
• Адаптирующиеся изображения в изменчивых пропорциях контейнера
• Когда строка не разрывается. О вариантах реализации принудительных переносов в списках
• Новое в Chrome: CSS Overview
• Когда Sass и новые функции CSS сталкиваются
• Полное руководство по медиа-запросам CSS

JavaScript

• Устройство ленивой загрузки в популярных фронтенд-фреймворках
• Как получить размеры экрана, окна и веб-страницы в JavaScript
• Избушка на обратно-совместимых ножках — компилируем JS для нужных браузеров
• Кортежи в JS/ES и TypeScript в 2020
• Почему подход «vanilla JavaScript first» может быть НЕ лучшим выбором
• Техническое руководство по SEO с Gatsby.js
• Вашему блогу не нужен JavaScript фреймворк
• Изучение регулярных выражений: руководство для начинающих

• Теория
  • Что такое функция высшего порядка?
  • Var, let или const? Проблемы областей видимости переменных
  • double-bang оператор (!!) и неправильное понимание того, как JavaScript обрабатывает истинные/ложные значения
  • Понимание шаблонных литералов в JavaScript

• Практика
  • Создание приложения для мониторинга производительности с использованием новых и экспериментальных функций Node 14
  • Создание телесуфлера на React с помощью Web SpeechRecognition API

• React
  • Прости, React, но я так больше не могу
  • Как протестировать ваши приложения React с помощью React Testing Library
  • Различия между статическими сгенерированными сайтами и приложениями с рендером на стороне сервера
  • Анатомия Typed React Component
  • Push-уведомления Firebase в React
  • Server Side Rendering React App с Deno
  • Шаринг виджетов React между приложениями

• Vue
  • Как сделать localStorage реактивным во Vue
  • Vue Demi — развивающаяся утилита, позволяющая писать библиотеки Universal Vue для Vue 2 и 3
  • Создание блога с Nuxt Content
  • 9 идей проектов на Vue JS для начинающих, которые помогут вам получить работу
  • Vue 3: обновление статуса середины 2020 года
  • Напишите свой первый тест для компонента Vue

• Angular
  • Встречаем Angular 10
  • Angular Dependency Injection: мультипровайдеры
  • Двигаемся быстрее навигации с Angular resolvers
  • Angular 10 в деталях
  • Конвертация в строго типизированные формы Angular за минуту

• Svelte
  • Создание центра уведомлений с помощью Svelte

• Libs & Plugins
  • emoji-picker-element — простой эмодзи-пикер, распространяемый как веб-компонент.
  • parallax-effect: Эффект параллакса в javascript, использующий face tracking, может быть использован для улучшения 3D-сцен

Браузеры

• Релиз Firefox 78
• Firefox 78, технические подробности для разработчиков
• Новый Edge на базе Chromium распространяется вместе с принудительным обновлением ОС и навязчиво ведёт себя
• Google Chrome побил собственный рекорд, а Windows 10 продолжает расти

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

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

Автор: alexzfort

Источник