https://habr.com/ru/post/553090/

• Разработка веб-сайтов
• CSS
• JavaScript
• HTML

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

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

Медиа

• Подкаст «Веб-стандарты» №60 — Инди-сайты, подкаст и RSS, Chrome 90, инспектор гридов, Dart и Wrike, FLoC, матрица компетенций
• «Новости 512» от CSSSR: Chrome 90, Deno 1.9, анализ производительности JS, сборщики, верстка писем, pnpm 6, ESLint 7.24.0
• Подкаст «proConf» #92: GatsbyConf 2021
• Подкаст «Сделайте мне красиво» №60 — Единственный фронтендер, который откладывает яйца
• Подкаст «Фронтенд Юность» #183: Путь от идеи до популярного OpenSource проекта
• Подкаст «Да как так-то?». Выпуск № 2: Тимлиды, проектные менеджеры, тестировщики — кто все эти люди?

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

• Малоизвестные, но крутые атрибуты в HTML
• Микрофронтенды: разделяй и властвуй
• Полное руководство по созданию шаблонов HTML-писем
• Практическая доступность, часть 2: дайте имя (почти) всему
• Новости платформы: Использование :focus-visible, новый шрифт BBC, Declarative Shadow DOMs, A11Y и плейсхолдеры
• Медленно и осторожно: конвертация всего интерфейса Sentry на TypeScript
• Напряжение между Wix и WordPress растет

• Инструменты
  • Переход с Parcel на Snowpack — сравнение инструментов сборки
  • Сравнение нового поколения инструментов сборки
  • natto.dev — песочница для JavaScript-экспериментов с интересной визуализацией
  • Frontend Toolkit — дашборд с онлайн-инструментами для повседневной работы фронтендера
  

• Производительность
  • Погружение в Cumulative Layout Shift
  • Является ли магия WebAssembly волшебным средством производительности?
  • Полное руководство по устранению проблем с производительностью JavaScript с помощью DevTools
  • Сравнение производительности реального CSS и CSS-in-JS
  

• Эффекты
  • 2D-физика с Matter.js и Paper.js
  • Meta GSAP: поиски «идеальной» бесконечной прокрутки
  

CSS

• Нестандартные шрифты: как подключить и оптимизировать
• Какие CSS-генераторы можно использовать в 2021 году
• Пользовательские CSS-переменные, инверсия светлоты цветов и создание тёмной темы за 5 минут
• CSS: работа с текстом на изображениях
• Tailwind CSS: to use, или not to use?
• Tailwind UI: теперь с поддержкой React + Vue
• Проблемы с Overflow в CSS
• Как подружить стили с Fullscreen API
• Скажите привет CSS Container Queries
• CSS — это строго типизированный язык
• Руководство для новичков по новым утилитам в Bootstrap 5
• Используйте Reseter.css вместо Normalize и Reset.css. Чтобы улучшить кроссбраузерность.

JavaScript

• Типобезопасность в JavaScript: Flow и TypeScript
• Работа с датой и часовыми поясами в JavaScript
• Изменение размера изображения в зависимости от контета с помощью JavaScript
• Работа со строками в современном JavaScript
• Генераторы JavaScript: превосходный async/await
• Другой подход к архитектуре фронтенда

• React
  • Мой стейт менеджер для React, Preact, Inferno
  • React: наглядное пособие для начинающих. Создаем свой компонент без знаний JavaScript
  • The next big thing! Научитесь использовать React Query для server-state data management
  • React Router Hooks: изучение того, как они работают
  • Методы выборки данных с помощью React
  • Redux не мертв
  • Remotion: фреймворк для создания видео в React.
  • 5 вещей, которые каждый разработчик React должен знать о состоянии
  

• Vue
  • Создание приложения для потокового видео с Nuxt.js, Node и Express
  • Изучите основы Vue с Vue 3
  • Использование provide/inject во Vue.js 3 с Composition API
  • Три распространенные ошибки, которые делают React-разработчики во Vue
  

• Angular
  • Методы работы с LocalStorage, SessionStorage и Cookies.
  • Тематизация ваших приложений на Angular с помощью CSS переменных
  

• Libs & Plugins
  • lazyfill — загрузка полифиллов по запросу только когда они нужны
  

Браузеры

• Вышел Chrome 90
• Включение поддержки HTTP/3 в Firefox намечено на конец мая
• В Firefox 90 будет удалён код, обеспечивающий поддержку FTP
• Разработчики Vivaldi и Brave отказались использовать FLoC от Google, призванный заменить сторонние cookie
• В Microsoft Edge появился специальный «детский режим»
• В Firefox Nightly и Beta появилась поддержка QUIC и HTTP / 3
• WebKit: Представляем CSS Grid Inspector

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