Дайджест свежих материалов из мира фронтенда за последнюю неделю №427 (3 — 9 августа 2020)

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

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

Медиа

• Подкаст «Веб-стандарты» №241. Сайд-подкасты, онлайн-события, новости браузеров, main вместо master, поиски эмпатии
• Подкаст CSSSR: Тестирование Vue-компонентов, roadmap разработки Github, релизы Angular, Next.js и git
• Подкаст «Фронтенд Юность (18+)» №149: Нагибабель топит ледники

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

• Технологии фронтенд-разработки, на которые вы, возможно, не обратили внимания
• Профессиональное применение инструментов разработчика Chrome: 13 советов
• Руководство по веб-разработке для новичков «The no jargon guide» — Развертывание вашего первого сайта
• Релиз Emmet 2 для Sublime Text

• Производительность
  • Оптимизация производительности фронтенда. Часть 1. Critical Render Path
  • Вырезаем SSR и ускоряем Хабр в 10 раз
  • Google рассказал подробнее об измерении Core Web Vitals
  • Изучение всех основных функций вкладки «Performance» в Chrome и практика с ними на примере простого проекта на React.
  • content-visibility: новое свойство CSS, повышающее производительность рендеринга.
  • Алгоритм, стоящий за Performance Score (и как улучшить ваш результат)
  • Техника для более быстрой предзагрузки hero-изображений
  

• Доступность
  • Делаем Facebook.com доступным как можно большему количеству людей
  • Релиз Axe-core 4.0, одного из лучших браузерных инструментов для работы над доступностью
  • Обеспечение идеального контраста между светлым текстом и фоновым изображением
  

• Эффекты
  • Подборка креативных концептов «UI Interactions & Animations Roundup #9»
  • Magnetic Buttons — набор «магнитящихся» кнопок с забавной анимацией наведения.
  • Анимация рукописной каллиграфии на SVG
  • Подборка креативных сайтов «Inspirational Websites Roundup #17»
  

CSS

• CSS Grid понятно для всех
• Медиазапросы в SCSS — ещё один удобный способ использования @media screen
• 6 мощных возможностей CSS, которые позволяют обойтись без JavaScript
• Drop-Shadow: недооцененный CSS фильтр
• Computed Values: больше, чем кажется на первый взгляд
• Легкое решение для Masonry на CSS Grid c фолбеком на JavaScript
• Углубляемся в детали свойства Flex
• Современные решения на CSS grid для большинства проблем с раскладкой
• Реализация реалистичного перелистывания страниц на CSS
• Оптимизация CSS для более быстрой загрузки страницы
• Интерактивный словарь CSS
• Больше контроля над CSS Borders с помощью background-image
• font-weight: 300 может быть вредным (и возможное решение с fontconfig)
• Супергеройский леайут — объединение CSS Grid и CSS Shapes

JavaScript

• Мои любимые трюки в JavaScript
• Node Modules в состоянии войны: почему CommonJS и ES Modules не могут работать вместе
• RxJS & Firebase 101
• Анонс нового веб-сайта для TypeScript
• Сравнение моделей реактивности — React vs Vue vs Svelte vs MobX vs Solid
• 1Keys — Как я сделал пианино всего в 1 КБ JavaScript

• Теория
  • Дэн Абрамов о замыканиях в JavaScript
  • Почему Array.isArray(Array.prototype) возвращает true?
  • Все вопросы по фронтенду c собеседований, заданные во время моего недавнего поиска работы.
  

• React
  • Concurrent Mode в React: адаптируем веб-приложения под устройства и скорость интернета
  • Как Next.js может помочь улучшить SEO
  • Практическое руководство по обзору продуктов в приложениях React
  • Настройка Redux для использования в реальном приложении
  • Улучшения производительности React: сделайте свое React приложение эффективным.
  • Наделение react-spring смыслом
  

• Vue
  • Vue.js для начинающих, урок 9: пользовательские события
  • Создание нового веб-сайта с помощью VuePress и Bulma
  • React для разработчиков на Vue.js: мой опыт
  

• Angular
  • Кастомизация сборки Angular-проекта
  • Дорожная карта для Angular
  • Angular — это луковица. Подборбный разбор каждого слоя
  • Основные особенности Angular 10
  • Angular, стратегии загрузки модулей и безопасность
  • Последнее руководство по Change Detection в Angular, которое вам когда-либо понадобится
  • Angular 10 — На пути к лучшему будущему для Angular
  

• Ember
  • The Ember Times — Issue No. 159
  

• Svelte
  • Svelte Radio, Episode 8 — Amelia Wattenberger, Svelte, D3 and other fun stuff!
  • Является ли Svelte на голову выше React?
  • Введение в svelte
  

• Libs & Plugins
  • 8 JavaScript библиотек для более удобной работы с Local Storage
  • jois — Небольшая библиотека для помощи в создании веб-компонентов и приложений на основе веб-компонентов.
  

Браузеры

• В Firefox началась активация защиты от отслеживания перемещений через редиректы
• Новый Edge всем и каждому. Microsoft заблокировала возможность деинсталляции браузера из Windows 10
• Рыночная доля Chrome и Edge продолжает расти, а Firefox теряет популярность

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

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