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

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 в режиме девайса(левый нижний угол) можно сделать скриншот всей страницы или скриншот видимой части.

Google.Developers
Гуглы обновили страницу для разработчиков - https://developer.chrome.com/
Теперь стало гораздо удобнее ориентироваться. Также изменился дизайн в лучшую сторону.

Как я узнал об этом обновлении? Так они удалили все фиды. Теперь все мои подписочки просто не работают, отдавая 404 ¯\_(ツ)_/¯

Я заменил npm, Yarn и nvm на pnpm.
С таким заголовком прочитал я сегодня статью.

pnpm — это менеджер пакетов для JavaScript-приложений, который используется в среде Node.js. Он предназначен для управления зависимостями вашего проекта, то есть библиотеками и модулями, которые ваше приложение использует.

Основное отличие pnpm от других менеджеров пакетов, таких как npm или Yarn, заключается в том, что pnpm использует схему хранения зависимостей, называемую "глобальной файловой системой". Вместо того чтобы каждый пакет иметь свою собственную копию зависимости, как это делают npm и Yarn, pnpm использует символические ссылки и общие директории для хранения зависимостей.

Это позволяет экономить место на диске, так как одна и та же версия пакета может использоваться для нескольких проектов, и обновления происходят централизованно.

Ну что ж пора и мне попробовать это чудо. Позже попробую не забыть и поделиться впечатлениями.

Статья: https://pawelgrzybek.com/i-replaced-npm-yarn-and-nvm-with-pnpm/

Обновите ваши Хромы

Вышла 120 версия Google Chrome.

Коротко об изменения:
- Добавлен API CloseWatcher. Демо;
- <details> теперь может работать в режиме аккордеона;
- упрощён синтаксис вложенности(nesting);
- добавили новое событие "enterpictureinpicture", которое позволяет отследить событие открытия picture-in-picture;