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

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

Медиа

• Подкаст «Веб-стандарты» #282: Rome, CloudFront Functions, кроссбраузерность, has() и другой современный CSS, мониторинг, GDE
• Подкаст «Фронтенд Юность» #187: Bootstrap круче чем все сраные фреймворки
• Подкаст «Callback Hell»: Производительность CSS-in-JS, языки логического программирования, ООП в современном фронтенде
• «Новости 512» от CSSSR: Angular 12, Deno 1.10, мониторинг, тестирование UI, :has(), курс по git, Rome + $, TypeScript 4.3 RC
• Подкаст «Callback Hell» — Поддержка нескольких мажорных версий, венчурный капитал в Open Source и возвращение тонкого клиента
• Goose&Duck Podcast п(и)лотный – Babel, деньги, два гуся
• Подкаст «proConf» #96: DeveloperWeek 2020
• Подкаст «Цинковый Прод» #113: Сайт сына маминой подруги

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

• W3C представил черновой вариант стандарта WebGPU
• Google AMP мертв! AMP-страницы больше не пользуются приоритетом в поиске Google
• Incremental Static Regeneration: создавайте статические сайты понемногу
• Тестирование фронтенд-приложений — что, где, как?

• Инструменты
  • Harold — генератор статических сайтов и блогов, основанный на Handlebars и Markdown.
  • Релиз Sublime Text 4
  • 5 стратегий по сокращению времени сборки фронтенда с помощью CI/CD
  • svg-loader: другой способ работы с внешними SVG
  

• Производительность
  • Как мы улучшили наш Core Web Vitals (пример из практики)
  • 5 шагов к быстрым веб-шрифтам
  

• Доступность
  • «Наплевать на доступность». Откровенное и практичное руководство для дизайнеров.
  • Автоматическое тестирование доступности поможет вам в этом, но не обнаружит всех проблем
  

• Эффекты
  • Подборка креативных интерфейсов «UI Interactions & Animations Roundup #16»
  • Как легко добавлять CSS-анимацию в свои проекты
  

CSS

• Трюки CSS, которые сделают из вас ниндзя верстки
• Взгляд на Tailwind CSS
• Новая отзывчивость: веб-дизайн в мире компонентов
• Нет, утилитарные классы — это не то же самое, что инлайн стили
• Как создать неоновый текст с помощью CSS
• Как стилизовать любое поле ввода — советы и методы
• 82% разработчиков неправильно проходят этот трехстрочный тест по CSS
• Learn CSS — Постоянно обновляемый курс CSS и справочник для повышения вашего уровня знаний в области стилизации веба
• aspect-ratio

JavaScript

• Швейцарский нож отладки JavaScript
• Трасси… что? Доклад Яндекса
• DOM Events — изучение системы событий DOM с помощью визуального исследования
• ES12 сделает вашу жизнь проще
• Справочник по массивам JavaScript — методы работы с JS-массивами с примерами
• Понимание Async Resources с помощью асинхронных хуков
• Двухмерные оптические демки в Javascript
• JavaScript API для распознавания людей и ботов в Chrome

• React
  • Полное руководство по инкрементной регенерации статических сайтов с помощью Next.js
  • Немного о том, как работает виртуальный DOM в React
  • Как реализовать аутентификацию в Next.js с Auth0
  • Самая большая сила React может заключаться в его экосистеме с открытым исходным кодом.
  • Создание редактора форматированного текста (WYSIWYG) с нуля
  • 5 методов bundle splitting и отложенной загрузки в React
  • use-change — React-хук для состояния приложения, соблюдающий принцип «keep it stupid simple»
  

• Vue
  • Руководство по модульному тестированию компонентов Vue
  • Как создавать повторно используемые веб-компоненты с помощью Lit и Vue
  • Управление состоянием во Vue
  • Легко сохраняйте состояние с помощью composable в Vue 3
  • Полное руководство по Vue Router 4: основы, программная маршрутизация, Navigation Guards, эффекты перехода и Composition API
  

• Angular
  • Angular миграция с tslint на eslint. Перевод монорепозитория Nx на eslint.
  • Представляем Angular DevTools
  • У Angular наконец-то появилось собственное расширение devTools!
  • Основы Angular: 10 полезных нативных веб-API, которые должен знать каждый новый разработчик JavaScript
  • Добавление уровня более явной типизации поверх интерфейсов сторонних библиотек
  • Bindon: менее известные особенности шаблонов Angular
  • Хочешь, чтобы твое приложение на Angular грузилось быстрее? Испольуй Brotli
  

• Ember
  • The Ember Times — Issue No. 180
  • с нуля до route splitting за 3,5 недели
  • EmberJS: Использование встроенного помощника
  

• Svelte
  • Svelte для опытных разработчиков React
  • Data binding в Svelte
  

• Libs & Plugins
  • lightGallery — Легкий, модульный плагин для создания галереи изображений и видео на JavaScript. Доступно для React.js, Vue.js, Angular и TypeScript.
  

Браузеры

• Microsoft прекратит поддержку приложения Internet Explorer 11 в Windows 10 с июня 2022 года
• Кросс-браузерный трекинг на основе перебора обработчика внешних протоколов
• В Chrome экспериментируют с поддержкой RSS, чисткой User-Agent и автосменой паролей
• Компания Mozilla представила режим строгой изоляции сайтов для Firefox
• Выпуск перенастраиваемого web-браузера Nyxt 2.0.0

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