Фронтенд дайджест #201 Лучшее за неделю Подкаст Важный апдей | FrontoWeek: Недельный дайджест [Фронтовик]

Фронтенд дайджест #201
Лучшее за неделю
Подкаст

Важный апдейт: теперь ссылки на оригинальные посты прячутся в эмоджи с номерами.

[EN] Для добавления картинки на страницу уже недостаточно просто вставить тег img в HTML. Необходимо подумать и о метриках Web Vitals.
В статье перечислены 8 шагов для максимально оптимизированной вставки изображений.
Вот некоторые из них:
- Добавляйте атрибуты height и width — это уменьшит CLS;
- Используйте хэш от содержимого в имени файла и возвращайте заголовок Cache-control с неограниченным сроком хранения — это ускорит повторное отображение;
- К тегу img добавьте атрибуты loading="lazy" , чтобы активировать lazy loading и decoding="async", чтобы по-максимуму отложить рендеринг изображения;

[EN] Загрузка внешних шрифтов блокирует Critical Rendering Path браузера, негативно сказывается на UX и метриках Lighthouse.
Несколько лет назад, стандартной рекомендацией было использование CDN для загрузки популярных шрифтов: если пользователь уже загружал Roboto на другом сайте, то шрифт просто подтянется из кэша.
Но недавно в современные браузеры начали завозить ограничение на кэширование в рамках одного домена.
Теперь лучше не использовать CDN, а загружать шрифты с того же домена, что и сайт.

Но это не всё. Ещё остается проблема с FOUT (Flash Of Unstyled Text), когда контент страницы может сдвинуться после загрузки шрифта, а вместе с ним поедет метрика CLS и пользовательский опыт.
Чтобы это исправить, можно попробовать подобрать фолбэк-шрифт и его стили так, чтобы он визуально был близок к конечному.
Для этого даже есть специальный сервис Font style matcher.

[EN] Что делать, если Lighthouse снижает оценку из-за используемых на сайте виджетов сторонних сервисов, типа видео-плееров, лайв-чатов и рекламных блоков?

Как правило, такие виджеты начинают грузиться по DOMReady, что может замедлить загрузку других ресурсов на странице.
Если контент таких виджетов не критичен, лучше заменять их на статические «фасады», которые внешне выглядят, как виджет, но не содержат его функциональности.

При наведении курсора на фасад необходимо подготовить соединение с ресурсами виджета через
На Гитхабе уже есть несколько готовых решений для YouTube и Vimeo плееров, некоторых лайв-чатов и iframe'ов. Если готового решения не нашлось, придется подумать над своим — в статье есть ссылка на подробную инструкцию.

[EN] При разработке публичной библиотеки, вам никак не обойтись без документации.
Если проект написан на TypeScript — значит у вас уже есть описания всех полей и методов. Получается, вам придётся дублировать в документации то, что уже описано в коде. Рано или поздно критические изменения в API не попадут в документацию и кому-то будет больно.

Утилита api-extractor умеет искать типовые проблемы в API библиотек, вроде забытых экспортов и выгружать в JSON документацию, на основе типов и TSDoc-комментариев.
Если этот JSON пропустить через api-documenter — получатся Markdown-файлы, которые уже можно положить в репозиторий с библиотекой.

[EN] Команда разработки десктопного приложения Discord добавила полную поддержку навигации с помощью клавиатуры. Но когда дело дошло до отображения фокуса выбранного элемента, команда столкнулась с интересной проблемой: если использовать свойство outline — границы фокуса не скругляются, но даже если использовать box-shadow — граница может быть обрезана родительским элементом с overlow:hidden.

Чтобы фокус нигде не обрезался и всегда отображался, как нужно, команда разработала и выложила в публичный доступ 2 компонента-враппера (HOC'а): стилизуемый FocusRing для самого элемента фокуса и FocusRingScope, который абсолютно позиционирует тот самый элемент фокуса над кнопкой или инпутом.

The New York Times обвинили JetBrains в возможном преднамеренном создании бэкдора в продукте TeamCity для «русских хакеров».
JetBrains выпустили официальный ответ, где прояснили, что никакие компании или спецслужбы к ним не обращались, но сами JB готовы к любому сотрудничеству.