Дайджест свежих материалов из мира фронтенда за последнюю неделю №498 (13 — 19 декабря 2021)

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

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

Медиа

• Подкаст «Сделайте мне красиво» №65 — А работодатель знает, что ты эту шутку не слышал?
• Подкаст «proConf» #116: DevOps.js 2021
• Frontend Weekend №115, в гостях Илья Немиро из компании Toptal: о поиске идеальной компании для разработчиков, технических интервью и рефлексии
• Подкаст «Веб-стандарты» 312. Firefox и Safari, Web Neural Network API, Turborepo, GitPod, вшитые node_modules и Деплойми
• «Новости 512» от CSSSR: ReactConf 2021, оптимизации кода, Ruby on Rails 7 RC, Dart 2.15, Flutter 2.8, Tailwind CSS 3.0
• Подкаст «Да как так-то?». Выпуск №14. Как джуну вырасти в мидла
• Smashing Meets For All — December 2021. Три доклада на тему доступности

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

• Что нового в последней спецификации GraphQL
• Работа с веб-фидами: это больше, чем RSS
• Audio API: знакомство с элементом audio и некоторыми возможностями его API путем создания кастомного аудиоплеера.
• Как запретить прокрутку страницы в iOS Safari 15
• Сейчас лучшее время для создания веб-сайтов

• Инструменты
  • Полное дерево доступности в Chrome DevTools
  • Что нового в npm 8?
  • Ultimate Front-End Toolkit на 2022 год
  • Сломанные дефисы в Chromium 96: объяснение (и исправление)

• Производительность
  • Как оптимизировать размер бандла SPA и ускорить загрузку приложения в несколько раз
  • Объясните, как будто мне пять лет: оптимизация веб-производительности
  • Представляем fuite: инструмент для поиска утечек памяти в веб-приложениях
  • Влияние ошибок в JavaScript на производительность
  • Процесс отображения веб-страницы в браузере | Critical Rendering Path

• Эффекты
  • Подборка креативных сайтов «Inspirational Websites Roundup #32»
  • Эффект пиксельного искажения с помощью Three.js

CSS

• Итоговые результаты опроса «The State of CSS 2021»
• Что нового в Tailwind CSS 3?
• CSS Custom Properties
• CSS Houdini Paint API
• Консистентная, плавно масштабируемая типографика и отступы
• Tailwind CSS — резюме после двух с половиной проектов
• [Checklist] Как выбрать между SVG и Webfont
• Адаптивный CSS border radius с техникой Fab Four

JavaScript

• Изи-пизи автотесты на JavaScript
• Асинхронное программирование с промисами JavaScript
• Объединение интервалов — задача с JS собеседования | Решаем задачи с LeetCode
• Глубокое копирование в JavaScript с использованием structuredClone
• 6 скрытых жемчужин JavaScript, которые вы, вероятно, пропустили
• Понимание POST запросов в Axios
• Топологическая сортировка

• React
  • Передаем React компоненты по WebSocket
  • React Conf 2021
  • Итоги React Conf 2021
  • Методы оптимизации производительности рендеринга React: часть 1
  • Redux Who? Лучше обрабатывайте собственное состояние
  • Настройте Web3 в своем приложении на React
  • Создайте продвинутый React хук для блокировки прокрутки
  • Remix: руководство по новому фреймворку React
  • Использование Fetch Event Source для событий, отправленных сервером в React

• Vue
  • Nuxt 3 Beta: что нового и с чего начать
  • Как построить микро-фронтенд инфраструктуру на основе Vue
  • Создание приложения с помощью Electron и Vue
  • Получение элемента внутри компонента с помощью Vue querySelector

• Angular
  • Angular Async Pipe — вот как правильно его использовать

• Svelte
  • Руководство для новичков по Svelte — от основ до управления состоянием и анимации
  • Будущее Svelte (интервью с Ричем Харрисом)

• Libs & Plugins
  • Релиз GSAP 3.9: Flip Plugin стал публично доступным
  • Floating UI — Библиотека для работы с всплывающими подсказками, окнами, раскрывающимися списками, меню и многим другим
  • quick-lint-js — Быстрее, проще, дружелюбнее: как quick-lint-js превзойдет ESLint

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