Дайджест свежих материалов из мира фронтенда за последнюю неделю №502 (10 — 16 января 2022)

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

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

Медиа

• Подкаст «Callback Hell» от CSSSR: Итоги года 2021
• Подкаст «Веб-стандарты» №316. Новинки Chrome 97 и DevTools, Faker.js и опенсорс, Crypto Mozilla, стандарт дизайн-токенов
• Подкаст «Сделайте мне красиво» №67 — 2к22 — это год Backbone.js
• Подкаст «Фронтенд Юность»: Новогодний стрим 2022
• HTML Academy: Тренды веб-разработки в 2022 году
• Вадим Макеев:? Попап вместо селекта: ✨новые HTML-элементы✨ наконец-то решат старую проблему

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

• HTML5 и алгоритм разметки документов
• Автор faker.js и colors.js намеренно сломал свои пакеты
• Борьба с капитализмом: почему создатель популярной JS-библиотеки удалил весь ее код и заменил описание словом Liberty. Кейс Faker.js
• Нарушение обратной совместимости в популярном NPM-пакете привело к сбоям в различных проектах
• Четыре самых перспективных технологии 2022 года в программировании
• Полезные свойства HTML5, о которых знают мало разработчиков
• Превращение GitHub страницы в PWA
• Как мы создали расширение VS Code с помощью Rust, WebAssembly и TypeScript

• web3
  • «Кто-нибудь видел Web3?» — дорожная карта и ресурсы, чтобы стать «Web3 разработчиком» в 2022 году
  • Что фронтенд-разработчику нужно знать о новой эре Интернета Web 3.0
  • У веба нет номера версий
  • Мои первые впечатления от web3
  • Что такое Web3? Новая децентрализованная сеть, или модное маркетинговое слово

• Инструменты
  • State of the Web: Deno
  • Добавление Vite в существующее веб-приложение
  • Vite лучше, чем Webpack?
  • Пришло время попрощаться с Webpack?
  • Что такое Vite: руководство по современному и сверхбыстрому инструменту
  • Parcel CSS: новый парсер, преобразователь и минимизатор CSS

• Доступность
  • Доступность как шаблон дизайна
  • Логические атрибуты в HTML и ARIA: в чем разница?

• Эффекты
  • Практический пример: портфолио Anatole Touvron
  • Эффект искажения пикселей с помощью Three.js

CSS

• Создание красивых градиентов на CSS
• Как свойство z-index работает под капотом
• Делайте красивые градиенты
• Не боритесь с каскадом, контролируйте его!
• Глубокое погружение CSS в радиальные и конические градиенты
• Как сделать 3D-коробку с анимацией чистом CSS
• Разработка современной UI темы с помощью Open Props
• 10 основных функций, представленных в Tailwind CSS v3.0

JavaScript

• Как победить scroll в javascript
• JavaScript: работа с датой и временем с помощью Temporal
• Пишем NFT модульный синтезатор на javascript ?
• Как напортачить начинающему JS разработчику: принципы DRY, KISS, YAGNI, SOLID
• Что особенного в JavaScript Fetch API?
• ООП в Javascript
• Как не нужно учить TypeScript

• React
  • React. Лёгкий способ бросить курить
  • Создание веб-редактора кода
  • Альтернатива Next.JS? — Все, что вам нужно знать о RemixJS
  • 3 шаблона проектирования React компонентов, о которых вы должны знать
  • 5 способов избежать повторного рендеринга компонентов React
  • Лучший способ решить prop drilling в React приложениях
  • Cypress превосходит React Testing Library — вот почему

• Vue
  • Создание PWA с помощью Vue.js
  • Как начать работу с vue (часть 1)

• Angular
  • Прекращение долгосрочной поддержки AngularJS
  • Создание микрофронтенд-сетапа с использованием Angular 12: часть 2 — собираем части вместе
  • Основы Angular: введение в Observables (RxJS) — часть 2

• Svelte
  • Sapper и Svelte: быстрое руководство
  • Ускорение разработки на Svelte
  • Как создать свой первый кастомный transition в Svelte
  • Svelte имеет ту же кривую усвоения, что и React
  • Svelte Carousel — Супер легкая и супер простая карусель для Svelte

• Libs & Plugins
  • instauto — библиотека для автоматизации/ботов Instagram, написанная на современном чистом javascript с использованием Puppeteer
  • TinyBase — крошечная реактивная JS-библиотека для структурированного состояния и табличных данных.
  • Валидация формы на стороне клиента с помощью JavaScript и octaValidate
  • deno_lint — быстрый линтер для JavaScript и TypeScript, написанный на Rust

Браузеры

• Обновление Firefox 96.0.1. В Firefox Focus включён режим изоляции Cookie
• Firefox 96 — технические подробности для разработчиков в блоге Марата Таналина
• В Chromium и браузерах на его основе ограничено удаление поисковых систем
• Что такое Chromium без Chrome сверху?

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