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

Пятая: https://nikolai-shabalin.github.io/code-weave/css/has/training/test-5.html

Node.js 22

Выпущена версия Node.js 22 с несколькими улучшениями, включая возможность импортировать ES-модули с помощью require(), появление клиента WebSocket и обновления движка V8 JavaScript до v12.4. Эта версия скоро перейдет на долгосрочную поддержку (LTS), но в настоящее время она находится в стадии "Текущая" в течение шести месяцев. Среди заметных особенностей - компилятор Maglev, поддержка синхронных графов ESM и новые возможности выполнения сценариев из package.json. Кроме того, в этом выпуске улучшена производительность и добавлены новые функции, такие как glob и globSync. Скачать и прочитать подробнее об этих обновлениях можно здесь.

Лично жду glob, хотя наверняка возлагаю на него слишком большие надежды

Веб-спеки

Мало кто их читает, это и понятно. Слишком сложно. Слишком скучно. Но нужно ли их читать? Я бы сказал, что почитывать точно необходимо, иначе вся веб-разработка вам будет казаться магией.

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

Это также способ быть в курсе новинок и трендов. В гридах, например, до сих пор не доделана спецификация CSS Grid Layout Module Level 2, посвящённая сабгридам (подсеткам), а также есть Level 3, посвящённый кирпичной раскладке (Masonry 1, 2). Знали? =)

Спецификации часто включают рекомендации по лучшим практикам, которые помогают избежать распространённых ошибок и улучшить производительность сайта. Когда вышел will-change, это свойство сразу же выстрелило в миллионы колен. Разработчики стали более аккуратно относиться к CSS-свойствам и действительно разбираться в том, что они используют в коде.

Если хотите начать погружаться в спеки, то можете сделать свой первый шаг, начав с статьи Виталия Зюзина "Как ор­га­ни­зо­вана веб-плат­фор­ма"

Хочу нас всех поздравить, так как у нас с каждым днём появляется всё больше способов центрировать элемент.
Никогда бы не подумал, что это такая глобальная проблема, но как оказывается это всех заботит.

Благодаря флексам и гридам у нас появилась спецификация CSS Box Alignment Module Level 3, которая отвечает за выравнивание элементов внутри их контейнеров. Но знаете что? Спецификация никак не связана с гридами и флексами, то есть выравнивать мы должны уметь хоть в блочной, хоть в табличной вёрстке =)
Ну это в спеке, а что с браузерами?

align-content: center заработал во всех браузерах для блочной вёрстки(дивчиков)

Посмотрите пример как центрируется заголовок внутри дива, без флексового и гридового контекста: https://codepen.io/web-dot-dev/pen/abMxwzr. Красота же.

Начал исследовать visually-hidden.

Всегда было интересна история развития этого утилитарного класса. Какие свойства в нём появились по каким причинам, отчего отказались, а что вообще является антипаттерном.

Всё это опубликую в этом репозитории: https://github.com/nikolai-shabalin/visually-hidden

Уже много материала удалось насобирать

Кажется у меня произошло разочарование века: условный импорт для CSS-файла всё равно загружает CSS-файл, но браузер не обрабатывает файл.

Коротко. В браузеры постепенно имплементируется условный импорт файлов:

  <style>
    @import url('./anchor.css') supports(position-try: flip-block);
  </style>

Работает это так. Файл ('./anchor.css') начнёт работать только если supports подтвердит, что браузер поддерживает (position-try: flip-block). Я думал, что если браузер не поддерживает position-try: flip-block, то './anchor.css' даже не загрузится, но это не так.

Фронтендер

Поставьте любую эмодзи этому посту, если вы прямо сейчас ищите работу фронтенд-разработчиком