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

Дошли руки восстановить мой давний проект: Список всех CSS-свойств. Проект показывает все CSS-свойства, и не только, добавленные хотя бы в один из трёх браузеров: Chrome, Firefox, Safari. Все свойства отсортированы по дате внедрения. Сам частенько подсматриваю, что вышло, например, в 2022 году. Мало ли я что-то пропустил. Проект лежит себе спокойненько в опенсорсе, а значит ему можно чем-то помочь. Если вам нечего делать по выходным, то можно изучить проект и улучшить его.

INP (Interaction to Next Paint) Метрика Core Web Vitals INP с 12 марта заменит FID (First Input Delay, Задержка первого входа) и встанет в основе других метрик. INP — это метрика, которая оценивает общую отзывчивость страницы на взаимодействия с пользователем путем наблюдения за задержкой всех взаимодействий с щелчками, касаниями и клавиатурой, которые происходят на протяжении всего периода посещения пользователем страницы. Какой показатель является хорошим для INP - INP ниже или на уровне 200 миллисекунд означает, что ваша страница имеет хорошую скорость отклика. - INP выше 200 миллисекунд и ниже или на уровне 500 миллисекунд означает, что скорость отклика вашей страницы нуждается в улучшении. - INP выше 500 миллисекунд означает, что ваша страница плохо реагирует. Готовиться к переходу уже можно сейчас. Проверьте ваши проекты на https://page-speed.dev/ О релизе INP: https://web.dev/blog/inp-cwv-march-12 Подробнее о INP: https://web.dev/articles/inp#what_is_a_good_inp_score

Важность тестов Произошло обновление editorconfig-cli до версии 2.0.9. Наверное самое глупое за всю мою профессиональную деятельность. Дело в том, что когда editorconfig-cli находит ошибку, то он писал в терминал warning и подсвечивал сообщения желтым цветом. Всю вторую, мажорную, версию я считал, что это правильное поведение и жёлтый цвет это какое-то наследие, которое я не понимаю. Даже думал, что надо в третьей версии уже наконец поменять цвет на красный. Оказалось, что в коде был сломан импорт types. Свойство types.WARNING всегда возвращало undefined. А следующая проверка const typeColor = isWarning ? picocolors.red(type) : picocolors.yellow(type), в которой isWarning всегда был false из-за сравнения с undefined, возвращала желтый цвет. Если были бы тесты, то конечно таких глупых ошибок никогда не происходило и человеческий фактор, моя глупость, ушёл бы. Но тестов не было, но зато 2.0.9 всё починил.

Большие, красивые, мощные состояния фокуса с :focus-visible Или как сделать потрясающее состояние фокуса у любого элемента за несколько строк для всего проекта

*:focus-visible { 
  outline: 3px solid black;
  outline-offset: 0.25rem;
  border-radius: 0.125rem;
}

В статье также рассматриваются варианты с карточками товара, ссылки с подчёркиваниями и без. Узнать как делать крутое состояние фокуса: https://daverupert.com/2024/01/focus-visible-love/

Что использовать min() или max()? Интригующее начало статьи: Вы всегда пытаетесь понять, какой из них использовать, и в итоге пробуете оба, пока один из них не сработает. Если вы хотите указать максимальную ширину для элемента, то указывайте min():

.element {
  max-width: 600px;
  width: min(100%, 600px); /* аналогичное значение для max-width */
}

Если хотите указать минимальную ширину для элемента, то указывайте max():

.element {
  min-width: 600px;
  width: max(100%, 600px); /* аналогичное значение для min-width */
}

Такой подход работает не только для размеров блока, но и для размеров текста font-size: max(5vw, 30px), минимально 30px. Обязательно прочтите: https://css-tip.com/min-max/

Как сделать анимированное меню вне вьюпорта В статье рассматривается анимированная навигацию, которая плавно показывается из-за экрана. Также автор не забыл про доступность. Одно удовольствие взаимодействовать с помощью клавиатуры. жаль closeWatcher ещё не сильно распространён Статья: https://blog.logrocket.com/build-off-canvas-menu-web-components/

Sass 1.71.0 Сегодня обновился Sass, в котором появилась одна замечательная функциональность: импортеры. Такая возможность была и раньше, но теперь она работает "из коробки".

@use "pkg:bootstrap";

такой импорт самостоятельно пойдёт в менеджер пакетов, в node.js пойдёт в node_modules, и найдёт там bootstrap, импортируется и окажется у вас в styles.css. Круто? Круто. Можно также указать точное местоположение нужного препроцессорного файла @use "pkg:bootstrap/scss/botstrap.scss". Звучит волшебно, но сторонние пакеты должны быть готовы к такому импорту. Сторонний пакет должен явно указать, что он экспортирует.

{
  "exports": {
    "sass": "scss/botstrap.scss"
  }
}

Как минимум ждём распространения. Обновлению всего 3 часа =)

