Бэклоги

В комментариях упомянул про раздутые бэклоги. Бэклоги - это такое хранилище задач, которые должны быть выполнены в будущем. Обычно бэклоги переполнены из-за нехватки ресурсов. В компании работает сотрудник, который выполняет 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/

Спецификация CSS Scrollbars Styling Module Level 1 добавляет возможность стилизовать полосы прокрутки, указывая их цвет и толщину.

Спецификация добавляет два свойства:
- scrollbar-color: позволяет изменять цвет полосы прокрутки
- scrollbar-width: позволяет делать узкие полосы прокрутки или даже полностью из скрывать

Напомню, что если вы кастомизируете полосы прокрутки, то не забывайте учесть, что они могут использоваться в разных темах - https://www.amitmerchant.com/darkmode-aware-scrollbars-using-css/

О важности данных, анализа и статистики при формировании программ обучения в HTML Academy
Разделимость мнений и составление программы обучения — тема, требующая детального разъяснения. В HTML Academy придерживаются принципа: "Авторы не должны вносить своего субъективного мнения в формирование учебных программ". В процессе создания или обновления программы авторы фокусируются на сборе данных, их анализе, усреднении значений и использовании статистики.

В прошлом, программа сильно зависела от субъективного мнения определенного человека, что приводило к однозначному влиянию на все группы студентов. Например, если автор считал, что "использование точек в конце альтов — важно", все студенты вынуждены были следовать этому требованию. Это неплохое правило и оно никому не навредило, но оно было плохо обосновано. В новом подходе уделяется внимание обоснованию каждого требования, предотвращая такие субъективные влияния.

Вспоминается случай, когда в программе были введены пользовательские свойства без четкого обоснования их использования. Студенты просто добавляли цвета в :root, но отсутствовал адекватный образец обучения. Новая версия программы ввела обоснование для таких пользовательских свойств: HTML1 — динамические значения, например, для отображения количества звёзд в отелях, HTML2 — темизация. Таким образом, учебный материал теперь привязан к реальным требованиям рынка.

В последние 3-4 года мы отошли от идеи, что мнение автора должно преобладать, и теперь оно занимает второстепенное положение. Мнение автора, конечно, имеет значение, поскольку автор несет ответственность за программу, но в новом подходе обоснование требований стало более весомым. Теперь легко ответить на вопрос "Почему программа выглядит именно так?" благодаря углубленному анализу данных и статистике.

Прекрасная статья про CSS Nesting - https://ishadeed.com/article/css-nesting/

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

Не стесняемся жмакнуть правой клавишей в google chrome и выбрать "перевести на русский", а то так и не будете читать статьи никогда =)

Функция clamp() в CSS предоставляет удобный способ определения значения, которое находится между минимальным и максимальным пределами. Это особенно полезно при работе с размерами элементов, шрифтами и другими свойствами, где необходимо установить значение в пределах определенного диапазона. Синтаксис функции clamp() выглядит следующим образом:

clamp(min, preferred, max);

- min - минимальное значение.
- preferred - предпочтительное значение.
- max - максимальное значение.

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

Пример использования clamp() для установки ширины блока:

.container {
  width: clamp(200px, 50%, 800px);
}

В этом примере ширина .container будет автоматически выбрана в пределах от 200px до 800px, но предпочтение отдается 50%. Если доступно много места, блок будет иметь ширину 50% от родительского контейнера. Если места ограничено, ширина будет уменьшена до 200px.

Еще один пример использования clamp() для установки размера шрифта:

body {
  font-size: clamp(16px, 4vw, 24px);
}

В этом примере размер шрифта будет автоматически выбран в пределах от 16px до 24px, но с предпочтением 4vw. Это означает, что размер шрифта будет автоматически адаптироваться к размеру окна просмотра, но не будет меньше 16px и не больше 24px.

Использование clamp() позволяет более гибко управлять размерами и масштабированием элементов на веб-странице в зависимости от различных условий.

Work-Life Balance
Тут лучше бы книгу какую-то почитать, а не меня слушать, но вот к чему я пришёл в этой теме.

Ещё лет 5 назад я вообще не контролировал, сколько я работаю. Ну, получилось 80 часов за неделю и ну и ладно. Вы думаете, что-то изменилось? Практически ничего.

Сейчас я просто отдаю себе отчёт, что если работа сожрала у меня кучу моего личного времени, значит, скоро личная жизнь отберёт время у работы. Я назвал это "синусоидальный баланс между работой и личной жизнью". На этой неделе побольше времени уделил работе, на следующей побольше времени уделю себе и семье.

Всем хороших выходных. Не забывайте отдыхать.

Мониторы и зрение: Исследование влияния статического расположения на зрительное восприятие
Современный образ жизни часто связан с продолжительным временем, проводимым перед мониторами компьютеров. Многие из нас проводят часы, сосредоточив взгляд на экране, работая, изучая и развлекаясь. Однако мало кто задумывается о влиянии такого поведения на зрение.

Что такое статическое расположение и как оно влияет на глаза:
Статическое расположение монитора подразумевает фиксацию экрана на одном уровне, не изменяя его положение по отношению к глазам пользователя. Такая практика может привести к множеству проблем для зрительной системы. Главной из них является моментальная нагрузка на органы зрения, так как они вынуждены сосредотачиваться на фиксированной точке в течение продолжительного времени.

Механизм адаптации глаз:
Глаза - удивительные органы, обладающие способностью адаптироваться к различным условиям. Одним из ключевых аспектов этой адаптации является способность глаза менять фокусировку и приспосабливаться к изменениям глубины восприятия. В нормальных условиях, при естественном взгляде, глаза периодически перемещают фокус с близких объектов на дальние и наоборот, что снижает усталость и напряжение глаз.

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

Советы по улучшению условий для зрения:
Делайте перерывы: Каждый час уделяйте несколько минут перерыву, чтобы глаза могли отдохнуть от постоянного фиксирования на мониторе.
Упражнения для глаз: Проводите простые упражнения для глаз, включая вращение глаз в разные стороны и фокусировку на удаленных объектах.

Регулярность сна: ключ к здоровью
Продолжу тему сна. Одним из важных аспектов, влияющих на качество сна, является регулярность времени, когда вы ложитесь спасть. Ложиться в одно и тоже время каждый день может оказать значительное положительное воздействие на сон и общее самочувствие.

Биологический ритм и внутренние часы
Человеческий организм имеет встроенные биологические часы, которые регулируют циклы бодрствования и сна. Эти внутренние часы отвечают за выделение мелатонина, гормона, который регулирует сон и является своего рода "гормоном сна". Если вы ложитесь в одно и то же время, то это помогает установить и поддерживать стабильность внутренних часов, что, в свою очередь, способствует более глубокому и качественному сну.

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

Так, что спокойной ночи 🥱