Коля Шабалин и великий аттрактор кода

Кастомные свойства расцветают всё лучше и лучше Скоро возможность использования кастомных свойств в <dialog> для ::backdrop заработает везде. Раньше по спецификации ::backdrop удалялся из цепочки наследования, теперь спецификацию поправили, а за спецификацией начинают подтягиваться браузеры.

Ваш софт не очень Помните нытьё про то, что весь софт дырявый. Это касается абсолютно всех компаний. Например, если у вас старый AMD процессор, то вы могли не увидеть миниатюр изображений. А вот в 122 Firefox уже увидите - https://www.mozilla.org/en-US/firefox/122.0a1/releasenotes/#note-789894

NaN Узнайте о работе с null, undefined и 0 значениями в JavaScript, в частности в контексте функции isNaN(). isNaN() - это глобальная функция, используемая для определения того, оценивается ли значение как NaN (Not A Number), что обычно происходит в JavaScript в результате невозможных математических операций или передачи в функцию значений неправильного типа. В статье подчеркивается, что isNaN() пытается преобразовать значение в число перед его оценкой. Такое поведение может привести к неожиданным результатам при проверке некоторых нечисловых значений, таких как null, пустые строки "" и undefined. Для решения этой проблемы в тексте представлена более надежная функция Number.isNaN(), которая не пытается преобразовать значение в число. Также рассматривается использование функций isNaN() и Number.isNaN() для фильтрации данных, при этом подчеркивается, что эти функции только проверяют, не является ли значение NaN, а не подтверждают, является ли оно числом. Чтобы убедиться, что фильтруются только числа, в тексте предлагается проверять тип каждого значения с помощью typeof. Однако в тексте признается, что NaN считается типом числа, поэтому для более полного решения необходимы дополнительные проверки с помощью функции isNaN(). В общем, "NaN or not NaN, that is the question". Надо бы разобраться прочитав статью https://css-irl.info/nan-or-not-a-number/

30 лет HTML В 1993 году, а именно 3 декабря, появиля документ об HTML. Тогда было "модно" писать все теги прописными <TITLE>, <P>, а марджины делались с помощью <BR><BR><BR>

Посмотрите каким был 2023 год для CSS Гуглы рассказали как они хорошенько поработали над CSS - https://developer.chrome.com/blog/css-wrapped-2023 и это чистая правда. Замечательно поработали. Тут тебе и :has(), и container queries, и @scope, и нестинг, и subgrid, и text-wrap и куча всего остального.

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

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

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

Неизвестно полезный CSS Статья: https://habr.com/ru/companies/ruvds/articles/775986/

CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства. Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию!

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

В деталях узнайте как работает LCP Статья: https://www.debugbear.com/blog/lcp-subparts Для достижения оптимального показателя LCP, особенно для изображений, предлагается поддерживать задержку загрузки ресурсов и задержку рендеринга на низком уровне, причем Google рекомендует, чтобы эти два компонента вместе составляли не более 20 % от общего показателя LCP. Оставшиеся 40 % отводятся на TTFB и время загрузки ресурсов LCP.

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 для сохранения гибкости размеров изображений.

В спецификацию предложили добавить новую единицу измерения: au — астрономическая единица, представляющая собой расстояние от Солнца до Земли. Как вы понимаете предложение сразу же закрыли. Веб конечно большой, но не безграничный https://github.com/w3c/csswg-drafts/issues/9678

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

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

Как дела у Firefox? Узнайте сами из статьи: https://www.brycewray.com/posts/2023/11/firefox-brink/ Поддержи Лису и установи Firefox - https://www.mozilla.org/en-US/firefox/new/

Интересное исследование Яндекса на тему инклюзивности пользователей мобильный версий браузера: https://inclusion.yandex.ru/settingsresearch - 27% пользователей используют тёмную тему - 35% меняют размер шрифта - 6% используют функцию озвучивания того, что находится на экране

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/

Уход за пределы кода: 7 лучших практик дизайна для фронтенд-разработчиков Хорошая статья от Марсиан. Фронтендеры - тоже дизайнеры.

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

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

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

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()