Дырявый софт
Как бы мы не хотели обезопасить своё присутствие в интернете, сделать это практически невозможно. Недавно обнаружилось, что 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/

Шутка-минутка

тренажёры-по-лесу.жпг

речь про тренажёры в академии по препроцессору less

Должен ли AVIF стать доминирующим форматом изображений в Интернете?

Автор статьи исследует производительность относительно нового формата изображений AVIF по сравнению с JPEG и WebP. Используя изображения Unsplash Awards 2022, анализируется точность и размер файлов при различных настройках качества. AVIF неизменно превосходит JPEG и WebP по точности при настройках качества 60-70%, а WebP начинает превосходить AVIF по коэффициенту сжатия чуть более чем на 50 %. Однако при более высоких настройках качества повышение точности AVIF сопровождается заметным увеличением размера файла, что приводит к сложному компромиссу.

https://tsev.dev/posts/2023-11-10-should-avif-be-the-dominant-image-format/

Переполнение в интерфейсах
Все мы знаем, что данные никогда не будут прогнозируемыми. Сегодня это короткое слово "Контакты", а уже завтра "Impressumspflicht", что может полностью развалить UI немецкой версии сайта.

Есть несколько вариантов, чтобы учесть переполнение: overflow, flex, о которых подробно рассказано в статье "Oh No, Overflow!"
Автор рассматривает CSS-свойство overflow, которое управляет поведением содержимого, когда оно выходит за пределы поля. Упоминаются такие опции, как visible, hidden, scroll и auto, и особое внимание уделяется практической работе с переполнением. Автор приводит примеры потенциальных проблем с переполнением, вызванных изображениями, длинными словами, трансформациями и макетами flex. Также рассматриваются методы отладки и проблемы, связанные с переполнением, подчеркиваются особенности свойства overflow и приводится конкретная проблема с всплывающими подсказками в фиксированном меню боковой панели.

Для этого вам не нужен JavaScript

Интересная статья напоминающая, что нативные веб-технологии достаточно мощны, чтобы заменять их Джаваскриптом. Напоминает о замечательном подходе "Progressive Enhancement".

Статья - https://www.htmhell.dev/adventcalendar/2023/2/

Так странно, но сегодня веду стартовую лекцию на курсе JS2. Пожелайте мне удачи :3

PowerToys

Сегодня вышла свежая версия моей любимой программы PowerToys 0.76.0.

В этой версии:
- освежили интерфейс редактора диспетчера клавиатуры;
- освежили интерфейс "PowerToys Run". Если знаете Spotlight на macOS, то это тоже самое, только на Windows;
- увеличили количество показываемых миниатюр в проводнике;
- также обновили версии важных зависимостей.

Программа по сути является набором полезных утилит. Я пользуюсь постоянно:
- "Найти мышку" — Просто шевелишь мышкой, начинает подсвечиваться курсор. В macOS курсор увеличивается.
- "Color picker" — Win + Shift + C.
- "FancyZones" — настраиваешь зоны в которых могут находиться программы, а после перетаскиваешь окна в зоны. Очень полезная функция для ультрашироких монторов, а также для разных видов деятельность. Для программирования одни зоны, для записи подкастов другой набор зон.
- "Peek" или "Preview" — Ctrl + Space покажет превью практически любого типа файла.
- "Text Extractor" — моя самая любимая функция, Win + Shift + T, выделяете любой кусок текст на картинке и он попадает сразу в буфер, даже если текст под наклоном. Работает не всегда хорошо, особенно если в тексте используется латиница и кириллица одновременно.

Полезных функций гораздо больше. Можете ознакомиться сами.

Интересная, лично для меня, новость – "Biome победил в конкурсе Prettier challenge".

Biome. Форматер. Линтер и многое другое за доли секунд

так о себе пишет Biome

Две недели назад создатель Prettier назначил награду в размере 10 000 долларов за форматировщик кода на базе Rust, который сможет пройти более 95 % тестов Prettier.
С одной стороны это круто, что появился настраиваемый конкурент, с другой стороны он идёт по пути всех линтеров, которые занимались, и линтингом и форматингом кода, а в итоге все линтеры отказываются от форматирования кода, так как поддержка такой кодовой базы слишком сложна.

Из плохого лично для меня, это поддержка HTML и CSS. Её там просто на просто нет. Ну что ж. Живём в мире JavaScript. Таков путь.

Новость - https://biomejs.dev/blog/biome-wins-prettier-challenge/

Notepad++ v8.6: 20-летний юбилей

Есть такой легковесный редактор кода как "Notepad++". Я конечно первой версией не пользовался, но удивительно, что ему уже 20 лет.

Тем временем:
- sublime text 15 лет
- vs code 8 лет
- webstorm 13 лет

Chrome DevTools Tips

В DevTools в режиме девайса(левый нижний угол) можно сделать скриншот всей страницы или скриншот видимой части.