В HTML5 теперь можно добавлять элемент <hr> в <select> для визуального разбиения информации.

Content model:
  Zero or more option, optgroup, hr, and script-supporting elements.

Работает в Chrome 119, Safari 17

Не отключайте кнопки
Ну либо делайте это крайне осторожно.

Иногда делают так, что добавляют атрибут disabled для <button>, когда пытаются отключить возможность повторной отправки формы.
Как это работает для пользователя, который "табается" по форме: пользователь заполняет первое поле формы, затем второе, переходит к кнопке "Отправить", нажимает "Enter", и его фокус с кнопки улетает прямо в ад. Не надо так!

Современный CSS

Что такое "современный" CSS? Какие спеки, или какие CSS-свойства должен знать современный верстальщик, чтобы считаться современным?
Читая в резюме требование "Знание CSS3" - это что конкретно значит? Если раньше нам всем было хиханьки да хаханьки над таким требованием, то теперь это действительно определённый список.

И так к сути: W3C решил ввести эпохи в виде списка спецификаций. Каждая такая эпоха, или же конкретный список спецификаций теперь будет группироваться под именами "CSS3", "CSS4", "CSS5", "CSSnext".
С одной стороны это замечатально - теперь у нас есть конкретный список, который должен знать любой уважающий себя специалист именующий себя "современный верстальщик".

С другой стороны, не применяя ric, rex, rlh из CSS4 в своих проектах не делает из меня несовременного верстальщика или же эту спеку можно игнорировать? Я бы игнорировал как необязательную.

Ну а вы пока посмотрите эту замечательную доску - https://github.com/orgs/CSS-Next/projects/1/views/2, которая ведёт нас к определению современного CSS.

О чём-то таком я мечтал для HTML3 в HTML Academy.

Я ничего не успеваю

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

Мы все знакомы с бесконечным списком задач и с постоянным ощущением, что мы ничего не успеваем. Но давайте зададим себе вопрос: а правда ли мы не успеваем, или это всего лишь иллюзия?

Часто, пытаясь сделать всё сразу, мы попадаем в ловушку постоянной занятости. Представьте, что если взять на вооружение принцип "1-2 крупные задачи, остальное - по остаточному принципу".

Выберите 1-2 ключевые задачи, которые действительно имеют значение для вас. Посвятите им основное внимание и ресурсы. Когда они будут выполнены, вы можете себя с уверенностью называть успешным человеком!

Остальные дела? Делайте их по остаточному принципу. Если у вас осталось свободное время после основных задач, уделите его второстепенным, но не менее важным вопросам. Это позволит вам избежать ощущения, что ничего не успеваете.

Мелкие задачи имеет свойство отвлекать и часто являются абсолютно не важными. Не позволяйте им отвлекать вас от главного.

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

Сборка наших курсов

Однажды я решил, что сборщик для проектов в курсе HTML2 сделать публичным, чтобы у всех была возможность поучаствовать в развитии проекта. С тех пор сборка получила 127 коммитов и это были прекрасные коммиты. Мне нравится то, что получилось сейчас.

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

Посмотрите на полный список последних изменений - https://github.com/htmlacademy/html2-basic-template/releases/tag/v2.0.2, он просто огромный, хотя сборке проекта не первый год.. Есть куда расти.

Приглашаю всех поучаствовать в жизни сборки. Необязательно знать JS и писать крутой код. Можно исправить опечатку, доуточнить фразу или просто поделиться своей идеей в issue. Предложение по улучшению можно сделать как обычно с помощью форка и создания пулреквеста.

Сон

Сон является ключевой частью нашей жизни!

Сон – это не просто перерыв между будильниками. Это время восстановления и обновления, когда наше тело и разум готовятся к новому дню.

Важно помнить о фазах сна. Мы переживаем несколько циклов в ночь, включая фазы REM (быстрого глазного движения) и глубокого сна. Глубокая фаза - это своего рода "ремонтный цех" для нашего организма.

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

Так что, давайте заботиться о своем сне! Регулярные и качественные ночные отдыхи помогают нам быть более энергичными, концентрированными и креативными в течение дня.

