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

Astro 4.0

Astro - это веб-фреймворк, предназначенный для контент-ориентированных веб-сайтов, предлагающий новые API, ускоренную сборку и обновленную среду разработки. В релизе появилась панель инструментов Astro Dev Toolbar для локальной разработки в браузере, предоставляющая инструменты для проверки, аудита и взаимодействия со сторонними приложениями, такими как Sentry и Storyblok. Кроме того, Astro 4.0 предлагает маршрутизацию интернационализации (i18n), инкрементное кэширование контента для повышения производительности сборки, новые API переходов между видами для интерактивного опыта, переработанный журнал регистрации для более чистого интерфейса, а также обновленный шаблон документации под названием Starlight. Обновление прошло без проблем для большинства кодовых баз, и пользователи могут изучить Astro 4.0 на npm или с помощью команды npm create astro@latest.

https://astro.build/blog/astro-4/

Интересное исследование Яндекса на тему инклюзивности пользователей мобильный версий браузера: https://inclusion.yandex.ru/settingsresearch

- 27% пользователей используют тёмную тему
- 35% меняют размер шрифта
- 6% используют функцию озвучивания того, что находится на экране

Как дела у Firefox?

Узнайте сами из статьи: https://www.brycewray.com/posts/2023/11/firefox-brink/

Поддержи Лису и установи Firefox - https://www.mozilla.org/en-US/firefox/new/

ally

Адвент календарь по доступности: https://kittygiraudel.com/2020/12/01/a11y-advent-calendar/, не самый свежий, но и не ставший от этого хуже.
Займи декабрь полезным =)

Кто мне может рассказать почему верстальщики не использующие OOCSS, бутстрапы и прочее, всё равно сокращают именование button до btn?