Прекрасная статья про 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/

Каскад
В Академии есть отличнейший курс "Анатомия каскада", в котором раскрывается алгоритм каскадирования. Курс отличный! Хорош он тем, что взяли спецификацию и человеческим языком, с примерами и тестами, рассказали как на самом деле работает каскад. Из курса-то сразу становится понятно, что специфичность это не единственный шаг создания итогового значения CSS-свойства.

Я временами обращаюсь к этому курсу и вспоминаю, что ему не хватает недостающей части - каскадные слои, которые добавились относительно недавно. А моя заметка про то, что я скоро сам поучаствую в дополнении этого курса. Для этого придётся погрузиться на месяц в https://www.w3.org/TR/css-cascade-5/, так как тема не простая.

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

Ten Weird HTML Hacks That Shaped the Web - любопытный урок истории, в котором рассматриваются старые хаки для таблиц, CSS и различные причудливые стратегии кодирования, которые помогали веб-разработчикам делать вещи красивыми до того, как в нашем распоряжении появились современные инструменты.

https://tedium.co/2023/11/24/weird-html-hacks-history/

Психология скорости: A Guide to Perceived Performance Summary

Однажды я занимался перформансом важной на проекте страницы и я задался вопросом "А на сколько быстрее, по сравнению с нынешней, должна стать страница". Гугл мне подсказал, что воспринимаемым значением будет на 20-25%.

Есть статья, которая шире отвечает на мой вопрос - https://calibreapp.com/blog/perceived-performance

В тексте рассматривается проблема сведения человеческого опыта к единому числовому показателю, особенно в контексте воспринимаемой производительности веб-сайтов и приложений. Воспринимаемая производительность, на которую влияют выбор дизайна и психологические факторы, субъективна и зависит от различных внешних факторов. Узнайте как люди воспринимают время и скорость, ссылаются на такие принципы, как закон Вебера-Фехнера. В нём даются практические советы по улучшению воспринимаемой производительности, подчеркивается важность информирования о состоянии дел, поддержания активности пользователей во время загрузки, избегания резких движений страницы и предотвращения интенсивной обработки.

Как сделать бургерное меню без JS
С помощью нового popover API.

<button class="burger" popovertarget="menu">burger</button>

<div popover role="menu" id="menu">
  <nav>
    <ul>
      <li>
        <a href="#">Главная</a>
      </li>
      <li>
        <a href="#">Каталог</a>
      </li>
    </ul>
  </nav>
</div>

Плюсы
Работает всё стандартное взаимодействие:
- фокусировка на кнопке
- первое нажатие Spacebar открывает popover, второе нажатие закрывает
- первое нажатие Enter открывает popover, второе нажатие закрывает
- после фокусировки на кнопке следующий Tab переходит в popover, а не визуально следующий элемент
- Esc закрывает popover
- Кнопка Назад закрывает popover
- Клик вне popover закрывает popover
- Работают переходы(transition) и анимации, поэтому сделать плавное появление навигации сбоку очень просто

Поддержка на данный момент не полная - https://caniuse.com/?search=popover%20api

Эффект полого текста

Да, в CSS можно сделать текст как на превью, то есть полым.

<h1>Это большой текст</h1>

h1 {
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #191414;
}

- text-fill-color: указывает цвет текста. Можно указать transparent
- text-stroke-width: указывает толщину обводки
- text-stroke-color: указывает цвет обводки, также можно transparent но уже не понятно зачем.

Для любого цветового значения можно указать currentColor, а вот это уже совсем удобно.

Живой пример - https://codepen.io/expa/pen/bGzmapX

Предотвращение "отскока" прокрутки с помощью CSS

:root {
  overscroll-behavior: none;
}

С помощью overscroll-behavior можно сделать так, чтобы прокрутка не уходила за пределы самой крайней границы сайта.
Отскок полезно убрать, когда у вас есть position: sticky элементы на границах сайта. Даже сбоку. Например, боковое меню.

Пример с боковым меню - https://codepen.io/michellebarker/pen/vYbrpbX
Статья - https://css-irl.info/preventing-overscroll-bounce-with-css/

Плохие новости
Скоро будем записывать прощальный выпуск подкаста «Про код». Вот такая вот история на 29 выпусков получилась.

Но, надо двигаться дальше. Уже есть идея для будущего подкаста. Поддержите огонёчками если нравится формат подкаста =)
А я может быть в финальном выпуске расскажу, что я там придумал.

PS: 28 выпуск ещё делается

Суббота наступила, и пора поговорить о чем-то, кроме фронтенда.

Скажите, у вас есть какое-то увлечение или хобби? 🤔 Мне честно говоря, пока не удалось найти свою страсть. Вроде бы фронтенд - моя стихия, но ведь это же и моя основная работа. Или может быть такое бывает? 🤷‍♂️

Поделитесь своими хобби в комментариях! Может быть, ваши увлечения вдохновят меня на что-то новенькое.

oklch()

Автор статьи высказывается мнение о необходимости замены традиционных функций цвета, таких как hsl(), на oklch() в CSS для разработки цветовых палитр и систем. Приводится две основные причины для такой замены: во-первых, новые устройства могут отображать цвета за пределами цветового пространства sRGB, а oklch() позволяет использовать более широкое цветовое пространство P3. Во-вторых, oklch() сохраняет постоянную светлоту при изменении угла оттенка, решая проблему, когда цвета hsl() изменяют воспринимаемую светлоту.

https://www.stefanjudis.com/today-i-learned/oklch-perceived-lightness/