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. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства.

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

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

Вопросы на собеседованиях для фронтендеров

Добрый день. У меня появилась идея.

Уверен, что некоторые из вас уже ходили на собеседования и уже собрали пул вопросов, которые задают на собеседованиях.
Хочу начать собирать такие вопрос, с реальных интервью, и давать на них подробные глубокие ответы, которые помогли бы другим начинающим ребятам.

У меня есть возможность валидировать ответы у реальных работодателей. Кажется это win-win. Присылайте вопросы с собеседований в тред или мне в личку, а я со следующей недели начну на них отвечать.

Оно ещё живо

Знаменитый html5-boilerplate обновился до версии 9.0.0.

Вот список изменений:
- удаление определенных плиточных изображений
- включение Prettier для форматирования кода
- отказ от Modernizr
- отказ от Normalize.css
- внедрение процесса сборки WebPack для развертывания проекта
- прощание с Internet Explorer
- удаление apache-server-configs/. htaccess
- замена Parcel на Webpack
- добавление SVG Favicon
- отказ от Google Analytics
- исключение humans. txt

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

Accessibility tree

Отличная статья, https://blog.pope.tech/2023/11/27/how-to-use-chromes-accessibility-tree/, чтобы начать погружение инспектировании доступности в DevTools.

Например, из панели Name сразу становится понятно откуда берётся описание интерактивного элемента, а главное иерархия разных атрибутов(см.картинку)

Посмотрите каким был 2023 год для CSS

Гуглы рассказали как они хорошенько поработали над CSS - https://developer.chrome.com/blog/css-wrapped-2023 и это чистая правда. Замечательно поработали.

Тут тебе и :has(), и container queries, и @scope, и нестинг, и subgrid, и text-wrap и куча всего остального.

30 лет HTML

В 1993 году, а именно 3 декабря, появиля документ об HTML.

Тогда было "модно" писать все теги прописными <TITLE>, <P>, а марджины делались с помощью <BR><BR><BR>