Фронтенд-новости 46. Дайджест новостей и полезных статей о фро | HTML Academy

Фронтенд-новости 46. Дайджест новостей и полезных статей о фронтенде с 27 февраля по 5 марта.

 Самое важное

W3C делают новый сайт и приглашают поучаствовать в его создании.

 Что нового

Safari Technology Preview 164 и Next.js 13.2

HTML и CSS

Руководство по проверке доступных форм — что нужно учитывать, чтобы никто не застрял на недоступном недействительном поле.

Руководство по CSS object-view-box.

Руководство по цветовым функциям CSS.

Узнайте от Рэйчел Эндрю, что было нового в феврале в веб-платформе:
- выражения от контейнера для размеров
- initial-letter — для работы с буквицей
- ReadableStream — в асинхронном формате
- AudioContext.setSinkId() — чтобы AudioContext мог направлять звук в нужное устройство
- IFrame без учетных данных
- и многое другое.

Теория. Теперь можно запрашивать у контейнера не только размеры, но и стили, и даже кастомные свойства.
Практика. Как сделать тёмную тему с помощью выражений от стилей контейнера.

О выражения от контейнера, адаптивных изображениях и JPEG-XL.

Изменение размера с помощью CSS-свойства resize, которое создает в документе область с изменяемым размером.

font-display: swap решает проблему с FOIT, но не решает всех проблем. Всё-таки если шрифт, даже с font-display: swap, загрузился не сразу, то сначала отображается дефолтный шрифт, а потом он меняется на указанный в font-family. В этот момент происходит микро, а иногда и макро, смещение макета, которое негативно влияет на метрику CLS. С помощью size-adjust, ascent-override, descent-override`и `line-gap-override можно нивелировать смещение и улучшить метрику.

Заголовки составных таблиц плохо поддерживаются средствами чтения с экрана — избегайте их (ну, в смысле, составных таблиц :)

Шесть распространенных ошибок SVG (и как их исправить)

Используйте позиционирование к якорю для расположения элементов рядом с другим

Проблема добавления пробела после псевдоэлемента ::marker.

JavaScript

Перезапуск процессов в Node.js / Новый параметр —watch. Разбираемся на практике с новым экспериментальным параметром для CLI ‘—watch’.

Как вызвать функцию в JavaScript / 5 способов. Разбираем вопрос с собеседований.

Миграция с Enzyme на React Testing Library.

«React держит меня в заложниках» — несколько преувеличенное название, но автор под псевдонимом считает, что пришло время: «Под защитой этого нового тренда в недовольстве React я хотел бы, наконец, высказать своё» и тратит много слов и примеров кода, выражая неудовольство, признавая, что React никуда не денется.

Создание анимации в React с помощью React Spring.

Sandworm Audit: новый инструмент аудита JS для сканирования проекта и зависимостей на наличие уязвимостей, проблем с лицензией и связанных с этим проблем.

Декомпозиция и интерфейс vue-компонентов.


 Общее

Chrome долгое время считался ресурсоемким на современных компьютерах Mac, но последняя версия Chrome значительно улучшила ситуацию, говорят разработчики Chrome.

WebPush в iOS изменил мир? Получается, что да.

Разрабатываем браузерное расширение легким движением руки


Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.