Гонимся за Core Web Vitals

Сложное чтиво на вечер.

First Input Delay (FID) заменяется на новую метрику Interaction to Next Paint (INP), начиная с марта 2024 года. Это связано с тем, что отчёты о производительности часто не соответствуют реальному взаимодействию с интерфейсами. Лучше всегда перепроверять с помощью PageSpeed Insights или аналогичных инструментов, типа DebugBear.

В статье полностью раскрывается метрика INP и как она оценивает всё взаимодействие пользователя, а не конкретное место.

Статья: https://www.smashingmagazine.com/2023/12/preparing-interaction-next-paint-web-core-vital/

VS Code 1.85

Вышла новая версия. Давайте узнаем о новинках:
- Плавающие окна редакторов - перетаскивайте редакторы на рабочий стол.
- Рабочий процесс Accessible View - более плавные переходы в Accessible View и обратно.
- Более тонкий контроль обновления расширений - выбор расширений для автоматического обновления.
- Просмотр входящих и исходящих изменений в Source Control - Удобный просмотр ожидающих изменений в репозитории.
- Снимки кучи JavaScript - Визуализация снимков кучи, включая графики объектов памяти.
- Отображение иерархии типов Python - быстрый просмотр и навигация по сложным отношениям типов.
- Обновления GitHub Copilot - Улучшения встроенного чата, пояснение кода Rust.
- Предварительный просмотр: расширенная поддержка Sticky Scroll - Sticky Scroll в древовидных представлениях и терминале.

Более подробное описание: https://code.visualstudio.com/updates/v1_85

SVGO 3.1.0

Великий оптимизатор SVG-файлов обновился. Теперь в оптимизаторе появилась настройка по управлению удаления значений по умолчанию в атрибутах. А также пофиксили баги.

Подробнее: https://github.com/svg/svgo/releases

Baseline

Новая инициатива, которая поможет веб-разработчикам. Все мы с вами не успеваем за обновлением платформы. Baseline - решает эту проблему.
Мы не понимаем какие CSS-свойства уже можно использовать в продакшене. Некоторые разработчики живут в парадигме "Сверстаю для Хрома, а для остальных браузеров доделаю", что в корне не верно, так как приходится перевёрстывать на других технологиях. Baseline - решает эту проблему.

Собственно, Baseline, позволяет посмотреть на всю веб-платформу в целом и быстро принять решение с помощью каких технологий создавать интерфейс в проекте.

Вот что нам готовит Baseline в 2023 году: https://web.dev/explore/baseline/2023

Baseline caniuse

А тем временем Baseline появился в caniuse. Отличный пример разобраться с разными уровнями Baseline, на примере гридов и сабгридов. Если гриды уже прописались во всех браузерах, то сабгриды являются новичками в основных браузерах.

https://caniuse.com/?search=grid

Safari 17.2

HTML
- Теперь теги details/summary могут делать аккордеоны, с помощью атрибута name
- Можно делать поля ввода для одноразовых кодов

<label for="onetimecode">Enter code:</label>
<input name="onetimecode" id="onetimecode" type="text" autocomplete="one-time-code">

CSS
- CSS Nesting: вкладывать теперь можно без &

article {
  h1 { 
    font-size: 1.8rem;
  }
  p {
    font-size: 1.2rem;  
  }
}

- Новые юниты: lh, rlh, rcap, rex, ric,rch, cap, ex, ic, ch
- CSS Motion Path:
offset-position поддержка circle() и ellipse()
offset-position: normal
coord-boxПараметры и <position> внутри ray()
rect() и xywh() фигуры
- Анимации: linear(),
- Математические функции: rem(), mod(), round()
- Счётчики: counter-set, предоставляет возможность изменять число в счетчике без создания нового счетчика
- Границы маски:
mask-border-mode
mask-border-outset
mask-border-repeat
mask-border-slice
mask-border-source
mask-border-width
- API Custom Highlights: псевдоэлемент ::selection
- Адаптивные изображения:

<link rel="preload" 
  as="image" 
  imagesrcset="flowers-small.jpg 400w, 
               flowers-medium.jpg 800w, 
               flowers-large.jpg 1200w,
               flowers-extralarge.jpg 1500w" 
  imagesizes="50vw">

и многое-многое другое в https://webkit.org/blog/14787/webkit-features-in-safari-17-2/

Медиавыражения для <video>

Ну в целом-то всё понятно. Делай так

<video>
    <source media="(min-width: 2000px)" src="large.webm" type="video/webm">
    <source media="(min-width: 2000px)" src="large.mp4" type="video/mp4">
    <source media="(min-width: 1000px)" src="medium.webm" type="video/webm">
    <source media="(min-width: 1000px)" src="medium.mp4" type="video/mp4">
    <source src="small.webm" type="video/webm">
    <source src="small.mp4" type="video/mp4">
</video>

и будет хорошо всем пользователям. И даже так

<video>
    <source src="landscape.mp4" type="video/mp4" media="(orientation: landscape)">
    <source src="portrait.mp4" type="video/mp4">