Помните, что сон - это не роскошь, а неотъемлемая часть заботы о себе. Позвольте своему телу и разуму погрузиться в мир сновидений, чтобы проснуться обновленными и готовыми к новым вершинам!

Препроцессоры

Отказались от использования препроцессора Less на курсе HTML2. Ранее студентам предоставлялся выбор между препроцессорами SASS и Less.

Причин отказа было несколько:
- Поддержка препроцессора охватывала множество аспектов: стартовую сборку, материалы, демонстрации, скринкасты. Внесение изменений для одного препроцессора затрагивало другой. Это требовало вдвое больше времени, чем работа с одним препроцессором.
- Отличия в препроцессорах: несмотря на схожесть препроцессоров, существовали нюансы в их применении. Например, выражение 1 / -1 в гридах вело себя по-разному в каждом препроцессоре, что требовало учета при разработке программы.
- Рыночные требования: чаще всего предпочтение отдается SASS. Игнорирование такого частого выбора было невозможным. Тем не менее я считаю, что освоив один препроцессор, второй уже не представляет проблемы. Следует добавить, что некоторые крупные компании успешно используют Less.
- Отслеживание обновлений: CSS развивается на высоких темпах, и необходимо следить за тем, успевают ли препроцессоры за этим развитием. Для меня до сих пор остается загадкой, как была решена проблема с CSS-нестингом в препроцессоре. В любом случае, приходится уделять время отслеживанию обновлений, чтобы понимать, в каком направлении движется препроцессор, и соответствует ли он нашим потребностям.
- Продолжительность поддержки и активность сообщества: рассмотрены данные о продолжительности поддержки каждого препроцессора, а также активность и ответственность сообщества разработчиков на форумах и в социальных сетях. Например, по какому препроцессору чаще всего задают вопросы на различных форумах и какие чаще всего получают ответы с правильным решением.

Бэклоги

В комментариях упомянул про раздутые бэклоги. Бэклоги - это такое хранилище задач, которые должны быть выполнены в будущем. Обычно бэклоги переполнены из-за нехватки ресурсов. В компании работает сотрудник, который выполняет 10 задач в неделю, а новых задач в неделю появляется 20 штук. Так и возникают бэклоги. В каждой компании проблема переполненности решается либо уже готовыми подходами, либо придумывают все сами с нуля.

Я поделюсь, как моя команда работает с бэклогом. Бэклог для нас — это святыня, которую нужно холить и лелеять. Бэклог нужно постоянно поддерживать и держать в чистоте.

Как конкретно мы работаем с бэклогом:
- Все задачи изначально содержатся в бэклоге.
- Каждую неделю бэклог полностью отсматривается с нуля.
- Все задачи имеют приоритет: важная, неважная, делать как можно быстрее.
- У каждой задачи есть теги: раздел, тип материала и другие, по которым в дальнейшем можно сортировать список задач.
- В бэклоге чистота: нет задач, которые никогда не будут делаться.

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

Тут ещё можно добавить, что правильного подхода к работе - нет. Если только подходящий вашей команде. Даже в HTML Academy у каждой команды свой подход.

Синий свет, излучаемый мониторами

Однажды декабрьским холодным вечером, когда уже было давно темно, я чувствовал дикую усталость и утомление. Глаза болели от вечного смотрения в экраны. Пошел к доктору. Он ничего хорошего мне не сказал. Доктор сказал много всякого, что теперь нельзя и можно делать, но этот список был настолько бесконечным, что не знал, за что взяться. По итогу, все хорошо.

Одним из многочисленных способов уменьшения утомления стала покупка очков. Специальных очков! Эти очки имеют фильтр синего цвета. При носке очков всё начинает желтить. Тогда-то я и познакомился с синим спектром, который так активно излучают наши дисплеи.

Вот несколько аспектов влияния синего света на глаза:
- Утомление глаз: Длительное излучение синого света может привести к утомлению глаз, особенно при длительной работе за компьютером или использовании мобильных устройств.
- Бессонница: Экспозиция к синему свету вечером может подавлять выработку мелатонина, гормона, который регулирует сон. Это может затруднить засыпание и влиять на качество сна.
- Синдром сухого глаза: Долгосрочное использование устройств с экранами может вызывать синдром сухого глаза из-за уменьшения частоты моргания и увеличения испарения слез.
- Риск повреждения сетчатки: Некоторые исследования предполагают, что долгосрочное воздействие синего света может повысить риск развития дегенерации сетчатки.

