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

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

Медиа

• «Новости 512» от CSSSR: HolyJS Piter 2021, бандлинг c Webpack 5 in deep, чего ждать от PHP 8.1, Babel 7.16, снова о ES2022
• Подкаст «Веб-стандарты» №306. Новинки Safari TP, API и тихий релиз Safari 15.1, Photoshop в браузере, Node.js и веб-платформа
• Подкаст «Фронтенд Юность» #211 Нейрофронтенд в космосе
• АйТиБорода: JavaScript — ЗЛО! / Безопасность в сети НЕВОЗМОЖНА / Интервью с Андреем Викторовичем Столяровым
• Школа разработки интерфейсов 2021 — запись лекций
• Front-end Science c Сергеем Пузанковым: Стать фронтендером после 30: из работников цирка во фронтенд-разработчики

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

• Все, что было анонсировано на Chrome Dev Summit 2021
• Favicons: как сделать так, чтобы браузеры загружали только SVG версию
• Разрушили ли одностраничные приложения (SPA) веб?
• История веба, часть 10: Браузерные войны

• Инструменты
  • Chrome DevTools: Хитрости при отладке
  • Введение в отладку на примере Firefox DevTools часть 1 из 4, часть 2 из 4
  • Секреты инструментов разработчика, которые не должны быть секретами
  • Depp — Быстрая проверка неиспользуемых и дублированных пакетов
  • 10 лучших продвинутых настроек VS Code для разработчиков
  

• Производительность
  • Google представил обновленную версию PageSpeed Insights
  • Навстречу к новой метрике плавности анимации
  • Требуется обратная связь: экспериментальный показатель отзывчивости
  • Пользовательские потоки Lighthouse
  

• Доступность
  • Name, labels, ARIA, что с ними делать?
  • Доступные переключатели
  

• Эффекты
  • Связанная с прокруткой анимация с помощью Web Animations API (WAAPI) и ScrollTimeline
  • Как создать анимированную диаграмму вложенных квадратов с помощью масок
  • Нестандартное всплывающее меню с SVG наложением и анимацией в фоне
  

CSS

• Создание реальных компонентов: Chat Bubble в Facebook Messenger
• CSS-ing Candy Ghost Buttons
• Полное руководство по word-wrap, overflow-wrap, и word-break в CSS
• Прощай, CSS-модули, привет, TailwindCSS
• Как работает CSS

JavaScript

• Разбираемся в сортах реактивности
• Глубокое погружение в Serverless UI с помощью TypeScript
• Как создать собственную криптовалюту с помощью JavaScript

• Теория
  • Map против Set в JavaScript: выбор структуры данных
  • Кучи (heap) в JavaScript
  • ES2022: Полное руководство по приватным полям классов, методам и статическим блокам инициализации
  

• React
  • Как работает React: подробное руководство
  • Веб стал еще быстрее. Релиз Next.js 12
  • React Router v6
  • 5 новых киллер-фич в Next.js 12
  • Gatsby 4: Использование SSR и DSG
  • Как мы улучшили производительность приложения и качество кода, обновив React Navigation
  • Краткое знакомство с Elm для разработчиков React
  • Сравнение трех лучших библиотек для лайтбоксов в React
  • Распространенные ошибки React хуков, которые следует избегать
  

• Vue
  • Стилизация однофайловых Vue компонентов
  • I18n. Интернационализация в приложениях на Vue
  • Почему мне нравится Composition API Vue 3
  

• Angular
  • Angular v13 уже доступен
  • Angular 13 в деталях
  • Как использовать преобразователи маршрутов Angular с NgRx store
  

• Svelte
  • Hot Module Reloading для контента в Sveltekit
  • Создайте свою собственную библиотеку компонентов с помощью Svelte
  

• Libs & Plugins
  • Smooth Scrollbar — Настраиваемое, подключаемое и высокопроизводительное решение для полосы прокрутки на JavaScript
  • Theatre.js: создавайте сложные и мощные анимации на JavaScript.
  

Браузеры

• Изменение правил каталога дополнений к Firefox
• Релиз Firefox 94
• LibreWolf 94 — вариант Firefox, сфокусированный на конфиденциальности и безопасности
• Браузер Microsoft Edge теперь доступен для Linux

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