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

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

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

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

Медиа

• «Новости 512» от CSSSR: «История фронтенда» от CSSSR, Chrome 89, Flutter 2, import maps, free-for.dev, структуры данных Ivy
• «Новости 512» от CSSSR: Не бандлом единым, CSS-in-JS в DevTools, туториал по Rollup, тени, псевдоэлементы ::before и ::after
• Подкаст «Сделайте мне красиво» №56 — Не мучайся, переходи на Notepad
• Подкаст «Фронтенд Юность» #175: Открытые отношение рок-звёзд в Netflix
• Archakov Blog: Собеседование на позицию middle frontend-разработчика

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

• История фронтенда: Браузер, который умел всё
• Состояние мобильных устройств и почему мобильное веб-тестирование имеет значение
• Как разработать и протестировать Mobile-First дизайн в 2021 году
• Руководство для новичков по headless CMS и Jamstack
• 7 полезных атрибутов HTML, о которых вы, возможно, не знаете
• Динамические метатеги для ботов и сканеров с помощью Firebase и Cloudflare Workers

• Инструменты
  • Что нового в Snowpack v3
  • Unicode Range Interchange — инструмент от Зака Лезермана для манипуляций с unicode-символами в шрифтах
  • Google Fonts + Material Icons. Google Fonts теперь поддерживает иконки из набора Material Design
  

• Производительность
  • Шесть принципов создания производительных веб-приложений
  • Core Web Vitals: как Google решил оценивать сайты
  • Лучшие стратегии загрузки шрифтов и способы их реализации
  • Рецепты Cloudflare Worker для тестирования производительности фронтенда
  

• Доступность
  • Советы по созданию систем доступного дизайна
  • Доступность состояния навигации на текущей странице
  

• Эффекты
  • Как анимировать элемент Details 
  • Круговая анимация текста c SVG
  • Использование GSAP 3 для веб-анимации
  

CSS

• CSS COLORS
• Три способа создания клякс с помощью CSS и SVG
• «Серая мертвая зона» градиентов
• Сверхгибкая CSS-карусель, улучшенная с помощью JavaScript-навигации
• Новые возможности CSS в 2021 году
• Важность изучения CSS
• Будущее CSS: Scroll-Linked анимация и @scroll-timeline (часть 2)
• Прекратить использование шрифтов со значками
• Как определять позицию мыши в CSS
• Изучение @property и его анимационные возможности
• Анимированный семантичный аккордион на чистом CSS
• Адаптивные изображения: разные методы и тактики
• Илюстрированная шпаргалка по CSS Grid в 2021

JavaScript

• 5 распространенных ошибок, связанных с памятью в JavaScript
• Как анти-TypeScript «разработчик JavaScript» вроде меня стал поклонником TypeScript
• Темная сторона Javascript: три функции, которые вы никогда не захотите использовать
• Управляйте поведением импорта в JavaScript с помощью карт импорта
• Gyro-web: доступ к ориентации устройства в JavaScript

• Релизы
  • Google представил фреймворк Flutter 2 и язык Dart 2.12
  • Electron 12.0.0
  • Встречайте Gatsby 3.0
  • Релиз jQuery 3.6.0
  

• React
  • HowToCode — Адаптация системного подхода к разработке для React и TypeScript
  • Умные методы оптимизации: отложенная загрузка с помощью React
  • Первый взгляд на Aleph.js: новый фреймворк React в Deno
  • 7 черт звездного разработчика на React
  • Просто скажите нет чрезмерному ре-рендерингу в React
  • Низкоуровневые диаграммы в React
  

• Vue
  • Все о Vue CLI
  • Создание 8 Puzzle с аудио в Vue.js для Evanescence
  

• Angular
  • Как я правил баг в Angular
  • Angular: Показываем скелетон страницы за три шага
  • Понимание Angular View Encapsulation
  • Введение в лучшие практики Angular
  • Полное руководство по безопасности Angular
  • Angular Universal: реальные проблемы с приложениямиAngular Universal: проблемы реального приложения
  • View State Selector Angular design pattern
  • Внутренние структуры данных в Ivy
  

• Ember
  • The Ember Times — Issue No. 174
  • Опрос сообщества Ember.js в 2021
  

• Svelte
  • Запись вебинара: Начало работы со Svelte в WebStorm
  • Хранилище Svelte для prefers-reduced-motion
  

Браузеры

• Релиз Chrome 89
• Google упростила тестирование новых функций Chrome при помощи нового раздела Experiments
• Google сокращает цикл подготовки новых выпусков Chrome с шести до четырёх недель
• Microsoft выпустила Edge 89 — браузер запускается до 41% быстрее и теперь поддерживает вертикальные вкладки
• Разработчики браузера Brave скоро запустят свою поисковую систему с высоким уровнем конфиденциальности
• WordPress рассматривает отказ от поддержки IE 11
• Ядро Drupal прекращает поддержку Internet Explorer 11 в Drupal 10

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