Знакомство с веб-компонентами - введение Статья для тех, кто хочет просто попробовать и немного прикоснуться к веб-компонентам. В статье автор пошагово раскрывает из чего состоят веб-компоненты. Дело в том, что веб-компоненты это не одна спецификация, а сразу четыре. В итоге в статье автор показывает свой первый "глупый" веб-компонент, который он опубликовал в npm - https://utilitybend.com/blog/getting-into-web-components-an-intro/

Использование элемента <abbr> с атрибутом `title` Использование тега <abbr> с атрибутом title представляет собой эффективный способ добавления аббревиатур или сокращений, обеспечивая при этом их расшифровку для пользователя. Вот пример кода, иллюстрирующий это:

<p>
Join <abbr title="National Aeronautics and Space Administration">NASA</abbr> for a briefing on its zero-G espresso cup, powered by capillary action!
</p>

Реализация и отображение тега <abbr> значительно различается в зависимости от браузера и даже операционной системы. Посмотрите на результаты тестирования в различных средах: https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html Вывод: Не используйте <abbr> с заголовком или без него. Показ информации в браузерах и вспомогательных технологиях оставляет желать лучшего. Некоторые пользователи всегда будут пропускать какую-то часть информации. Объясняйте аббревиатуры, акронимы, инициализмы, нумеронимы и т. д. при первом использовании, а затем не стесняйтесь возвращаться к сокращенной форме.

Палитра анимированных шрифтов > С выпуском Chrome 121 мы теперь можем анимировать плавный переход между палитрами шрифтов в Color Fonts, используя только CSS.

<h1>Jello</h1>

@font-palette-values --base {
  font-family: "Bungee Spice";
  override-colors: 0 #1894b0, 1 #fc00fc;
}

@font-palette-values --transition {
  font-family: "Bungee Spice";
  override-colors: 0 #fc00fc, 1 #4200d9;
}

h1 {
  font-family: "Bungee Spice", sans-serif;
  font-palette: --base;
  transition: ease 250ms font-palette;
}

h1:hover {
  font-palette: --transition;
}

CSS Motion Path Наткнулся на статью, объясняющую свойство CSS Motion Path. Это свойство позволяет анимировать элементы по заранее заданному пути непосредственно с помощью CSS, минуя необходимость в сложных вычислениях или использовании библиотек JavaScript. В статье приведено несколько примеров, таких как анимация квадрата по кривой "S", перемещение текста по кривой и значок автомобиля, который перемещается в зависимости от положения прокрутки. Статья: https://www.letsbuildui.dev/articles/what-is-css-motion-path/

border-image Одно из сложнейших, для понимания, CSS-свойств border-image. Очередная статья пытается нас рассказать как делать градиенты, и даже конические градиенты для border. Статья: https://www.smashingmagazine.com/2024/01/css-border-image-property/

Как сделать внешние ссылки доступными Внешняя ссылка может открываться в той же вкладке или в новой вкладке. В статье рассматривается почему большинство внешних ссылок должны открываться но одной вкладке: https://blog.pope.tech/2024/01/02/how-to-make-external-links-accessible/

@property в CSS Полная поддержка @property в браузерах близится к завершению. @property позволяет проверить тип кастомного свойства, а также определить поведение наследования

@property --primary-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #ea1ca5;
}

body {
  background-color: var(--primary-color);
}

Больше в статье: https://utilitybend.com/blog/taking-a-closer-look-at-property-in-css/

Блокировка прокрутки с помощью :has() Интересный приём по скрытию скрола и отслеживания этого на элементах

body:has(.lock-scroll) {
  overflow: hidden;
}

<dialog class="lock-scroll">
  <!-- some wonderful modal content -->
</dialog>

Если у элемента появляется класс lock-scroll, то у body убирается скрол. Подробнее: https://robbowen.digital/wrote-about/locking-scroll-with-has/

Switch на современных CSS техниках :has(), кастомные свойства, выражения от контейнера, логические свойства, inset - всё это и многое другое. https://piccalil.li/blog/a-highly-configurable-switch-component-using-modern-css/

В каком мире мы вообще живём? Знали ли вы, что PNG произносится как «пинг»? И это написано в спецификации > Portable Network Graphics (PNG, pronounced "ping") 😱😱😱 https://www.w3.org/TR/2003/REC-PNG-20031110/#1Scope

Что было в январе. Вспоминает Рейчел Эндрю - <hr> в <select> - HTMLSelectElement.showPicker - Largest Contentful Paint (LCP) API - Свойства полосы прокрутки CSS - CSS font-palette animation - Методы transfer() и transferToFixedLength() буфера ArrayBuffer В блоге: https://web.dev/blog/web-platform-01-2024

понеслась Mozilla заявляет, что новые правила браузера Apple «настолько болезненны, насколько это возможно» для Firefox https://www.theverge.com/2024/1/26/24052067/mozilla-apple-ios-browser-rules-firefox

Выделение текста, когда пользователь прокручивает вниз до этого фрагмента текста Классный эффект, когда вы докручиваете до выделенного текста с помощью CSS Изучить: https://frontendmasters.com/blog/highlight-text-when-a-user-scrolls-down-to-that-piece-of-text/