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

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

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

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

• Актуальные форматы изображений в вебе
• Что такое и зачем нужны шаблонизаторы HTML
• Что за Web 3.0, о котором все говорят, и какие недостатки нынешнего интернета он намерен исправить
• WCAG 3 еще не готов
• Основные моменты из Web Almanac 2021
• Как отслеживать пользователей без стороннего JavaScript
• 5 причин, по которым вам следует перейти на микрофронтенд-архитектуру

• Инструменты
  • Переход с Puppeteer на Playwright
  • 5 причин почему Playwright лучше Cypress
  • Некоторые примечания по использованию esbuild
  • ssshape — генератор SVG-блобов/фигур, который дает вам возможность управлять ими вручную
  

• Производительность
  • Builder.io: Как мы урезали наш JavaScript на 99% с помощью Qwik + Partytown
  • CLS в BuzzFeed. Часть 1: Достижение стабильности, Часть 2: Получение помощи от реальных пользователей, Часть 3: Работа с непредсказуемым
  • Defer Non-Critical Resources
  

CSS

• Конфетти и CSS-матрёшка в дизайн-системе StackOverflow
• Добавление пользовательской темы для фронтэнд-приложений
• CSS Анимация с вариативным шрифтом
• Стандартизация focus стилей с помощью кастомных свойств CSS
• Breaking Out of the Box. Несколько CSS техник, позволяющих трансформировать сайт в веб-приложение
• Tailwind CSS v3.0
• Защитный CSS. Подборка техник, позволяющих избежать проблем с динамическим контентом
• Онлайн-инструмент для работы с адаптивной типографикой
• Создание часов на чистом CSS с помощью элемента HTML time
• Как создать анимированные загрузчики страниц в CSS
• Создание бесконечного зацикленного фонового изображения на CSS

JavaScript

• Конечные автоматы для JavaScript разработчиков — как их использовать в своих приложениях
• Невидимый бекдор в JavaScript

• React
  • Погружение в итерацию, контекст и дочерние элементы в React
  • Оптимизация управления состоянием в приложениях на React
  • Next.js и Remix — краткое сравнение
  • Как и почему следует хранить состояние UI React в URL
  • Три способа обработки выборки данных в React проектах
  • Недооцененные хуки React, которые вы упускаете
  • Начало работы с React SyntheticEvent
  • Создание PDF-файлов в React с помощью react-pdf
  

• Vue
  • Petite-vue
  • Прогрессивный Petite-vue
  • 8 проектов Vue, которые должен попробовать каждый новичок
  • Vue2 в стилеVue3: начало работы
  • Приключения Front-End разработчика | Наша работа по повышению производительности в вебе
  • Брендирование изображений с помощью ImageKit и Vue.js
  

• Angular
  • Анимации в библиотеке компонентов: виды анимаций, UX/UI паттерны, подходы в Angular с dependency injection
  • Module Federation — что, почему, как?
  • Разница между версиями Angular
  

• Ember
  • Двухчасовой воркшоп по GlimmerX. Узнайте что экосистема Ember может предложить разработчику в 2021 году: Первая часть, Вторая часть, Репозиторий воркшопа
  • Загрузка изображений на S3 в Ember.js
  

• Svelte
  • Как создать Todo приложение на Svelte
  • Reacting in Svelte — понимание компонентов в Svelte в стиле react
  

• Libs & Plugins
  • elegant-threading — Элегантный способ ветвления в JavaScript
  • Interface Forge — Изящно генерируйте фиктивные данные в TypeScript
  

Браузеры

• Заговор против IE6
• Релиз Firefox 95
• Firefox 95: технические подробности для разработчиков в блоге Марата Таналина
• Microsoft выпустила для браузера Edge инструмент, позволяющий обнаружить утечки памяти
• Google назвала лучшие расширения 2021 года для браузера Chrome

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