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

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

Медиа

• Frontend Weekend №107, в гостях снова Иван Ботанов из компании Tinkoff.ru: что изменилось за 3 года или о белом хакинге и youtube-канале «В офисе»
• Подкаст «Фронтенд Юность» #209: Программирование — всё равно не работа
• Подкаст «Сделайте мне красиво» №63 — Сел, порефлексировал и уволился
• «Новости 512» от CSSSR: Chrome 95, Node.js 17, память и GC в JS, архитектура, замыкания, изучение фреймворков, отчет W3C
• «Новости 512» от CSSSR: Дока, Parcel 2.0, Nuxt.js 3 beta, разбираемся в CORS, новый фреймворк Remix
• Подкаст «Веб-стандарты» #304. State of CSS, цветовые палитры, Яндекс.Браузер, ввод пароля, CSS будущего, зачем нужна Дока
• proConf #111: CSScamp 2021

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

• Фронтенд-разработчику: 7 основных принципов дизайна
• Запустилась Дока — опенсорсный справочник по веб-разработке
• Webpack Module Federation — микрофронтенд на современных технологиях (часть 2) – deep dive
• Новый рабочий процесс W3C из будущего
• Давайте поговорим о нативных HTML табах
• Обнаружение ввода определенного текста с помощью HTML и CSS
• Как создать многопользовательскую игру в реальном времени с нуля на JS
• Создание SSG, который я всегда хотел: сэндвич из 11ty, Vite и JAM
• Хаос микрофронтенда (и как его решить)

• Инструменты
  • Что нового в DevTools (Microsoft Edge 95)
  • Что, если… вы могли бы использовать Visual Studio Code в качестве редактора прямо из инструментов разработчика в браузере?
  • Can Include — проверка, можно ли вкладывать один тег в другой
  

• Производительность
  • Производительность JavaScript в 2021
  • Имеет ли смысл предварительная загрузка JS модулей?
  • Решение проблем с CLS на веб-сайте электронной коммерции на базе Next.js (пример из практики)
  • Оптимизация загрузки ресурсов с помощью Priority Hints
  

• Доступность
  • Систематически исправляйте веб-доступность
  • The Button Cheat Sheet — шпаргалка по кнопкам
  

• Эффекты
  • Анимация с повторяющейся типографикой
  • Воссоздание анимации частиц из DNA Capital с помощью Three.js
  

CSS

• Типы значений в CSS. Абсолютные, относительные и всякие другие
• CSS переходит на новый, шестой уровень каскадности
• Переписываем Tailwind компоненты на ванильном CSS
• Распространенные ошибки при написании CSS с помощью БЭМ
• Предотвращение влияния прокрутки на цепочку элементов с помощью Overscroll Behavior
• Интервью с Эладом Шехтером о «The New CSS Reset»
• Изучение CSS Paint API: cкругление фигур
• Уважение к предпочтениям пользователей касательно анимаций (prefers-reduced-motion)
• @supports selector()
• Прекратите бороться с причиной существования CSS с этими тупыми «фреймворками»
• Как я организую свой CSS для веб-сайтов без фреймворка

JavaScript

• Бинарный протокол для JavaScript
• Размышления об идеальной архитектуре для JavaScript
• Неправильный TypeScript
• Решение проблем JavaScript из Bigfrontend (BFE): Throttle и Debounce
• Как построить линейный график на JavaScript: визуализация данных о Covid-19 вакцинации

• Теория
  • Как заполнить массив начальными значениями в JavaScript
  • Pipe Operator (|>) for JavaScript: Предложение по добавлению полезного оператора в JS
  • JavaScript Const vs. Var vs. Let: полное руководство на все времена
  

• React
  • React: разрабатываем хук для загрузки дополнительных данных
  • Как на React две кнопки переводить полтора года
  • Error Boundaries в React: препарируем лягушку
  • Что нового в Gatsby 4
  • 6 конкретных советов, которые упростят ревью ваших пул-реквестов в React
  • Как заменить useState на useRef и стать победителем
  • Создайте собственный React Hook с автозапуском TikTok роликов с помощью Intersection Observer
  • React re-Reselect: лучшая мемоизация и управление кешем
  • Наглядное руководство по рендерингу в React — шпаргалка
  

• Vue
  • Введение в Quasar Framework: создание кроссплатформенных приложений на Vue
  

• Angular
  • Доступность в Angular c помощью CDK A11y на реальных кейсах с FocusTrap и FocusMonitor
  • Изучение разницы между отключением элемента управления формой с помощью reactive forms API и атрибутами HTML
  • Angular: обработка HTTP ошибок с помощью Interceptors
  

• Svelte
  • Svelte Material UI: компоненты Advanced Material Design
  • Лучшие библиотеки валидации форм в Svelte
  

• Libs & Plugins
  • maku.js — Мост между HTML и WebGL (three.js)
  • 5 лучших библиотек для работы с cookie в JavaScript
  

Браузеры

• В браузере Brave заменят поисковик по умолчанию с Google на собственный Brave Search
• Релиз Chrome 95
• Вы не можете доверять никакому веб-браузеру.

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