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

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

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

Медиа

• Подкаст CSSSR: CSS Grid в Chrome DevTools 87, микросервисы, TypeScript-хитрости, Spamtoberfest, эра VS Code
• Подкаст «Веб-стандарты» №250. Edge в VS Code, инспектор гридов, gap и флексы, математика в CSS, Hacktoberfest, опенсорс
• Подкаст «Фронтенд Юность» №159: SOLID vs SOLOD

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

• Создание favicon для сайта 2020
• Использование политики безопасности контента (CSP) для защиты веб-приложений
• Расширение ответственности фронтенд-разработчиков
• Интернет не был создан для обеспечения конфиденциальности, но мог бы
• Ваше одностраничное приложение теперь представляет собой полифил

• API
  • Более приватный способ измерения конверсий рекламы — Event Conversion Measurement API.
  • О Web Share API
  • The File System Access API: упрощение доступа к локальным файлам
  

• Инструменты
  • Релиз Webpack 5
  • Что нового в DevTools (Chrome 86)
  • RSLint — JS-линтер, написанный на Rust, максимально быстрый, настраиваемый и простой в использовании.
  • npmx — продвинутый CLI интерфейс для npm
  

• Производительность
  • Снижение влияния сторонних тегов на скорость загрузки сайта
  • Улучшение HTML5 Lazy Loading с помощью CSS и минимального JavaScript
  • Cumulative Layout Shift на практике
  • Cumulative Layout Shift в реальном мире
  

• Доступность
  • Доступность в Интернете: определения и сокращения
  

• Эффекты
  • Видео переходы на WebGL с Curtains.js
  • Интерактивный Webgl SLider
  

CSS

• CSS Variables 101: подробное руководство по CSS переменным с примерами
• Анимация счетчиков с помощью CSS
• :focus-visible уже здесь
• Элегантное решение на CSS Grid для макетов с отцентрированным контентом, который разорван полноширинным блоком
• Руководство по HTML/CSS формам (без хаков)
• Красивые примеры 3D трансформаций в CSS
• Создание отзывчивого медиa-браузера на CSS
• Балансировка оси с помощью Flexbox
• Странный, но работающий Flex: интерактивные диаграммы на Flexbox
• clamp() для отзывчивого дизайна

JavaScript

• Лучшая практика обработки ошибок в современном JavaScript
• Javascript фреймворк разработки бизнес приложений
• Обработка range-запросов в сервис-воркере
• Как работать с мультиселект-элементом в vanilla JS
• Как сделать ненавязчивую кнопку прокрутки вверх
• Что ждет JavaScript в будущем?
• Что меня восхищает в TypeScript 4.0

• Теория
  • Объектно-ориентированный JavaScript простыми словами
  • Объектно-ориентированный JavaScript: прототипы
  • Простое объяснение итераторов JavaScript
  • Объяснение Event Loop и Call Stack в JavaScript
  • Начало работы с современным JavaScript — классы
  

• React
  • Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее
  • Мифы о useEffect
  • Как создать прогрессивное веб-приложение на React (PWA)
  • React Hooks: как начать работу и создать свой собственный
  • JavaScript-less Static SSR с использованием Styled Components
  • Что такое Render в React и как его зафорсить?
  • Создание плагинов для Figma с помощью React
  

• Vue
  • Полезные инструменты в веб-разработке на Vue.js
  • Приложение To-Do: Composition API как альтернатива Vuex
  

• Angular
  • Angular Component Libraries и Accessibility
  • Inputs & Outputs: Работа с компонентами Angular
  • Совместимые компоненты: декларативный подход в Angular
  • Демистифицируем angular/router: что такое RouterScroller и чем он полезен?
  

• Ember
  • The Ember Times — Issue No. 165
  • Использование in-element в Ember.js
  • Более простые и мощные компоненты в Ember Octane с Glimmer Components
  • React сквозь призму Ember: структура приложения и инструменты
  • Шаблоны React Component в Ember.js
  

• Libs & Plugins
  • ZzFXM — Крошечный генератор музыки на JavaScipt
  • meta-fetcher: крошечный парсер мета-данных по указанному URL
  • spotify-api — быстрая обёртка для взаимодействия со spotify api
  

Браузеры

• В Chrome началась активация IETF QUIC и HTTP/3
• Релиз Chrome 86
• Google Chrome остаётся самым популярным браузером в Китае
• Microsoft рассказала, почему браузеры в Windows 10 создают так много процессов
• Microsoft анонсировала новые функции для Microsoft Edge
• История веб-браузера

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