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

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

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

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

Медиа

• Подкаст «Веб-стандарты» №266: Chrome 88, флексы, JS-метод at, управление CSS-каскадом, разработка под Smart TV, видео в вебе
• «Новости 512» от CSSSR: Firefox 85, GitLab 13.8, Node.js 15.7.0, null и undefined, приватность GitHub Pages и Open Web Docs
• Подкаст «Фронтенд Юность» #171 Не лезь в курсы по Vue попивая смузи в своём опенспейсе
• Интервью с Никитой Дубко из Яндекса: актуальные навыки фронтенд-разработчика

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

• Что не так с WebAssembly?
• 8 практичных хитростей веб-разработчика — применить немедленно!
• Компоненты: Server-Side vs. Client-Side
• Лучшие практики для управления и хранения секретов при разработке фронтенда
• Почему вы должны использовать тег Picture вместо Img
• Скрытые жемчужины веб-платформы — Battery Status API
• Создание боковой панели
• Подборка креативных сайтов «Inspirational Websites Roundup #22»

• Инструменты
  • Строим систему для мониторинга качества frontend-проектов
  • Автогенерация тестов на Puppeteer встроена в Chrome DevTools
  • Использование Developer Tools Edge в VS Code для отладки веб-приложений — доклад на VS Code Day
  • Cypress vs Selenium vs Playwright vs Puppeteer: сравнение скорости
  • Введение в JS-сборщик Rollup.js
  

• Производительность
  • Вам показалось! Все о Perceived Performance
  • Как отслеживать производительность веб-приложения с JavaScript и Performance API
  • Yelp снизил значение First Contentful Paint на 45% и Yelp Page Complete на 25%, и их коэффициент конверсии увеличился на 15%.
  • Прогрессивный рендеринг для повышения производительности веб-приложений
  

• Доступность
  • Что нового в WCAG 3.0
  • Что означает президентство Байдена для доступности?
  • Как мы обеспечиваем доступность цветовой схемы в Amplitude
  • React и ему подобные НЕ «доступны»
  

CSS

• Что такое @font-face на самом деле
• Как понять свойство clip-path в CSS
• Новое CSS свойство aspect-ratio, поддерживаемое в Chromium, Safari Technology Preview и Firefox Nightly.
• Как выбрать элементы, которые не являются дочерними элементами других элементов в CSS
• 5 забавных игр для изучения концепций CSS
• Пора попрощаться с пиксельными единицами
• Минимальный размер содержимого в CSS Grid
• Анимация для CSS Gradient Border
• Валидация форм: вам нужен :not(:focus):invalid, а не :invalid
• Переключение темного/светлого режима с определением предпочтений в 15 строках CSS

JavaScript

• Создаём собственные правила для ESLint
• Собеседование на позицию Middle JavaScript разработчика: примеры задач и необходимые знания
• 10 плохих привычек TypeScript, от которых стоит отказаться в этом году
• Следует ли компилировать JavaScript код?
• Fetch vs Axios: какая библиотека лучше для выполнения HTTP-запросов?

• Теория
  • Углублённое руководство по JavaScript: генераторы. Часть 1, основы, Часть 2, простой пример использования
  • Какой тип цикла самый быстрый в JavaScript?
  • Что означает троеточие (…) в Javascript
  • Не используйте функции в качестве коллбеков, если они не предназначены для этого.
  • undefined vs. null, свежий взгляд
  

• React
  • Как меня чуть не уволили за выбор React для корпоративного приложения
  • Почему Context не является инструментом для «управления состоянием»
  • Введение в Aleph — React фреймворк в Deno
  • React Snapshot Testing с помощью Jest: введение с примерами
  • Счастливый путь styled-components. Персональная подборка лучших практик
  • Tao of React — Дизайн, архитектура и лучшие практики
  • Почему я никогда не использовал Redux. Глава 1: Причины
  

• Vue
  • Suspense — новая функция в Vue 3
  • Как можно использовать Vue JS с WordPress тремя уникальными способами
  • Понимание Renderless компонентов во Vue
  • Создайте свой собственный WYSIWYG markdown editor для Vue
  

• Angular
  • Что нового в Angular Language Service в 2021 году
  • Руководства по отладке в Angular
  • Лучшие практики RxJS
  • Тонкая разница между операторами map и pluck RxJS, которую вам следует знать
  • 45 самых популярных вопросов на собеседовании по AngularJS с ответами
  

• Ember
  • The Ember Times — Issue No. 172
  • А как насчет Ember?
  • Как создать компонент поиска с ember
  

• Svelte
  • Почему мне нравится Svelte
  

Браузеры

• Vivaldi 3.6 — Выходим на новый уровень
• Mozilla «убила» прогрессивные веб-приложения в Firefox 85
• Что на самом деле происходит, когда пользователь вбивает в браузер адрес google.com
• Mozilla прекращает разработку проектов Voice Fill и Firefox Voice

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