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

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

Медиа

• Подкаст «Веб-стандарты» №246. Chrome 86, фокус, ::marker, отладка шрифтов, скринридеры, модалки, флексы и селект
• Подкаст «Фронтенд Юность (18+)» #154 Храни процедуры с молоду
• Подкаст CSSSR — Оптимизация фронтенда, адаптивность в 2020, scaling NodeJS, SSH-приманки и Figma для разработчиков

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

• Исправление странной ошибки и стратегии отладки, проверенные временем
• TeX в SVG: опенсорс-решение в помощь веб-разработчикам образовательных проектов
• Путь к Федеративному GraphQL
• Безопасность npm-проектов, часть 2
• Вы знаете что такое GeoJSON?
• Cross-site Scripting (XSS): определение и предотвращение
• 5 малоизвестных функций Chrome DevTools
• Google развеял популярные мифы о контенте
• Изменение определенных букв с помощью CSS и JavaScript
• Практическое руководство по Web Cryptography API

• Производительность
  • Как сделать предзагрузку адаптивных изображений с помощью imagesize и imagesrcset
  • PRPL паттерн: Решения для оптимизации современных веб-приложений
  • AVIF готов к использованию
  • Метрики производительности для фронтенд приложений
  • Введение в программный запуск Lighthouse
  

• Доступность
  • Разработка в учетом Reduced Motion для людей, чувствительных к движущимся объектам
  • Как и почему доступность важна для SEO
  • На что обращать внимание при аудите доступности
  

• Эффекты
  • Как получить рукописную анимацию с неровными штрихами с помощью SVG Stroke
  • Кнопки с эффектом конфетти
  

CSS

• Проектирование заголовочных частей сайтов с использованием CSS Flexbox
• Кастомные, доступные radio/checkbox кнопки с идеальным выравниванием
• Parsel: небольшой парсер CSS-селекторов
• Как работает перспектива в CSS
• Как легко создавать текстовые градиенты с помощью CSS.

JavaScript

• TypeScript. Продвинутые типы
• Работа с непредвиденными данными в JavaScript
• Работа с медиа-запросами в JavaScript
• Обновление архитектуры DevTools: переход на модули JavaScript
• Настоящий компас в мобильных браузерах с помощью Javascript

• Теория
  • Метод функций bind своими руками
  • Начало работы с современным JavaScript — Proxy
  • Понимание Event Loop, Callbacks, Promise и Async/Await в JavaScript
  • 5 лучших практик clean coding в JavaScript
  

• React
  • React: слоты как у сына маминой подруги
  • Почему я разочаровался в хуках
  • Jotai, новая библиотека управления состоянием для React
  • React Chrono — Компонент временной шкалы для React
  • Функциональные компоненты React с хуками: все, что вам нужно знать
  • Более простая альтернатива Redux
  • История хуков в React
  

• Vue
  • Введение в Vue Teleport — новую функциональность в Vue3
  • Анонс (новой) Ionic Vue Beta
  • Советы для новичков в VueJs
  

• Angular
  • 3 совета по управлению стилями, которые избавят вас от головной боли с CSS в вашем приложении на Angular
  • ControlValueAccessor и contenteditable в Angular
  • Локализация Angular с Ivy
  • Преимущества добавления rx-query в ваш проект на Angular
  • Как я избавился от State Observables в Angular
  • Оптимизируйте размер пакета Angular в 4 шага
  

• Ember
  • The Ember Times — Issue No. 163
  • Подготовка Embroider
  • Совместное использование Parent Model в Route Boundaries
  

• Svelte
  • Начало работы со Svelte JS: создание корзины для покупок
  

• Libs & Plugins
  • Символьные вычисления в JavaScript с помощью Math.js
  • vanilla-colorful — порт react-colourful на ванильные Custom Elements.
  

Браузеры

• Mozilla представила новые возможности по продвижению дополнений к Firefox
• В Chrome началось включение блокировщика ресурсоёмкой рекламы
• Вредоносный пакет npm воровал файлы Discord и браузеров

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

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