Дайджест свежих материалов из мира фронтенда за последнюю неделю №496 (29 ноября — 5 декабря 2021)

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

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

Медиа

• Подкаст «Веб-стандарты» #310. Полифил для Container Queries, Remix вместо Next.js, PWA в 2021, TypeScript в Etsy, CSS-ресеты
• «Новости 512» от CSSSR: Fleet и Compose Multiplatform, PHP 8.1, гайд по JWT, цепи Маркова, роадмапы по IT-профессиям
• Подкаст «Callback Hell»: В гостях Никита Михайлов. Bootstrap, Atomic CSS, физическое здоровье на удаленке
• MoscowJS Podcast #1 — Как найти работу, которой захочется гордиться
• Подкаст «Да как так-то?». Выпуск №13. Что фронтенд-разработчик должен знать про дизайн
• Подкаст «Фронтенд Юность» #215: Nestjs выходит за рамки разумного
• webDev #11: Front-end. Вопросы на собеседовании

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

• Убираем JavaScript. Как при помощи htmx красиво использовать HTML и уменьшить объем кода
• HTMHeaven — 19 советов и приёмов вёрстки
• Эволюция HTTP для современного веба
• Мощь Serverless для фронтенд разработчиков
• Web Almanac: Ежегодный отчет HTTP Archive состояние веба
• Руководство по созданию веб-компонента для формы кредитной карты

• Инструменты
  • JetBrains представила легковесную среду разработки Fleet
  • Станет ли JetBrains Fleet Be убийцей VSCode?
  • Что нужно знать о Parcel 2
  

• Производительность
  • Производительность вычислений WebGPU по сравнению с WebGL
  • От шрифтов к SVG: стратегия миграции иконок
  • Улучшение CLS и LCP Core Web Vitals
  

• Доступность
  • Мифы о доступности
  • Тесты доступности Google Lighthouse полезны, но не идеальны
  • Не забывайте об атрибуте lang
  

• Эффекты
  • Grid Zoom Layout — сетка изображений с зум-эффектом для отображения дополнительного контента
  • Анимация вытеснения диагональных полос
  • Анимированные 3D-ленты с помощью Three.js
  

CSS

• Как я в десять раз ускорил работу таблицы Google одной строкой CSS
• 10 вещей, которые можно делать в верстке с помощью псевдоэлементов before и after
• Как сделать удобное 3D-меню на CSS
• CSS и XPath для QA: чтобы разобраться с локаторами, нужно всего лишь…
• Open Props: Open Source CSS Variables
• CSS Custom Properties и !important
• Интернационализация в CSS
• 5 основных ошибок CSS, которых следует избегать
• Построение системы координат с помощью HTML и CSS
• Концепты CSS — единственное руководство, которое вам нужно
• Chrome DevTools: CSS Overview
• Глитч-эффект на чистом CSS

JavaScript

• Процедурная генерация бумажных снежинок
• Как ваш браузер обрабатывает прикосновения к экрану телефона (js touch events)
• Миграция 17 000 файлов JS на TypeScript. Как это было
• Генерация текста с помощью цепей Маркова на JavaScript
• Remix — Самый горячий новый JS-фреймворк (зима 2021 г.)

• React
  • Как использовать Redux для управления состоянием в масштабе всего приложения
  • Декларативная выборка данных с помощью React Async
  • React 18 — Что нового и чем это поможет разработчикам
  • Создавайте адаптивные веб-страницы с помощью React-Response и TypeScript
  • Варианты оптимизации кеширования в React
  • Устранение утечек памяти в вашем приложении
  • Создание клона Trello с помощью React DnD
  • Что нового в Next.js 12
  • Dependency injection в React
  

• Vue
  • Ноябрь был посвящен Vue и Vue.JS в 2021
  • 'defineComponent' в Vue 3 — это чистая магия! Вы знаете, как это работает?
  

• Angular
  • Телеграф на RxJS
  • Чего ожидать от Angular 14 в 2022 году: появится ли Micro Frontend?
  • Ленивая загрузка компонента в Angular без роутинга
  • Как делать параллельные API вызовы в приложениях на Angular
  

• Ember
  • The Ember Times — Issue No. 192
  • Введение в EmberJS: JavaScript, поисковая оптимизация и веб-приложения
  • Интервью с Balint Erdi
  

• Svelte
  • Создание веб-сайта с использованием Golang и Svelte.js вместе
  • Методы жизненного цикла Svelte можно использовать где угодно
  • Аутентификация в SvelteKit с использованием cookie
  • React.js переоценен, используйте вместо него Svelte
  

Браузеры

• Vivaldi-5.0 — Искусство, доступное всем
• «Было приятно, когда наш синтез речи приняли за диктора»: как работает автоперевод и озвучка видео в «Яндекс.Браузере»
• Microsoft начала отговаривать пользователей от установки браузера Chrome
• Что нового в WebKit в Safari 15
• Состояние принятия протокола P2P в современных браузерах

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