Дайджест свежих материалов из мира фронтенда за последнюю неделю №431 (1 — 6 сентября 2020)

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

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

Медиа

• Подкаст CSSSR: Chrome 85, NodeJS 14.9.0, css-reset vs css-normalize, релизы JS- и PHP-фреймворков, прощай PhoneGap
• UnderJS Podcast #25 — Маленький перерыв, TypeScript 4, Angular 10
• Фронтенд Юность (18+) — #153 Редактирование PSD в VSCode
• Подкаст «Сделайте мне красиво», Выпуск №43: Чем хуже код, тем лучше программисты (в Aviasales)
• Подкаст «Веб-стандарты» №245. Firefox 80 и Chrome 85, никто не новый IE, зачем Yarn 2, новый AVIF и WebP v2
• The CSS Podcast №023: Filters
• Подкаст Toolsday: «Svelte: A Second Look»

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

• Сравнение Blazor и JavaScript-инструментов
• Безопасность npm-проектов, часть 1
• Про Shadow DOM
• Как обеспечить безопасность REST API
• 4 способа подделки API во фронтенд-разработке
• 11 микро-фронтенд фреймворков, которые вы должны знать

• Инструменты
  • Все, что вам нужно знать, чтобы начать работу с Deno
  • Сравнение инструментов для работы с адаптивным дизайном
  • Все, что разработчики должны знать о Figma

• Производительность
  • Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite
  • Повысьте производительность загрузки страницы с помощью этих методов загрузки скриптов
  • GTmetrix ждут большие изменения: Lighthouse, новые тестовые локации, новые PRO планы и др.
  • Ускорение JavaScript (в браузере)
  • Как упростить код SVG с помощью основных фигур

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

CSS

• Кастомные свойства в CSS. Часть 1: что это такое и как работает, Часть 2: особенности применения, Часть 3: ограничения
• Обработка изображений с помощью CSS
• Как использовать CSS Grid для закрепления хедера и футера
• Обводка текста с помощью CSS: Полное руководство
• Техника добавления переноса на новую строку после инлайн элемента
• Пользовательские маркеры с помощью CSS :: marker
• Помимо медиа-запросов: использование новых функций HTML и CSS для адаптивного дизайна
• Верстка шапки сайта с помощью CSS Flexbox
• Варианты решения бага вьюпорта в Mobile Safari
• Как сделать адаптивный компонент с карточкой продукта без медиа-запросов
• Пользовательские стили CSS для полей ввода и текстовых полей
• Создание кастомной полосы прокрутки в 24 строках CSS

JavaScript

• Обзор ts-migrate — инструмента для перевода крупномасштабных проектов на TypeScript
• Рецепты по приготовлению оффлайн-приложений
• Обработка ошибок в JavaScript
• 10 малоизвестных веб-API, которые вы можете использовать

• Теория
  • JavaScript: область видимости простыми словами
  • JavaScript Array Insert — Вставка массива JavaScript — как добавить в массив с помощью функций Push, Unshift и Concat
  • В JavaScript наконец-то появилась поддержка Native Private Fields и методов
  • Интересное объяснение async/await в JavaScript
  • Освоение сложных частей JavaScript: коллбеки

• React
  • Почему я люблю React
  • Temper — Управлять состоянием в React стало проще
  • Недостающее введение в React
  • Создание приложений на React с помощью Storybook
  • Создание библиотеки компонентов с помощью React и Emotion

• Vue
  • 5 библиотек для Vue.js, без которых мне не обойтись
  • 4 рекомендации по разработке крупномасштабных проектов на Vue
  • Роутинг в Vue
  • Создайте приложение со списком покупок с помощью Vue 3.0 Composition API
  • Лучшая композиция компонентов в VueJS

• Angular
  • Сделайте ваше приложение быстрее за счет предзагрузки данных с помощью NgRx
  • Лучший способ реализовать собственные валидаторы

• Ember
  • Руководство по созданию вашего первого приложения на Ember.js
  • Упростите свое приложение на Ember с помощью Domain Components
  • CI с GitHub Actions для приложений Ember: часть 2

• Svelte
  • Svelte — Изучение основы этого быстрого фреймворка
  • Svelte/Sapper vs Vue

• Libs & Plugins
  • fg-modal — Простой и доступный веб-компонент для создания модальных окон от filament group
  • Brahmos — Расширенная JS библиотека для создания пользовательских интерфейсов с использованием современного API React и нативных шаблонов.

Браузеры

• Microsoft пообещала избавиться от Adobe Flash в своих браузерах до конца года
• Mozilla: истории браузера достаточно для надежной идентификации пользователя
• Защита DNS — теперь и в Chrome для Android
• Chrome 86: улучшенное выделение фокуса, WebHID и многое другое
• В чем ценность разнообразия браузеров?

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

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