Для этого вам не нужен 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?

В спецификацию предложили добавить новую единицу измерения: au — астрономическая единица, представляющая собой расстояние от Солнца до Земли.

Как вы понимаете предложение сразу же закрыли. Веб конечно большой, но не безграничный

https://github.com/w3c/csswg-drafts/issues/9678

sizes="auto"

Статья: https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height/

В статье рассматриваются сложности и нюансы создания отзывчивых изображений, в частности о добавлении функции автоматического изменения размеров для лениво загружаемых изображений в браузере Chrome.
Главный вывод: при использовании sizes=auto для лениво загружаемых изображений loading="lazy" очень важно указывать атрибуты width и height для элементов <img>, согласно спецификации HTML. Невыполнение этого требования может привести к тому, что изображение будет отображаться с размерами по умолчанию 300x150 пикселей. В тексте дается практическое руководство по решению этой проблемы, подчеркивается важность установки атрибутов width и height в соответствии с размерами самого большого ресурса в наборе srcset.
Кроме того, есть потенциальные проблемы, связанные с добавлением ширины и высоты в HTML, и предлагается решение на основе CSS для сохранения гибкости размеров изображений.

В деталях узнайте как работает LCP

Статья: https://www.debugbear.com/blog/lcp-subparts

Для достижения оптимального показателя LCP, особенно для изображений, предлагается поддерживать задержку загрузки ресурсов и задержку рендеринга на низком уровне, причем Google рекомендует, чтобы эти два компонента вместе составляли не более 20 % от общего показателя LCP. Оставшиеся 40 % отводятся на TTFB и время загрузки ресурсов LCP.

Неизвестно полезный CSS

Статья: https://habr.com/ru/companies/ruvds/articles/775986/

CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства.

Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию!

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