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

Да, в 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;

light-dark()
Функция цвета CSS light-dark() - это экспериментальная технология, которая позволяет разработчикам устанавливать два цвета для свойства в зависимости от того, какую цветовую схему предпочитает пользователь - светлую или темную.

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}

Пользователи могут указывать свои предпочтения через настройки операционной системы или браузера. Чтобы включить поддержку этой функции, для :root должно быть установлено значение color-scheme "light dark". Функция возвращает первый цвет, если предпочтение задано как светлый, и второй цвет, если задано как темный. Кроме того, свойство color-scheme может быть использовано для переопределения пользовательской цветовой схемы для определенных разделов документа, хотя это обычно не рекомендуется.

А в ваших проектах есть тёмная тема?

Поддержка крайне слабая (0.37%): https://caniuse.com/?search=light-dark()

Ещё вчера я открывал JS2, а уже сегодня закрываю JS3

Уход за пределы кода: 7 лучших практик дизайна для фронтенд-разработчиков

Хорошая статья от Марсиан. Фронтендеры - тоже дизайнеры.

Фронтенд-инженеры играют решающую роль в обеспечении хорошего UX и дизайна в проекте. Хотя они являются первыми пользователями приложения, они также обладают ценными техническими знаниями для оценки проблем реализации. Сотрудничество с дизайнерами необходимо, но фронтенд-инженеры должны активно участвовать в обсуждении дизайна, учитывать технические ограничения и предлагать эффективные решения. Использование системы проектирования повышает согласованность и ремонтопригодность проектов, способствуя эффективному общению между инженерами и дизайнерами. Фронтенд-инженеры могут внести свой вклад, проверяя пользовательские сценарии, рассматривая состояния интерфейса, подчеркивая иерархию и группировку, обеспечивая заметный контраст и перепроверяя согласованность в процессе реализации. Доверие к компетенции друг друга и бдительное наблюдение за продуктом - залог успешного результата.

Статья: https://evilmartians.com/chronicles/care-beyond-code-7-best-design-practices-for-frontend-developers