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

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

Медиа

• Подкаст «Сделайте мне красиво», выпуск №41: «Бездарные программисты и токсичность»
• Подкаст Фронтенд Юность (18+) #151: React 17 по Dialup-у
• Подкаст CSSSR: React 17 RC, архитектура NodeJS-приложений, OOCSS, PHP 8, npm 7 Beta, дебаг утечек памяти в WASM
• Подкаст «Веб-стандарты» №243: PhoneGap всё, проблема фокуса, цвета и темы, зачем в CSS км, кризис Mozilla и бесплатный веб

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

• Туториал. График на Canvas
• Атака на пользователей почтовых клиентов при помощи ссылок «mailto:»
• Используйте продвинутую типографику при работе с локальными шрифтами при помощи Local Font Access API
• Особенности веб-разработки при работе с устройствами с двойным экраном часть 1, часть 2
• Проект Phone Gap закрыт в 2020?

• Инструменты
  • Как npm обеспечивает безопасность
  • Фигма против Фотошопа. Что выбрать начинающему верстальщику
  • Грядет новый npm
  • Omatsuri — набор из 10 фронтенд инструментов, реализованный в качестве PWA с оффлайн-режимом
  • Google готовит к запуску обновлённую версию Chrome DevTools
  • Что нового в DevTools (Chrome 86)
  

• Производительность
  • Измеряем изменения в скорости загрузки сайта в различных сетевых (и не только) условиях. Теперь удобнее
  • Chrome на Android вскоре начнет маркировать быстрые сайты специальной отметкой — ее наличие будет влиять на ранжирование в поиске Google
  • Как быстро должен загружаться ваш сайт?
  • Оптимизация веб-сайтов с помощью новых медиаформатов
  • Понимание мониторинга веб-производительности
  

• Эффекты
  • Удивительные методы анимации с GSAP
  • Эффект трансформации миниатюры в полноразмерное изображение
  

CSS

• Исследование CSS-свойства flex
• Grid для макетов, Flexbox для компонентов
• Leading-Trim: будущее цифровой типографики и роль Miscrosoft в работе над соответствующими спецификациями
• Создание 3D-иллюстраций с помощью CSS
• Как определить поддержку Flexbox Gap браузером
• Стилизация Select с использованием чистого CSS

JavaScript

• Разбор худшего в мире куска кода
• Как бесплатно перенести свои любимые треки в Spotify, используя Javascript
• Насколько JavaScript сильный?
• Введение в Set в JavaScript — все, что нужно знать о наборах
• Релизы: Анонс TypeScript 4.0 , Storybook 6.0, Cypress v5.0.0
• Что нового в TypeScript 4
• История Javascript и почему вы должны ее знать
• Насколько хорошо вы знаете свои основы JavaScript?

• React
  • Организация разработки крупномасштабных React-приложений
  • ТОП 25 инструментов React разработчика
  • Начало работы с Adobe’s React Spectrum
  • Что React 17 означает для разработчиков
  • Создание модальных окон в React с конечными автоматами
  • Понимание React's useRef Hook
  • Освоение Props и PropTypes в React
  

• Vue
  • 4 рекомендации для крупномасштабных проектов на Vue.js
  • VueJS + Wicket = Vuecket
  • Приближается Vue 3 — чего ожидать и как подготовиться
  • Давайте сделаем ежемесячный календарь на базе Vue
  

• Angular
  • Генерируйте QR-коды с помощью Angular 10
  • Обзор Angular для веб-разработчиков
  • Новые возможности с рендерингом Angular и push pipe — Часть 1
  • 5 советов по развитию навыков работы с Angular
  

• Ember
  • The Ember Times — Issue No. 161
  • Миграция PromiseProxyMixin в Ember Octane
  • Каково текущее состояние более продвинутых функций Glimmer VM?
  

• Svelte
  • Как создать простое приложение с Svelte
  

Браузеры

• Microsoft прекратит поддержку Internet Explorer 11 и старой версии Edge в 2021 году
• Для Chrome развивается API для прямых TCP и UDP коммуникаций
• В Chrome 86 появится защита от небезопасной отправки web-форм

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

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