Моё разочарование в софте
Прекрасная статья 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 часов за неделю и ну и ладно. Вы думаете, что-то изменилось? Практически ничего.

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

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

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

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

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

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

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

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

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

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

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

Вчера
Вчера узнал, что для Петербурга построили уникальный трамвай "Достоевский", который ходит по 6 маршруту. Буду на следующей неделе ловить.
Трамвай построен в ретро стиле, но все материалы современные. Внутри есть интерактивное "окно". Что это значит я пока решил не гуглить, а лучше сам попробую

Сегодня
А сегодня у студентов в HTML Academy стартует 30 поток для курса HTML2, из-за которого я забыл что такое сон =)

В этом потоке студенты получат кучу новинок.
Самая важная - новая сборка: быстрая, умная, свежая.
Начнём для <source> добавлять размеры, чтобы следовать Core Web Vitals.
Спрайты используем в новом современном формате stack, чтобы удобнее работать из стилей.
На курсе теперь не будет Less, это поможет поглубже знать Sass.
А также попробуем новый формат "открытые занятия" вместо ретроспектив.

А уже сколько фиксов прилетело в курс...ммммм.

Занимательная статья.

В статье автор размышляет о текущем состоянии CSS в 2023 году, подчёркивая, как современные возможности CSS сделали стилизацию проще и эффективнее. Обсуждаются такие приемы, как использование псевдокласса :is() для повышения читабельности кода, использование логических свойств для настройки режима записи, а также альтернативные варианты, например margin-trim, для управления интервалами. Также затрагиваются такие темы, как сохранение пропорций с помощью нового свойства aspect-ratio, упрощение эффектов наведения с помощью`:has()` и более эффективное управление цветовой палитрой с помощью переменных CSS. В целом автор подчёркивает, что эти возможности способствуют более рациональному и устойчивому подходу к написанию CSS.

https://www.smashingmagazine.com/2023/11/few-ways-css-easier-write-2023/

Поддержка HTTP/3 варьируется от 19% до 50+% веб-серверов и сетей по всему миру
Точные цифры зависят от источника и методологии измерения

Интересная статья, в которой рассматривается значение протокола передачи (HTTP) и его последней версии HTTP/3. Рассказана история необходимость создания HTTP/3 из-за проблем с протоколом управления транспортом (TCP) и представляется протокол QUIC в качестве его замены. QUIC обеспечивает повышенную безопасность, конфиденциальность и улучшенную производительность по сравнению с TCP, что делает его важнейшим достижением в области интернет-протоколов.

https://blog.apnic.net/2023/09/25/why-http-3-is-eating-the-world/

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

WebP 0 day - уязвимость нулевого дня, которая может сделать возможным запись за пределами памяти через специально созданную HTML-страницу.

Уязвимость кроется в поддержке "сжатия без потерь" в WebP, иногда известном как VP8L. Формат изображения без потерь может сохранять и восстанавливать пиксели со 100-процентной точностью, что означает, что изображение будет отображаться с идеальной точностью. Для достижения этой цели WebP использует алгоритм, называемый кодированием Хаффмана.
Хотя кодирование Хаффмана концептуально основано на древовидной структуре данных, современные реализации были оптимизированы для использования таблиц. В частности, уязвимые версии используют выделение памяти на основе заранее рассчитанных размеров буферов из фиксированной таблицы, а затем строят таблицы Хаффмана непосредственно в этом выделении.
Новая версия выполняет "первый проход", который вычисляет общий размер, необходимый для выходной таблицы, но не записывает таблицу в буфер. Если общий размер больше, чем предварительно вычисленный размер буфера, то выделяется больший размер.

Уязвимость уже залатана. Просто обновите ваши браузеры и не отключайте автообновление.

https://blog.isosceles.com/the-webp-0day/

CSS-свойство, которое вы не используете
`hanging-punctuation: first last;`в CSS используется для управления висячей пунктуацией в тексте. Висячая пунктуация — это часть знаков препинания, которая может выступать за границы блока текста. Это может быть полезно для улучшения внешнего вида текста, особенно при использовании выравнивания по ширине (justify).

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

Пример использования:

p {
  hanging-punctuation: first;
}

В этом примере hanging-punctuation: first; указывает, что только первый знак препинания в каждом блоке текста должен выступать за границы блока. Возможные значения включают none (по умолчанию), first, last, и allow-end. Значение allow-end разрешает висячую пунктуацию в конце блока текста, если он выравнивается по ширине.

Свойство является наследуемым, поэтому в проекте можно сделать

html {
  hanging-punctuation: first last;
}

https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/