Интересная статья на эту тему: https://habr.com/ru/companies/ua-hosting/articles/481740/

Только первый пункт, носка специальных очков, хорошо повлияло на усталость моих глаз. Мне стало гораздо лучше. Может конечно плацебо =)

Другим способом уменьшения влияния синего света стало настройка монитора. Хороший монитор имеет функцию "Low Blue Light", которая регулирует интенсивность синего цвета.

Это конечно не единственное, что я сделал, чтобы уменьшить усталость глаз, но об этом расскажу в следующих постах. Берегите здоровье!

Создал короткую памятку-шпаргалку про URL. Эти знания URI схемы дают способность точно определять и взаимодействовать с ресурсами, что полезно при разработке веб-сайтов, работе с API, улучшении SEO.

https://gist.github.com/nikolai-shabalin/33044ad95bfb60fee55235fadf1172ec

Ещё один сценарий использования :has()

если вы пропустили, то :has() позволяет выбирать элементы содержащие что-то нужное. Например, a:has(img) выбирает все `<a>` у которых внутри есть` <img>`

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

Раньше, мы бы руками вешали класс-модификатор .article--wide и молили бэкендеров добавлять этот класс, а теперь можно обойтись современным CSS5.

.grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

Посмотреть пример можно на кодпене - https://codepen.io/expa/pen/dyadBvB

Этого не могло не случиться.

Все мы постоянно создаем аккордеоны, но не используем нативный details/summary, потому что все элементы открываются, не давая возможности открывать только один элемент. Однако такое поведение скоро добавят.

HTML5 добавляет атрибут name к элементу <details>.

Content attributes:
  Global attributes
  name — Name of group of mutually-exclusive details elements
  open — Whether the details are visible

При использовании этого атрибута несколько элементов <details> с одинаковыми именами образуют группу. Одновременно может быть открыто не более одного элемента в группе.

Пример:

<details name="name">
  <summary>Как меня зовут?</summary>
  <p>Коля</p>
</details>
<details name="name">
  <summary>Какая у меня фамилия?</summary>
  <p>Шабалин</p>
</details>

Теперь, если открыт первый <details>, при открытии второго первый закроется.

Новая возможность позволит разработчикам интерфейсов перейти на нативный details/summary, что сделает пользовательский опыт более последовательным и в целом более качественным в ряде областей:
- Сочетания клавиш и работа с фокусом;
- Поддержка вспомогательных технологий через ARIA;
- Интеграция с функциями браузера, такими как поиск на странице.

CSS-маски
29 ноября CSS-маскам уже не потребуются префиксы -webkit, так как 120 Chrome будет полностью поддерживать спецификацию.

Теперь в портянке с префиксами

.element::after {
  background-color: currentColor;
  content: "";
  
  -webkit-mask-image: url("../images/arrow.svg");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("../images/arrow.svg");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}

можно откинуть префиксы

.element::after {
  background-color: currentColor;
  content: "";

  mask-image: url("../images/arrow.svg");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}

Моё разочарование в софте
Прекрасная статья 2018 года, которая пока актуальна. Автор делится тем, что разработчики уже совсем ничего не понимают в своём же коде. Вся кодовая база растёт как на дрожжах. Всё невыносимо медленно. 60 FPS в вебе - это элитарность, а не норма.

В общем, предлагаю почитать статью "Моё разочарование в софте".

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

Но есть один парень, который стабилен - HTML. С 2019 года его объем вырос всего на 4 кб =)

closeWatcher

Очень интересное новое API, которое позволяет закрыть что-то, открытое в данный момент, с помощью клавиши Esc или жеста/кнопки «Назад» на Android.

