Дайджест новостей веб-разработки и полезных статей о фронтенде за неделю 24–30 октября.

🔥 Три главные статьи

Node.js 18 становится LTS, как все и ожидали. Будьте аккуратны — переход с 16 версии может пройти не гладко. Некоторые пакеты ещё не успели обновиться и рушатся при переходе на новую версию.

Не слишком ли много сейчас CSS? Сейчас нам доступны 559 CSS-свойств. Сколько из них изучить, чтобы сделать вообще все сайты?

CSS Color Module 4 и новый OKLCH. Как работает oklch() и почему его важно использовать вместо RGB и HSL. Сейчас поддержка ограничена — буквально всё работает только в Safari.

Can I use
https://caniuse.com/mdn-css_types_color_oklch

🖌 HTML и СSS

Как заполнять альты: часть «Твиттер». Твиттер делится информацией о том как пользователи заполняют альты для произведений искусства и мемов.

Зачем нам CSS Speech. Это набор CSS-свойств, чтобы позволить авторам создавать звуковое представление контента. Например, для изменения голоса, тональности, скорости речи, чтобы точнее передать эмоции, которые есть в тексте.

Вы действительно понимаете CSS radial-gradients? Очень подробное описание, как работают радиальные градиенты.

Поговорим о Sass. Хоть Sass и не самая крутая штука в современном вебе, но по-прежнему является бесценной частью веб-разработки.

Немного о веб-компонентах

Анимированные гриды

🏝 React

Вышел Next.js 13 с поддержкой новой архитектуры серверных компонентов.

Как сократить время загрузки React на 70% с помощью Next.js.

Создание приложения для чата с помощью Socket.io и React Native.

🛠 Инструменты

npm 9.0.0. Цель — стандартизировать значения по умолчанию и очистить устаревшие конфигурации.

Turbopack — преемник Webpack на основе Rust. Можно попробовать альфа-версию вместе с Next.js 13.

route-list — инструмент командной строки для отображения маршрутов Express/Koa/Hapi/Fastify. Если ваше веб-приложение на основе Node.js и вы хотите элегантно просмотреть все его конечные точки, то вот вариант.

🧂 Спецификации

CSS View Transitions Module Level 1 — набор API, который позволяет плавно анимировать изменения DOM между состояниями.

Scroll-linked Animations определяет API и разметку для создания анимаций, привязанных к смещению прокрутки.

🕸 Браузеры

Google прекращает поддержку обновлений Chrome для Windows 7/8.1 в начале 2023.

Возможности WebKit в Safari 16.1: WebPush, PassKeys, анимированный AVIF, прокрутка до текстового фрагмента и много другое.

Как использоватьstorage в расширениях для браузера.

⚡ Производительность

История в нескольких частях о том, как ускорялся Youtube. Первый шаг — улучшение основных веб-показателей (Core Web Vitals).

🎓 Общее

Что такое совместное использование ресурсов между источниками (CORS)?

Как читать статьи на английском языке

В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.

Прошлые выпуски