Дайджест свежих материалов из мира фронтенда за последнюю неделю №493 (8 — 14 ноября 2021)

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

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

Медиа

•  «Новости 512» от CSSSR: Angular 13, Firefox 94, реактивность, лекции ШРИ Яндекса 2021, ReactConf 2021, развитие Svelte
•  Подкаст «Веб-стандарты» №307. Firefox 94, Chrome Dev Summit, Web.Dev, Next.js, Yarn, TypeScript, вёрстка чата, взлом пакета
•  Подкаст «Фронтенд Юность» #212: Бобук в очередной раз передернул
•  Подкаст «ProConf» #112: SmashingConf — Виталий Фридман
•  Подкаст «Goose&Duck» #9 – Попался, воришка! с Андреем Ситником

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

•  Что нужно знать о вёрстке под ретину
•  ХPath: что нужно делать, а что нет
•  AMP безвозвратно подорвала доверие издателей к инициативам Google
•  Использование веб-воркеров для повышения производительности сторонних скриптов

• Инструменты
  •  Введение в отладку на примере Firefox DevTools, часть 3 из 4
  •  Новинки DevTools (Chrome 96)
  

• Доступность
  •  Assistiv Labs — новый онлайн-сервис для удаленного доступа к вспомогательными технологиями доступности, такими как NVDA, JAWS и Windows High Contrast Mode, с помощью любого современного веб-браузера.
  •  Избыточно избыточная доступность a11y
  

• Эффекты
  •  Анимация при прокрутке с помощью WAAPI и ScrollTimeline
  •  Подборка креативных сайтов «Inspirational Websites Roundup» #31
  

CSS

•  Звёздный рейтинг: решение с использованием SVG
•  Создание компонента Sidenav
•  Разработка настоящих компонентов: блок сообщения Facebook Messenger
•  Анимация height: auto
•  Функции сравнения в CSS: min(), max() и clamp()
•  CSS Loaders & Spinners
•  Быстрые и грязные переопределения в Bootstrap налету
•  Эффект матового стекла для иконок в CSS
•  Эффект матового стекла в CSS
•  Как исправить проблемы с фоновой прокруткой в CSS

JavaScript

•  Дженерики в TypeScript
•  Блокчейн на JavaScript
•  Web-фреймворк Pusa, переносящий логику JavaScript-фронтэнда на сторону сервера
•  Применение невидимых unicode-символов для скрытия действий в JavaScript-коде
•  Rust — будущее инфраструктуры JavaScript
•  Что такое Chrome Scripting API?
•  JavaScript Sanitizer API: современный способ безопасного манипулирования DOM
•  Создание легкой и производительной карусели с использованием ванильного JavaScript
•  Делает ли ES6 устаревшими JavaScript фреймворки ?

• Теория
  •  JavaScript: заметка о requestAnimationFrame и requestIdleCallback
  •  Деструктуризация массивов и объектов в JavaScript — в чем разница?
  •  Написание чистого кода на JavaScript
  •  5 топ функций JavaScript ES12, которые вы должны использовать сейчас
  

• React
  •  Как сделать игру 2048 на React
  •  Next.js: подробное руководство. Итерация первая
  •  Простая реализация темного режима (и многоцветных тем) В React
  •  React Suspense: уроки, извлеченные при загрузке данных
  •  Создание энциклопедии с помощью React и Wikipedia Search API
  •  Обзор решений для управления состоянием в React и NextJS
  •  Учебное пособие по React Router 6
  •  Лучшие практики для ифреймов в React
  

• Vue
  •  Атомарный дизайн с Vue
  •  Как делать Debounce и Throttle колбеки во Vue
  •  Создайте приложение для поиска фильмов с помощью Petite-Vue, легкой альтернативой VueJS
  

• Angular
  •  Angular, инкапсулируй это
  •  Как я оптимизировал плохую кодовую базу angular и сократил время загрузки страницы в 10 раз
  •  Как поддерживать пользователей IE11 при переходе на Angular 13
  •  Настройте модули отложенной загрузки в Angular для нескольких фронтендов
  

• Ember
  •  Перенос аддона Ember в новый v2 формат
  •  Автоматизация релизов Ember с помощью Rust
  •  Ember.js Template Imports: часть 3
  •  Ember.js Template Imports: часть 4
  

• Svelte
  •  Создатель Svelte: веб-разработка должна приносить больше удовольствия
  •  Рич Харрис, создатель Svelte, присоединяется к Vercel
  •  Реализация локализации в Svelte
  •  Введение в тестирование приложений со SvelteKit
  

• Libs & Plugins
  •  Splide — легкий, гибкий и доступный слайдер/карусель, написанный на TypeScript. Никаких зависимостей, никаких проблем с Lighthouse.
  •  hashids.js — Небольшая библиотека JavaScript для генерации числовых id в стиле YouTube
  •  MiniMasonry.js — Минималистичная библиотека без зависимостей для создания masonry-структуры
  

Браузеры

•  В Chromium добавлена возможность локального запрета просмотра кода web-страниц
•  Google прекратит поддержку старых версий Chrome в этом месяце

Дайджест за прошлую неделю.

Материал подготовили dersmoll и alekskorovin.