border-image

Одно из сложнейших, для понимания, CSS-свойств border-image. Очередная статья пытается нас рассказать как делать градиенты, и даже конические градиенты для border.

Статья: https://www.smashingmagazine.com/2024/01/css-border-image-property/

CSS Motion Path

Наткнулся на статью, объясняющую свойство CSS Motion Path. Это свойство позволяет анимировать элементы по заранее заданному пути непосредственно с помощью CSS, минуя необходимость в сложных вычислениях или использовании библиотек JavaScript. В статье приведено несколько примеров, таких как анимация квадрата по кривой "S", перемещение текста по кривой и значок автомобиля, который перемещается в зависимости от положения прокрутки.

Статья: https://www.letsbuildui.dev/articles/what-is-css-motion-path/

Палитра анимированных шрифтов

> С выпуском 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;
}

Использование элемента <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> с заголовком или без него. Показ информации в браузерах и вспомогательных технологиях оставляет желать лучшего. Некоторые пользователи всегда будут пропускать какую-то часть информации.

Объясняйте аббревиатуры, акронимы, инициализмы, нумеронимы и т. д. при первом использовании, а затем не стесняйтесь возвращаться к сокращенной форме.

Знакомство с веб-компонентами - введение

Статья для тех, кто хочет просто попробовать и немного прикоснуться к веб-компонентам. В статье автор пошагово раскрывает из чего состоят веб-компоненты. Дело в том, что веб-компоненты это не одна спецификация, а сразу четыре.

В итоге в статье автор показывает свой первый "глупый" веб-компонент, который он опубликовал в npm - https://utilitybend.com/blog/getting-into-web-components-an-intro/

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 часа =)

Как сделать анимированное меню вне вьюпорта

В статье рассматривается анимированная навигацию, которая плавно показывается из-за экрана. Также автор не забыл про доступность. Одно удовольствие взаимодействовать с помощью клавиатуры. жаль closeWatcher ещё не сильно распространён

Статья: https://blog.logrocket.com/build-off-canvas-menu-web-components/

Что использовать 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/

Большие, красивые, мощные состояния фокуса с :focus-visible

Или как сделать потрясающее состояние фокуса у любого элемента за несколько строк для всего проекта

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

В статье также рассматриваются варианты с карточками товара, ссылки с подчёркиваниями и без.

Узнать как делать крутое состояние фокуса: https://daverupert.com/2024/01/focus-visible-love/

Важность тестов

Произошло обновление 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 всё починил.

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

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

Сам частенько подсматриваю, что вышло, например, в 2022 году. Мало ли я что-то пропустил.

Проект лежит себе спокойненько в опенсорсе, а значит ему можно чем-то помочь. Если вам нечего делать по выходным, то можно изучить проект и улучшить его.

Олимпиада
Проводили недавно в Академии олимпиаду для студентов ВУЗов и не только. Олимпиада была разделена на две секции: построение интерфейсов (HTML + CSS) и оживление простых интерфейсов с помощью JavaScript, с алгоритмами и DOM. Все задачи были реальными из жизни, но не без упрощений для того, чтобы всё уместить в один день.

Мои выводы: в универах всё очень хорошо с программированием. Прям прекрасно. Но над созданием интерфейсов ещё работать и работать. Прям пахать надо.

Привет.

Я не пропал, а уходил в длительный отпуск. Решил в этом отпуске вообще ничего не делать. Удалил рабочие чаты и наслаждался бездельем. В этом безделье родилось пару идей, что можно поделать общественно полезного для фронтендеров. Скоро напишу об этом новости.

16 марта отметил день рождения. Мне 36 лет 🥳

Ну, а пока возвращаюсь в режим. Ждите, как минимум, фронтенд-новости =)

Мы тут в Академии опять немножко упоролись.

Запускаем проект, который ещё находится на ранней стадии разработки, но мы уже близки к запуску бета-версии, по глубокой проверке теоретических знаний во фронтенд-технологиях. Пока собрали только для CSS, так как самим интереснее.

Если захочется порешать сложную задачу по CSS на выходных, то заглядывайте в https://htmlacademy.ru/inspector/3. Присылайте мне личку решения =) Обсудим.
Если прям будете страдать, но всё-таки будет хотеться решить задачу, то приходите в личку за подсказкой =)
Можно поделиться и идеями, если захотите.

Для решения нужно написать CSS, который будет удовлетворять тестам.

https://htmlacademy.ru/inspector

Докинули ещё 4 задачки для джунов. Приходите с обратной связью.

Это не учебная тревога.

Gulp обновился до версии 5.0.0

Интересные изменения:
- Отказались от node.js < 10.13
- Теперь используется glob(работа с путями) одинаково для src и watch. Вообще было сделано много для работы с путями.
- Обновлены все зависимости
- Очень много изменений для создателей плагинов
- Добавлена поддержка gulpile.cjs и gulpfile.mjs

Предыдущая мажорная версия вышла в 2018 году

Все изменения: https://github.com/gulpjs/gulp/releases#individual-changelogs

Вот вам небольшой тренинг на вечер.

Нужно написать селектор, в этом вся сложность, который выберет карточку без изображения. У выбранной карточки без изображения должен появится зелёный фон.

Проверять себя тут: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-1.html

Подсказка: задача на применение селектора :has()

Вот и вторая задача на знание :has(). Нужно написать селектор таким образом, чтобы при выборе в <select> опции «Картошечка», <select> становился зелёного цвета. По умолчанию, или если выбрана любая другая опция, <select> должен быть белого цвета.

Проверить себя можно тут: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-2.html

Третья задача со сложной HTML-структурой.

Нужно написать селектор, который окрасит в зелёный цвет только первый блок, но есть ряд условий.

Проверить себя: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-3.html

Новая задачка от Ани Лисененковой 🥳

Нужно написать селектор, который изменит цвет заголовка в единственном блоке, в котором нет изображения.

Проверить себя можно здесь: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-4.html