Коля Шабалин и великий аттрактор кода

31 декабря Vue 2 официально всё. https://blog.vuejs.org/posts/vue-2-eol

mask-composite В Figma, да и в других графических редакторах, есть возможность накладывать маску на маску, но у наложения может быть несколько вариантов. Например, маска снизу удаляет пиксели маски сверху, или маска просто накладывается сверху без какого-либо просвечивания, или маска которая перекрывает забирает себе пиксели другой маски. В общем, как вы поняли этим можно управлять в вебе: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite

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

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

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

Очередной роадмэп по фронтенду Стоит пролистнуть. Может быть вас это вдохновит на новогодние каникулы =) Статья: https://habr.com/ru/companies/kts/articles/775948/

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

Facebook выпустил новую CSS-in-JS библиотеку StyleX Работает со всеми фреймворками: React, Preact, Solid, Angular. Особенно полезен для крупных проектов и сложных систем проектирования, используемых несколькими командами. Статья: https://habr.com/ru/articles/781166/

3D ёлки к вам на сайт С помощью HTML, CSS, JS https://designerfeed.org/christmas-tree-animations-made-with-css-and-js/

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

margin-top: 110vh;
position: sticky;

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

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

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

Preconnect

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

сразу устанавливает соединение с google.fonts, чтобы скачивание шрифтовых файлов произошло раньше. precconect не ускоряет скорость скачивание, а лишь раньше производит соединение с сервисом. Подобный трюк можно делать и для других внешних ресурсов, но только если вы убеждены, что это критически важные ресурсы. Статья: https://csswizardry.com/2023/12/correctly-configure-preconnections/

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

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

Медиавыражения для <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/

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/

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

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

SVGO 3.1.0 Великий оптимизатор SVG-файлов обновился. Теперь в оптимизаторе появилась настройка по управлению удаления значений по умолчанию в атрибутах. А также пофиксили баги. Подробнее: https://github.com/svg/svgo/releases

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

Гонимся за 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/