</video>

заработает.

Но знайте, что работа <source> для <picture> и <video> отличается:
- При изменении размеров экрана <video> не подгрузит более подходящий видеофайл под разрешение. Например, если вы зашли с десктопа, загрузится самая лучшая версия, при сужении окна будет продолжать показывать изначальная версия видео.
- В <video> вы указывает источники с помощью src, а не srcset, но возможно скоро это изменится
- В <video> единственным источником ресурса может быть только <source>. В <picture> также используется <img>


Статья: https://scottjehl.com//posts/using-responsive-video/

Моя активность в гитхаб за 2023 год - https://githubunwrapped.com/nikolai-shabalin. За создание видео отвечают Remotion с помощью веб-технологий.

Можете проверить свою https://githubunwrapped.com/

Пока мы все вместе дружно любим ESLint, у него появляются конкуренты. Это Здорово.

Вышел Oxlint - линтер JavaScript, предназначенный для обнаружения ошибочного или бесполезного кода, не требующий каких-либо настроек по умолчанию. Сами о себе ребята завляют, что они в 50-100 раз быстрее ESLint.

Из интересного это то, что у линтера более привлекательная информация об ошибках.

Посмотрим. Последим за развитием.

Preconnect

<link rel="preconnect" href="https://fonts.googleapis.com">

сразу устанавливает соединение с google.fonts, чтобы скачивание шрифтовых файлов произошло раньше. precconect не ускоряет скорость скачивание, а лишь раньше производит соединение с сервисом.
Подобный трюк можно делать и для других внешних ресурсов, но только если вы убеждены, что это критически важные ресурсы.


Статья: https://csswizardry.com/2023/12/correctly-configure-preconnections/

В этот раз без статьи. Желаю просто хорошенько отдохнуть на выходных

Иногда решение приходит мгновенно по проблеме, которая возникла только что. Заметили на курсах, что студенты приходят с уже установленным VS Code, с настройками под свои хотелки, которые не всегда гладко работают при работе на курсе. Особенно мешает Prettier, который постоянно диктует свои правила.

Придумали решение это проблеме — профили! В VS Code профили устанавливаются рядом с вашим профилем. Можно переходить из одного профиля в другой, при этом все любимые изначальные настройки никуда не теряются.

Встречайте vscode-profile-htmlacademy, доступный для открытого обсуждения.

Как сделать кнопку "Вверх" на чистом CSS

Всё очень просто

margin-top: 110vh;
position: sticky;

Посмотреть: https://codepen.io/expa/pen/yLZmdpL?editors=0100

3D ёлки к вам на сайт

С помощью HTML, CSS, JS

https://designerfeed.org/christmas-tree-animations-made-with-css-and-js/

Facebook выпустил новую CSS-in-JS библиотеку StyleX

Работает со всеми фреймворками: React, Preact, Solid, Angular. Особенно полезен для крупных проектов и сложных систем проектирования, используемых несколькими командами.

Статья: https://habr.com/ru/articles/781166/

Firefox 121

HTML
- <iframe loading=lazy>

CSS
- :has()
- handing и each-line для `text-indent
- balance для text-wrap

JS
- Promise.withResolvers()
- Date.parse() теперь принимает несколько дополнительных форматов даты


и многое другое: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/121

Очередной роадмэп по фронтенду

Стоит пролистнуть. Может быть вас это вдохновит на новогодние каникулы =)

Статья: https://habr.com/ru/companies/kts/articles/775948/

Смена сетки от количества дочерних элементов

Иногда бывает полезно изменить сетку. Например, для <5 элементов - крупные ячейки, а для >10 мелкие ячейки. Раньше верстальщики это делали с помощью бэкендеров, которые генерили им модификаторы, ведь только бэкенд знал какое количество элементов будет отображено.

Сейчас это может сделать CSS с помощью :has().

.element {
  &:has(> :nth-child(10)) {
    /* если элементов больше 10 */
  }
}

Статья: https://frontendmasters.com/blog/quantity-queries-are-very-easy-with-css-has/

mask-composite

В Figma, да и в других графических редакторах, есть возможность накладывать маску на маску, но у наложения может быть несколько вариантов. Например, маска снизу удаляет пиксели маски сверху, или маска просто накладывается сверху без какого-либо просвечивания, или маска которая перекрывает забирает себе пиксели другой маски.

В общем, как вы поняли этим можно управлять в вебе: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite

31 декабря Vue 2 официально всё.

https://blog.vuejs.org/posts/vue-2-eol

Ещё не занимались производительностью своих проектов? Можно начать

Отличная статья https://www.htmhell.dev/adventcalendar/2023/14/ , чтобы познакомиться с метриками. Помните всякие LPC, INP, CLS? В статье эти метрики подробно рассматриваются.

Также статья прекрасна тем, что освещает сервисы помимо Lighthouse. Lighthouse хороший инструмент, но есть другие варианты: GTMetrix, WebPageTest.