Сейчас у <dialog> и popover="" есть одна важная черта - они имеют один механизм закрытия. Это происходит очень легко и непринужденно, так как механизм закрытия встроен в их функциональность. Но механика закрытия нужна также элементам, таким как бургерное меню, выплывающее сбоку меню, лайтбокс, контекстное меню, выпадающий календарь из инпута, полноэкранный режим или сложная фильтрация. Такой механизм закрытия решили объединить под одним API - closeWatcher.

1. Создаем объект отслеживания

const watcher = new CloseWatcher(); 

2. Слушаем событие закрытия. Срабатывает тогда, когда пользователь решает закрыть модальное окно, например, с помощью Esc или жеста/кнопки «Назад».

watcher.addEventListener("close", () => {
  document.querySelector(".modal").classList.remove("open");
});

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

watcher.addEventListener("cancel", () => { 
  console.log("CloseWatcher cancel event");
});

Подробнее можно почитать в предложении CloseWatcher API.

@media (scripting: none)

Скоро нам не понадобится хак с no-js, так как в Media Queries Level 5, есть медиавыражение scripting, у которого есть три значения:
- enabled: Указывает на то, что браузер поддерживает создание сценариев страницы, и что создание сценариев в текущем документе разрешено на все время существования документа.
- initial-only: Указывает на то, что браузер поддерживает создание сценариев на данной странице, и что создание сценариев в текущем документе разрешено при первоначальной загрузке страницы, но не поддерживается после этого. Примерами могут служить печатные страницы или сетевые прокси-серверы с предварительным рендерингом, которые рендерят страницу на сервере и отправляют почти статическую версию страницы на сервер
- none: Указывает на то, что браузер не будет выполнять сценарии для данного документа; либо он не поддерживает язык сценариев, либо его поддержка не активна для текущего документа.

Использование

@media (scripting: none) {
  .info {
    display: block
  }
}

Если работа скриптов отключена в браузере, то появится блок <span class="info">Включите уже ваш JavaScript. Да не слежу я за вами.</span>

Learn Performance

К моему вчерашнему посту "Моё разочарование в софте". Мы можем согласиться, что всё пухнет, деградирует, стагнирует и никуда не движется, но надо же с этим что-то делать? За нас никто не сделает.

Предлагаю вам посмотреть курс для начинающих на web.dev "Обучение производительности" - https://web.dev/learn/performance

Медиавыражения для видео
Если вы использовали media для изображений

<picture>
  <source srcset="" width="" height="" media="(min-width: 768px)">
  <img src="" width="" height="" alt="">
</picture>

то теперь медиавыражения, по спецификации, работают для <video>

<video controls>
  <source src="foo-large.webm" media="(min-width: 768)">
  <source src="foo.webm">
</video>

Это может понадобиться, чтобы сменить ориентацию видео с портретной на ландшафтную.

Улучшенный синтаксис вложенности (расслабленная вложенность)

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

Одним из ограничений была невозможность использования селекторов в стиле вложенных элементов, например:

/* ранее это было нерабочим */
.card {
  h1 {
    
  }
}

Напоминаю, что парсер CSS в браузере ожидает только CSS-свойства внутри селектора, как, например:

.card {
  background-color: #ffffff;
}

Как только он обнаруживает что-то отличное от этого, возникает исключение, и парсер переходит к следующей строке, например:

h1 {
  calor: #ffffff;
  background-color: #000000;
}

Парсер видит неизвестное свойство calor, пропускает его и устанавливает черный фон для <h1>. Парсер не "ломается" и старается показать всё, что он понял в CSS-правиле.

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

Дополнительную информацию можно найти в статье о расслабленной вложенности в CSS.

Текст - штука сложная и прихотливая. Жирный текст, например, привлекает внимание, даже если находится в середине текста (сам ты жирный). Насыщенность букв позволяет выделять важное в тексте.
Считается, что если в тексте более 1000 знаков, то его нужно разбавлять всевозможными конструкциями: цитирование, информационный блок, списки, изображения, подчёркивание.
Отличная статья на эту тему - https://www.nngroup.com/articles/formatting-long-form-content/

PS: Если вами вначале было прочитано "сам ты жирный", а потом вы действительно начали читать текст, то это работает :)

Интерактивный гайд по гридам от Джоша Камю

https://www.joshwcomeau.com/css/interactive-guide-to-grid/